Refactor task editor to use formik

docs/styles.md

@@ -38,4 +38,4 @@ The kanbn board has a default style which is based on the current vscode theme,
 
 ### Task editor
 
-- `// TODO`
+- `// TODO add task editor classes`

package-lock.json

@@ -6738,6 +6738,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "default-gateway": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-2.7.2.tgz",
@@ -8968,6 +8973,20 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.6.tgz",
+      "integrity": "sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==",
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.14",
+        "lodash-es": "^4.17.14",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -10700,11 +10719,6 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
-    "immer": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.1.tgz",
-      "integrity": "sha512-7CCw1DSgr8kKYXTYOI1qMM/f5qxT5vIVMeGLDCDX8CSxsggr1Sjdoha4OhsP0AZ1UvWbyZlILHvLjaynuu02Mg=="
-    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -12244,6 +12258,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -16792,6 +16811,11 @@
       "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==",
       "dev": true
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -19588,6 +19612,11 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
       "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -19712,8 +19741,7 @@
     "tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-      "dev": true
     },
     "tty-browserify": {
       "version": "0.0.0",

package.json

@@ -32,9 +32,8 @@
     "@basementuniverse/kanbn": "file:~/Projects/kanbn",
     "@types/dateformat": "^3.0.1",
     "dateformat": "^4.5.1",
+    "formik": "^2.2.6",
     "git-user-name": "^2.0.0",
-    "immer": "^9.0.1",
-    "lodash": "^4.17.21",
     "param-case": "^3.0.4",
     "react": "^16.3.2",
     "react-beautiful-dnd": "12.2.0",

src/TaskEditor.tsx

@@ -1,29 +1,10 @@
-import React, { useReducer, useCallback } from "react";
+import React from 'react';
+import { Formik } from 'formik';
 import formatDate from 'dateformat';
-import VSCodeApi from "./VSCodeApi";
+import VSCodeApi from './VSCodeApi';
 import { paramCase } from 'param-case';
-import produce from 'immer';
-import { set, has } from 'lodash';
 import * as gitUsername from 'git-user-name';
 
-// https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937
-function reducer(state, action) {
-  if (action.constructor === Function) {
-    return { ...state, ...action(state) };
-  }
-  if (action.constructor === Object) {
-    if (has(action, "_path") && has(action, "_value")) {
-      const { _path, _value } = action;
-
-      return produce(state, draft => {
-        set(draft, _path, _value);
-      });
-    } else {
-      return { ...state, ...action };
-    }
-  }
-}
-
 const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
   task: KanbnTask|null,
   columnName: string,
@@ -32,7 +13,25 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
   vscode: VSCodeApi
 }) => {
   const editing = task !== null;
-  const [taskData, setTaskData] = useReducer(reducer, {
+
+  // Called when the name field is changed
+  const handleUpdateName = ({ target: { value }}, values) => {
+
+    // Update the id preview
+    values.id = paramCase(value);
+
+    // Update the webview panel title
+    vscode.postMessage({
+      command: 'kanbn.updatePanelTitle',
+      title: value || 'Untitled task'
+    });
+  };
+
+  return (
+    <div className="kanbn-task-editor">
+      <h1 className="kanbn-task-editor-title">{editing ? 'Update task' : 'Create new task'}</h1>
+      <Formik
+        initialValues={{
           id: task ? task.id : '',
           name: task ? task.name : '',
           description: task ? task.description : '',
@@ -46,50 +45,19 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
           relations: [],
           subTasks: [],
           comments: []
-  });
+        }}
-
+        validate={values => {
-  const handleChange = useCallback(({ target: { value, name, type } }) => {
+          const errors: { name?: string } = {};
-    const updatePath = name.split(".");
+          // if (!values.email) {
-
+          //   errors.email = 'Required';
-    // Handle updating checkbox states (depends on previous state)
+          // } else if (
-    if (type === 'checkbox') {
+          //   !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
-      setTaskData((previousState) => ({
+          // ) {
-        [name]: !previousState[name]
+          //   errors.email = 'Invalid email address';
-      }));
+          // }
-      return;
+          return errors;
-    }
+        }}
-
+        onSubmit={(values, { setSubmitting }) => {
-    // Handle updating root-level properties
-    if (updatePath.length === 1) {
-      const [key] = updatePath;
-      const newTaskData = {
-        [key]: value
-      };
-
-      // If the name is updated, generate a new id and set the webview panel title
-      if (key === 'name') {
-        newTaskData['id'] = paramCase(value);
-        vscode.postMessage({
-          command: 'kanbn.updatePanelTitle',
-          title: value || 'Untitled task'
-        });
-      }
-      setTaskData(newTaskData);
-    }
-
-    // Handle updating nested properties using _path and _value
-    if (updatePath.length > 1) {
-      setTaskData({
-        _path: updatePath,
-        _value: value
-      });
-    }
-  }, []);
-
-  const handleSubmit = e => {
-    e.preventDefault();
-    
-    // If a task prop was passed in, we're updating a task, otherwise we're creating a new task
           if (editing) {
             vscode.postMessage({
               command: 'kanbn.update'
@@ -99,12 +67,20 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
               command: 'kanbn.create'
             });
           }
-    console.log(e);
+          console.log(values);
-  };
+          setSubmitting(false);
-
+        }}
-  return (
+      >
-    <form className="kanbn-task-editor" onSubmit={handleSubmit}>
+        {({
-      <h1 className="kanbn-task-editor-title">{editing ? 'Update task' : 'Create new task'}</h1>
+          values,
+          errors,
+          touched,
+          handleChange,
+          handleBlur,
+          handleSubmit,
+          isSubmitting
+        }) => (
+          <form onSubmit={handleSubmit}>
             <div
               style={{
                 display: "flex"
@@ -118,11 +94,16 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
                       className="kanbn-task-field-input"
                       placeholder="Name"
                       name="name"
-                value={taskData.name}
+                      value={values.name}
-                onChange={handleChange}
+                      onChange={e => {
+                        handleChange(e);
+                        handleUpdateName(e, values);
+                      }}
+                      onBlur={handleBlur}
                     ></input>
                   </label>
-            <span className="kanbn-task-id">{taskData.id}</span>
+                  {errors.name && touched.name && errors.name}
+                  <span className="kanbn-task-id">{values.id}</span>
                 </div>
                 <div className="kanbn-task-field kanbn-task-field-description">
                   <label className="kanbn-task-field-label">
@@ -131,8 +112,9 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
                       className="kanbn-task-field-textarea"
                       placeholder="Description"
                       name="description"
-                value={taskData.description}
+                      value={values.description}
                       onChange={handleChange}
+                      onBlur={handleBlur}
                     ></textarea>
                   </label>
                 </div>
@@ -143,16 +125,13 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
                     type="submit"
                     className="kanbn-task-editor-button kanbn-task-editor-button-submit"
                     title="Save"
-            >
+                    disabled={isSubmitting}
-              Save
+                  >Save</button>
-            </button>
                   <button
                     type="button"
                     className="kanbn-task-editor-button kanbn-task-editor-button-delete"
                     title="Delete"
-            >
+                  >Delete</button>
-              Delete
-            </button>
                 </div>
                 <div className="kanbn-task-field kanbn-task-field-column">
                   <label className="kanbn-task-field-label">
@@ -160,8 +139,9 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
                     <select
                       className="kanbn-task-field-select"
                       name="column"
-                value={taskData.column}
+                      value={values.column}
                       onChange={handleChange}
+                      onBlur={handleBlur}
                     >
                       {columnNames.map(c => <option value={c}>{c}</option>)}
                     </select>
@@ -172,9 +152,11 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
                     <p>Assigned to</p>
                     <input
                       className="kanbn-task-field-input"
+                      placeholder="Assigned to"
                       name="metadata.assigned"
-                value={taskData.metadata.assigned}
+                      value={values.metadata.assigned}
                       onChange={handleChange}
+                      onBlur={handleBlur}
                     ></input>
                   </label>
                 </div>
@@ -185,8 +167,9 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
                       type="date"
                       className="kanbn-task-field-input"
                       name="metadata.due"
-                value={taskData.metadata.due}
+                      value={values.metadata.due}
                       onChange={handleChange}
+                      onBlur={handleBlur}
                     ></input>
                   </label>
                 </div>
@@ -197,8 +180,9 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
                       type="number"
                       className="kanbn-task-field-input"
                       name="progress"
-                value={taskData.progress}
+                      value={values.progress}
                       onChange={handleChange}
+                      onBlur={handleBlur}
                       min="0"
                       max="1"
                       step="0.05"
@@ -208,7 +192,10 @@ const TaskEditor = ({ task, columnName, columnNames, dateFormat, vscode }: {
               </div>
             </div>
           </form>
+        )}
+      </Formik>
+    </div>
   );
-}
+};
 
 export default TaskEditor;