add torrents sort icon

This commit is contained in:
nikk gitanes
2023-03-09 01:02:08 +03:00
parent 5e352252a8
commit c0f5566d41
2 changed files with 21 additions and 4 deletions

View File

@@ -7,6 +7,8 @@ import {
Brightness4 as Brightness4Icon,
Brightness5 as Brightness5Icon,
BrightnessAuto as BrightnessAutoIcon,
Sort as SortIcon,
SortByAlpha as SortByAlphaIcon,
} from '@material-ui/icons'
import { echoHost } from 'utils/Hosts'
import Div100vh from 'react-div-100vh'
@@ -47,6 +49,9 @@ export default function App() {
onError: () => setIsOffline(true),
onSuccess: () => setIsOffline(false),
})
const [sortABC, setSortABC] = useState(false)
const handleClickSortABC = () => setSortABC(true)
const handleClickSortDate = () => setSortABC(false)
useEffect(() => {
axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
@@ -76,8 +81,12 @@ export default function App() {
</Typography>
<div
style={{ justifySelf: 'end', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}
style={{ justifySelf: 'end', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px' }}
>
<HeaderToggle onClick={() => (sortABC === true ? handleClickSortDate() : handleClickSortABC())}>
{sortABC === true ? <SortByAlphaIcon /> : <SortIcon />}
</HeaderToggle>
<HeaderToggle
onClick={() => {
if (currentThemeMode === THEME_MODES.LIGHT) updateThemeMode(THEME_MODES.DARK)
@@ -115,7 +124,7 @@ export default function App() {
setIsDonationDialogOpen={setIsDonationDialogOpen}
/>
<TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
<TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} sortABC={sortABC} />
<PWAFooter
isOffline={isOffline}

View File

@@ -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, torrents }) {
export default function TorrentList({ isOffline, isLoading, sortABC, torrents }) {
if (isLoading || isOffline || !torrents.length) {
return (
<CenteredGrid>
@@ -20,7 +20,15 @@ export default function TorrentList({ isOffline, isLoading, torrents }) {
)
}
return (
return sortABC ? (
<TorrentListWrapper>
{torrents
.sort((a, b) => a.title > b.title)
.map(torrent => (
<TorrentCard key={torrent.hash} torrent={torrent} />
))}
</TorrentListWrapper>
) : (
<TorrentListWrapper>
{torrents.map(torrent => (
<TorrentCard key={torrent.hash} torrent={torrent} />