Edit and actions updates

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

@@ -1,15 +1,13 @@
 "use client";
 
-import { FC, useEffect } from "react";
+import { FC } 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: {},
@@ -24,17 +22,12 @@ export const Create: FC = () => {
     initialState,
   );
 
-  useEffect(() => {
-    if (formState.success) {
-      router.back();
-    }
-  }, [formState.success, router]);
-
   return (
     <InternalCreate
-      title="Create Facebook Bot"
+      title="Create Facebook Connection"
       entity="facebook"
       formAction={formAction}
+      formState={formState}
     >
       <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
         <Grid item xs={12}>

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

@@ -2,9 +2,10 @@
 
 import { FC } from "react";
 import { Grid } from "@mui/material";
-import { DisplayTextField, Select } from "ui";
+import { DisplayTextField } from "ui";
 import { FacebookBot } from "@/app/_lib/database";
 import { Detail as InternalDetail } from "@/app/_components/Detail";
+import { deleteFacebookBotAction } from "../../_actions/facebook";
 
 type DetailProps = {
   row: FacebookBot;
@@ -12,9 +13,10 @@ type DetailProps = {
 
 export const Detail: FC<DetailProps> = ({ row }) => (
   <InternalDetail
-    title={`Facebook Bot: ${row.name}`}
+    title={`Facebook Connection: ${row.name}`}
     entity="facebook"
     id={row.id}
+    deleteAction={deleteFacebookBotAction}
   >
     <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
       <Grid item xs={12}>

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

@@ -8,12 +8,17 @@ type Props = {
 };
 
 export default async function Page({ params: { segment } }: Props) {
-  const id = segment[0];
+  const id = segment?.[0];
+
+  if (!id) return null;
+
   const row = await db
     .selectFrom("FacebookBot")
     .selectAll()
     .where("id", "=", id)
     .executeTakeFirst();
 
+  if (!row) return null;
+
   return <Detail row={row} />;
 }

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { FacebookBot } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { updateFacebookBotAction } from "../../_actions/facebook";
+
+type EditProps = {
+  row: FacebookBot;
+};
+
+export const Edit: FC<EditProps> = ({ row }) => {
+  const initialState = {
+    message: null,
+    errors: {},
+    values: row,
+  };
+  const [formState, formAction] = useFormState(
+    updateFacebookBotAction,
+    initialState,
+  );
+
+  return (
+    <InternalEdit
+      title={`Edit Facebook Connection: ${row.name}`}
+      entity="facebook"
+      formAction={formAction}
+      formState={formState}
+    >
+      <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="token"
+            label="Token"
+            disabled
+            formState={formState}
+            refreshable
+            helperText="Token used to authenticate requests from Link"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="verifyToken"
+            label="Verify Token"
+            disabled
+            formState={formState}
+            refreshable
+            helperText="Token used to authenticate requests from Facebook"
+          />
+        </Grid>
+
+        <Grid item xs={6}>
+          <TextField
+            name="appId"
+            label="App ID"
+            required
+            formState={formState}
+            helperText="App ID of your approved Facebook application"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="appSecret"
+            label="App Secret"
+            required
+            formState={formState}
+            helperText="App Secret of your approved Facebook application"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="pageId"
+            label="Page ID"
+            required
+            formState={formState}
+            helperText="Page ID of the Facebook page that will receive messages"
+          />
+        </Grid>
+        <Grid item xs={6}>
+          <TextField
+            name="pageAccessToken"
+            label="Page Access Token"
+            required
+            formState={formState}
+            helperText="Access Token of the Facbook page that will receive messages"
+          />
+        </Grid>
+      </Grid>
+    </InternalEdit>
+  );
+};

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

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

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

@@ -1,28 +1,50 @@
 "use server";
 
-import { revalidatePath } from "next/cache";
-import { db } from "@/app/_lib/database";
+import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
+
+const entity = "facebook";
+const table = "FacebookBot";
 
 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,
-  };
+  return addAction({
+    entity,
+    table,
+    fields: [
+      "name",
+      "description",
+      "appId",
+      "appSecret",
+      "pageId",
+      "pageAccessToken",
+    ],
+    currentState,
+    formData,
+  });
+};
+
+export const updateFacebookBotAction = async (
+  currentState: any,
+  formData: FormData,
+) => {
+  return updateAction({
+    entity,
+    table,
+    fields: [
+      "name",
+      "description",
+      "appId",
+      "appSecret",
+      "pageId",
+      "pageAccessToken",
+    ],
+    currentState,
+    formData,
+  });
+};
+
+export const deleteFacebookBotAction = async (id: string) => {
+  return deleteAction({ entity, table, id });
 };

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

@@ -30,7 +30,7 @@ export const FacebookBotsList: FC<FacebookBotsListProps> = ({ rows }) => {
 
   return (
     <List
-      title="Facebook Bots"
+      title="Facebook Connections"
       entity="facebook"
       rows={rows}
       columns={columns}