Adds Sidebar icons to filter

web/src/components/Add/RightSideComponent.jsx

@@ -12,6 +12,7 @@ import {
   useTheme,
 } from '@material-ui/core'
 import { HighlightOff as HighlightOffIcon } from '@material-ui/icons'
+import { TORRENT_CATEGORIES } from 'components/categories'
 
 import {
   ClearPosterButton,
@@ -69,8 +70,6 @@ export default function RightSideComponent({
     setIsUserInteractedWithPoster(true)
   }
 
-  const torrentCategories = ['Movies', 'Series', 'Music', 'Other', 'Unknown']
-
   return (
     <RightSide>
       <RightSideContainer isHidden={!isTorrentSourceCorrect || (isHashAlreadyExists && !isEditMode)}>
@@ -151,8 +150,8 @@ export default function RightSideComponent({
             fullWidth
             defaultValue='Unknown'
           >
-            {torrentCategories.map(category => (
-              <MenuItem value={category}>{category}</MenuItem>
+            {TORRENT_CATEGORIES.map(category => (
+              <MenuItem value={category.name}>{category.name}</MenuItem>
             ))}
           </Select>
         </FormControl>

web/src/components/App/Sidebar.jsx

@@ -11,10 +11,13 @@ import RemoveAll from 'components/RemoveAll'
 import AboutDialog from 'components/About'
 import CloseServer from 'components/CloseServer'
 import { memo } from 'react'
+import CheckIcon from '@material-ui/icons/Check'
+import { TORRENT_CATEGORIES } from 'components/categories'
+import FilterByCategory from 'components/FilterByCategory'
 
 import { AppSidebarStyle } from './style'
 
-const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }) => {
+const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading, setGlobalFilterCategory }) => {
   const { t } = useTranslation()
 
   return (
@@ -27,6 +30,20 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }
 
       <Divider />
 
+      <List>
+        <FilterByCategory categoryName='All' icon={<CheckIcon />} setGlobalFilterCategory={setGlobalFilterCategory} />
+        {TORRENT_CATEGORIES.map(category => (
+          <FilterByCategory
+            key={category.name}
+            categoryName={category.name}
+            icon={category.icon}
+            setGlobalFilterCategory={setGlobalFilterCategory}
+          />
+        ))}
+      </List>
+
+      <Divider />
+
       <List>
         <SettingsDialog isOffline={isOffline} isLoading={isLoading} />
 

web/src/components/App/index.jsx

@@ -43,6 +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 { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
     retry: 1,
     refetchInterval: 1000,
@@ -126,9 +127,16 @@ export default function App() {
                   isLoading={isLoading}
                   isDrawerOpen={isDrawerOpen}
                   setIsDonationDialogOpen={setIsDonationDialogOpen}
+                  setGlobalFilterCategory={setGlobalFilterCategory}
                 />
 
-                <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} sortABC={sortABC} />
+                <TorrentList
+                  isOffline={isOffline}
+                  torrents={torrents}
+                  isLoading={isLoading}
+                  sortABC={sortABC}
+                  sortCategory={globalCategoryFilter}
+                />
 
                 <PWAFooter
                   isOffline={isOffline}

web/src/components/FilterByCategory.jsx

@@ -0,0 +1,19 @@
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+
+export default function FilterByCategory({ categoryName, setGlobalFilterCategory, icon }) {
+  const onClick = () => {
+    setGlobalFilterCategory(categoryName)
+  }
+
+  return (
+    <>
+      <ListItem button key={categoryName} onClick={onClick}>
+        <ListItemIcon>{icon}</ListItemIcon>
+
+        <ListItemText primary={categoryName} />
+      </ListItem>
+    </>
+  )
+}

web/src/components/TorrentList/index.jsx

@@ -5,7 +5,7 @@ import { TorrentListWrapper, CenteredGrid } from 'components/App/style'
 import NoServerConnection from './NoServerConnection'
 import AddFirstTorrent from './AddFirstTorrent'
 
-export default function TorrentList({ isOffline, isLoading, sortABC, torrents }) {
+export default function TorrentList({ isOffline, isLoading, sortABC, torrents, sortCategory }) {
   if (isLoading || isOffline || !torrents.length) {
     return (
       <CenteredGrid>
@@ -20,9 +20,11 @@ export default function TorrentList({ isOffline, isLoading, sortABC, torrents })
     )
   }
 
+  const filteredTorrents = torrents.filter(torrent => sortCategory === 'All' || torrent.category === sortCategory)
+
   return sortABC ? (
     <TorrentListWrapper>
-      {torrents
+      {filteredTorrents
         .sort((a, b) => a.title > b.title)
         .map(torrent => (
           <TorrentCard key={torrent.hash} torrent={torrent} />
@@ -30,7 +32,7 @@ export default function TorrentList({ isOffline, isLoading, sortABC, torrents })
     </TorrentListWrapper>
   ) : (
     <TorrentListWrapper>
-      {torrents.map(torrent => (
+      {filteredTorrents.map(torrent => (
         <TorrentCard key={torrent.hash} torrent={torrent} />
       ))}
     </TorrentListWrapper>

web/src/components/categories.jsx

@@ -0,0 +1,13 @@
+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: 'Unknown', icon: <HelpIcon /> },
+]