Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add query params list search

Browse source
This commit is contained in:
Kentai Radiquum 2024-11-20 02:17:37 +05:00
parent 7952e5eecb
commit bfda46f5eb
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 41 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
app/pages/Search.tsx
View file

@ -28,15 +28,23 @@ export function SearchPage() {
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [query, setQuery] = useState(searchParams.get("q") || null); const [query, setQuery] = useState(searchParams.get("q") || null);
const [searchVal, setSearchVal] = useState(searchParams.get("q") || "") const [searchVal, setSearchVal] = useState(
const where = searchParams.get("where") || null; decodeURI(searchParams.get("q")) || ""
const searchBy = searchParams.get("searchBy") || null; );
const list = searchParams.get("list") || null; const [where, setWhere] = useState(searchParams.get("where") || "releases");
const [searchBy, setSearchBy] = useState(
searchParams.get("searchBy") || null
);
const [list, setList] = useState(searchParams.get("list") || null);
const token = useUserStore((state) => state.token); const token = useUserStore((state) => state.token);
const getKey = (pageIndex: number, previousPageData: any) => { const getKey = (pageIndex: number, previousPageData: any) => {
if (previousPageData && !previousPageData.releases.length) return null; if (where == "list") {
if (previousPageData && !previousPageData.content.length) return null;
} else {
if (previousPageData && !previousPageData.releases.length) return null;
}
const url = new URL("/api/search", window.location.origin); const url = new URL("/api/search", window.location.origin);
url.searchParams.set("page", pageIndex.toString()); url.searchParams.set("page", pageIndex.toString());
@ -74,8 +82,14 @@ export function SearchPage() {
useEffect(() => { useEffect(() => {
if (data) { if (data) {
let allReleases = []; let allReleases = [];
for (let i = 0; i < data.length; i++) { if (where == "list") {
allReleases.push(...data[i].releases); for (let i = 0; i < data.length; i++) {
allReleases.push(...data[i].content);
}
} else {
for (let i = 0; i < data.length; i++) {
allReleases.push(...data[i].releases);
}
} }
setContent(allReleases); setContent(allReleases);
} }
@ -89,18 +103,18 @@ export function SearchPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [scrollPosition]); }, [scrollPosition]);
function _executeSearch(query) { function _executeSearch(value: string) {
const Params = new URLSearchParams(window.location.search); const Params = new URLSearchParams(window.location.search);
Params.set("q", query); Params.set("q", value);
const url = new URL(`/search?${Params.toString()}`, window.location.origin); const url = new URL(`/search?${Params.toString()}`, window.location.origin);
setContent(null); setContent(null);
setQuery(searchVal.trim()); setQuery(value);
router.push(url.toString()); router.push(url.toString());
} }
useEffect(() => { useEffect(() => {
if (searchVal.length % 4 == 1) { if (searchVal && searchVal.length % 4 == 1) {
_executeSearch(searchVal) _executeSearch(searchVal.trim());
} }
}, [searchVal]); }, [searchVal]);
@ -113,7 +127,7 @@ export function SearchPage() {
className="max-w-full mx-auto" className="max-w-full mx-auto"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
_executeSearch(searchVal) _executeSearch(searchVal.trim());
}} }}
> >
<label <label
@ -148,7 +162,6 @@ export function SearchPage() {
required required
value={searchVal} value={searchVal}
onChange={(e) => setSearchVal(e.target.value)} onChange={(e) => setSearchVal(e.target.value)}
defaultValue={query || ""}
/> />
<button <button
type="submit" type="submit"
@ -184,18 +197,20 @@ export function SearchPage() {
</div> </div>
)} )}
</div> </div>
{data && data[data.length - 1].releases.length == 25 && ( {(data && data.length > 1) && (where == "releases"
<Button ? data[data.length - 1].releases.length == 25
className="w-full" : data[data.length - 1].content.length == 25) ? (
color={"light"} <Button
onClick={() => setSize(size + 1)} className="w-full"
> color={"light"}
<div className="flex items-center gap-2"> onClick={() => setSize(size + 1)}
<span className="w-6 h-6 iconify mdi--plus-circle "></span> >
<span className="text-lg">Загрузить ещё</span> <div className="flex items-center gap-2">
</div> <span className="w-6 h-6 iconify mdi--plus-circle "></span>
</Button> <span className="text-lg">Загрузить ещё</span>
)} </div>
</Button>
) : ""}
</> </>
); );
} }