diff --git a/web/src/components/Add/RightSideComponent.jsx b/web/src/components/Add/RightSideComponent.jsx index 94accea..4f403f1 100644 --- a/web/src/components/Add/RightSideComponent.jsx +++ b/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 ( @@ -151,8 +150,8 @@ export default function RightSideComponent({ fullWidth defaultValue='Unknown' > - {torrentCategories.map(category => ( - {category} + {TORRENT_CATEGORIES.map(category => ( + {category.name} ))} diff --git a/web/src/components/App/Sidebar.jsx b/web/src/components/App/Sidebar.jsx index 9158381..7550b1f 100644 --- a/web/src/components/App/Sidebar.jsx +++ b/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 } + + } setGlobalFilterCategory={setGlobalFilterCategory} /> + {TORRENT_CATEGORIES.map(category => ( + + ))} + + + + diff --git a/web/src/components/App/index.jsx b/web/src/components/App/index.jsx index 75ec1ca..c7658ae 100644 --- a/web/src/components/App/index.jsx +++ b/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} /> - + { + setGlobalFilterCategory(categoryName) + } + + return ( + <> + + {icon} + + + + + ) +} diff --git a/web/src/components/TorrentList/index.jsx b/web/src/components/TorrentList/index.jsx index 47fb714..e0362dc 100644 --- a/web/src/components/TorrentList/index.jsx +++ b/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 ( @@ -20,9 +20,11 @@ export default function TorrentList({ isOffline, isLoading, sortABC, torrents }) ) } + const filteredTorrents = torrents.filter(torrent => sortCategory === 'All' || torrent.category === sortCategory) + return sortABC ? ( - {torrents + {filteredTorrents .sort((a, b) => a.title > b.title) .map(torrent => ( @@ -30,7 +32,7 @@ export default function TorrentList({ isOffline, isLoading, sortABC, torrents }) ) : ( - {torrents.map(torrent => ( + {filteredTorrents.map(torrent => ( ))} diff --git a/web/src/components/categories.jsx b/web/src/components/categories.jsx new file mode 100644 index 0000000..7fbcac5 --- /dev/null +++ b/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: }, + { name: 'Series', icon: }, + { name: 'Music', icon: }, + { name: 'Other', icon: }, + { name: 'Unknown', icon: }, +]