Finish bridge generalization

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

@@ -7,6 +7,7 @@ import { TextField } from "ui";
 import { Create as InternalCreate } from "@/app/_components/Create";
 import { generateCreateAction } from "@/app/_lib/actions";
 import { serviceConfig } from "@/app/_lib/config";
+import { FieldDescription } from "@/app/_lib/service";
 
 type CreateProps = {
   service: string;
@@ -16,18 +17,18 @@ export const Create: FC<CreateProps> = ({ service }) => {
   const {
     [service]: { entity, table, displayName, createFields: fields },
   } = serviceConfig;
-  const createFieldNames = fields.map((val) => val.name);
   const createAction = generateCreateAction({ entity, table, fields });
   const initialState = {
     message: null,
     errors: {},
-    values: createFieldNames.reduce((acc, key) => {
-      // @ts-expect-error
-      acc[key] = fields[key].defaultValue;
-      return acc;
-    }, {}),
+    values: fields.reduce(
+      (acc: Record<string, any>, field: FieldDescription) => {
+        acc[field.name] = field.defaultValue;
+        return acc;
+      },
+      {},
+    ),
   };
-  console.log("initialState", initialState);
   const [formState, formAction] = useFormState(createAction, initialState);
 
   return (
@@ -39,11 +40,11 @@ export const Create: FC<CreateProps> = ({ service }) => {
     >
       <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
         {fields.map((field) => (
-          <Grid item xs={field.size ?? 6}>
+          <Grid key={field.name} item xs={field.size ?? 6}>
             <TextField
-              key={field.name}
               name={field.name}
               label={field.label}
+              lines={field.lines ?? 1}
               required={field.required ?? false}
               formState={formState}
               helperText={field.helperText}

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

@@ -1,9 +1,11 @@
 import { Create } from "./_components/Create";
 
 type PageProps = {
-  params: { service: string };
+  params: { segment: string[] };
 };
 
-export default function Page({ params: { service } }: PageProps) {
+export default function Page({ params: { segment } }: PageProps) {
+  const service = segment[0];
+
   return <Create service={service} />;
 }

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

@@ -29,7 +29,7 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
     >
       <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
         {fields.map((field) => (
-          <Grid item xs={6} key={field.name}>
+          <Grid item xs={field.size ?? 6} key={field.name}>
             <DisplayTextField
               name={field.name}
               label={field.label}

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

@@ -3,11 +3,12 @@ import { serviceConfig } from "@/app/_lib/config";
 import { Detail } from "./_components/Detail";
 
 type Props = {
-  params: { service: string; segment: string[] };
+  params: { segment: string[] };
 };
 
-export default async function Page({ params: { service, segment } }: Props) {
-  const id = segment?.[0];
+export default async function Page({ params: { segment } }: Props) {
+  const service = segment[0];
+  const id = segment?.[1];
 
   if (!id) return null;
 

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

@@ -21,14 +21,15 @@ export const Edit: FC<EditProps> = ({ service, row }) => {
   } = serviceConfig;
   const updateFieldNames = fields.map((val) => val.name);
   const updateAction = generateUpdateAction({ entity, table, fields });
+  const updateValues = Object.fromEntries(
+    Object.entries(row).filter(([key]) => updateFieldNames.includes(key)),
+  );
+  updateValues.id = row.id;
   const initialState = {
     message: null,
     errors: {},
-    values: Object.fromEntries(
-      Object.entries(row).filter(([key]) => updateFieldNames.includes(key)),
-    ),
+    values: updateValues,
   };
-  console.log("initialState", initialState);
   const [formState, formAction] = useFormState(updateAction, initialState);
 
   return (
@@ -40,11 +41,11 @@ export const Edit: FC<EditProps> = ({ service, row }) => {
     >
       <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
         {fields.map((field) => (
-          <Grid item xs={field.size ?? 6}>
+          <Grid key={field.name} item xs={field.size ?? 6}>
             <TextField
-              key={field.name}
               name={field.name}
               label={field.label}
+              lines={field.lines ?? 1}
               required={field.required ?? false}
               formState={formState}
               helperText={field.helperText}

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

@@ -3,13 +3,12 @@ import { serviceConfig } from "@/app/_lib/config";
 import { Edit } from "./_components/Edit";
 
 type PageProps = {
-  params: { service: string; segment: string[] };
+  params: { segment: string[] };
 };
 
-export default async function Page({
-  params: { service, segment },
-}: PageProps) {
-  const id = segment?.[0];
+export default async function Page({ params: { segment } }: PageProps) {
+  const service = segment[0];
+  const id = segment?.[1];
 
   if (!id) return null;
 

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

@@ -1,66 +0,0 @@
-"use server";
-
-import { addAction, updateAction, deleteAction } from "@/app/_lib/actions";
-
-// write a function that returns the addRecordAction
-
-export function generateAddRecordAction(
-  entity: string,
-  table: string,
-  fields: string[],
-) {
-  // The returned function matches the signature of addRecordAction, but uses the parameters from the outer function.
-  return async (currentState: any, formData: FormData) => {
-    return addAction({
-      entity,
-      table,
-      fields,
-      currentState,
-      formData,
-    });
-  };
-}
-
-export const addRecordAction = async (
-  currentState: any,
-  formData: FormData,
-) => {
-  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)/[...segment]/_components/List.tsx

@@ -16,7 +16,7 @@ export const List: FC<ListProps> = ({ service, rows }) => {
 
   return (
     <InternalList
-      title={displayName}
+      title={`${displayName}s`}
       entity={entity}
       rows={rows}
       columns={listColumns}

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

@@ -8,13 +8,13 @@ type ServiceLayoutProps = {
   };
 };
 
-export const ServiceLayout = ({
+export default function ServiceLayout({
   children,
   detail,
   edit,
   create,
   params: { segment },
-}: ServiceLayoutProps) => {
+}: ServiceLayoutProps) {
   const length = segment?.length ?? 0;
   const isCreate = length === 2 && segment[1] === "create";
   const isEdit = length === 3 && segment[2] === "edit";
@@ -29,4 +29,4 @@ export const ServiceLayout = ({
       {isCreate && create}
     </>
   );
-};
+}

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

@@ -1,19 +1,18 @@
-// import { List } from "./_components/List";
-// import { db } from "@/app/_lib/database";
-// import { serviceConfig } from "@/app/_lib/config";
+import { List } from "./_components/List";
+import { db } from "@/app/_lib/database";
+import { serviceConfig } from "@/app/_lib/config";
 
 type PageProps = {
   params: {
-    service: string;
+    segment: string[];
   };
 };
 
-export default async function Page({ params: { service } }: PageProps) {
-  console.log({ service });
+export default async function Page({ params: { segment } }: PageProps) {
+  const service = segment[0];
 
-  return <h1> Nice</h1>;
-  //  const config = serviceConfig[service];
-  //  const rows = await db.selectFrom(config.table).selectAll().execute();
+  const config = serviceConfig[service];
+  const rows = await db.selectFrom(config.table).selectAll().execute();
 
-  //  return <List service={service} rows={rows} />;
+  return <List service={service} rows={rows} />;
 }