refactor

web/src/components/Add/AddDialog.jsx

@@ -1,46 +1,23 @@
 import { useEffect, useMemo, useState } from 'react'
 import Button from '@material-ui/core/Button'
-import TextField from '@material-ui/core/TextField'
 import Dialog from '@material-ui/core/Dialog'
 import { torrentsHost, torrentUploadHost } from 'utils/Hosts'
 import axios from 'axios'
 import { useTranslation } from 'react-i18next'
-import { NoImageIcon, AddItemIcon, TorrentIcon } from 'icons'
 import debounce from 'lodash/debounce'
-import { v4 as uuidv4 } from 'uuid'
 import useChangeLanguage from 'utils/useChangeLanguage'
-import { Cancel as CancelIcon } from '@material-ui/icons'
-import { useDropzone } from 'react-dropzone'
 import { useMediaQuery } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import usePreviousState from 'utils/usePreviousState'
 
 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
-import {
+import { ButtonWrapper, Content, Header } from './style'
-  ButtonWrapper,
+import RightSideComponent from './RightSideComponent'
-  CancelIconWrapper,
+import LeftSideComponent from './LeftSideComponent'
-  ClearPosterButton,
-  PosterLanguageSwitch,
-  Content,
-  Header,
-  IconWrapper,
-  RightSide,
-  Poster,
-  PosterSuggestions,
-  PosterSuggestionsItem,
-  PosterWrapper,
-  LeftSide,
-  LeftSideBottomSectionFileSelected,
-  LeftSideBottomSectionNoFile,
-  LeftSideTopSection,
-  TorrentIconWrapper,
-  RightSideContainer,
-} from './style'
 
 export default function AddDialog({ handleClose }) {
   const { t } = useTranslation()
   const [torrentSource, setTorrentSource] = useState('')
-  const [isTorrentSourceActive, setIsTorrentSourceActive] = useState(false)
   const [title, setTitle] = useState('')
   const [posterUrl, setPosterUrl] = useState('')
   const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false)
@@ -138,26 +115,6 @@ export default function AddDialog({ handleClose }) {
     }
   }, [selectedFile, torrentSource])
 
-  const handleCapture = files => {
-    const [file] = files
-    if (!file) return
-
-    setIsUserInteractedWithPoster(false)
-    setSelectedFile(file)
-    setTorrentSource(file.name)
-  }
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: handleCapture, accept: '.torrent' })
-
-  const handleTorrentSourceChange = ({ target: { value } }) => setTorrentSource(value)
-  const handleTitleChange = ({ target: { value } }) => setTitle(value)
-  const handlePosterUrlChange = ({ target: { value } }) => {
-    setPosterUrl(value)
-    checkImageURL(value).then(setIsPosterUrlCorrect)
-    setIsUserInteractedWithPoster(!!value)
-    setPosterList()
-  }
-
   const handleSave = () => {
     setIsLoadingButton(true)
 
@@ -177,17 +134,6 @@ export default function AddDialog({ handleClose }) {
     }
   }
 
-  const clearSelectedFile = () => {
-    setSelectedFile()
-    setTorrentSource('')
-  }
-
-  const userChangesPosterUrl = url => {
-    setPosterUrl(url)
-    checkImageURL(url).then(setIsPosterUrlCorrect)
-    setIsUserInteractedWithPoster(true)
-  }
-
   return (
     <Dialog
       open
@@ -200,120 +146,32 @@ export default function AddDialog({ handleClose }) {
       <Header>{t('AddNewTorrent')}</Header>
 
       <Content>
-        <LeftSide>
+        <LeftSideComponent
-          <LeftSideTopSection active={isTorrentSourceActive}>
+          setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-            <TextField
+          setSelectedFile={setSelectedFile}
-              onChange={handleTorrentSourceChange}
+          torrentSource={torrentSource}
-              value={torrentSource}
+          setTorrentSource={setTorrentSource}
-              margin='dense'
+          selectedFile={selectedFile}
-              label={t('TorrentSourceLink')}
+        />
-              helperText={t('TorrentSourceOptions')}
-              type='text'
-              fullWidth
-              onFocus={() => setIsTorrentSourceActive(true)}
-              onBlur={() => setIsTorrentSourceActive(false)}
-              inputProps={{ autoComplete: 'off' }}
-              disabled={!!selectedFile}
-            />
-          </LeftSideTopSection>
 
-          {selectedFile ? (
+        <RightSideComponent
-            <LeftSideBottomSectionFileSelected>
+          setTitle={setTitle}
-              <TorrentIconWrapper>
+          setPosterUrl={setPosterUrl}
-                <TorrentIcon />
+          setIsPosterUrlCorrect={setIsPosterUrlCorrect}
-
+          setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-                <CancelIconWrapper onClick={clearSelectedFile}>
+          setPosterList={setPosterList}
-                  <CancelIcon />
+          isTorrentSourceCorrect={isTorrentSourceCorrect}
-                </CancelIconWrapper>
+          title={title}
-              </TorrentIconWrapper>
+          posterUrl={posterUrl}
-            </LeftSideBottomSectionFileSelected>
+          isPosterUrlCorrect={isPosterUrlCorrect}
-          ) : (
+          posterList={posterList}
-            <LeftSideBottomSectionNoFile isDragActive={isDragActive} {...getRootProps()}>
+          currentLang={currentLang}
-              <input {...getInputProps()} />
+          posterSearchLanguage={posterSearchLanguage}
-              <div>{t('AppendFile.Or')}</div>
+          setPosterSearchLanguage={setPosterSearchLanguage}
-
+          posterSearch={posterSearch}
-              <IconWrapper>
+          removePoster={removePoster}
-                <AddItemIcon color='primary' />
+          torrentSource={torrentSource}
-                <div>{t('AppendFile.ClickOrDrag')}</div>
+        />
-              </IconWrapper>
-            </LeftSideBottomSectionNoFile>
-          )}
-        </LeftSide>
-
-        <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>
       </Content>
 
       <ButtonWrapper>

web/src/components/Add/LeftSideComponent.jsx

@@ -0,0 +1,87 @@
+import { useTranslation } from 'react-i18next'
+import { useDropzone } from 'react-dropzone'
+import { AddItemIcon, TorrentIcon } from 'icons'
+import TextField from '@material-ui/core/TextField'
+import { Cancel as CancelIcon } from '@material-ui/icons'
+import { useState } from 'react'
+
+import {
+  CancelIconWrapper,
+  IconWrapper,
+  LeftSide,
+  LeftSideBottomSectionFileSelected,
+  LeftSideBottomSectionNoFile,
+  LeftSideTopSection,
+  TorrentIconWrapper,
+} from './style'
+
+export default function LeftSideComponent({
+  setIsUserInteractedWithPoster,
+  setSelectedFile,
+  torrentSource,
+  setTorrentSource,
+  selectedFile,
+}) {
+  const { t } = useTranslation()
+
+  const handleCapture = files => {
+    const [file] = files
+    if (!file) return
+
+    setIsUserInteractedWithPoster(false)
+    setSelectedFile(file)
+    setTorrentSource(file.name)
+  }
+
+  const clearSelectedFile = () => {
+    setSelectedFile()
+    setTorrentSource('')
+  }
+
+  const [isTorrentSourceActive, setIsTorrentSourceActive] = useState(false)
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: handleCapture, accept: '.torrent' })
+
+  const handleTorrentSourceChange = ({ target: { value } }) => setTorrentSource(value)
+
+  return (
+    <LeftSide>
+      <LeftSideTopSection active={isTorrentSourceActive}>
+        <TextField
+          onChange={handleTorrentSourceChange}
+          value={torrentSource}
+          margin='dense'
+          label={t('TorrentSourceLink')}
+          helperText={t('TorrentSourceOptions')}
+          type='text'
+          fullWidth
+          onFocus={() => setIsTorrentSourceActive(true)}
+          onBlur={() => setIsTorrentSourceActive(false)}
+          inputProps={{ autoComplete: 'off' }}
+          disabled={!!selectedFile}
+        />
+      </LeftSideTopSection>
+
+      {selectedFile ? (
+        <LeftSideBottomSectionFileSelected>
+          <TorrentIconWrapper>
+            <TorrentIcon />
+
+            <CancelIconWrapper onClick={clearSelectedFile}>
+              <CancelIcon />
+            </CancelIconWrapper>
+          </TorrentIconWrapper>
+        </LeftSideBottomSectionFileSelected>
+      ) : (
+        <LeftSideBottomSectionNoFile isDragActive={isDragActive} {...getRootProps()}>
+          <input {...getInputProps()} />
+          <div>{t('AppendFile.Or')}</div>
+
+          <IconWrapper>
+            <AddItemIcon color='primary' />
+            <div>{t('AppendFile.ClickOrDrag')}</div>
+          </IconWrapper>
+        </LeftSideBottomSectionNoFile>
+      )}
+    </LeftSide>
+  )
+}

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>
+  )
+}