gitadmin
/
moviebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add SWR for data fetching and implement useSWRStorage hook: update package.json and package-lock.json to include SWR dependency, and create a custom hook for managing localStorage with SWR for improved data persistence.

This commit is contained in:
Norbert Maciaszek 2025-08-16 13:42:33 +02:00
parent 03b00ad399
commit 7ecbc55843
3 changed files with 65 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
package-lock.json generated
View File

@ -15,7 +15,8 @@
"next": "15.4.5",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-icons": "^5.5.0"
"react-icons": "^5.5.0",
"swr": "^2.3.6"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
@ -2181,6 +2182,15 @@
}
}
},
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/detect-libc": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@ -3184,6 +3194,19 @@
}
}
},
"node_modules/swr": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
"integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==",
"license": "MIT",
"dependencies": {
"dequal": "^2.0.3",
"use-sync-external-store": "^1.4.0"
},
"peerDependencies": {
"react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/tailwindcss": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
@ -3265,6 +3288,15 @@
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
"license": "MIT"
},
"node_modules/use-sync-external-store": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/web-streams-polyfill": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",

3
package.json
View File

@ -16,7 +16,8 @@
"next": "15.4.5",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-icons": "^5.5.0"
"react-icons": "^5.5.0",
"swr": "^2.3.6"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",

30
src/hooks/useSWRStorage/index.ts Normal file
View File

@ -0,0 +1,30 @@
import { useEffect } from "react";
import useSWR, { SWRConfiguration } from "swr";
export const useSWRStorage = (
key: string,
fetcher: (key: string) => Promise<any>,
options: SWRConfiguration = {}
) => {
let fallbackData =
typeof window !== "undefined" &&
JSON.parse(localStorage.getItem(key) || "null");
if (!fallbackData) {
fallbackData = options.fallbackData;
}
const res = useSWR(key, fetcher, {
revalidateOnFocus: false,
...options,
fallbackData,
});
useEffect(() => {
if (res.data) {
localStorage.setItem(key, JSON.stringify(res.data));
}
}, [res.data]);
return res;
};