From 71a951a9f246eb89bca362052def7e126b704de1 Mon Sep 17 00:00:00 2001 From: Blake Matthes Date: Wed, 5 Mar 2025 20:21:28 -0600 Subject: [PATCH] refactor(settings): refactored the query placement for better reuse --- frontend/package-lock.json | 95 +++++++++++++++++++ .../admin/settings/SettingsPage.tsx | 57 ++++++++--- frontend/src/utils/querys/settings.tsx | 1 + 3 files changed, 138 insertions(+), 15 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3ad8b4f..132084e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,8 +15,10 @@ "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-label": "^2.1.2", + "@radix-ui/react-popover": "^1.1.6", "@radix-ui/react-separator": "^1.1.2", "@radix-ui/react-slot": "^1.1.2", + "@radix-ui/react-tabs": "^1.1.3", "@radix-ui/react-tooltip": "^1.1.8", "@tailwindcss/vite": "^4.0.9", "@tanstack/react-query": "^5.66.9", @@ -24,6 +26,7 @@ "@tanstack/react-table": "^8.21.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "date-fns": "^4.1.0", "dotenv": "^16.4.7", "hono": "^4.7.2", "js-cookie": "^3.0.5", @@ -31,6 +34,7 @@ "lucide-react": "^0.476.0", "next-themes": "^0.4.4", "react": "^19.0.0", + "react-day-picker": "^8.10.1", "react-dom": "^19.0.0", "react-grid-layout": "^1.5.0", "react-hook-form": "^7.54.2", @@ -1546,6 +1550,43 @@ } } }, + "node_modules/@radix-ui/react-popover": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz", + "integrity": "sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dismissable-layer": "1.1.5", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.2", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.2", + "@radix-ui/react-portal": "1.1.4", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-slot": "1.1.2", + "@radix-ui/react-use-controllable-state": "1.1.0", + "aria-hidden": "^1.2.4", + "react-remove-scroll": "^2.6.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popper": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz", @@ -1721,6 +1762,36 @@ } } }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.3.tgz", + "integrity": "sha512-9mFyI30cuRDImbmFF6O2KUJdgEOsGh9Vmx9x/Dh9tOhL7BngmQPQfwW4aejKm5OHpfWIdmeV6ySyuxoOGjtNng==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-roving-focus": "1.1.2", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-tooltip": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz", @@ -3579,6 +3650,16 @@ "dev": true, "license": "MIT" }, + "node_modules/date-fns": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", @@ -5038,6 +5119,20 @@ "node": ">=0.10.0" } }, + "node_modules/react-day-picker": { + "version": "8.10.1", + "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz", + "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==", + "license": "MIT", + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/gpbl" + }, + "peerDependencies": { + "date-fns": "^2.28.0 || ^3.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "19.0.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", diff --git a/frontend/src/components/admin/settings/SettingsPage.tsx b/frontend/src/components/admin/settings/SettingsPage.tsx index 1f6a2f4..05e3f12 100644 --- a/frontend/src/components/admin/settings/SettingsPage.tsx +++ b/frontend/src/components/admin/settings/SettingsPage.tsx @@ -6,6 +6,7 @@ import {useQuery} from "@tanstack/react-query"; import {useRouter} from "@tanstack/react-router"; import {ChangeSetting} from "./SettingForm"; import {getSettings} from "@/utils/querys/settings"; +import {Skeleton} from "@/components/ui/skeleton"; export type Settings = { settings_id?: string; @@ -28,9 +29,9 @@ export default function SettingsPage() { const {data, isError, error, isLoading} = useQuery(getSettings(token ?? "")); - if (isLoading) { - return
Loading.....
; - } + // if (isLoading) { + // return
Loading.....
; + // } if (isError) { return
{JSON.stringify(error)}
; } @@ -43,21 +44,47 @@ export default function SettingsPage() { Name Value + Description Change - - {data?.map((setting: Settings) => ( - - {setting.name} - {setting.value} - {setting.description} - - - - - ))} - + {isLoading ? ( + <> + + {Array(10) + .fill(0) + .map((_, i) => ( + + + + + + + + + + + + + + + ))} + + + ) : ( + + {data?.map((setting: Settings) => ( + + {setting.name} + {setting.value} + {setting.description} + + + + + ))} + + )} ); diff --git a/frontend/src/utils/querys/settings.tsx b/frontend/src/utils/querys/settings.tsx index 29c53b1..a0366af 100644 --- a/frontend/src/utils/querys/settings.tsx +++ b/frontend/src/utils/querys/settings.tsx @@ -13,5 +13,6 @@ export function getSettings(token: string) { const fetchSettings = async (token: string) => { const {data} = await axios.get("/api/server/settings", {headers: {Authorization: `Bearer ${token}`}}); + return data.data; };