Refactoring 2

packages/bridge-ui/components/Create.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { FC, useEffect, useState } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { Button, Dialog, TextField, Select, MultiValueField } from "ui";
+import { generateCreateAction } from "../lib/actions";
+import { FieldDescription } from "../lib/service";
+import { serviceConfig } from "../config/config";
+
+type CreateProps = {
+  service: string;
+};
+
+export const Create: FC<CreateProps> = ({ service }) => {
+  const {
+    [service]: { entity, table, displayName, createFields },
+  } = serviceConfig;
+  const fields = createFields.map((field: any) => {
+    const copy = { ...field };
+    Object.keys(copy).forEach((key: any) => {
+      if (typeof copy[key] === "function") {
+        delete copy[key];
+      }
+    });
+    return copy;
+  });
+
+  const createAction = generateCreateAction({ entity, table, fields });
+  const initialState = {
+    message: null,
+    errors: {},
+    values: fields.reduce(
+      (acc: Record<string, any>, field: FieldDescription) => {
+        acc[field.name] = field.defaultValue;
+        return acc;
+      },
+      {},
+    ),
+  };
+  const [formState, formAction] = useFormState(createAction, initialState);
+  const [liveFormState, setLiveFormState] = useState(formState);
+  const updateFormState = (field: string, value: any) => {
+    const newState = { ...liveFormState };
+    newState.values[field] = value;
+    setLiveFormState(newState);
+  };
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (formState.success) {
+      router.push(`/${entity}/${formState.values.id}`);
+    }
+  }, [formState.success, router, entity, formState.values.id]);
+
+  return (
+    <Dialog
+      open
+      title={`Create ${displayName}`}
+      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>
+      }
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        {createFields.map(
+          (field: FieldDescription) =>
+            !field.hidden && (
+              <Grid key={field.name} item xs={field.size ?? 6}>
+                {field.kind === "select" && (
+                  <Select
+                    name={field.name}
+                    label={field.label}
+                    required={field.required ?? false}
+                    formState={liveFormState}
+                    getOptions={field.getOptions}
+                    updateFormState={updateFormState}
+                  />
+                )}
+                {field.kind === "multi" && (
+                  <MultiValueField
+                    name={field.name}
+                    label={field.label}
+                    formState={formState}
+                    helperText={field.helperText}
+                  />
+                )}
+                {(!field.kind || field.kind === "text") && (
+                  <TextField
+                    name={field.name}
+                    label={field.label}
+                    lines={field.lines ?? 1}
+                    required={field.required ?? false}
+                    formState={formState}
+                    helperText={field.helperText}
+                  />
+                )}
+              </Grid>
+            ),
+        )}
+      </Grid>
+    </Dialog>
+  );
+};

packages/bridge-ui/components/DeleteDialog.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { typography } from "@/styles/theme";
+
+interface DeleteDialogProps {
+  title: string;
+  entity: string;
+  children: any;
+}
+
+export const DeleteDialog: FC<DeleteDialogProps> = ({
+  title,
+  entity,
+  children,
+}) => {
+  const router = useRouter();
+
+  const { h3 } = typography;
+
+  return (
+    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+      <Grid container direction="column">
+        <Grid item>
+          <Box sx={h3}>{title}</Box>
+        </Grid>
+        <Grid item>{children}</Grid>
+      </Grid>
+    </Box>
+  );
+};

packages/bridge-ui/components/Detail.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { FC, useState } from "react";
+import { Grid, Box } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { DisplayTextField, Button, Dialog, colors, typography } from "ui";
+import { Selectable } from "kysely";
+import { type Database } from "bridge-common";
+import { generateDeleteAction } from "../lib/actions";
+import { serviceConfig } from "../config/config";
+import { FieldDescription } from "../lib/service";
+
+type DetailProps = {
+  service: string;
+  row: Selectable<keyof Database>;
+};
+
+export const Detail: FC<DetailProps> = ({ service, row }) => {
+  const {
+    [service]: { entity, table, displayName, displayFields: fields },
+  } = serviceConfig;
+  const id = row.id as string;
+  const deleteAction = generateDeleteAction({ entity, table });
+  const router = useRouter();
+  const { almostBlack } = colors;
+  const { bodyLarge } = typography;
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+
+  const continueDeleteAction = async () => {
+    await deleteAction?.(id);
+    setShowDeleteConfirmation(false);
+    router.push(`/${entity}`);
+  };
+
+  return (
+    <>
+      <Dialog
+        open
+        title={`${displayName} Detail`}
+        onClose={() => router.push(`/${entity}`)}
+        buttons={
+          <Grid container justifyContent="space-between">
+            <Grid item container xs="auto" spacing={2}>
+              <Grid item>
+                <Button
+                  text="Delete"
+                  kind="destructive"
+                  onClick={() => setShowDeleteConfirmation(true)}
+                />
+              </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>
+        }
+      >
+        <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+          {fields.map((field: FieldDescription) => (
+            <Grid item xs={field.size ?? 6} key={field.name}>
+              <DisplayTextField
+                name={field.name}
+                label={field.label}
+                lines={field.lines ?? 1}
+                value={row[field.name] as string}
+                copyable={field.copyable ?? false}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Dialog>
+      <Dialog
+        open={showDeleteConfirmation}
+        size="xs"
+        title="Really delete?"
+        buttons={
+          <Grid container justifyContent="space-between">
+            <Grid item>
+              <Button
+                text="Cancel"
+                kind="secondary"
+                onClick={() => setShowDeleteConfirmation(false)}
+              />
+            </Grid>
+            <Grid item>
+              <Button
+                text="Delete"
+                kind="destructive"
+                onClick={continueDeleteAction}
+              />
+            </Grid>
+          </Grid>
+        }
+      >
+        <Box sx={{ ...bodyLarge, color: almostBlack }}>
+          Are you sure you want to delete this record?
+        </Box>
+      </Dialog>
+    </>
+  );
+};

packages/bridge-ui/components/Edit.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { FC, useEffect, useState } from "react";
+import { useFormState } from "react-dom";
+import { Grid } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { TextField, Dialog, Button, Select, MultiValueField } from "ui";
+import { Selectable } from "kysely";
+import { type Database } from "bridge-common";
+import { generateUpdateAction } from "../lib/actions";
+import { serviceConfig } from "../config/config";
+import { FieldDescription } from "../lib/service";
+
+type EditProps = {
+  service: string;
+  row: Selectable<keyof Database>;
+};
+
+export const Edit: FC<EditProps> = ({ service, row }) => {
+  const {
+    [service]: { entity, table, displayName, updateFields },
+  } = serviceConfig;
+  const fields = updateFields.map((field: any) => {
+    const copy = { ...field };
+    Object.keys(copy).forEach((key: any) => {
+      if (typeof copy[key] === "function") {
+        delete copy[key];
+      }
+    });
+    return copy;
+  });
+  const updateFieldNames = fields.map((val: FieldDescription) => 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: updateValues,
+  };
+  const [formState, formAction] = useFormState(updateAction, initialState);
+  const router = useRouter();
+  const [liveFormState, setLiveFormState] = useState(formState);
+  const updateFormState = (field: string, value: any) => {
+    const newState = { ...liveFormState };
+    newState.values[field] = value;
+    setLiveFormState(newState);
+  };
+
+  useEffect(() => {
+    if (formState.success) {
+      router.push(`/${entity}`);
+    }
+  }, [formState.success, router, entity]);
+
+  return (
+    <Dialog
+      open
+      title={`Edit ${displayName}`}
+      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>
+      }
+    >
+      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
+        {updateFields.map((field: FieldDescription) => (
+          <Grid key={field.name} item xs={field.size ?? 6}>
+            {field.kind === "select" && (
+              <Select
+                name={field.name}
+                label={field.label}
+                required={field.required ?? false}
+                formState={liveFormState}
+                getOptions={field.getOptions}
+                updateFormState={updateFormState}
+              />
+            )}
+            {field.kind === "multi" && (
+              <MultiValueField
+                name={field.name}
+                label={field.label}
+                formState={formState}
+                helperText={field.helperText}
+              />
+            )}
+            {(!field.kind || field.kind === "text") && (
+              <TextField
+                name={field.name}
+                label={field.label}
+                lines={field.lines ?? 1}
+                required={field.required ?? false}
+                formState={formState}
+                helperText={field.helperText}
+              />
+            )}
+          </Grid>
+        ))}
+      </Grid>
+    </Dialog>
+  );
+};

packages/bridge-ui/components/List.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { FC } from "react";
+import { useRouter } from "next/navigation";
+import { List as InternalList, Button } from "ui";
+import { type Selectable } from "kysely";
+import { type Database } from "bridge-common";
+import { serviceConfig } from "../config/config";
+
+type ListProps = {
+  service: string;
+  rows: Selectable<keyof Database>[];
+};
+
+export const List: FC<ListProps> = ({ service, rows }) => {
+  const { displayName, entity, listColumns } = serviceConfig[service];
+  const title = `${displayName}s`;
+  const router = useRouter();
+
+  const onRowClick = (id: string) => {
+    router.push(`/${entity}/${id}`);
+  };
+
+  return (
+    <InternalList
+      title={title}
+      rows={rows}
+      columns={listColumns}
+      onRowClick={onRowClick}
+      buttons={
+        <Button text="Create" kind="primary" href={`/${entity}/create`} />
+      }
+    />
+  );
+};

packages/bridge-ui/components/ServiceLayout.tsx

@@ -0,0 +1,32 @@
+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 === 2 && segment[1] === "create";
+  const isEdit = length === 3 && segment[2] === "edit";
+  const id = length > 0 && !isCreate ? segment[1] : null;
+  const isDetail = length === 2 && !!id && !isCreate && !isEdit;
+
+  return (
+    <>
+      {children}
+      {isDetail && detail}
+      {isEdit && edit}
+      {isCreate && create}
+    </>
+  );
+};