refactor

2025-12-20 05:56:10 +05:00 · 2021-06-10 23:46:00 +03:00
parent 3391fef9b5
commit 21806f6cad
3 changed files with 235 additions and 170 deletions
--- a/web/src/components/Add/RightSideComponent.jsx
+++ b/web/src/components/Add/RightSideComponent.jsx
@@ -0,0 +1,120 @@
+import { useTranslation } from 'react-i18next'
+import { v4 as uuidv4 } from 'uuid'
+import { NoImageIcon } from 'icons'
+import { TextField } from '@material-ui/core'
+
+import {
+  ClearPosterButton,
+  PosterLanguageSwitch,
+  RightSide,
+  Poster,
+  PosterSuggestions,
+  PosterSuggestionsItem,
+  PosterWrapper,
+  RightSideContainer,
+} from './style'
+import { checkImageURL } from './helpers'
+
+export default function RightSideComponent({
+  setTitle,
+  setPosterUrl,
+  setIsPosterUrlCorrect,
+  setIsUserInteractedWithPoster,
+  setPosterList,
+  isTorrentSourceCorrect,
+  title,
+  posterUrl,
+  isPosterUrlCorrect,
+  posterList,
+  currentLang,
+  posterSearchLanguage,
+  setPosterSearchLanguage,
+  posterSearch,
+  removePoster,
+  torrentSource,
+}) {
+  const { t } = useTranslation()
+
+  const handleTitleChange = ({ target: { value } }) => setTitle(value)
+  const handlePosterUrlChange = ({ target: { value } }) => {
+    setPosterUrl(value)
+    checkImageURL(value).then(setIsPosterUrlCorrect)
+    setIsUserInteractedWithPoster(!!value)
+    setPosterList()
+  }
+  const userChangesPosterUrl = url => {
+    setPosterUrl(url)
+    checkImageURL(url).then(setIsPosterUrlCorrect)
+    setIsUserInteractedWithPoster(true)
+  }
+
+  return (
+    <RightSide>
+      <RightSideContainer isHidden={!isTorrentSourceCorrect}>
+        <TextField onChange={handleTitleChange} value={title} margin='dense' label={t('Title')} type='text' fullWidth />
+        <TextField
+          onChange={handlePosterUrlChange}
+          value={posterUrl}
+          margin='dense'
+          label={t('AddPosterLinkInput')}
+          type='url'
+          fullWidth
+        />
+
+        <PosterWrapper>
+          <Poster poster={+isPosterUrlCorrect}>
+            {isPosterUrlCorrect ? <img src={posterUrl} alt='poster' /> : <NoImageIcon />}
+          </Poster>
+
+          <PosterSuggestions>
+            {posterList
+              ?.filter(url => url !== posterUrl)
+              .slice(0, 12)
+              .map(url => (
+                <PosterSuggestionsItem onClick={() => userChangesPosterUrl(url)} key={uuidv4()}>
+                  <img src={url} alt='poster' />
+                </PosterSuggestionsItem>
+              ))}
+          </PosterSuggestions>
+
+          {currentLang !== 'en' && (
+            <PosterLanguageSwitch
+              onClick={() => {
+                const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en'
+                setPosterSearchLanguage(newLanguage)
+                posterSearch(title, newLanguage, { shouldRefreshMainPoster: true })
+              }}
+              showbutton={+isPosterUrlCorrect}
+              color='primary'
+              variant='contained'
+              size='small'
+            >
+              {posterSearchLanguage === 'en' ? 'EN' : 'RU'}
+            </PosterLanguageSwitch>
+          )}
+
+          <ClearPosterButton
+            showbutton={+isPosterUrlCorrect}
+            onClick={() => {
+              removePoster()
+              setIsUserInteractedWithPoster(true)
+            }}
+            color='primary'
+            variant='contained'
+            size='small'
+          >
+            {t('Clear')}
+          </ClearPosterButton>
+        </PosterWrapper>
+      </RightSideContainer>
+
+      <RightSideContainer
+        isError={torrentSource && !isTorrentSourceCorrect}
+        notificationMessage={
+          !torrentSource ? t('AddTorrentSourceNotification') : !isTorrentSourceCorrect && t('WrongTorrentSource')
+        }
+        isHidden={isTorrentSourceCorrect}
+      />
+    </RightSide>
+  )
+}