Create/detail updates

This commit is contained in:
Darren Clarke 2024-04-24 21:44:05 +02:00
parent b0fb643b6a
commit 0997e449bb
26 changed files with 684 additions and 108 deletions

View file

@ -0,0 +1,90 @@
"use client";
import { FC, useEffect } from "react";
import { useFormState } from "react-dom";
import { useRouter } from "next/navigation";
import { Grid } from "@mui/material";
import { TextField } from "ui";
import { Create as InternalCreate } from "@/app/_components/Create";
import { addFacebookBotAction } from "../../_actions/facebook";
export const Create: FC = () => {
const router = useRouter();
const initialState = {
message: null,
errors: {},
values: {
name: "",
description: "",
one: "",
},
};
const [formState, formAction] = useFormState(
addFacebookBotAction,
initialState,
);
useEffect(() => {
if (formState.success) {
router.back();
}
}, [formState.success, router]);
return (
<InternalCreate
title="Create Facebook Bot"
entity="facebook"
formAction={formAction}
>
<Grid container direction="row" rowSpacing={3} columnSpacing={2}>
<Grid item xs={12}>
<TextField name="name" label="Name" required formState={formState} />
</Grid>
<Grid item xs={12}>
<TextField
name="description"
label="Description"
formState={formState}
lines={3}
/>
</Grid>
<Grid item xs={6}>
<TextField
name="appId"
label="App ID"
required
formState={formState}
helperText="Get it from Facebook Developer Console"
/>
</Grid>
<Grid item xs={6}>
<TextField
name="appSecret"
label="App Secret"
required
formState={formState}
helperText="Get it from Facebook Developer Console"
/>
</Grid>
<Grid item xs={6}>
<TextField
name="pageId"
label="Page ID"
required
formState={formState}
helperText="Get it from Facebook Developer Console"
/>
</Grid>
<Grid item xs={6}>
<TextField
name="pageAccessToken"
label="Page Access Token"
required
formState={formState}
helperText="Get it from Facebook Developer Console"
/>
</Grid>
</Grid>
</InternalCreate>
);
};

View file

@ -0,0 +1,5 @@
import { Create } from "./_components/Create";
export default function Page() {
return <Create />;
}

View file

@ -0,0 +1,54 @@
"use client";
import { FC } from "react";
import { Grid } from "@mui/material";
import { DisplayTextField, Select } from "ui";
import { FacebookBot } from "@/app/_lib/database";
import { Detail as InternalDetail } from "@/app/_components/Detail";
type DetailProps = {
row: FacebookBot;
};
export const Detail: FC<DetailProps> = ({ row }) => (
<InternalDetail
title={`Facebook Bot: ${row.name}`}
entity="facebook"
id={row.id}
>
<Grid container direction="row" rowSpacing={3} columnSpacing={2}>
<Grid item xs={12}>
<DisplayTextField name="name" label="Name" value={row.name} />
</Grid>
<Grid item xs={12}>
<DisplayTextField
name="description"
label="Description"
lines={3}
value={row.description}
/>
</Grid>
<Grid item xs={6}>
<DisplayTextField name="appId" label="App ID" value={row.appId} />
</Grid>
<Grid item xs={6}>
<DisplayTextField
name="appSecret"
label="App Secret"
value={row.appSecret}
copyable
/>
</Grid>
<Grid item xs={6}>
<DisplayTextField name="pageId" label="Page ID" value={row.pageId} />
</Grid>
<Grid item xs={6}>
<DisplayTextField
name="pageAccessToken"
label="Page Access Token"
value={row.pageAccessToken}
/>
</Grid>
</Grid>
</InternalDetail>
);

View file

@ -0,0 +1,19 @@
import { db } from "@/app/_lib/database";
import { Detail } from "./_components/Detail";
export const dynamic = "force-dynamic";
type Props = {
params: { segment: string[] };
};
export default async function Page({ params: { segment } }: Props) {
const id = segment[0];
const row = await db
.selectFrom("FacebookBot")
.selectAll()
.where("id", "=", id)
.executeTakeFirst();
return <Detail row={row} />;
}

View file

@ -0,0 +1,28 @@
"use server";
import { revalidatePath } from "next/cache";
import { db } from "@/app/_lib/database";
export const addFacebookBotAction = async (
currentState: any,
formData: FormData,
) => {
const newBot = {
name: formData.get("name")?.toString() ?? null,
description: formData.get("description")?.toString() ?? null,
appId: formData.get("appId")?.toString() ?? null,
appSecret: formData.get("appSecret")?.toString() ?? null,
pageId: formData.get("pageId")?.toString() ?? null,
pageAccessToken: formData.get("pageAccessToken")?.toString() ?? null,
};
await db.insertInto("FacebookBot").values(newBot).execute();
revalidatePath("/facebook");
return {
...currentState,
values: newBot,
success: true,
};
};

View file

@ -0,0 +1,39 @@
"use client";
import { FC } from "react";
import { GridColDef } from "@mui/x-data-grid-pro";
import { List } from "@/app/_components/List";
type FacebookBotsListProps = {
rows: any[];
};
export const FacebookBotsList: FC<FacebookBotsListProps> = ({ rows }) => {
const columns: GridColDef[] = [
{
field: "name",
headerName: "Name",
flex: 1,
},
{
field: "description",
headerName: "Description",
flex: 2,
},
{
field: "updatedAt",
headerName: "Updated At",
valueGetter: (value: any) => new Date(value).toLocaleString(),
flex: 1,
},
];
return (
<List
title="Facebook Bots"
entity="facebook"
rows={rows}
columns={columns}
/>
);
};

View file

@ -0,0 +1,3 @@
import { ServiceLayout } from "@/app/_components/ServiceLayout";
export default ServiceLayout;

View file

@ -0,0 +1,10 @@
import { FacebookBotsList } from "./_components/FacebookBotsList";
import { db } from "@/app/_lib/database";
export const dynamic = "force-dynamic";
export default async function Page() {
const rows = await db.selectFrom("FacebookBot").selectAll().execute();
return <FacebookBotsList rows={rows} />;
}