PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-09 03:37:45 +03:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #11 from xbozo/main

Browse Source 
Create not found ui on catalogue search
This commit is contained in:
Hydra 2024-04-15 15:27:16 -03:00 committed by GitHub
commit d82634af26
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 51 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/locales/en/translation.json
View File

@ -3,7 +3,8 @@
"featured": "Featured",
"recently_added": "Recently added",
"trending": "Trending",
"surprise_me": "✨ Surprise me"
"surprise_me": "✨ Surprise me",
"no_results": "No results found"
},
"sidebar": {
"catalogue": "Catalogue",

3
src/locales/es/translation.json
View File

@ -3,7 +3,8 @@
"featured": "Destacado",
"recently_added": "Recién Añadidos",
"trending": "Tendencias",
"surprise_me": "✨ ¡Sorpréndeme!"
"surprise_me": "✨ ¡Sorpréndeme!",
"no_results": "No se encontraron resultados"
},
"sidebar": {
"catalogue": "Catálogo",

3
src/locales/fr/translation.json
View File

@ -3,7 +3,8 @@
"featured": "En vedette",
"recently_added": "Récemment ajouté",
"trending": "Tendance",
"surprise_me": "✨ Surprenez-moi"
"surprise_me": "✨ Surprenez-moi",
"no_results": "Aucun résultat trouvé"
},
"sidebar": {
"catalogue": "Catalogue",

3
src/locales/pt/translation.json
View File

@ -3,7 +3,8 @@
"featured": "Destaque",
"recently_added": "Novidades",
"trending": "Populares",
"surprise_me": "✨ Me surpreenda"
"surprise_me": "✨ Me surpreenda",
"no_results": "Nenhum resultado encontrado"
},
"sidebar": {
"catalogue": "Catálogo",

11
src/renderer/pages/catalogue/catalogue.css.ts
View File

@ -15,6 +15,7 @@ export const catalogueHeader = style({
export const content = style({
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
gap: `${SPACING_UNIT * 3}px`,
@ -62,3 +63,13 @@ export const cardSkeleton = style({
opacity: vars.opacity.active,
},
});
export const noResults = style({
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
gap: "16px",
gridColumn: "1 / -1",
});

40
src/renderer/pages/catalogue/search-results.tsx
View File

@ -1,21 +1,24 @@
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import { GameCard } from "@renderer/components";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import type { CatalogueEntry } from "@types";
import debounce from "lodash/debounce";
import type { DebouncedFunc } from "lodash";
import debounce from "lodash/debounce";
import * as styles from "./catalogue.css";
import { useNavigate, useParams } from "react-router-dom";
import { useAppDispatch } from "@renderer/hooks";
import { InboxIcon } from "@primer/octicons-react";
import { clearSearch } from "@renderer/features";
import { useAppDispatch } from "@renderer/hooks";
import { vars } from "@renderer/theme.css";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import * as styles from "./catalogue.css";
export function SearchResults() {
const dispatch = useAppDispatch();
const { t } = useTranslation("catalogue");
const { query } = useParams();
const [searchResults, setSearchResults] = useState<CatalogueEntry[]>([]);
@ -50,13 +53,16 @@ export function SearchResults() {
return (
<SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
<section className={styles.content}>
<main className={styles.content}>
<section className={styles.cards({ searching: false })}>
{isLoading
? Array.from({ length: 12 }).map((_, index) => (
<Skeleton key={index} className={styles.cardSkeleton} />
))
: searchResults.map((game) => (
{isLoading &&
Array.from({ length: 12 }).map((_, index) => (
<Skeleton key={index} className={styles.cardSkeleton} />
))}
{!isLoading && searchResults.length > 0 && (
<>
{searchResults.map((game) => (
<GameCard
key={game.objectID}
game={game}
@ -64,8 +70,18 @@ export function SearchResults() {
disabled={!game.repacks.length}
/>
))}
</>
)}
</section>
</section>
{!isLoading && searchResults.length === 0 && (
<div className={styles.noResults}>
<InboxIcon size={56} />
<p>{t("no_results")}</p>
</div>
)}
</main>
</SkeletonTheme>
);
}

33
yarn.lock
View File

@ -9466,16 +9466,7 @@ statuses@2.0.1:
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"
"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -9548,19 +9539,12 @@ string_decoder@^1.1.1:
string_decoder@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
dependencies:
safe-buffer "~5.1.0"
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -10581,16 +10565,7 @@ word-wrap@^1.2.3:
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"
wrap-ansi@^7.0.0:
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==