translate Add dialog and Close

web/src/components/Add/AddDialog.jsx

@@ -7,6 +7,7 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { torrentsHost } from 'utils/Hosts'
 import axios from 'axios'
+import { useTranslation } from 'react-i18next'
 
 export default function AddDialog({ handleClose }) {
   const [link, setLink] = useState('')
@@ -17,23 +18,26 @@ export default function AddDialog({ handleClose }) {
   const inputTitle = ({ target: { value } }) => setTitle(value)
   const inputPoster = ({ target: { value } }) => setPoster(value)
 
+  // eslint-disable-next-line no-unused-vars
+  const { t } = useTranslation()
+
   const handleSave = () => {
     axios.post(torrentsHost(), { action: 'add', link, title, poster, save_to_db: true }).finally(() => handleClose())
   }
 
   return (
     <Dialog open onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
-      <DialogTitle id='form-dialog-title'>Add magnet or link to torrent file</DialogTitle>
+      <DialogTitle id='form-dialog-title'>{t('AddMagnetOrLink')}</DialogTitle>
 
       <DialogContent>
-        <TextField onChange={inputTitle} margin='dense' id='title' label='Title' type='text' fullWidth />
-        <TextField onChange={inputPoster} margin='dense' id='poster' label='Poster' type='url' fullWidth />
+        <TextField onChange={inputTitle} margin='dense' id='title' label={t('Title')} type='text' fullWidth />
+        <TextField onChange={inputPoster} margin='dense' id='poster' label={t('Poster')} type='url' fullWidth />
         <TextField
           onChange={inputMagnet}
           autoFocus
           margin='dense'
           id='magnet'
-          label='Magnet or torrent file link'
+          label={t('MagnetOrTorrentFileLink')}
           type='text'
           fullWidth
         />
@@ -41,11 +45,11 @@ export default function AddDialog({ handleClose }) {
 
       <DialogActions>
         <Button onClick={handleClose} color='primary' variant='outlined'>
-          Cancel
+          {t('Cancel')}
         </Button>
 
         <Button variant='contained' disabled={!link} onClick={handleSave} color='primary'>
-          Add
+          {t('Add')}
         </Button>
       </DialogActions>
     </Dialog>

web/src/components/DialogTorrentDetailsContent/DialogHeader.jsx

@@ -2,6 +2,7 @@ import Button from '@material-ui/core/Button'
 import { AppBar, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import { ArrowBack } from '@material-ui/icons'
+import { useTranslation } from 'react-i18next'
 
 const useStyles = makeStyles(theme => ({
   appBar: { position: 'relative' },
@@ -10,6 +11,8 @@ const useStyles = makeStyles(theme => ({
 
 export default function DialogHeader({ title, onClose, onBack }) {
   const classes = useStyles()
+  // eslint-disable-next-line no-unused-vars
+  const { t } = useTranslation()
 
   return (
     <AppBar className={classes.appBar}>
@@ -24,7 +27,7 @@ export default function DialogHeader({ title, onClose, onBack }) {
 
         {onBack && (
           <Button autoFocus color='inherit' onClick={onClose}>
-            close
+            {t('Close')}
           </Button>
         )}
       </Toolbar>

web/src/components/TorrentList.jsx

@@ -5,12 +5,15 @@ import TorrentCard from 'components/TorrentCard'
 import axios from 'axios'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { TorrentListWrapper, CenteredGrid } from 'App/style'
+import { useTranslation } from 'react-i18next'
 
 export default function TorrentList() {
   const [torrents, setTorrents] = useState([])
   const [isLoading, setIsLoading] = useState(true)
   const [isOffline, setIsOffline] = useState(true)
   const timerID = useRef(-1)
+  // eslint-disable-next-line no-unused-vars
+  const { t } = useTranslation()
 
   useEffect(() => {
     timerID.current = setInterval(() => {
@@ -39,9 +42,9 @@ export default function TorrentList() {
         {isLoading ? (
           <CircularProgress />
         ) : isOffline ? (
-          <Typography>Offline</Typography>
+          <Typography>{t('Offline')}</Typography>
         ) : (
-          !torrents.length && <Typography>No torrents added</Typography>
+          !torrents.length && <Typography>{t('NoTorrentsAdded')}</Typography>
         )}
       </CenteredGrid>
     )