edit torrents function added

web/src/components/TorrentCard/index.jsx

@@ -1,6 +1,11 @@
 import 'fontsource-roboto'
 import { forwardRef, memo, useState } from 'react'
-import { UnfoldMore as UnfoldMoreIcon, Close as CloseIcon, Delete as DeleteIcon } from '@material-ui/icons'
+import {
+  UnfoldMore as UnfoldMoreIcon,
+  Edit as EditIcon,
+  Close as CloseIcon,
+  Delete as DeleteIcon,
+} from '@material-ui/icons'
 import { getPeerString, humanizeSize, shortenText } from 'utils/Utils'
 import { torrentsHost } from 'utils/Hosts'
 import { NoImageIcon } from 'icons'
@@ -11,6 +16,7 @@ import { Button, DialogActions, DialogTitle, useMediaQuery, useTheme } from '@ma
 import axios from 'axios'
 import ptt from 'parse-torrent-title'
 import { useTranslation } from 'react-i18next'
+import AddDialog from 'components/Add/AddDialog'
 
 import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription, TorrentCardPoster } from './style'
 
@@ -36,6 +42,10 @@ const Torrent = ({ torrent }) => {
 
   const parsedTitle = (title || name) && ptt.parse(title || name).title
 
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+  const handleClickOpenEditDialog = () => setIsEditDialogOpen(true)
+  const handleCloseEditDialog = () => setIsEditDialogOpen(false)
+
   return (
     <>
       <TorrentCard>
@@ -49,6 +59,11 @@ const Torrent = ({ torrent }) => {
             <span>{t('Details')}</span>
           </StyledButton>
 
+          <StyledButton onClick={handleClickOpenEditDialog}>
+            <EditIcon />
+            <span>{t('Edit')}</span>
+          </StyledButton>
+
           <StyledButton onClick={() => dropTorrent(torrent)}>
             <CloseIcon />
             <span>{t('Drop')}</span>
@@ -118,6 +133,8 @@ const Torrent = ({ torrent }) => {
           </Button>
         </DialogActions>
       </Dialog>
+
+      {isEditDialogOpen && <AddDialog hash={hash} title={title} poster={poster} handleClose={handleCloseEditDialog} />}
     </>
   )
 }

web/src/components/TorrentCard/style.js

@@ -66,7 +66,11 @@ export const TorrentCardButtons = styled.div`
   gap: 10px;
 
   @media (max-width: 1260px), (max-height: 500px) {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @media (max-width: 340px) {
+    gap: 5px;
   }
 `
 export const TorrentCardDescription = styled.div`
@@ -165,10 +169,13 @@ export const StyledButton = styled.button`
   text-transform: uppercase;
   background: #268757;
   color: #fff;
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
   letter-spacing: 0.009em;
-  padding: 10px 20px;
+  padding: 0 12px;
+  svg {
+    width: 20px;
+  }
 
   :hover {
     background: #2a7e54;
@@ -179,28 +186,21 @@ export const StyledButton = styled.button`
   }
 
   @media (max-width: 1260px), (max-height: 500px) {
-    padding: 5px 10px;
-    font-size: 0.8rem;
-
-    svg {
-      width: 20px;
-    }
-  }
-
-  @media (max-width: 770px) {
-    font-size: 0.7rem;
-
-    svg {
-      width: 15px;
-    }
-  }
-
-  @media (max-width: 420px) {
     padding: 7px 10px;
     justify-content: center;
+    font-size: 0.8rem;
 
     svg {
       display: none;
     }
   }
+
+  @media (max-width: 770px) {
+    font-size: 0.7rem;
+  }
+
+  @media (max-width: 420px) {
+    font-size: 0.6rem;
+    padding: 7px 5px;
+  }
 `