Refactor

WCY-dt · May 7, 2024 · b94deb5 · b94deb5
1 parent 9c0220a
commit b94deb5
Showing 1 changed file with 62 additions and 49 deletions.
diff --git a/src/hooks/editContext.tsx b/src/hooks/editContext.tsx
@@ -37,66 +37,79 @@ export const EditProvider = ({ children }: { children: React.ReactNode }) => {
     }
   }, [edit]);
 
-  const onClickClose = () => {
-    setShowEdit(false);
-  }
-
   const routesArray = Object.entries(routes).map(([value, label]) => ({ value, label }));
 
   return (
     <EditContext.Provider value={{ updateEdit: updateEdit, showEdit: showEdit, setShowEdit: setShowEdit }}>
       {children}
       {showEdit ?
-        <div className="Popup">
-          <div className="Edit-title">Edit</div>
-          <div className="Edit-input">
-            <label htmlFor="collection">Collection</label>
-
-            <select id="collection" name="collection">
-              {routesArray.map((route, index) => (
-                <option key={index} value={route.label as string}>
-                  {route.label as string}
-                </option>
-              ))}
-            </select>
-
-            <label htmlFor="title">Title</label>
-            <input type="text" id="title" name="title" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Title : ''} />
-
-            <label htmlFor="url">Url</label>
-            <input type="url" id="url" name="url" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Url : ''} />
-
-            <label htmlFor="category">Category</label>
-            <input type="text" id="category" name="category" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Category : ''} />
-
-            <label htmlFor="description">Description</label>
-            <input type="text" id="description" name="description" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Description : ''} />
-
-            <label htmlFor="detail">Detail</label>
-            <textarea id="detail" name="detail" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Detail : ''} />
-
-            <label htmlFor="links">Links</label>
-            <div className="Edit-links">
-              {edit?.type === 'MODIFY' && edit.cluster?.links?.map((link) => (
-                <div key={link.Url} className="Edit-link">
-                  <input type="text" name="link-title" className="Edit-link-title" defaultValue={link.Title} title="Link Title" />
-                  <input type="url" name="link-url" className="Edit-link-url" defaultValue={link.Url} title="Link URL" />
-                  <Icon icon="ci:trash-full" className="Edit-link-delete"></Icon>
-                </div>
-              ))}
-              <Icon icon="ci:table-add" className="Edit-links-add"></Icon>
-            </div>
-          </div>
-          <button type="button" className="Edit-ok" title="Save edit">Save</button>
-          <button type="button" className="Edit-close" title="Close" onClick={onClickClose}>
-            <Icon icon="ci:close-md" />
-          </button>
-        </div>
+        <EditForm edit={edit} routesArray={routesArray} setShowEdit={setShowEdit} />
         : null}
     </EditContext.Provider>
   );
 };
 
+type EditFormProps = {
+  edit?: EditProps;
+  routesArray: { value: string, label: unknown }[];
+  setShowEdit: (show: boolean) => void;
+}
+
+const EditForm = ({ edit, routesArray, setShowEdit }: EditFormProps) => {
+  const onClickClose = () => {
+    setShowEdit(false);
+  };
+
+  return (
+    <div className="Popup">
+      <div className="Edit-title">Edit</div>
+      <div className="Edit-input">
+        <label htmlFor="collection">Collection</label>
+
+        <select id="collection" name="collection">
+          {routesArray.map((route, index) => (
+            <option key={index} value={route.label as string}>
+              {route.label as string}
+            </option>
+          ))}
+        </select>
+
+        <label htmlFor="title">Title</label>
+        <input type="text" id="title" name="title" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Title : ''} />
+
+        <label htmlFor="url">Url</label>
+        <input type="url" id="url" name="url" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Url : ''} />
+
+        <label htmlFor="category">Category</label>
+        <input type="text" id="category" name="category" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Category : ''} />
+
+        <label htmlFor="description">Description</label>
+        <input type="text" id="description" name="description" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Description : ''} />
+
+        <label htmlFor="detail">Detail</label>
+        <textarea id="detail" name="detail" defaultValue={edit?.type === 'MODIFY' ? edit.cluster?.Detail : ''} />
+
+        <label htmlFor="links">Links</label>
+        <div className="Edit-links">
+          {edit?.type === 'MODIFY' && edit.cluster?.links?.map((link) => (
+            <div key={link.Url} className="Edit-link">
+              <input type="text" name="link-title" className="Edit-link-title" defaultValue={link.Title} title="Link Title" />
+              <input type="url" name="link-url" className="Edit-link-url" defaultValue={link.Url} title="Link URL" />
+              <Icon icon="ci:trash-full" className="Edit-link-delete"></Icon>
+            </div>
+          ))}
+          <Icon icon="ci:table-add" className="Edit-links-add"></Icon>
+        </div>
+      </div>
+      <button type="button" className="Edit-ok" title="Save edit">Save</button>
+      <button type="button" className="Edit-close" title="Close" onClick={onClickClose}>
+        <Icon icon="ci:close-md" />
+      </button>
+    </div>
+  );
+}
+
+
 export const useEdit = () => {
   const context = useContext(EditContext);
   if (!context) {