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

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

41
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 (where == "list") {
if (previousPageData && !previousPageData.content.length) return null;
} else {
if (previousPageData && !previousPageData.releases.length) return null; 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,9 +82,15 @@ export function SearchPage() {
useEffect(() => { useEffect(() => {
if (data) { if (data) {
let allReleases = []; let allReleases = [];
if (where == "list") {
for (let i = 0; i < data.length; i++) {
allReleases.push(...data[i].content);
}
} else {
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
allReleases.push(...data[i].releases); allReleases.push(...data[i].releases);
} }
}
setContent(allReleases); setContent(allReleases);
} }
}, [data]); }, [data]);
@ -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,7 +197,9 @@ export function SearchPage() {
</div> </div>
)} )}
</div> </div>
{data && data[data.length - 1].releases.length == 25 && ( {(data && data.length > 1) && (where == "releases"
? data[data.length - 1].releases.length == 25
: data[data.length - 1].content.length == 25) ? (
<Button <Button
className="w-full" className="w-full"
color={"light"} color={"light"}
@ -195,7 +210,7 @@ export function SearchPage() {
<span className="text-lg">Загрузить ещё</span> <span className="text-lg">Загрузить ещё</span>
</div> </div>
</Button> </Button>
)} ) : ""}
</> </>
); );
} }