From d52c7d68390e5e23b64c9dc81c48408e9f22cc0c Mon Sep 17 00:00:00 2001 From: discollizard Date: Sat, 29 Jun 2024 00:25:52 -0300 Subject: [PATCH 1/3] basic sorting implemented --- src/locales/en/translation.json | 9 +++- src/locales/pt/translation.json | 8 ++- .../src/components/sidebar/sidebar.tsx | 51 +++++++++++++++++-- 3 files changed, 63 insertions(+), 5 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 9799b12e2..02f32324e 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 eda98d776..c8948c3c4 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 c5b3f3a91..401029923 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), + }))} + /> + Date: Sat, 29 Jun 2024 00:27:27 -0300 Subject: [PATCH 2/3] removed unused variable --- src/locales/en/translation.json | 1 - .../src/components/sidebar/sidebar.tsx | 39 +++++++++---------- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 02f32324e..acc1e9b9c 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -27,7 +27,6 @@ "last_launched": "Last launched", "number_of_hours": "Number of hours", "installed_or_not": "Installed or not" - }, "header": { "search": "Search games", diff --git a/src/renderer/src/components/sidebar/sidebar.tsx b/src/renderer/src/components/sidebar/sidebar.tsx index 401029923..eec891248 100644 --- a/src/renderer/src/components/sidebar/sidebar.tsx +++ b/src/renderer/src/components/sidebar/sidebar.tsx @@ -15,7 +15,6 @@ 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; @@ -35,41 +34,41 @@ export function Sidebar() { initialSidebarWidth ? Number(initialSidebarWidth) : SIDEBAR_INITIAL_WIDTH ); - const [ sortParam, setSortParam ] = useState('latest_added'); + const [sortParam, setSortParam] = useState("latest_added"); const sortParamOptions = [ - "latest_added", - "alphabetically", - "last_launched", - "number_of_hours", - "installed_or_not", - ] + "latest_added", + "alphabetically", + "last_launched", + "number_of_hours", + "installed_or_not", + ]; const handleSortParamChange = (e) => { - const selectedOption: string = e.target.value - setSortParam(selectedOption) - } - + const selectedOption: string = e.target.value; + setSortParam(selectedOption); + }; + const location = useLocation(); const sortedLibrary = useMemo(() => { - console.log(library) - switch(sortParam){ - case 'latest_added': + console.log(library); + switch (sortParam) { + case "latest_added": return sortBy(library, (game) => game.createdAt); break; - case 'alphabetically': + case "alphabetically": return sortBy(library, (game) => game.title); break; - case 'last_launched': + case "last_launched": return sortBy(library, (game) => game.lastTimePlayed); break; - case 'number_of_hours': + case "number_of_hours": return sortBy(library, (game) => game.playTimeInMilliseconds); break; - case 'installed_or_not': + case "installed_or_not": return sortBy(library, (game) => game.executablePath !== null); break; - default: + default: return sortBy(library, (game) => game.title); } }, [library, sortParam]); From aa7b72c56351e3f3900e9ae22481998500a82bc1 Mon Sep 17 00:00:00 2001 From: discollizard Date: Wed, 3 Jul 2024 21:10:53 -0300 Subject: [PATCH 3/3] styles fixed + translations --- src/locales/pt/translation.json | 2 +- .../select-field/select-field.css.ts | 2 +- .../components/select-field/select-field.tsx | 1 + .../src/components/sidebar/sidebar.tsx | 5 ++-- .../src/pages/settings/settings-general.tsx | 23 +++++++++++-------- 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index c8948c3c4..39aa78b33 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -22,7 +22,7 @@ "game_has_no_executable": "Jogo não possui executável selecionado", "sign_in": "Login", "sort_by": "Ordenar por", - "latest_added": "Adicionado mais recente", + "latest_added": "Adicionado recente", "alphabetically": "Alfabeticamente", "last_launched": "Último jogado", "number_of_hours": "Qtd. de horas jogadas", diff --git a/src/renderer/src/components/select-field/select-field.css.ts b/src/renderer/src/components/select-field/select-field.css.ts index 7acd4e986..371c55cda 100644 --- a/src/renderer/src/components/select-field/select-field.css.ts +++ b/src/renderer/src/components/select-field/select-field.css.ts @@ -7,7 +7,7 @@ export const select = recipe({ base: { display: "inline-flex", transition: "all ease 0.2s", - width: "fit-content", + width: "100%", alignItems: "center", borderRadius: "8px", border: `1px solid ${vars.color.border}`, diff --git a/src/renderer/src/components/select-field/select-field.tsx b/src/renderer/src/components/select-field/select-field.tsx index fb5038f66..c1aa19a92 100644 --- a/src/renderer/src/components/select-field/select-field.tsx +++ b/src/renderer/src/components/select-field/select-field.tsx @@ -34,6 +34,7 @@ export function SelectField({