cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor(settings): refactored the query placement for better reuse

Browse Source
This commit is contained in:
Blake Matthes
2025-03-05 20:21:28 -06:00
parent fda0719d87
commit 71a951a9f2
3 changed files with 138 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/components/admin/settings/SettingsPage.tsx
View File

@@ -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 <div>Loading.....</div>;
}
// if (isLoading) {
// return <div>Loading.....</div>;
// }
if (isError) {
return <div>{JSON.stringify(error)}</div>;
}
@@ -43,21 +44,47 @@ export default function SettingsPage() {
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Value</TableHead>
<TableHead>Description</TableHead>
<TableHead>Change</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data?.map((setting: Settings) => (
<TableRow key={setting.settings_id}>
<TableCell className="font-medium">{setting.name}</TableCell>
<TableCell className="font-medium">{setting.value}</TableCell>
<TableCell className="font-medium">{setting.description}</TableCell>
<TableCell className="font-medium">
<ChangeSetting setting={setting} />
</TableCell>
</TableRow>
))}
</TableBody>
{isLoading ? (
<>
<TableBody>
{Array(10)
.fill(0)
.map((_, i) => (
<TableRow key={i}>
<TableCell className="font-medium">
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
</TableRow>
))}
</TableBody>
</>
) : (
<TableBody>
{data?.map((setting: Settings) => (
<TableRow key={setting.settings_id}>
<TableCell className="font-medium">{setting.name}</TableCell>
<TableCell className="font-medium">{setting.value}</TableCell>
<TableCell className="font-medium">{setting.description}</TableCell>
<TableCell className="font-medium">
<ChangeSetting setting={setting} />
</TableCell>
</TableRow>
))}
</TableBody>
)}
</Table>
</LstCard>
);