{
+ noteState.id ? updateExistingNote() : insertNewNote();
+ }}
+ onCancel={() => {
+ changeVisibility(false);
+ }}>
+
+ {t("notes.fields.critical")}
+ {
+ setNoteState({ ...noteState, critical: checked });
+ }}
+ />
+
+
+ {t("notes.fields.private")}
+ {
+ setNoteState({ ...noteState, private: checked });
+ }}
+ />
+
+
+ {
+ setNoteState({ ...noteState, text: e.target.value });
+ }}
+ />
+
+ );
+}
diff --git a/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx b/client/src/components/note-upsert-modal/note-upsert-modal.container.jsx
new file mode 100644
index 000000000..79287a033
--- /dev/null
+++ b/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 (
+