♻️ separate machine client & user devices tables + move common functions into hooks

This commit is contained in:
Fred KISSIE
2025-12-02 18:58:51 +01:00
parent 3d400b2321
commit 06a31bb716
12 changed files with 1546 additions and 1110 deletions

View File

@@ -1,11 +1,11 @@
import type { ClientRow } from "@app/components/MachineClientsTable";
import MachineClientsTable from "@app/components/MachineClientsTable";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import { AxiosResponse } from "axios";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { ListClientsResponse } from "@server/routers/client";
import { AxiosResponse } from "axios";
import { getTranslations } from "next-intl/server";
import type { ClientRow } from "@app/components/ClientsTable";
import ClientsTable from "@app/components/ClientsTable";
type ClientsPageProps = {
params: Promise<{ orgId: string }>;
@@ -18,27 +18,16 @@ export default async function ClientsPage(props: ClientsPageProps) {
const t = await getTranslations();
const params = await props.params;
const searchParams = await props.searchParams;
// Default to 'user' view, or use the query param if provided
let defaultView: "user" | "machine" = "user";
defaultView = searchParams.view === "machine" ? "machine" : "user";
let userClients: ListClientsResponse["clients"] = [];
let machineClients: ListClientsResponse["clients"] = [];
try {
const [userRes, machineRes] = await Promise.all([
internal.get<AxiosResponse<ListClientsResponse>>(
`/org/${params.orgId}/clients?filter=user`,
await authCookieHeader()
),
internal.get<AxiosResponse<ListClientsResponse>>(
`/org/${params.orgId}/clients?filter=machine`,
await authCookieHeader()
)
]);
userClients = userRes.data.data.clients;
const machineRes = await internal.get<
AxiosResponse<ListClientsResponse>
>(
`/org/${params.orgId}/clients?filter=machine`,
await authCookieHeader()
);
machineClients = machineRes.data.data.clients;
} catch (e) {}
@@ -71,21 +60,18 @@ export default async function ClientsPage(props: ClientsPageProps) {
};
};
const userClientRows: ClientRow[] = userClients.map(mapClientToRow);
const machineClientRows: ClientRow[] = machineClients.map(mapClientToRow);
return (
<>
<SettingsSectionTitle
title={t("manageClients")}
description={t("manageClientsDescription")}
title={t("manageMachineClients")}
description={t("manageMachineClientsDescription")}
/>
<ClientsTable
userClients={userClientRows}
<MachineClientsTable
machineClients={machineClientRows}
orgId={params.orgId}
defaultView={defaultView}
/>
</>
);

View File

@@ -1,11 +1,3 @@
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import { AxiosResponse } from "axios";
import { ClientRow } from "../../../../components/ClientsTable";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { ListClientsResponse } from "@server/routers/client";
import ClientsTable from "../../../../components/ClientsTable";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
type ClientsPageProps = {
@@ -16,9 +8,6 @@ type ClientsPageProps = {
export const dynamic = "force-dynamic";
export default async function ClientsPage(props: ClientsPageProps) {
const t = await getTranslations();
const params = await props.params;
redirect(`/${params.orgId}/settings/clients/user`);
}

View File

@@ -4,12 +4,11 @@ import { AxiosResponse } from "axios";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { ListClientsResponse } from "@server/routers/client";
import { getTranslations } from "next-intl/server";
import type { ClientRow } from "@app/components/ClientsTable";
import ClientsTable from "@app/components/ClientsTable";
import type { ClientRow } from "@app/components/MachineClientsTable";
import UserDevicesTable from "@app/components/UserDevicesTable";
type ClientsPageProps = {
params: Promise<{ orgId: string }>;
searchParams: Promise<{ view?: string }>;
};
export const dynamic = "force-dynamic";
@@ -18,28 +17,15 @@ export default async function ClientsPage(props: ClientsPageProps) {
const t = await getTranslations();
const params = await props.params;
const searchParams = await props.searchParams;
// Default to 'user' view, or use the query param if provided
let defaultView: "user" | "machine" = "user";
defaultView = searchParams.view === "machine" ? "machine" : "user";
let userClients: ListClientsResponse["clients"] = [];
let machineClients: ListClientsResponse["clients"] = [];
try {
const [userRes, machineRes] = await Promise.all([
internal.get<AxiosResponse<ListClientsResponse>>(
`/org/${params.orgId}/clients?filter=user`,
await authCookieHeader()
),
internal.get<AxiosResponse<ListClientsResponse>>(
`/org/${params.orgId}/clients?filter=machine`,
await authCookieHeader()
)
]);
const userRes = await internal.get<AxiosResponse<ListClientsResponse>>(
`/org/${params.orgId}/clients?filter=user`,
await authCookieHeader()
);
userClients = userRes.data.data.clients;
machineClients = machineRes.data.data.clients;
} catch (e) {}
function formatSize(mb: number): string {
@@ -72,20 +58,17 @@ export default async function ClientsPage(props: ClientsPageProps) {
};
const userClientRows: ClientRow[] = userClients.map(mapClientToRow);
const machineClientRows: ClientRow[] = machineClients.map(mapClientToRow);
return (
<>
<SettingsSectionTitle
title={t("manageClients")}
description={t("manageClientsDescription")}
title={t("manageUserDevices")}
description={t("manageUserDevicesDescription")}
/>
<ClientsTable
<UserDevicesTable
userClients={userClientRows}
machineClients={machineClientRows}
orgId={params.orgId}
defaultView={defaultView}
/>
</>
);