prevent clearing poster when in edit mode

web/src/components/Add/AddDialog.jsx

@@ -9,8 +9,6 @@ import useChangeLanguage from 'utils/useChangeLanguage'
 import { useMediaQuery } from '@material-ui/core'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import usePreviousState from 'utils/usePreviousState'
-import parseTorrent from 'parse-torrent'
-import ptt from 'parse-torrent-title'
 
 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'
@@ -25,6 +23,7 @@ export default function AddDialog({
   poster: originalPoster,
 }) {
   const { t } = useTranslation()
+  const isEditMode = !!originalHash
   const [torrentSource, setTorrentSource] = useState(originalHash || '')
   const [title, setTitle] = useState(originalTitle || '')
   const [originalTorrentTitle, setOriginalTorrentTitle] = useState('')
@@ -33,13 +32,12 @@ export default function AddDialog({
   const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false)
   const [isTorrentSourceCorrect, setIsTorrentSourceCorrect] = useState(false)
   const [posterList, setPosterList] = useState()
-  const [isUserInteractedWithPoster, setIsUserInteractedWithPoster] = useState(false)
+  const [isUserInteractedWithPoster, setIsUserInteractedWithPoster] = useState(isEditMode)
   const [currentLang] = useChangeLanguage()
   const [selectedFile, setSelectedFile] = useState()
   const [posterSearchLanguage, setPosterSearchLanguage] = useState(currentLang === 'ru' ? 'ru' : 'en')
   const [isLoadingButton, setIsLoadingButton] = useState(false)
   const [skipDebounce, setSkipDebounce] = useState(false)
-  const [isEditMode, setIsEditMode] = useState(false)
   const [isCustomTitleEnabled, setIsCustomTitleEnabled] = useState(false)
 
   const fullScreen = useMediaQuery('@media (max-width:930px)')
@@ -49,27 +47,38 @@ export default function AddDialog({
       if (!originalName) return
 
       setSkipDebounce(true)
+      setTitle('')
+      setIsCustomTitleEnabled(false)
       setOriginalTorrentTitle(originalName)
       setParsedTitle(parsedTitle)
     })
   }, [selectedFile, torrentSource])
 
+  useEffect(() => {
+    if (!selectedFile && !torrentSource) {
+      setTitle('')
+      setOriginalTorrentTitle('')
+      setIsCustomTitleEnabled(false)
+      setPosterList()
+      removePoster()
+      setIsUserInteractedWithPoster(false)
+    }
+  }, [selectedFile, torrentSource])
+
   const removePoster = () => {
     setIsPosterUrlCorrect(false)
     setPosterUrl('')
   }
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   if (originalHash) {
+    if (originalHash) {
-  //     setIsEditMode(true)
+      checkImageURL(posterUrl).then(correctImage => {
-
+        correctImage ? setIsPosterUrlCorrect(true) : removePoster()
-  //     checkImageURL(posterUrl).then(correctImage => {
+      })
-  //       correctImage ? setIsPosterUrlCorrect(true) : removePoster()
+    }
-  //     })
+    // This is needed only on mount. Do not remove line below
-  //   }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-  //   // This is needed only on mount
+  }, [])
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [])
 
   const posterSearch = useMemo(
     () =>
@@ -130,30 +139,25 @@ export default function AddDialog({
     if (skipDebounce) {
       posterSearch(title || parsedTitle, posterSearchLanguage)
       setSkipDebounce(false)
-    } else if (title === '') {
+    } else if (!title) {
       if (parsedTitle) {
         posterSearch(parsedTitle, posterSearchLanguage)
       } else {
-        removePoster()
+        !isUserInteractedWithPoster && removePoster()
       }
     } else {
       delayedPosterSearch(title, posterSearchLanguage)
     }
-    // title === '' && !parsedTitle
+  }, [
-    //   ? removePoster()
+    title,
-    //   : title === '' && parsedTitle
+    parsedTitle,
-    //   ? posterSearch(parsedTitle, posterSearchLanguage)
+    prevTitleState,
-    //   : delayedPosterSearch(title, posterSearchLanguage)
+    delayedPosterSearch,
-  }, [title, parsedTitle, prevTitleState, delayedPosterSearch, posterSearch, posterSearchLanguage, skipDebounce])
+    posterSearch,
-
+    posterSearchLanguage,
-  useEffect(() => {
+    skipDebounce,
-    if (!selectedFile && !torrentSource) {
+    isUserInteractedWithPoster,
-      setTitle('')
+  ])
-      setPosterList()
-      removePoster()
-      setIsUserInteractedWithPoster(false)
-    }
-  }, [selectedFile, torrentSource])
 
   const handleSave = () => {
     setIsLoadingButton(true)
@@ -163,7 +167,7 @@ export default function AddDialog({
         .post(torrentsHost(), {
           action: 'set',
           hash: originalHash,
-          title: title === '' ? originalName : title,
+          title: title || originalName,
           poster: posterUrl,
         })
         .finally(handleClose)

web/src/components/Add/RightSideComponent.jsx

@@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next'
 import { NoImageIcon } from 'icons'
 import { IconButton, InputAdornment, TextField } from '@material-ui/core'
 import { CheckBox as CheckBoxIcon } from '@material-ui/icons'
-import { useState } from 'react'
 
 import {
   ClearPosterButton,
@@ -57,43 +56,56 @@ export default function RightSideComponent({
   return (
     <RightSide>
       <RightSideContainer isHidden={!isTorrentSourceCorrect}>
-        <TextField
+        {originalTorrentTitle ? (
-          value={originalTorrentTitle}
+          <>
-          margin='dense'
+            <TextField
-          // label={t('Title')}
+              value={originalTorrentTitle}
-          label='Оригинальное название торрента'
+              margin='dense'
-          type='text'
+              // label={t('Title')}
-          fullWidth
+              label='Оригинальное название торрента'
-          disabled={isCustomTitleEnabled}
+              type='text'
-          InputProps={{ readOnly: true }}
+              fullWidth
-        />
+              disabled={isCustomTitleEnabled}
-        <TextField
+              InputProps={{ readOnly: true }}
-          onChange={handleTitleChange}
+            />
-          onFocus={() => setIsCustomTitleEnabled(true)}
+            <TextField
-          onBlur={({ target: { value } }) => !value && setIsCustomTitleEnabled(false)}
+              onChange={handleTitleChange}
-          value={title}
+              onFocus={() => setIsCustomTitleEnabled(true)}
-          margin='dense'
+              onBlur={({ target: { value } }) => !value && setIsCustomTitleEnabled(false)}
-          label='Использовать свое название (не обязательно)'
+              value={title}
-          type='text'
+              margin='dense'
-          fullWidth
+              label='Использовать свое название (не обязательно)'
-          InputProps={{
+              type='text'
-            endAdornment: (
+              fullWidth
-              <InputAdornment position='end'>
+              InputProps={{
-                <IconButton
+                endAdornment: (
-                  style={{ padding: '0 0 0 7px' }}
+                  <InputAdornment position='end'>
-                  onClick={() => {
+                    <IconButton
-                    setTitle('')
+                      style={{ padding: '0 0 0 7px' }}
-                    setIsCustomTitleEnabled(!isCustomTitleEnabled)
+                      onClick={() => {
-                    updateTitleFromSource()
+                        setTitle('')
-                    setIsUserInteractedWithPoster(false)
+                        setIsCustomTitleEnabled(!isCustomTitleEnabled)
-                  }}
+                        updateTitleFromSource()
-                >
+                        setIsUserInteractedWithPoster(false)
-                  <CheckBoxIcon style={{ color: isCustomTitleEnabled ? 'green' : 'gray' }} />
+                      }}
-                </IconButton>
+                    >
-              </InputAdornment>
+                      <CheckBoxIcon style={{ color: isCustomTitleEnabled ? 'green' : 'gray' }} />
-            ),
+                    </IconButton>
-          }}
+                  </InputAdornment>
-        />
+                ),
+              }}
+            />
+          </>
+        ) : (
+          <TextField
+            onChange={handleTitleChange}
+            value={title}
+            margin='dense'
+            label='Использовать свое название (не обязательно)'
+            type='text'
+            fullWidth
+          />
+        )}
         <TextField
           onChange={handlePosterUrlChange}
           value={posterUrl}
@@ -124,7 +136,9 @@ export default function RightSideComponent({
               onClick={() => {
                 const newLanguage = posterSearchLanguage === 'en' ? 'ru' : 'en'
                 setPosterSearchLanguage(newLanguage)
-                posterSearch(isCustomTitleEnabled ? title : parsedTitle, newLanguage, { shouldRefreshMainPoster: true })
+                posterSearch(isCustomTitleEnabled ? title : originalTorrentTitle ? parsedTitle : title, newLanguage, {
+                  shouldRefreshMainPoster: true,
+                })
               }}
               showbutton={+isPosterUrlCorrect}
               color='primary'