Generalize WIP

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

@@ -0,0 +1,57 @@
+"use client";
+
+import { FC } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { TextField } from "ui";
+import { Selectable } from "kysely";
+import { Database } from "@/app/_lib/database";
+import { Edit as InternalEdit } from "@/app/_components/Edit";
+import { generateUpdateAction } from "@/app/_lib/actions";
+import { serviceConfig } from "@/app/_lib/config";
+
+type EditProps = {
+  service: string;
+  row: Selectable<keyof Database>;
+};
+
+export const Edit: FC<EditProps> = ({ service, row }) => {
+  const {
+    [service]: { entity, table, displayName, updateFields: fields },
+  } = serviceConfig;
+  const updateFieldNames = fields.map((val) => val.name);
+  const updateAction = generateUpdateAction({ entity, table, fields });
+  const initialState = {
+    message: null,
+    errors: {},
+    values: Object.fromEntries(
+      Object.entries(row).filter(([key]) => updateFieldNames.includes(key)),
+    ),
+  };
+  console.log("initialState", initialState);
+  const [formState, formAction] = useFormState(updateAction, initialState);
+
+  return (
+    <InternalEdit
+      title={`Edit ${displayName}: ${row.name}`}
+      entity={entity}
+      formAction={formAction}
+      formState={formState}
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        {fields.map((field) => (
+          <Grid item xs={field.size ?? 6}>
+            <TextField
+              key={field.name}
+              name={field.name}
+              label={field.label}
+              required={field.required ?? false}
+              formState={formState}
+              helperText={field.helperText}
+            />
+          </Grid>
+        ))}
+      </Grid>
+    </InternalEdit>
+  );
+};