AnimeThemes/animethemes-web
1
0
Fork 0
mirror of https://github.com/AnimeThemes/animethemes-web.git synced 2026-07-11 01:24:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fixed search page behaving unexpectedly (#222)

Browse Source
This commit is contained in:
Mani
2024-07-30 01:01:40 +02:00
committed by GitHub
parent d5ccb7d08c
commit b25a505a0f
11 changed files with 98 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1 -23
View File
@@ -47,8 +47,7 @@
"styled-components": "^5.3.3",
"swr": "^2.2.4",
"unist-util-visit": "^4.1.2",
"use-local-storage-state": "^19.3.1",
"use-session-storage-state": "^19.0.0"
"use-local-storage-state": "^19.3.1"
},
"devDependencies": {
"@graphql-codegen/cli": "^5.0.2",
@@ -12991,21 +12990,6 @@
"react-dom": ">=18"
}
},
"node_modules/use-session-storage-state": {
"version": "19.0.0",
"resolved": "https://registry.npmjs.org/use-session-storage-state/-/use-session-storage-state-19.0.0.tgz",
"integrity": "sha512-u6kyD7lgAm0xSwLerXcrbaNLWqeYsXYPuB97XZftBPAqPo5gVAMvAeFsRLwxblpCQDxFkjKsz/apTM5OlkbKFg==",
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/astoilkov"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/use-sidecar": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
@@ -22661,12 +22645,6 @@
"integrity": "sha512-y3Z1dODXvZXZB4qtLDNN8iuXbsYD6TAxz61K58GWB9/yKwrNG9ynI0GzCTHi/Je1rMiyOwMimz0oyFsZn+Kj7Q==",
"requires": {}
},
"use-session-storage-state": {
"version": "19.0.0",
"resolved": "https://registry.npmjs.org/use-session-storage-state/-/use-session-storage-state-19.0.0.tgz",
"integrity": "sha512-u6kyD7lgAm0xSwLerXcrbaNLWqeYsXYPuB97XZftBPAqPo5gVAMvAeFsRLwxblpCQDxFkjKsz/apTM5OlkbKFg==",
"requires": {}
},
"use-sidecar": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
package.json
+1 -2
View File
@@ -55,8 +55,7 @@
"styled-components": "^5.3.3",
"swr": "^2.2.4",
"unist-util-visit": "^4.1.2",
"use-local-storage-state": "^19.3.1",
"use-session-storage-state": "^19.0.0"
"use-local-storage-state": "^19.3.1"
},
"devDependencies": {
"@graphql-codegen/cli": "^5.0.2",
src/components/search/SearchAnime.tsx
+10 -11
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import gql from "graphql-tag";
@@ -32,18 +32,17 @@ export function SearchAnime({ searchQuery }: SearchAnimeProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
useEffect(() => {
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
}
// Check if user is switching from non-searching to searching
if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
});
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
return null;
}
if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
if (searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
setPrevSearchQuery(searchQuery);
return null;
}
src/components/search/SearchArtist.tsx
+10 -11
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import gql from "graphql-tag";
@@ -26,18 +26,17 @@ export function SearchArtist({ searchQuery }: SearchArtistProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
useEffect(() => {
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
}
// Check if user is switching from non-searching to searching
if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
});
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
return null;
}
if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
if (searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
setPrevSearchQuery(searchQuery);
return null;
}
src/components/search/SearchPlaylist.tsx
+10 -11
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import gql from "graphql-tag";
@@ -24,18 +24,17 @@ export function SearchPlaylist({ searchQuery }: SearchPlaylistProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
useEffect(() => {
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
}
// Check if user is switching from non-searching to searching
if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
});
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
return null;
}
if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
if (searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
setPrevSearchQuery(searchQuery);
return null;
}
src/components/search/SearchSeries.tsx
+10 -11
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import gql from "graphql-tag";
@@ -26,18 +26,17 @@ export function SearchSeries({ searchQuery }: SearchSeriesProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
useEffect(() => {
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
}
// Check if user is switching from non-searching to searching
if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
});
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
return null;
}
if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
if (searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
setPrevSearchQuery(searchQuery);
return null;
}
src/components/search/SearchStudio.tsx
+10 -11
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import gql from "graphql-tag";
@@ -27,18 +27,17 @@ export function SearchStudio({ searchQuery }: SearchStudioProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
useEffect(() => {
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
}
// Check if user is switching from non-searching to searching
if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
});
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
return null;
}
if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
if (searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
setPrevSearchQuery(searchQuery);
return null;
}
src/components/search/SearchTheme.tsx
+10 -11
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import gql from "graphql-tag";
@@ -28,18 +28,17 @@ export function SearchTheme({ searchQuery }: SearchThemeProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
useEffect(() => {
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
}
// Check if user is switching from non-searching to searching
if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
});
if (!searchQuery && filter.sortBy === null) {
updateFilter("sortBy", initialFilter.sortBy);
return null;
}
if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
if (searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
setPrevSearchQuery(searchQuery);
return null;
}
src/hooks/useFilterStorage.ts
+19 -4
View File
@@ -1,6 +1,6 @@
import { useCallback } from "react";
import useSessionStorageState from "use-session-storage-state";
import { useSessionStorageState } from "ahooks";
export default function useFilterStorage<T>(
key: string,
@@ -13,10 +13,25 @@ export default function useFilterStorage<T>(
const [filter, setFilter] = useSessionStorageState(key, { defaultValue });
return {
filter,
updateFilter: useCallback((key, value) => setFilter((filter) => ({ ...filter, [key]: value })), [setFilter]),
filter: filter ?? defaultValue,
updateFilter: useCallback(
(key, value) =>
setFilter((filter) => {
if (!filter) {
filter = {} as T;
}
return { ...filter, [key]: value };
}),
[setFilter],
),
bindUpdateFilter: useCallback(
(key) => (value) => setFilter((filter) => ({ ...filter, [key]: value })),
(key) => (value) =>
setFilter((filter) => {
if (!filter) {
filter = {} as T;
}
return { ...filter, [key]: value };
}),
[setFilter],
),
};
src/lib/client/search.ts
+4 -1
View File
@@ -115,7 +115,10 @@ export const searchResolvers: Resolvers = {
"include[anime]",
"animethemes.animethemeentries.videos,animethemes.group,animethemes.song,images",
);
searchParams.append("include[animetheme]", "animethemeentries.videos,anime.images,song.artists,group");
searchParams.append(
"include[animetheme]",
"animethemeentries.videos.audio,anime.images,song.artists,group",
);
searchParams.append("include[artist]", "images,songs");
searchParams.append("include[playlist]", "user");
searchParams.append("fields[anime]", "name,slug,year,season");
src/pages/search/[entity]/index.tsx
+13
View File
@@ -1,3 +1,4 @@
import { useEffect, useState } from "react";
import type { GetStaticPaths, GetStaticProps } from "next";
import { useRouter } from "next/router";
@@ -27,6 +28,18 @@ export default function SearchEntityPage({ entity }: SearchEntityPageProps) {
const urlParams = router.query;
const searchQuery = Array.isArray(urlParams.q) ? urlParams.q.join() : urlParams.q;
const [shouldRender, setShouldRender] = useState(false);
useEffect(() => {
if (router.isReady) {
setShouldRender(true);
}
}, [router.isReady]);
if (!shouldRender) {
return <SEO title={`${capitalize(entity)} Index`} />;
}
return (
<>
<SEO title={`${searchQuery ? `${searchQuery} - ` : ""}${capitalize(entity)} Index`} />