From d5ccb7d08cc45a00aaf663378f3575cfe80b49a6 Mon Sep 17 00:00:00 2001
From: Mani <12898705+Maniload@users.noreply.github.com>
Date: Mon, 29 Jul 2024 03:50:54 +0200
Subject: [PATCH] fix: Fixed search page hitting the API too often resulting in
rate limiting (#221)
---
package-lock.json | 126 ++++++++++-------------
package.json | 8 +-
src/components/card/ErrorCard.tsx | 4 +-
src/components/search/SearchAnime.tsx | 16 +--
src/components/search/SearchArtist.tsx | 16 +--
src/components/search/SearchPlaylist.tsx | 16 +--
src/components/search/SearchSeries.tsx | 16 +--
src/components/search/SearchStudio.tsx | 16 +--
src/components/search/SearchTheme.tsx | 16 +--
src/hooks/useFilterStorage.ts | 9 +-
src/lib/client/search.ts | 5 +-
11 files changed, 129 insertions(+), 119 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index b4953ef..b0c19d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,8 +36,8 @@
"next-mdx-remote": "^4.3.0",
"p-limit": "^3.1.0",
"picocolors": "^1.0.0",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
"react-query": "^3.29.0",
"rehype-pretty-code": "^0.9.4",
"rehype-slug": "^5.1.0",
@@ -47,8 +47,8 @@
"styled-components": "^5.3.3",
"swr": "^2.2.4",
"unist-util-visit": "^4.1.2",
- "use-local-storage-state": "^18.3.0",
- "use-session-storage-state": "^18.1.1"
+ "use-local-storage-state": "^19.3.1",
+ "use-session-storage-state": "^19.0.0"
},
"devDependencies": {
"@graphql-codegen/cli": "^5.0.2",
@@ -4448,11 +4448,6 @@
"hoist-non-react-statics": "^3.3.0"
}
},
- "node_modules/@types/js-cookie": {
- "version": "2.2.7",
- "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
- "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
- },
"node_modules/@types/js-yaml": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
@@ -4910,17 +4905,16 @@
}
},
"node_modules/ahooks": {
- "version": "3.7.6",
- "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.7.6.tgz",
- "integrity": "sha512-p+2j4H/BI9vqXR0fZI7S/q6fUPxPklQnHqvU7zAVBljMFNSFeYRWB2iHHbjpXGOwUTOBYCh2OuvIHyJYj6Lpag==",
+ "version": "3.8.0",
+ "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.8.0.tgz",
+ "integrity": "sha512-M01m+mxLRNNeJ/PCT3Fom26UyreTj6oMqJBetUrJnK4VNI5j6eMA543Xxo53OBXn6XibA2FXKcCCgrT6YCTtKQ==",
"dependencies": {
"@babel/runtime": "^7.21.0",
- "@types/js-cookie": "^2.x.x",
- "ahooks-v3-count": "^1.0.0",
"dayjs": "^1.9.1",
"intersection-observer": "^0.12.0",
"js-cookie": "^2.x.x",
"lodash": "^4.17.21",
+ "react-fast-compare": "^3.2.2",
"resize-observer-polyfill": "^1.5.1",
"screenfull": "^5.0.0",
"tslib": "^2.4.1"
@@ -4932,11 +4926,6 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
- "node_modules/ahooks-v3-count": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
- "integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
- },
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -11285,9 +11274,9 @@
]
},
"node_modules/react": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
- "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+ "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"dependencies": {
"loose-envify": "^1.1.0"
},
@@ -11296,17 +11285,22 @@
}
},
"node_modules/react-dom": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
- "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+ "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"dependencies": {
"loose-envify": "^1.1.0",
- "scheduler": "^0.23.0"
+ "scheduler": "^0.23.2"
},
"peerDependencies": {
- "react": "^18.2.0"
+ "react": "^18.3.1"
}
},
+ "node_modules/react-fast-compare": {
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+ "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+ },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -11825,9 +11819,9 @@
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
},
"node_modules/scheduler": {
- "version": "0.23.0",
- "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
- "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+ "version": "0.23.2",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+ "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"dependencies": {
"loose-envify": "^1.1.0"
}
@@ -12983,11 +12977,11 @@
}
},
"node_modules/use-local-storage-state": {
- "version": "18.3.0",
- "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-18.3.0.tgz",
- "integrity": "sha512-SWInjtfTuptkw1S7ZmVxcXLpcNUlUIG3mvZahnXPWbltF4Kz/mOhnQ8cac681UxDHOEFqKdivxHMmeScMTeKZg==",
+ "version": "19.3.1",
+ "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-19.3.1.tgz",
+ "integrity": "sha512-y3Z1dODXvZXZB4qtLDNN8iuXbsYD6TAxz61K58GWB9/yKwrNG9ynI0GzCTHi/Je1rMiyOwMimz0oyFsZn+Kj7Q==",
"engines": {
- "node": ">=12"
+ "node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/astoilkov"
@@ -12998,11 +12992,11 @@
}
},
"node_modules/use-session-storage-state": {
- "version": "18.1.1",
- "resolved": "https://registry.npmjs.org/use-session-storage-state/-/use-session-storage-state-18.1.1.tgz",
- "integrity": "sha512-smeznwdz+7ClDng/9eDLt4Dh8Af8jRR1BqW0Ps6E998S/GZ8INoL73Qf0vb6UbvAAIs60FGstnyLmGz2AKEeWQ==",
+ "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": ">=12"
+ "node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/astoilkov"
@@ -16646,11 +16640,6 @@
"hoist-non-react-statics": "^3.3.0"
}
},
- "@types/js-cookie": {
- "version": "2.2.7",
- "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
- "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
- },
"@types/js-yaml": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
@@ -16984,27 +16973,21 @@
}
},
"ahooks": {
- "version": "3.7.6",
- "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.7.6.tgz",
- "integrity": "sha512-p+2j4H/BI9vqXR0fZI7S/q6fUPxPklQnHqvU7zAVBljMFNSFeYRWB2iHHbjpXGOwUTOBYCh2OuvIHyJYj6Lpag==",
+ "version": "3.8.0",
+ "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-3.8.0.tgz",
+ "integrity": "sha512-M01m+mxLRNNeJ/PCT3Fom26UyreTj6oMqJBetUrJnK4VNI5j6eMA543Xxo53OBXn6XibA2FXKcCCgrT6YCTtKQ==",
"requires": {
"@babel/runtime": "^7.21.0",
- "@types/js-cookie": "^2.x.x",
- "ahooks-v3-count": "^1.0.0",
"dayjs": "^1.9.1",
"intersection-observer": "^0.12.0",
"js-cookie": "^2.x.x",
"lodash": "^4.17.21",
+ "react-fast-compare": "^3.2.2",
"resize-observer-polyfill": "^1.5.1",
"screenfull": "^5.0.0",
"tslib": "^2.4.1"
}
},
- "ahooks-v3-count": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz",
- "integrity": "sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ=="
- },
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -21484,22 +21467,27 @@
"dev": true
},
"react": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
- "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+ "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"requires": {
"loose-envify": "^1.1.0"
}
},
"react-dom": {
- "version": "18.2.0",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
- "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+ "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"requires": {
"loose-envify": "^1.1.0",
- "scheduler": "^0.23.0"
+ "scheduler": "^0.23.2"
}
},
+ "react-fast-compare": {
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+ "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+ },
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -21845,9 +21833,9 @@
}
},
"scheduler": {
- "version": "0.23.0",
- "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
- "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+ "version": "0.23.2",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+ "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"requires": {
"loose-envify": "^1.1.0"
}
@@ -22668,15 +22656,15 @@
"requires": {}
},
"use-local-storage-state": {
- "version": "18.3.0",
- "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-18.3.0.tgz",
- "integrity": "sha512-SWInjtfTuptkw1S7ZmVxcXLpcNUlUIG3mvZahnXPWbltF4Kz/mOhnQ8cac681UxDHOEFqKdivxHMmeScMTeKZg==",
+ "version": "19.3.1",
+ "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-19.3.1.tgz",
+ "integrity": "sha512-y3Z1dODXvZXZB4qtLDNN8iuXbsYD6TAxz61K58GWB9/yKwrNG9ynI0GzCTHi/Je1rMiyOwMimz0oyFsZn+Kj7Q==",
"requires": {}
},
"use-session-storage-state": {
- "version": "18.1.1",
- "resolved": "https://registry.npmjs.org/use-session-storage-state/-/use-session-storage-state-18.1.1.tgz",
- "integrity": "sha512-smeznwdz+7ClDng/9eDLt4Dh8Af8jRR1BqW0Ps6E998S/GZ8INoL73Qf0vb6UbvAAIs60FGstnyLmGz2AKEeWQ==",
+ "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": {
diff --git a/package.json b/package.json
index fe0b3f8..25871a5 100644
--- a/package.json
+++ b/package.json
@@ -44,8 +44,8 @@
"next-mdx-remote": "^4.3.0",
"p-limit": "^3.1.0",
"picocolors": "^1.0.0",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
"react-query": "^3.29.0",
"rehype-pretty-code": "^0.9.4",
"rehype-slug": "^5.1.0",
@@ -55,8 +55,8 @@
"styled-components": "^5.3.3",
"swr": "^2.2.4",
"unist-util-visit": "^4.1.2",
- "use-local-storage-state": "^18.3.0",
- "use-session-storage-state": "^18.1.1"
+ "use-local-storage-state": "^19.3.1",
+ "use-session-storage-state": "^19.0.0"
},
"devDependencies": {
"@graphql-codegen/cli": "^5.0.2",
diff --git a/src/components/card/ErrorCard.tsx b/src/components/card/ErrorCard.tsx
index 68511c6..8f10665 100644
--- a/src/components/card/ErrorCard.tsx
+++ b/src/components/card/ErrorCard.tsx
@@ -37,7 +37,9 @@ export function ErrorCard({ error }: ErrorCardProps) {
- {JSON.stringify(error, null, 2)}
+
+ {error instanceof Error ? error.message : JSON.stringify(error, null, 2)}
+
);
diff --git a/src/components/search/SearchAnime.tsx b/src/components/search/SearchAnime.tsx
index 557192d..bf89387 100644
--- a/src/components/search/SearchAnime.tsx
+++ b/src/components/search/SearchAnime.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import gql from "graphql-tag";
@@ -32,16 +32,18 @@ export function SearchAnime({ searchQuery }: SearchAnimeProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
- if (!searchQuery && filter.sortBy === null) {
- updateFilter("sortBy", initialFilter.sortBy);
- return null;
- }
+ useEffect(() => {
+ if (!searchQuery && filter.sortBy === null) {
+ updateFilter("sortBy", initialFilter.sortBy);
+ }
- if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
- if (searchQuery && !prevSearchQuery) {
+ if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
+ });
+
+ if (searchQuery !== prevSearchQuery) {
setPrevSearchQuery(searchQuery);
return null;
}
diff --git a/src/components/search/SearchArtist.tsx b/src/components/search/SearchArtist.tsx
index 062bead..656b5ec 100644
--- a/src/components/search/SearchArtist.tsx
+++ b/src/components/search/SearchArtist.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import gql from "graphql-tag";
@@ -26,16 +26,18 @@ export function SearchArtist({ searchQuery }: SearchArtistProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
- if (!searchQuery && filter.sortBy === null) {
- updateFilter("sortBy", initialFilter.sortBy);
- return null;
- }
+ useEffect(() => {
+ if (!searchQuery && filter.sortBy === null) {
+ updateFilter("sortBy", initialFilter.sortBy);
+ }
- if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
- if (searchQuery && !prevSearchQuery) {
+ if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
+ });
+
+ if (searchQuery !== prevSearchQuery) {
setPrevSearchQuery(searchQuery);
return null;
}
diff --git a/src/components/search/SearchPlaylist.tsx b/src/components/search/SearchPlaylist.tsx
index b9b6ed1..b91e841 100644
--- a/src/components/search/SearchPlaylist.tsx
+++ b/src/components/search/SearchPlaylist.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import gql from "graphql-tag";
@@ -24,16 +24,18 @@ export function SearchPlaylist({ searchQuery }: SearchPlaylistProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
- if (!searchQuery && filter.sortBy === null) {
- updateFilter("sortBy", initialFilter.sortBy);
- return null;
- }
+ useEffect(() => {
+ if (!searchQuery && filter.sortBy === null) {
+ updateFilter("sortBy", initialFilter.sortBy);
+ }
- if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
- if (searchQuery && !prevSearchQuery) {
+ if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
+ });
+
+ if (searchQuery !== prevSearchQuery) {
setPrevSearchQuery(searchQuery);
return null;
}
diff --git a/src/components/search/SearchSeries.tsx b/src/components/search/SearchSeries.tsx
index 0ecb637..8465a36 100644
--- a/src/components/search/SearchSeries.tsx
+++ b/src/components/search/SearchSeries.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import gql from "graphql-tag";
@@ -26,16 +26,18 @@ export function SearchSeries({ searchQuery }: SearchSeriesProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
- if (!searchQuery && filter.sortBy === null) {
- updateFilter("sortBy", initialFilter.sortBy);
- return null;
- }
+ useEffect(() => {
+ if (!searchQuery && filter.sortBy === null) {
+ updateFilter("sortBy", initialFilter.sortBy);
+ }
- if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
- if (searchQuery && !prevSearchQuery) {
+ if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
+ });
+
+ if (searchQuery !== prevSearchQuery) {
setPrevSearchQuery(searchQuery);
return null;
}
diff --git a/src/components/search/SearchStudio.tsx b/src/components/search/SearchStudio.tsx
index c8e7a6c..cd1204b 100644
--- a/src/components/search/SearchStudio.tsx
+++ b/src/components/search/SearchStudio.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import gql from "graphql-tag";
@@ -27,16 +27,18 @@ export function SearchStudio({ searchQuery }: SearchStudioProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
- if (!searchQuery && filter.sortBy === null) {
- updateFilter("sortBy", initialFilter.sortBy);
- return null;
- }
+ useEffect(() => {
+ if (!searchQuery && filter.sortBy === null) {
+ updateFilter("sortBy", initialFilter.sortBy);
+ }
- if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
- if (searchQuery && !prevSearchQuery) {
+ if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
+ });
+
+ if (searchQuery !== prevSearchQuery) {
setPrevSearchQuery(searchQuery);
return null;
}
diff --git a/src/components/search/SearchTheme.tsx b/src/components/search/SearchTheme.tsx
index cc060e6..0afb179 100644
--- a/src/components/search/SearchTheme.tsx
+++ b/src/components/search/SearchTheme.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import gql from "graphql-tag";
@@ -28,16 +28,18 @@ export function SearchTheme({ searchQuery }: SearchThemeProps) {
});
const [prevSearchQuery, setPrevSearchQuery] = useState(searchQuery);
- if (!searchQuery && filter.sortBy === null) {
- updateFilter("sortBy", initialFilter.sortBy);
- return null;
- }
+ useEffect(() => {
+ if (!searchQuery && filter.sortBy === null) {
+ updateFilter("sortBy", initialFilter.sortBy);
+ }
- if (searchQuery !== prevSearchQuery) {
// Check if user is switching from non-searching to searching
- if (searchQuery && !prevSearchQuery) {
+ if (searchQuery !== prevSearchQuery && searchQuery && !prevSearchQuery) {
updateFilter("sortBy", null);
}
+ });
+
+ if (searchQuery !== prevSearchQuery) {
setPrevSearchQuery(searchQuery);
return null;
}
diff --git a/src/hooks/useFilterStorage.ts b/src/hooks/useFilterStorage.ts
index d3b298a..c0d6278 100644
--- a/src/hooks/useFilterStorage.ts
+++ b/src/hooks/useFilterStorage.ts
@@ -1,3 +1,5 @@
+import { useCallback } from "react";
+
import useSessionStorageState from "use-session-storage-state";
export default function useFilterStorage(
@@ -12,7 +14,10 @@ export default function useFilterStorage(
return {
filter,
- updateFilter: (key, value) => setFilter({ ...filter, [key]: value }),
- bindUpdateFilter: (key) => (value) => setFilter({ ...filter, [key]: value }),
+ updateFilter: useCallback((key, value) => setFilter((filter) => ({ ...filter, [key]: value })), [setFilter]),
+ bindUpdateFilter: useCallback(
+ (key) => (value) => setFilter((filter) => ({ ...filter, [key]: value })),
+ [setFilter],
+ ),
};
}
diff --git a/src/lib/client/search.ts b/src/lib/client/search.ts
index c70362d..6ef1c8c 100644
--- a/src/lib/client/search.ts
+++ b/src/lib/client/search.ts
@@ -111,7 +111,10 @@ export const searchResolvers: Resolvers = {
const searchParams = getSearchParams(args, true);
// TODO: Hardcoded includes and fields should be generate dynamically by API resolver instead
- searchParams.append("include[anime]", "animethemes.animethemeentries.videos,animethemes.song,images");
+ searchParams.append(
+ "include[anime]",
+ "animethemes.animethemeentries.videos,animethemes.group,animethemes.song,images",
+ );
searchParams.append("include[animetheme]", "animethemeentries.videos,anime.images,song.artists,group");
searchParams.append("include[artist]", "images,songs");
searchParams.append("include[playlist]", "user");