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

"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 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);

  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 key={field.name} item xs={field.size ?? 6}>
            <TextField
              name={field.name}
              label={field.label}
              lines={field.lines ?? 1}
              required={field.required ?? false}
              formState={formState}
              helperText={field.helperText}
            />
          </Grid>
        ))}
      </Grid>
    </InternalEdit>
  );
};