1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-22 14:57:40 +01:00
smov/src/pages/HomePage.tsx

64 lines
1.9 KiB
TypeScript
Raw Normal View History

2023-08-20 18:45:07 +02:00
import { useEffect, useState } from "react";
import { Helmet } from "react-helmet";
import { useTranslation } from "react-i18next";
import { WideContainer } from "@/components/layout/WideContainer";
import { useDebounce } from "@/hooks/useDebounce";
import { useSearchQuery } from "@/hooks/useSearchQuery";
2023-08-20 18:46:13 +02:00
import { HomeLayout } from "@/pages/layouts/HomeLayout";
import { BookmarksPart } from "@/pages/parts/home/BookmarksPart";
import { HeroPart } from "@/pages/parts/home/HeroPart";
import { WatchingPart } from "@/pages/parts/home/WatchingPart";
import { SearchListPart } from "@/pages/parts/search/SearchListPart";
import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
2023-08-20 18:45:07 +02:00
2023-10-13 21:41:44 +02:00
function useSearch(search: string) {
2023-08-20 18:45:07 +02:00
const [searching, setSearching] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
2023-10-13 21:41:44 +02:00
const debouncedSearch = useDebounce<string>(search, 500);
2023-08-20 18:45:07 +02:00
useEffect(() => {
2023-10-13 21:41:44 +02:00
setSearching(search !== "");
setLoading(search !== "");
2023-08-20 18:45:07 +02:00
}, [search]);
useEffect(() => {
setLoading(false);
}, [debouncedSearch]);
return {
loading,
searching,
};
}
export function HomePage() {
const { t } = useTranslation();
const [showBg, setShowBg] = useState<boolean>(false);
const searchParams = useSearchQuery();
const [search] = searchParams;
const s = useSearch(search);
return (
<HomeLayout showBg={showBg}>
<div className="relative z-10 mb-16 sm:mb-24">
<Helmet>
<title>{t("global.name")}</title>
</Helmet>
<HeroPart searchParams={searchParams} setIsSticky={setShowBg} />
</div>
<WideContainer>
{s.loading ? (
<SearchLoadingPart />
) : s.searching ? (
<SearchListPart searchQuery={search} />
) : (
<>
<BookmarksPart />
<WatchingPart />
</>
)}
</WideContainer>
</HomeLayout>
);
}