From c3fbe1c968fcd19833b771a45c9d5768b879bcab Mon Sep 17 00:00:00 2001 From: Captain Jack Sparrow <163903675+sussy-code@users.noreply.github.com> Date: Sun, 28 Apr 2024 22:45:00 +0000 Subject: [PATCH] Add a discover button if there is nothing watched or bookmarked --- pnpm-lock.yaml | 14 +++++++------- src/assets/locales/en.json | 13 ++++++++++++- src/pages/HomePage.tsx | 23 +++++++++++++++++++++-- src/pages/parts/home/BookmarksPart.tsx | 12 ++++++++++-- src/pages/parts/home/WatchingPart.tsx | 12 ++++++++++-- src/pages/parts/search/SearchListPart.tsx | 4 ++-- 6 files changed, 62 insertions(+), 16 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4400cac9..9baf93de 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2813,7 +2813,7 @@ packages: postcss: '>=8.4.31' dependencies: browserslist: 4.23.0 - caniuse-lite: 1.0.30001613 + caniuse-lite: 1.0.30001614 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -2917,7 +2917,7 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001613 + caniuse-lite: 1.0.30001614 electron-to-chromium: 1.4.750 node-releases: 2.0.14 update-browserslist-db: 1.0.13(browserslist@4.23.0) @@ -2957,8 +2957,8 @@ packages: engines: {node: '>= 6'} dev: true - /caniuse-lite@1.0.30001613: - resolution: {integrity: sha512-BNjJULJfOONQERivfxte7alLfeLW4QnwHvNW4wEcLEbXfV6VSCYvr+REbf2Sojv8tC1THpjPXBxWgDbq4NtLWg==} + /caniuse-lite@1.0.30001614: + resolution: {integrity: sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==} /chai@4.4.1: resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==} @@ -4988,8 +4988,8 @@ packages: get-func-name: 2.0.2 dev: true - /lru-cache@10.2.1: - resolution: {integrity: sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==} + /lru-cache@10.2.2: + resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==} engines: {node: 14 || >=16.14} dev: true @@ -5414,7 +5414,7 @@ packages: resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==} engines: {node: '>=16 || 14 >=14.17'} dependencies: - lru-cache: 10.2.1 + lru-cache: 10.2.2 minipass: 7.0.4 dev: true diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index b858a5c1..b94fd32f 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -147,7 +147,18 @@ ">ᴗ<" ] }, - "sectionTitle": "Search results" + "empty": { + "default": "Welcome, find media to watch here!", + "extra": [ + "There's nothing here :(", + "So empty...", + "Such emptiness.", + "Hi new user :3" + ] + }, + "sectionTitle": "Search results", + "discoverMore": "Discover more", + "discover": "Discover" }, "titles": { "day": { diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 946c0888..fbdd889f 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,10 +1,13 @@ import { useEffect, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; import { WideContainer } from "@/components/layout/WideContainer"; import { useDebounce } from "@/hooks/useDebounce"; +import { useRandomTranslation } from "@/hooks/useRandomTranslation"; import { useSearchQuery } from "@/hooks/useSearchQuery"; +import { Button } from "@/pages/About"; import { HomeLayout } from "@/pages/layouts/HomeLayout"; import { BookmarksPart } from "@/pages/parts/home/BookmarksPart"; import { HeroPart } from "@/pages/parts/home/HeroPart"; @@ -33,10 +36,15 @@ function useSearch(search: string) { export function HomePage() { const { t } = useTranslation(); + const { t: randomT } = useRandomTranslation(); + const emptyText = randomT(`home.search.empty`); + const navigate = useNavigate(); const [showBg, setShowBg] = useState(false); const searchParams = useSearchQuery(); const [search] = searchParams; const s = useSearch(search); + const [showBookmarks, setShowBookmarks] = useState(false); + const [showWatching, setShowWatching] = useState(false); return ( @@ -58,8 +66,19 @@ export function HomePage() { ) : ( <> - - + + + {!(showBookmarks || showWatching) ? ( +
+

{emptyText}

+ +
+ ) : null} )} diff --git a/src/pages/parts/home/BookmarksPart.tsx b/src/pages/parts/home/BookmarksPart.tsx index 848e1aa5..4f9f13bc 100644 --- a/src/pages/parts/home/BookmarksPart.tsx +++ b/src/pages/parts/home/BookmarksPart.tsx @@ -1,5 +1,5 @@ import { useAutoAnimate } from "@formkit/auto-animate/react"; -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { EditButton } from "@/components/buttons/EditButton"; @@ -11,7 +11,11 @@ import { useBookmarkStore } from "@/stores/bookmarks"; import { useProgressStore } from "@/stores/progress"; import { MediaItem } from "@/utils/mediaTypes"; -export function BookmarksPart() { +export function BookmarksPart({ + onItemsChange, +}: { + onItemsChange: (hasItems: boolean) => void; +}) { const { t } = useTranslation(); const progressItems = useProgressStore((s) => s.items); const bookmarks = useBookmarkStore((s) => s.bookmarks); @@ -41,6 +45,10 @@ export function BookmarksPart() { return output; }, [bookmarks, progressItems]); + useEffect(() => { + onItemsChange(items.length > 0); + }, [items, onItemsChange]); + if (items.length === 0) return null; return ( diff --git a/src/pages/parts/home/WatchingPart.tsx b/src/pages/parts/home/WatchingPart.tsx index ee1b1c37..80e7e09c 100644 --- a/src/pages/parts/home/WatchingPart.tsx +++ b/src/pages/parts/home/WatchingPart.tsx @@ -1,5 +1,5 @@ import { useAutoAnimate } from "@formkit/auto-animate/react"; -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { EditButton } from "@/components/buttons/EditButton"; @@ -12,7 +12,11 @@ import { useProgressStore } from "@/stores/progress"; import { shouldShowProgress } from "@/stores/progress/utils"; import { MediaItem } from "@/utils/mediaTypes"; -export function WatchingPart() { +export function WatchingPart({ + onItemsChange, +}: { + onItemsChange: (hasItems: boolean) => void; +}) { const { t } = useTranslation(); const bookmarks = useBookmarkStore((s) => s.bookmarks); const progressItems = useProgressStore((s) => s.items); @@ -39,6 +43,10 @@ export function WatchingPart() { return output; }, [progressItems, bookmarks]); + useEffect(() => { + onItemsChange(sortedProgressItems.length > 0); + }, [sortedProgressItems, onItemsChange]); + if (sortedProgressItems.length === 0) return null; return ( diff --git a/src/pages/parts/search/SearchListPart.tsx b/src/pages/parts/search/SearchListPart.tsx index 0c4cdb72..f8154dd0 100644 --- a/src/pages/parts/search/SearchListPart.tsx +++ b/src/pages/parts/search/SearchListPart.tsx @@ -35,10 +35,10 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) { <>

{t("home.search.allResults")}

) : (