Create/detail updates
This commit is contained in:
parent
b0fb643b6a
commit
0997e449bb
26 changed files with 684 additions and 108 deletions
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { Create } from "./_components/Create";
|
||||
|
||||
export default function Page() {
|
||||
return <Create />;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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} />;
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
};
|
||||
|
|
@ -11,27 +11,19 @@ type FacebookBotsListProps = {
|
|||
export const FacebookBotsList: FC<FacebookBotsListProps> = ({ rows }) => {
|
||||
const columns: GridColDef[] = [
|
||||
{
|
||||
field: "id",
|
||||
headerName: "ID",
|
||||
field: "name",
|
||||
headerName: "Name",
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "phoneNumber",
|
||||
headerName: "Phone Number",
|
||||
field: "description",
|
||||
headerName: "Description",
|
||||
flex: 2,
|
||||
},
|
||||
{
|
||||
field: "createdAt",
|
||||
headerName: "Created At",
|
||||
valueGetter: (params: any) =>
|
||||
new Date(params.row?.createdAt).toLocaleString(),
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
field: "updatedAt",
|
||||
headerName: "Updated At",
|
||||
valueGetter: (params: any) =>
|
||||
new Date(params.row?.updatedAt).toLocaleString(),
|
||||
valueGetter: (value: any) => new Date(value).toLocaleString(),
|
||||
flex: 1,
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { ServiceLayout } from "@/app/_components/ServiceLayout";
|
||||
|
||||
export default ServiceLayout;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export default function Page() {
|
||||
return <h1>Facebook view</h1>;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export default function Page() {
|
||||
return <h1>Facebook view</h1>;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export default function Page() {
|
||||
return <h1>Facebook Home</h1>;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue