CLEANUP Refactored note upsert to use redux modals.

client/src/components/note-upsert-modal/note-upsert-modal.component.jsx

@@ -1,58 +1,41 @@
-import { Input, Modal, Switch } from "antd";
+import { Form, Input, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-export default function NoteUpsertModalComponent({
-  visible,
-  changeVisibility,
-  noteState,
-  setNoteState,
-  updateExistingNote,
-  insertNewNote
-}) {
+export default function NoteUpsertModalComponent() {
   const { t } = useTranslation();
 
   return (
-    <Modal
-      title={noteState.id ? t("notes.actions.edit") : t("notes.actions.new")}
-      visible={visible}
-      okText={t("general.actions.save")}
-      onOk={() => {
-        noteState.id ? updateExistingNote() : insertNewNote();
-      }}
-      onCancel={() => {
-        changeVisibility(false);
-      }}
-    >
-      <div>
-        {t("notes.fields.critical")}
-        <Switch
-          title={t("notes.fields.critical")}
-          checked={noteState.critical}
-          onChange={checked => {
-            setNoteState({ ...noteState, critical: checked });
-          }}
+    <div>
+      <Form.Item
+        label={t("notes.fields.critical")}
+        name="critical"
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        label={t("notes.fields.private")}
+        name="private"
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        label={t("notes.fields.text")}
+        name="text"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input.TextArea
+          rows={8}
+          placeholder={t("notes.labels.newnoteplaceholder")}
         />
-      </div>
-      <div>
-        {t("notes.fields.private")}
-        <Switch
-          title={t("notes.fields.private")}
-          checked={noteState.private}
-          onChange={checked => {
-            setNoteState({ ...noteState, private: checked });
-          }}
-        />
-      </div>
-
-      <Input.TextArea
-        rows={8}
-        value={noteState.text}
-        placeholder={t("notes.labels.newnoteplaceholder")}
-        onChange={e => {
-          setNoteState({ ...noteState, text: e.target.value });
-        }}
-      />
-    </Modal>
+      </Form.Item>
+    </div>
   );
 }