refactor

web/src/components/Add/AddDialog.jsx

@@ -9,6 +9,9 @@ import useChangeLanguage from 'utils/useChangeLanguage'
 import { useMediaQuery } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import usePreviousState from 'utils/usePreviousState'
+import { useQuery } from 'react-query'
+import { getTorrents } from 'utils/Utils'
+import parseTorrent from 'parse-torrent'
 
 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'
@@ -31,6 +34,7 @@ export default function AddDialog({
   const [posterUrl, setPosterUrl] = useState(originalPoster || '')
   const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false)
   const [isTorrentSourceCorrect, setIsTorrentSourceCorrect] = useState(false)
+  const [isHashAlreadyExists, setIsHashAlreadyExists] = useState(false)
   const [posterList, setPosterList] = useState()
   const [isUserInteractedWithPoster, setIsUserInteractedWithPoster] = useState(isEditMode)
   const [currentLang] = useChangeLanguage()
@@ -40,6 +44,19 @@ export default function AddDialog({
   const [skipDebounce, setSkipDebounce] = useState(false)
   const [isCustomTitleEnabled, setIsCustomTitleEnabled] = useState(false)
 
+  const { data: torrents } = useQuery('torrents', getTorrents, {
+    retry: 1,
+    refetchInterval: 1000,
+  })
+
+  useEffect(() => {
+    const allHashes = torrents.map(({ hash }) => hash)
+
+    parseTorrent.remote(selectedFile || torrentSource, (err, { infoHash } = {}) => {
+      setIsHashAlreadyExists(allHashes.includes(infoHash))
+    })
+  }, [selectedFile, torrentSource, torrents])
+
   const fullScreen = useMediaQuery('@media (max-width:930px)')
 
   const updateTitleFromSource = useCallback(() => {
@@ -58,6 +75,7 @@ export default function AddDialog({
     if (!selectedFile && !torrentSource) {
       setTitle('')
       setOriginalTorrentTitle('')
+      setParsedTitle('')
       setIsCustomTitleEnabled(false)
       setPosterList()
       removePoster()
@@ -143,6 +161,7 @@ export default function AddDialog({
       if (parsedTitle) {
         posterSearch(parsedTitle, posterSearchLanguage)
       } else {
+        delayedPosterSearch.cancel()
         !isUserInteractedWithPoster && removePoster()
       }
     } else {
@@ -217,6 +236,7 @@ export default function AddDialog({
           setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
           setPosterList={setPosterList}
           isTorrentSourceCorrect={isTorrentSourceCorrect}
+          isHashAlreadyExists={isHashAlreadyExists}
           title={title}
           parsedTitle={parsedTitle}
           posterUrl={posterUrl}
@@ -231,6 +251,7 @@ export default function AddDialog({
           torrentSource={torrentSource}
           isCustomTitleEnabled={isCustomTitleEnabled}
           setIsCustomTitleEnabled={setIsCustomTitleEnabled}
+          isEditMode={isEditMode}
         />
       </Content>
 
@@ -242,7 +263,7 @@ export default function AddDialog({
         <Button
           variant='contained'
           style={{ minWidth: '110px' }}
-          disabled={!torrentSource}
+          disabled={!torrentSource || isHashAlreadyExists || !isTorrentSourceCorrect}
           onClick={handleSave}
           color='primary'
         >

web/src/components/Add/LeftSideComponent.jsx

@@ -50,8 +50,8 @@ export default function LeftSideComponent({
           onChange={handleTorrentSourceChange}
           value={torrentSource}
           margin='dense'
-          label={t('TorrentSourceLink')}
-          helperText={t('TorrentSourceOptions')}
+          label={t('AddDialog.TorrentSourceLink')}
+          helperText={t('AddDialog.TorrentSourceOptions')}
           type='text'
           fullWidth
           onFocus={() => setIsTorrentSourceActive(true)}
@@ -74,11 +74,11 @@ export default function LeftSideComponent({
       ) : (
         <LeftSideBottomSectionNoFile isDragActive={isDragActive} {...getRootProps()}>
           <input {...getInputProps()} />
-          <div>{t('AppendFile.Or')}</div>
+          <div>{t('AddDialog.AppendFile.Or')}</div>
 
           <IconWrapper>
             <AddItemIcon color='primary' />
-            <div>{t('AppendFile.ClickOrDrag')}</div>
+            <div>{t('AddDialog.AppendFile.ClickOrDrag')}</div>
           </IconWrapper>
         </LeftSideBottomSectionNoFile>
       )}

web/src/components/Add/RightSideComponent.jsx

@@ -22,6 +22,7 @@ export default function RightSideComponent({
   setIsUserInteractedWithPoster,
   setPosterList,
   isTorrentSourceCorrect,
+  isHashAlreadyExists,
   title,
   parsedTitle,
   posterUrl,
@@ -37,6 +38,7 @@ export default function RightSideComponent({
   updateTitleFromSource,
   isCustomTitleEnabled,
   setIsCustomTitleEnabled,
+  isEditMode,
 }) {
   const { t } = useTranslation()
 
@@ -55,14 +57,13 @@ export default function RightSideComponent({
 
   return (
     <RightSide>
-      <RightSideContainer isHidden={!isTorrentSourceCorrect}>
+      <RightSideContainer isHidden={!isTorrentSourceCorrect || (isHashAlreadyExists && !isEditMode)}>
         {originalTorrentTitle ? (
           <>
             <TextField
               value={originalTorrentTitle}
               margin='dense'
-              // label={t('Title')}
-              label='Оригинальное название торрента'
+              label={t('AddDialog.OriginalTorrentTitle')}
               type='text'
               fullWidth
               disabled={isCustomTitleEnabled}
@@ -74,7 +75,7 @@ export default function RightSideComponent({
               onBlur={({ target: { value } }) => !value && setIsCustomTitleEnabled(false)}
               value={title}
               margin='dense'
-              label='Использовать свое название (не обязательно)'
+              label={t('AddDialog.CustomTorrentTitle')}
               type='text'
               fullWidth
               InputProps={{
@@ -101,7 +102,7 @@ export default function RightSideComponent({
             onChange={handleTitleChange}
             value={title}
             margin='dense'
-            label='Использовать свое название (не обязательно)'
+            label={t('AddDialog.TitleBlank')}
             type='text'
             fullWidth
           />
@@ -110,7 +111,7 @@ export default function RightSideComponent({
           onChange={handlePosterUrlChange}
           value={posterUrl}
           margin='dense'
-          label={t('AddPosterLinkInput')}
+          label={t('AddDialog.AddPosterLinkInput')}
           type='url'
           fullWidth
         />
@@ -165,11 +166,15 @@ export default function RightSideComponent({
       </RightSideContainer>
 
       <RightSideContainer
-        isError={torrentSource && !isTorrentSourceCorrect}
+        isError={torrentSource && (!isTorrentSourceCorrect || isHashAlreadyExists)}
         notificationMessage={
-          !torrentSource ? t('AddTorrentSourceNotification') : !isTorrentSourceCorrect && t('WrongTorrentSource')
+          !torrentSource
+            ? t('AddDialog.AddTorrentSourceNotification')
+            : !isTorrentSourceCorrect
+            ? t('AddDialog.WrongTorrentSource')
+            : isHashAlreadyExists && t('AddDialog.HashExists')
         }
-        isHidden={isTorrentSourceCorrect}
+        isHidden={isEditMode || (isTorrentSourceCorrect && !isHashAlreadyExists)}
       />
     </RightSide>
   )

web/src/components/Add/style.js

@@ -30,6 +30,10 @@ export const Content = styled.div`
     @media (max-width: 930px) {
       grid-template-columns: 1fr;
     }
+
+    @media (max-width: 500px) {
+      align-content: start;
+    }
   `}
 `
 
@@ -66,6 +70,10 @@ export const RightSideContainer = styled.div`
     css`
       display: none;
     `};
+
+    @media (max-width: 500px) {
+      height: 170px;
+    }
   `}
 `
 export const LeftSide = styled.div`
@@ -105,6 +113,15 @@ export const LeftSideBottomSectionNoFile = styled.div`
     place-items: center;
     grid-template-rows: 40% 1fr;
   }
+
+  @media (max-width: 500px) {
+    height: 170px;
+    grid-template-rows: 1fr;
+
+    > div:first-of-type {
+      display: none;
+    }
+  }
 `
 
 export const LeftSideBottomSectionFileSelected = styled.div`
@@ -114,6 +131,10 @@ export const LeftSideBottomSectionFileSelected = styled.div`
   @media (max-width: 930px) {
     height: 400px;
   }
+
+  @media (max-width: 500px) {
+    height: 170px;
+  }
 `
 
 export const TorrentIconWrapper = styled.div`