Refactoring 2

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