Notes lifecycle events added to job details.

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

@@ -0,0 +1,57 @@
+import { Input, Modal, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function NoteUpsertModalComponent({
+  visible,
+  changeVisibility,
+  noteState,
+  setNoteState,
+  updateExistingNote,
+  insertNewNote
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      title={noteState?.id ? t("notes.actions.edit") : t("notes.actions.new")}
+      visible={visible}
+      okText={t("general.labels.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>
+      <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>
+  );
+}

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

@@ -0,0 +1,75 @@
+import { notification } from "antd";
+import React, { useEffect, useState } from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
+import NoteUpsertModalComponent from "./note-upsert-modal.component";
+
+export default function NoteUpsertModalContainer({
+  jobId,
+  visible,
+  changeVisibility,
+  refetch,
+  existingNote
+}) {
+  const { t } = useTranslation();
+  const [insertNote] = useMutation(INSERT_NEW_NOTE);
+  const [updateNote] = useMutation(UPDATE_NOTE);
+
+  const [noteState, setNoteState] = useState({
+    private: false,
+    critical: false,
+    text: ""
+  });
+
+  useEffect(() => {
+    //Required to prevent infinite looping.
+    if (existingNote) {
+      setNoteState(existingNote);
+    }
+  }, [existingNote]);
+
+  const insertNewNote = () => {
+    insertNote({
+      variables: {
+        noteInput: [
+          { ...noteState, jobid: jobId, created_by: "patrick@bodyshop.app" } //TODO: Fix the created by.
+        ]
+      }
+    }).then(r => {
+      notification["success"]({
+        message: t("notes.successes.create")
+      });
+    });
+    refetch();
+    changeVisibility(!visible);
+  };
+
+  const updateExistingNote = () => {
+    //Required, otherwise unable to spread in new note prop.
+    delete noteState.__typename;
+    updateNote({
+      variables: {
+        noteId: noteState.id,
+        note: noteState
+      }
+    }).then(r => {
+      notification["success"]({
+        message: t("notes.successes.updated")
+      });
+    });
+    refetch();
+    changeVisibility(!visible);
+  };
+
+  return (
+    <NoteUpsertModalComponent
+      visible={visible}
+      changeVisibility={changeVisibility}
+      updateExistingNote={updateExistingNote}
+      insertNewNote={insertNewNote}
+      noteState={noteState}
+      setNoteState={setNoteState}
+    />
+  );
+}