diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 9799b12e..02f32324 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -20,7 +20,14 @@ "home": "Home", "queued": "{{title}} (Queued)", "game_has_no_executable": "Game has no executable selected", - "sign_in": "Sign in" + "sign_in": "Sign in", + "sort_by": "Sort by", + "latest_added": "Latest added", + "alphabetically": "Alphabetically", + "last_launched": "Last launched", + "number_of_hours": "Number of hours", + "installed_or_not": "Installed or not" + }, "header": { "search": "Search games", diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index eda98d77..c8948c3c 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -20,7 +20,13 @@ "home": "Início", "queued": "{{title}} (Na fila)", "game_has_no_executable": "Jogo não possui executável selecionado", - "sign_in": "Login" + "sign_in": "Login", + "sort_by": "Ordenar por", + "latest_added": "Adicionado mais recente", + "alphabetically": "Alfabeticamente", + "last_launched": "Último jogado", + "number_of_hours": "Qtd. de horas jogadas", + "installed_or_not": "Instalado ou não" }, "header": { "search": "Buscar jogos", diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx index c5b3f3a9..40102992 100644 --- a/src/renderer/src/components/sidebar/sidebar.tsx +++ b/src/renderer/src/components/sidebar/sidebar.tsx @@ -4,7 +4,7 @@ import { useLocation, useNavigate } from "react-router-dom"; import type { LibraryGame } from "@types"; -import { TextField } from "@renderer/components"; +import { SelectField, TextField } from "@renderer/components"; import { useDownload, useLibrary, useToast } from "@renderer/hooks"; import { routes } from "./routes"; @@ -15,6 +15,7 @@ import { buildGameDetailsPath } from "@renderer/helpers"; import SteamLogo from "@renderer/assets/steam-logo.svg?react"; import { SidebarProfile } from "./sidebar-profile"; import { sortBy } from "lodash-es"; +import { setLibrary } from "@renderer/features"; const SIDEBAR_MIN_WIDTH = 200; const SIDEBAR_INITIAL_WIDTH = 250; @@ -34,11 +35,44 @@ export function Sidebar() { initialSidebarWidth ? Number(initialSidebarWidth) : SIDEBAR_INITIAL_WIDTH ); + const [ sortParam, setSortParam ] = useState('latest_added'); + const sortParamOptions = [ + "latest_added", + "alphabetically", + "last_launched", + "number_of_hours", + "installed_or_not", + ] + + const handleSortParamChange = (e) => { + const selectedOption: string = e.target.value + setSortParam(selectedOption) + } + const location = useLocation(); const sortedLibrary = useMemo(() => { - return sortBy(library, (game) => game.title); - }, [library]); + console.log(library) + switch(sortParam){ + case 'latest_added': + return sortBy(library, (game) => game.createdAt); + break; + case 'alphabetically': + return sortBy(library, (game) => game.title); + break; + case 'last_launched': + return sortBy(library, (game) => game.lastTimePlayed); + break; + case 'number_of_hours': + return sortBy(library, (game) => game.playTimeInMilliseconds); + break; + case 'installed_or_not': + return sortBy(library, (game) => game.executablePath !== null); + break; + default: + return sortBy(library, (game) => game.title); + } + }, [library, sortParam]); const { lastPacket, progress } = useDownload(); @@ -193,6 +227,17 @@ export function Sidebar() {
{t("my_library")} + ({ + key: option, + value: option, + label: t(option), + }))} + /> +