From d6a2c0682c06ca605583b37928f50449f0ab6cef Mon Sep 17 00:00:00 2001
From: Ryo Okubo <syucream1031@gmail.com>
Date: Sat, 29 Apr 2023 19:28:14 +0900
Subject: [PATCH] Simplify EntityForm state

---
 .../src/components/entry/EntryForm.test.tsx   | 11 +++-
 frontend/src/components/entry/EntryForm.tsx   | 36 ++++++-------
 .../entryForm/AttributeValueField.test.tsx    | 25 ++-------
 .../entry/entryForm/AttributeValueField.tsx   | 52 +++++++------------
 frontend/src/pages/EditEntryPage.tsx          | 18 +++----
 5 files changed, 60 insertions(+), 82 deletions(-)

diff --git a/frontend/src/components/entry/EntryForm.test.tsx b/frontend/src/components/entry/EntryForm.test.tsx
index fb11d0e79..ecda4d69c 100644
--- a/frontend/src/components/entry/EntryForm.test.tsx
+++ b/frontend/src/components/entry/EntryForm.test.tsx
@@ -17,6 +17,15 @@ test("should render a component with essential props", function () {
     schema: { id: 0, name: "testEntity" },
     attrs: {},
   };
+  const entity = {
+    id: 2,
+    name: "bbb",
+    note: "",
+    isToplevel: false,
+    attrs: [],
+    webhooks: [],
+  };
+
   const setIsAnchorLink = () => {
     /* do nothing */
   };
@@ -27,7 +36,7 @@ test("should render a component with essential props", function () {
     });
     return (
       <EntryForm
-        entryInfo={entryInfo}
+        entity={entity}
         setIsAnchorLink={setIsAnchorLink}
         control={control}
         setValue={setValue}
diff --git a/frontend/src/components/entry/EntryForm.tsx b/frontend/src/components/entry/EntryForm.tsx
index 1c0a6ea0b..4f0dc3ecd 100644
--- a/frontend/src/components/entry/EntryForm.tsx
+++ b/frontend/src/components/entry/EntryForm.tsx
@@ -20,6 +20,8 @@ import { Control, Controller } from "react-hook-form";
 import { UseFormSetValue } from "react-hook-form/dist/types/form";
 import { useLocation } from "react-router-dom";
 
+import { EntityDetail } from "../../apiclient/autogenerated";
+
 import { AttributeValueField } from "components/entry/entryForm/AttributeValueField";
 import { Schema } from "components/entry/entryForm/EntryFormSchema";
 
@@ -47,15 +49,14 @@ const RequiredLabel = styled(Typography)(({}) => ({
 }));
 
 export interface EntryFormProps {
-  // TODO simplify props more
-  entryInfo: Schema;
+  entity: EntityDetail;
   setIsAnchorLink: Dispatch<SetStateAction<boolean>>;
   control: Control<Schema>;
   setValue: UseFormSetValue<Schema>;
 }
 
 export const EntryForm: FC<EntryFormProps> = ({
-  entryInfo,
+  entity,
   setIsAnchorLink,
   control,
   setValue,
@@ -82,14 +83,14 @@ export const EntryForm: FC<EntryFormProps> = ({
             <ArrowDropDownIcon sx={{ color: "black", padding: "0 4px" }} />
           </AnchorLinkButton>
         </Box>
-        {Object.entries(entryInfo.attrs).map(([attrId, attrValue]) => (
-          <Box key={attrId} m="8px">
+        {entity.attrs.map(({ id, name }) => (
+          <Box key={id} m="8px">
             <AnchorLinkButton
-              href={`#attrs-${attrValue.schema.name}`}
+              href={`#attrs-${name}`}
               onClick={() => setIsAnchorLink(true)}
             >
               <Typography sx={{ color: "black", padding: "0 4px" }}>
-                {attrValue.schema.name}
+                {name}
               </Typography>
               <ArrowDropDownIcon sx={{ color: "black" }} />
             </AnchorLinkButton>
@@ -134,30 +135,27 @@ export const EntryForm: FC<EntryFormProps> = ({
               />
             </TableCell>
           </TableRow>
-          {Object.entries(entryInfo.attrs)
-            .sort((a, b) => a[1].index - b[1].index)
-            .map(([attrId, attrValue]) => (
-              <TableRow key={attrId}>
+          {entity.attrs
+            .sort((a, b) => a.index - b.index)
+            .map(({ id, name, type, isMandatory }) => (
+              <TableRow key={id}>
                 <TableCell>
                   <Box display="flex" alignItems="center">
                     {/* an anchor link adjusted fixed headers etc. */}
                     <Link
-                      id={`attrs-${attrValue.schema.name}`}
+                      id={`attrs-${name}`}
                       sx={{ marginTop: "-500px", paddingTop: "500px" }}
                     />
-                    <Typography flexGrow={1}>
-                      {attrValue.schema.name}
-                    </Typography>
-                    {attrValue.isMandatory && (
-                      <RequiredLabel>必須</RequiredLabel>
-                    )}
+                    <Typography flexGrow={1}>{name}</Typography>
+                    {isMandatory && <RequiredLabel>必須</RequiredLabel>}
                   </Box>
                 </TableCell>
                 <TableCell>
                   <AttributeValueField
                     control={control}
                     setValue={setValue}
-                    attrInfo={attrValue}
+                    type={type}
+                    schemaId={id}
                   />
                 </TableCell>
               </TableRow>
diff --git a/frontend/src/components/entry/entryForm/AttributeValueField.test.tsx b/frontend/src/components/entry/entryForm/AttributeValueField.test.tsx
index 68f6fbefa..87ce66537 100644
--- a/frontend/src/components/entry/entryForm/AttributeValueField.test.tsx
+++ b/frontend/src/components/entry/entryForm/AttributeValueField.test.tsx
@@ -9,7 +9,6 @@ import { DjangoContext } from "../../../services/DjangoContext";
 import { ReactHookFormTestWrapper } from "../../../services/ReactHookFormTestWrapper";
 
 import { AttributeValueField } from "./AttributeValueField";
-import { EditableEntryAttrValue } from "./EditableEntry";
 import { Schema } from "./EntryFormSchema";
 
 beforeAll(() => {
@@ -120,16 +119,8 @@ attributes.forEach((attribute) => {
           <AttributeValueField
             control={control}
             setValue={setValue}
-            attrInfo={{
-              index: 0,
-              value: attrValue as EditableEntryAttrValue,
-              type: attrType,
-              isMandatory: false,
-              schema: {
-                id: 9999,
-                name: "hoge",
-              },
-            }}
+            type={attrType}
+            schemaId={9999}
           />
         )}
       />
@@ -157,16 +148,8 @@ arrayAttributes.forEach((arrayAttribute) => {
           <AttributeValueField
             control={control}
             setValue={setValue}
-            attrInfo={{
-              index: 0,
-              value: attrValue as EditableEntryAttrValue,
-              type: attrType,
-              isMandatory: false,
-              schema: {
-                id: 9999,
-                name: "hoge",
-              },
-            }}
+            type={attrType}
+            schemaId={9999}
           />
         )}
       />
diff --git a/frontend/src/components/entry/entryForm/AttributeValueField.tsx b/frontend/src/components/entry/entryForm/AttributeValueField.tsx
index 1294a731d..fb5dcbfbb 100644
--- a/frontend/src/components/entry/entryForm/AttributeValueField.tsx
+++ b/frontend/src/components/entry/entryForm/AttributeValueField.tsx
@@ -4,7 +4,6 @@ import { UseFormSetValue } from "react-hook-form/dist/types/form";
 
 import { BooleanAttributeValueField } from "./BooleanAttributeValueField";
 import { DateAttributeValueField } from "./DateAttributeValueField";
-import { EditableEntryAttrs } from "./EditableEntry";
 import { Schema } from "./EntryFormSchema";
 import { GroupAttributeValueField } from "./GroupAttributeValueField";
 import {
@@ -21,32 +20,29 @@ import {
 import { DjangoContext } from "services/DjangoContext";
 
 interface Props {
-  attrInfo: EditableEntryAttrs;
   control: Control<Schema>;
   setValue: UseFormSetValue<Schema>;
+  type: number;
+  schemaId: number;
 }
 
 export const AttributeValueField: FC<Props> = ({
-  attrInfo,
   control,
   setValue,
+  type,
+  schemaId,
 }) => {
   const djangoContext = DjangoContext.getInstance();
 
-  switch (attrInfo.type) {
+  switch (type) {
     case djangoContext?.attrTypeValue.string:
-      return (
-        <StringAttributeValueField
-          control={control}
-          attrId={attrInfo.schema.id}
-        />
-      );
+      return <StringAttributeValueField control={control} attrId={schemaId} />;
 
     case djangoContext?.attrTypeValue.text:
       return (
         <StringAttributeValueField
           control={control}
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           multiline
         />
       );
@@ -54,24 +50,19 @@ export const AttributeValueField: FC<Props> = ({
     case djangoContext?.attrTypeValue.date:
       return (
         <DateAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
         />
       );
 
     case djangoContext?.attrTypeValue.boolean:
-      return (
-        <BooleanAttributeValueField
-          attrId={attrInfo.schema.id}
-          control={control}
-        />
-      );
+      return <BooleanAttributeValueField attrId={schemaId} control={control} />;
 
     case djangoContext?.attrTypeValue.object:
       return (
         <ObjectAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
         />
@@ -80,7 +71,7 @@ export const AttributeValueField: FC<Props> = ({
     case djangoContext?.attrTypeValue.group:
       return (
         <GroupAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
         />
@@ -89,7 +80,7 @@ export const AttributeValueField: FC<Props> = ({
     case djangoContext?.attrTypeValue.role:
       return (
         <RoleAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
         />
@@ -98,7 +89,7 @@ export const AttributeValueField: FC<Props> = ({
     case djangoContext?.attrTypeValue.named_object:
       return (
         <NamedObjectAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
         />
@@ -107,7 +98,7 @@ export const AttributeValueField: FC<Props> = ({
     case djangoContext?.attrTypeValue.array_object:
       return (
         <ObjectAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
           multiple
@@ -117,7 +108,7 @@ export const AttributeValueField: FC<Props> = ({
     case djangoContext?.attrTypeValue.array_group:
       return (
         <GroupAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
           multiple
@@ -127,7 +118,7 @@ export const AttributeValueField: FC<Props> = ({
     case djangoContext?.attrTypeValue.array_role:
       return (
         <RoleAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
           multiple
@@ -136,16 +127,13 @@ export const AttributeValueField: FC<Props> = ({
 
     case djangoContext?.attrTypeValue.array_string:
       return (
-        <ArrayStringAttributeValueField
-          control={control}
-          attrId={attrInfo.schema.id}
-        />
+        <ArrayStringAttributeValueField control={control} attrId={schemaId} />
       );
 
     case djangoContext?.attrTypeValue.array_named_object:
       return (
         <ArrayNamedObjectAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
         />
@@ -154,7 +142,7 @@ export const AttributeValueField: FC<Props> = ({
     case djangoContext?.attrTypeValue.array_named_object_boolean:
       return (
         <ArrayNamedObjectAttributeValueField
-          attrId={attrInfo.schema.id}
+          attrId={schemaId}
           control={control}
           setValue={setValue}
           withBoolean
@@ -162,6 +150,6 @@ export const AttributeValueField: FC<Props> = ({
       );
 
     default:
-      throw new Error(`Unknown attribute type: ${attrInfo.type}`);
+      throw new Error(`Unknown attribute type: ${type}`);
   }
 };
diff --git a/frontend/src/pages/EditEntryPage.tsx b/frontend/src/pages/EditEntryPage.tsx
index 96fedf7a9..06c8fa3e9 100644
--- a/frontend/src/pages/EditEntryPage.tsx
+++ b/frontend/src/pages/EditEntryPage.tsx
@@ -44,8 +44,8 @@ export const EditEntryPage: FC<Props> = ({
   const history = useHistory();
   const { enqueueSubmitResult } = useFormNotification("エントリ", willCreate);
 
-  const [entryInfo, setEntryInfo] = useState<Schema>();
   const [isAnchorLink, setIsAnchorLink] = useState<boolean>(false);
+  const [initialized, setInitialized] = useState(false);
 
   const {
     formState: { isValid, isDirty, isSubmitting, isSubmitSuccessful },
@@ -72,13 +72,13 @@ export const EditEntryPage: FC<Props> = ({
   useEffect(() => {
     if (willCreate) {
       if (!entity.loading && entity.value != null) {
-        const _entryInfo = formalizeEntryInfo(
+        const entryInfo = formalizeEntryInfo(
           undefined,
           entity.value,
           excludeAttrs
         );
-        reset(_entryInfo);
-        setEntryInfo(_entryInfo);
+        reset(entryInfo);
+        setInitialized(true);
       }
     } else {
       if (
@@ -87,13 +87,13 @@ export const EditEntryPage: FC<Props> = ({
         !entry.loading &&
         entry.value != null
       ) {
-        const _entryInfo = formalizeEntryInfo(
+        const entryInfo = formalizeEntryInfo(
           entry.value,
           entity.value,
           excludeAttrs
         );
-        reset(_entryInfo);
-        setEntryInfo(_entryInfo);
+        reset(entryInfo);
+        setInitialized(true);
       }
     }
   }, [willCreate, entity.value, entry.value]);
@@ -175,9 +175,9 @@ export const EditEntryPage: FC<Props> = ({
         />
       </PageHeader>
 
-      {entryInfo && (
+      {initialized && entity.value != null && (
         <EntryForm
-          entryInfo={entryInfo}
+          entity={entity.value}
           setIsAnchorLink={setIsAnchorLink}
           control={control}
           setValue={setValue}