Create/detail updates

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@create/_components/Create.tsx

@@ -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>
+  );
+};

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@create/page.tsx

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

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@detail/_components/Detail.tsx

@@ -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>
+);

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/@detail/page.tsx

@@ -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} />;
+}

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/_actions/facebook.ts

@@ -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,
+  };
+};

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/_components/FacebookBotsList.tsx

@@ -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,
     },
   ];

apps/bridge-frontend/app/(main)/facebook/[[...segment]]/layout.tsx

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

apps/bridge-frontend/app/(main)/facebook/[id]/edit/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <h1>Facebook view</h1>;
-}

apps/bridge-frontend/app/(main)/facebook/[id]/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <h1>Facebook view</h1>;
-}

apps/bridge-frontend/app/(main)/facebook/new/page.tsx

@@ -1,3 +0,0 @@
-export default function Page() {
-  return <h1>Facebook Home</h1>;
-}

apps/bridge-frontend/app/_components/Create.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { FC } from "react";
+import { Grid } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { Button, Dialog } from "ui";
+
+interface CreateProps {
+  title: string;
+  entity: string;
+  formAction: any;
+  children: any;
+}
+
+export const Create: FC<CreateProps> = ({
+  title,
+  entity,
+  formAction,
+  children,
+}) => {
+  const router = useRouter();
+
+  return (
+    <Dialog
+      open
+      title={title}
+      formAction={formAction}
+      onClose={() => router.push(`/${entity}`)}
+      buttons={
+        <Grid container justifyContent="space-between">
+          <Grid item>
+            <Button
+              text="Cancel"
+              kind="secondary"
+              onClick={() => router.push(`/${entity}`)}
+            />
+          </Grid>
+          <Grid item>
+            <Button text="Save" kind="primary" type="submit" />
+          </Grid>
+        </Grid>
+      }
+    >
+      {children}
+    </Dialog>
+  );
+};

apps/bridge-frontend/app/_components/Detail.tsx

@@ -1,35 +1,46 @@
 "use client";
 
 import { FC } from "react";
-import { Grid, Box, Dialog } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { typography } from "@/app/_styles/theme";
+import { Dialog, Button } from "ui";
 
 interface DetailProps {
   title: string;
   entity: string;
+  id: string;
   children: any;
 }
 
-export const Detail: FC<DetailProps> = ({ title, entity, children }) => {
+export const Detail: FC<DetailProps> = ({ title, entity, id, children }) => {
   const router = useRouter();
-  const { h3 } = typography;
 
   return (
     <Dialog
-      open={true}
+      open
+      title={title}
       onClose={() => router.push(`/${entity}`)}
-      fullScreen
-      sx={{ backgroundColor: "#ddd" }}
-    >
-      <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
-        <Grid container direction="column">
-          <Grid item>
-            <Box sx={h3}>{title}</Box>
+      buttons={
+        <Grid container justifyContent="space-between">
+          <Grid item container xs="auto" spacing={2}>
+            <Grid item>
+              <Button text="Delete" kind="destructive" />
+            </Grid>
+            <Grid item>
+              <Button
+                text="Edit"
+                kind="secondary"
+                href={`/${entity}/${id}/edit`}
+              />
+            </Grid>
+          </Grid>
+          <Grid item>
+            <Button text="Done" kind="primary" href={`/${entity}`} />
           </Grid>
-          <Grid item>{children}</Grid>
         </Grid>
-      </Box>
+      }
+    >
+      {children}
     </Dialog>
   );
 };

apps/bridge-frontend/app/_components/List.tsx

@@ -3,7 +3,8 @@
 import { FC } from "react";
 import { GridColDef } from "@mui/x-data-grid-pro";
 import { useRouter } from "next/navigation";
-import { List as InternalList } from "ui";
+import { List as InternalList, Button } from "ui";
+import { colors } from "ui";
 
 interface ListProps {
   title: string;
@@ -14,6 +15,7 @@ interface ListProps {
 
 export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
   const router = useRouter();
+  const { mediumBlue } = colors;
 
   const onRowClick = (id: string) => {
     router.push(`/${entity}/${id}`);
@@ -25,6 +27,9 @@ export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
       rows={rows}
       columns={columns}
       onRowClick={onRowClick}
+      buttons={
+        <Button text="New" color={mediumBlue} href={`/${entity}/create`} />
+      }
     />
   );
 };

apps/bridge-frontend/app/_components/ServiceLayout.tsx

@@ -0,0 +1,33 @@
+type ServiceLayoutProps = {
+  children: any;
+  detail: any;
+  edit: any;
+  create: any;
+  params: {
+    segment: string[];
+  };
+};
+
+export const ServiceLayout = ({
+  children,
+  detail,
+  edit,
+  create,
+  params: { segment },
+}: ServiceLayoutProps) => {
+  const length = segment?.length ?? 0;
+  const isCreate = length === 1 && segment[0] === "create";
+  const isEdit = length === 2 && segment[1] === "edit";
+  const id = length > 0 && !isCreate ? segment[0] : null;
+  const isDetail = length === 1 && !!id && !isCreate && !isEdit;
+
+  console.log({ isCreate, isEdit, isDetail, id });
+  return (
+    <>
+      {children}
+      {isDetail && detail}
+      {isEdit && edit}
+      {isCreate && create}
+    </>
+  );
+};

apps/bridge-frontend/app/_lib/database.ts

@@ -1,8 +1,14 @@
 import { PostgresDialect, CamelCasePlugin } from "kysely";
-import type { GeneratedAlways } from "kysely";
-import { Pool } from "pg";
+import type { GeneratedAlways, Generated, ColumnType } from "kysely";
+import { Pool, types } from "pg";
 import { KyselyAuth } from "@auth/kysely-adapter";
 
+type Timestamp = ColumnType<Date, Date | string>;
+
+types.setTypeParser(types.builtins.TIMESTAMPTZ, (val) =>
+  new Date(val).toISOString(),
+);
+
 type GraphileJob = {
   taskIdentifier: string;
   payload: Record<string, any>;
@@ -64,10 +70,18 @@ export interface Database {
 
   FacebookBot: {
     id: GeneratedAlways<string>;
-    name: string;
-    createdBy: string;
-    createdAt: Date;
-    updatedAt: Date;
+    name: string | null;
+    description: string | null;
+    token: string | null;
+    pageAccessToken: string | null;
+    appSecret: string | null;
+    verifyToken: string | null;
+    pageId: string | null;
+    appId: string | null;
+    userId: string | null;
+    isVerified: Generated<boolean>;
+    createdAt: GeneratedAlways<Timestamp>;
+    updatedAt: GeneratedAlways<Timestamp>;
   };
 
   VoiceLine: {

apps/bridge-frontend/database/migrations/0005-add-facebook.ts

@@ -6,11 +6,15 @@ export async function up(db: Kysely<any>): Promise<void> {
     .addColumn("id", "uuid", (col) =>
       col.primaryKey().defaultTo(sql`gen_random_uuid()`),
     )
-    .addColumn("phone_number", "text")
-    .addColumn("token", "text", (col) => col.unique().notNull())
-    .addColumn("user_id", "uuid")
+    .addColumn("name", "text")
     .addColumn("description", "text")
-    .addColumn("auth_info", "text")
+    .addColumn("token", "text")
+    .addColumn("page_access_token", "text")
+    .addColumn("app_secret", "text")
+    .addColumn("verify_token", "text")
+    .addColumn("page_id", "text")
+    .addColumn("app_id", "text")
+    .addColumn("user_id", "uuid")
     .addColumn("is_verified", "boolean", (col) =>
       col.notNull().defaultTo(false),
     )