WiP: localized categories

FIXME

web/src/components/Add/RightSideComponent.jsx

@@ -148,11 +148,11 @@ export default function RightSideComponent({
             onChange={handleCategoryChange}
             variant='outlined'
             fullWidth
-            defaultValue='Other'
+            defaultValue='other'
           >
             {TORRENT_CATEGORIES.map(category => (
-              <MenuItem key={category.name} value={category.name}>
-                {category.name}
+              <MenuItem key={category.key} value={category.key}>
+                {t(category.name)}
               </MenuItem>
             ))}
           </Select>

web/src/components/App/Sidebar.jsx

@@ -31,11 +31,18 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading,
       <Divider />
 
       <List>
-        <FilterByCategory categoryName='All' icon={<CheckIcon />} setGlobalFilterCategory={setGlobalFilterCategory} />
+        <FilterByCategory
+          key='all'
+          categoryKey='all'
+          categoryName={t('All')}
+          icon={<CheckIcon />}
+          setGlobalFilterCategory={setGlobalFilterCategory}
+        />
         {TORRENT_CATEGORIES.map(category => (
           <FilterByCategory
-            key={category.name}
-            categoryName={category.name}
+            key={category.key}
+            categoryKey={category.key}
+            categoryName={t(category.name)}
             icon={category.icon}
             setGlobalFilterCategory={setGlobalFilterCategory}
           />

web/src/components/App/index.jsx

@@ -43,7 +43,7 @@ export default function App() {
   const [isDarkMode, currentThemeMode, updateThemeMode, muiTheme] = useMaterialUITheme()
   const [currentLang, changeLang] = useChangeLanguage()
   const [isOffline, setIsOffline] = useState(false)
-  const [globalCategoryFilter, setGlobalFilterCategory] = useState('All')
+  const [globalCategoryFilter, setGlobalFilterCategory] = useState('all')
   const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
     retry: 1,
     refetchInterval: 1000,

web/src/components/FilterByCategory.jsx

@@ -1,18 +1,23 @@
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
+import { useTranslation } from 'react-i18next'
 
-export default function FilterByCategory({ categoryName, setGlobalFilterCategory, icon }) {
+export default function FilterByCategory({ categoryKey, categoryName, setGlobalFilterCategory, icon }) {
   const onClick = () => {
-    setGlobalFilterCategory(categoryName)
+    setGlobalFilterCategory(categoryKey)
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.log('FilterByCategory categoryKey: %s categoryName: %s', categoryKey, categoryName)
+    }
   }
+  const { t } = useTranslation()
 
   return (
     <>
-      <ListItem button key={categoryName} onClick={onClick}>
+      <ListItem button key={categoryKey} onClick={onClick}>
         <ListItemIcon>{icon}</ListItemIcon>
-
-        <ListItemText primary={categoryName} />
+        <ListItemText primary={t(categoryName)} />
       </ListItem>
     </>
   )

web/src/components/TorrentCard/index.jsx

@@ -19,6 +19,7 @@ import AddDialog from 'components/Add/AddDialog'
 import { StyledDialog } from 'style/CustomMaterialUiStyles'
 import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
 import { GETTING_INFO, IN_DB, CLOSED, PRELOAD, WORKING } from 'torrentStates'
+import { TORRENT_CATEGORIES } from 'components/categories'
 
 import {
   StatusIndicators,
@@ -81,6 +82,9 @@ const Torrent = ({ torrent }) => {
   const fullPlaylistLink = `${playlistTorrHost()}/${encodeURIComponent(parsedTitle || 'file')}.m3u?link=${hash}&m3u`
 
   const detailedInfoDialogRef = useOnStandaloneAppOutsideClick(closeDetailedInfo)
+  // FIXME
+  const catIndex = TORRENT_CATEGORIES.findIndex(e => e.key === category)
+  const catArray = TORRENT_CATEGORIES.find(e => e.key === category)
 
   return (
     <>
@@ -119,7 +123,9 @@ const Torrent = ({ torrent }) => {
           <div className='description-title-wrapper'>
             <div className='description-section-name'>
               {t('Name')}
-              <div className='description-category-wrapper'>{category}</div>
+              <div className='description-category-wrapper'>
+                {catIndex >= 0 ? t(catArray.name) : ''/* {category} */}
+              </div>
             </div>
             <div className='description-torrent-title'>{parsedTitle}</div>
           </div>

web/src/components/TorrentList/index.jsx

@@ -1,11 +1,13 @@
 import TorrentCard from 'components/TorrentCard'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { TorrentListWrapper, CenteredGrid } from 'components/App/style'
+// import { useTranslation } from 'react-i18next'
 
 import NoServerConnection from './NoServerConnection'
 import AddFirstTorrent from './AddFirstTorrent'
 
 export default function TorrentList({ isOffline, isLoading, sortABC, torrents, sortCategory }) {
+  // const { t } = useTranslation()
   if (isLoading || isOffline || !torrents.length) {
     return (
       <CenteredGrid>
@@ -20,7 +22,7 @@ export default function TorrentList({ isOffline, isLoading, sortABC, torrents, s
     )
   }
 
-  const filteredTorrents = torrents.filter(torrent => sortCategory === 'All' || torrent.category === sortCategory)
+  const filteredTorrents = torrents.filter(torrent => sortCategory === 'all' || torrent.category === sortCategory)
 
   return sortABC ? (
     <TorrentListWrapper>

web/src/components/categories.jsx

@@ -2,12 +2,10 @@ import MovieCreationIcon from '@material-ui/icons/MovieCreation'
 import LiveTvIcon from '@material-ui/icons/LiveTv'
 import MusicNoteIcon from '@material-ui/icons/MusicNote'
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
-// import HelpIcon from '@material-ui/icons/Help'
 
 export const TORRENT_CATEGORIES = [
-  { name: 'Movies', icon: <MovieCreationIcon /> },
-  { name: 'Series', icon: <LiveTvIcon /> },
-  { name: 'Music', icon: <MusicNoteIcon /> },
-  { name: 'Other', icon: <MoreHorizIcon /> },
-  // { name: 'None', icon: <HelpIcon /> }, // TODO: unset category with this option
+  { key: 'movies', name: 'Movies', icon: <MovieCreationIcon /> },
+  { key: 'series', name: 'Series', icon: <LiveTvIcon /> },
+  { key: 'music', name: 'Music', icon: <MusicNoteIcon /> },
+  { key: 'other', name: 'Other', icon: <MoreHorizIcon /> },
 ]