edit torrents function added

web/src/components/Add/AddDialog.jsx

@@ -15,11 +15,11 @@ import { ButtonWrapper, Content, Header } from './style'
 import RightSideComponent from './RightSideComponent'
 import LeftSideComponent from './LeftSideComponent'
 
-export default function AddDialog({ handleClose }) {
+export default function AddDialog({ handleClose, hash: originalHash, title: originalTitle, poster: originalPoster }) {
   const { t } = useTranslation()
-  const [torrentSource, setTorrentSource] = useState('')
-  const [title, setTitle] = useState('')
-  const [posterUrl, setPosterUrl] = useState('')
+  const [torrentSource, setTorrentSource] = useState(originalHash || '')
+  const [title, setTitle] = useState(originalTitle || '')
+  const [posterUrl, setPosterUrl] = useState(originalPoster || '')
   const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false)
   const [isTorrentSourceCorrect, setIsTorrentSourceCorrect] = useState(false)
   const [posterList, setPosterList] = useState()
@@ -29,9 +29,22 @@ export default function AddDialog({ handleClose }) {
   const [posterSearchLanguage, setPosterSearchLanguage] = useState(currentLang === 'ru' ? 'ru' : 'en')
   const [isLoadingButton, setIsLoadingButton] = useState(false)
   const [skipDebounce, setSkipDebounce] = useState(false)
+  const [isEditMode, setIsEditMode] = useState(false)
 
   const fullScreen = useMediaQuery('@media (max-width:930px)')
 
+  useEffect(() => {
+    if (originalHash) {
+      setIsEditMode(true)
+
+      checkImageURL(posterUrl).then(correctImage => {
+        correctImage ? setIsPosterUrlCorrect(true) : removePoster()
+      })
+    }
+    // This is needed only on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const posterSearch = useMemo(
     () =>
       (movieName, language, { shouldRefreshMainPoster = false } = {}) => {
@@ -118,7 +131,9 @@ export default function AddDialog({ handleClose }) {
   const handleSave = () => {
     setIsLoadingButton(true)
 
-    if (selectedFile) {
+    if (isEditMode) {
+      axios.post(torrentsHost(), { action: 'set', hash: originalHash, title, poster: posterUrl }).finally(handleClose)
+    } else if (selectedFile) {
       // file save
       const data = new FormData()
       data.append('save', 'true')
@@ -143,16 +158,18 @@ export default function AddDialog({ handleClose }) {
       fullWidth
       maxWidth='md'
     >
-      <Header>{t('AddNewTorrent')}</Header>
+      <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
 
-      <Content>
-        <LeftSideComponent
-          setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-          setSelectedFile={setSelectedFile}
-          torrentSource={torrentSource}
-          setTorrentSource={setTorrentSource}
-          selectedFile={selectedFile}
-        />
+      <Content isEditMode={isEditMode}>
+        {!isEditMode && (
+          <LeftSideComponent
+            setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
+            setSelectedFile={setSelectedFile}
+            torrentSource={torrentSource}
+            setTorrentSource={setTorrentSource}
+            selectedFile={selectedFile}
+          />
+        )}
 
         <RightSideComponent
           setTitle={setTitle}
@@ -186,7 +203,7 @@ export default function AddDialog({ handleClose }) {
           onClick={handleSave}
           color='primary'
         >
-          {isLoadingButton ? <CircularProgress style={{ color: 'white' }} size={20} /> : t('Add')}
+          {isLoadingButton ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
         </Button>
       </ButtonWrapper>
     </Dialog>

web/src/components/Add/RightSideComponent.jsx

@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import { v4 as uuidv4 } from 'uuid'
 import { NoImageIcon } from 'icons'
 import { TextField } from '@material-ui/core'
 
@@ -71,7 +70,7 @@ export default function RightSideComponent({
               ?.filter(url => url !== posterUrl)
               .slice(0, 12)
               .map(url => (
-                <PosterSuggestionsItem onClick={() => userChangesPosterUrl(url)} key={uuidv4()}>
+                <PosterSuggestionsItem onClick={() => userChangesPosterUrl(url)} key={url}>
                   <img src={url} alt='poster' />
                 </PosterSuggestionsItem>
               ))}

web/src/components/Add/style.js

@@ -13,16 +13,23 @@ export const Header = styled.div`
 `
 
 export const Content = styled.div`
-  background: linear-gradient(145deg, #e4f6ed, #b5dec9);
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  overflow: auto;
+  ${({ isEditMode }) => css`
+    background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(${isEditMode ? '1' : '2'}, 1fr);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
 
-  @media (max-width: 930px) {
-    grid-template-columns: 1fr;
-  }
+    @media (max-width: 540px) {
+      ${'' /* Just for bug fixing on small screens */}
+      overflow: scroll;
+    }
+
+    @media (max-width: 930px) {
+      grid-template-columns: 1fr;
+    }
+  `}
 `
 
 export const RightSide = styled.div`