initial commit form WIP

src/Components/Boilerplates/BoilerplateForm.jsx

@@ -1,15 +1,13 @@
 import React, { useRef, useState, useMemo } from "react";
-import { useQuery } from "react-query";
-import { Button } from "@mantine/core";
+import { useQuery, useMutation } from "react-query";
+import { Button, Select } from "@mantine/core";
 import TextBox from "../design/TextBox/TextBox";
 import RichTextEditor from "../design/RichTextEditor/RichTextEditor";
 import Label from "../design/Label/Label";
-import Dropdown from "../design/Dropdown/Dropdown";
-import "./BoilerplateForm.css";
 import countWords from "../../Helpers/countWords";
 import * as CategoriesService from "../../Services/Organizations/CategoriesService";
 import { useCurrentOrganization } from "../../Contexts/currentOrganizationContext";
-import CategoryNew from "../Categories/CategoryNew";
+import "./BoilerplateForm.css";
 
 export default function BoilerplateForm(props) {
   const { onDelete } = props;
@@ -19,13 +17,28 @@ export default function BoilerplateForm(props) {
     title: props.boilerplate?.title || "",
     text: props.boilerplate?.text || "",
     html: props.boilerplate?.text || "",
-    categoryId: props.boilerplate?.categoryId || "",
+    categoryName: props.boilerplate?.categoryName || null,
+    boilerplateFields: null,
   });
+
   const quillEl = useRef(null);
-  const { data: categories } = useQuery("getCategories", () =>
-    CategoriesService.getAllCategories(organizationClient)
+  const { data: categories, refetch: refetchCategories } = useQuery(
+    "getCategories",
+    () => CategoriesService.getAllCategories(organizationClient)
+  );
+  const { mutate: createCategory } = useMutation(
+    (categoryFields) =>
+      CategoriesService.createCatpegory(organizationClient, categoryFields),
+    {
+      onSuccess: () => {
+        refetchCategories();
+      },
+    }
   );
-  const [showingCategoriesNew, setShowingCategoriesNew] = useState(false);
+
+  React.useEffect(() => {
+    console.log({ categories });
+  }, [categories]);
 
   const wordCount = useMemo(() => {
     return countWords(boilerplateFields.text);
@@ -36,88 +49,83 @@ export default function BoilerplateForm(props) {
 
     props.onSubmit({
       ...boilerplateFields,
+      categoryId: categories.filter(
+        (category) => category.name === boilerplateFields.categoryName
+      ).id,
     });
   };
 
-  const handleCloseCategoryNew = (createdCategory) => {
-    setShowingCategoriesNew(false);
-
-    if (createdCategory) {
-      setBoilerplateFields({
-        ...boilerplateFields,
-        categoryId: createdCategory.id,
-      });
-    }
-  };
-
   return (
-    <>
-      <form className="BoilerplateForm" onSubmit={handleSubmit}>
-        <Dropdown
-          altLabel="Add Category"
-          onClickAltLabel={() => setShowingCategoriesNew(true)}
-          labelText="Category"
-          placeholder="Select a Category"
-          value={boilerplateFields.categoryId}
-          options={categories.map((category) => ({
-            value: category.id,
-            label: category.name,
-          }))}
-          onChange={(option) =>
-            setBoilerplateFields({
-              ...boilerplateFields,
-              categoryId: option.value,
-            })
-          }
-        />
-        <TextBox
-          labelText="Title"
-          value={boilerplateFields.title}
-          onChange={(event) =>
-            setBoilerplateFields({
-              ...boilerplateFields,
-              title: event.target.value,
-            })
-          }
-          required
-        />
-        <div className="BoilerplateForm__ContentEditor">
-          <div className="BoilerplateForm__ContentEditorHeader">
-            <Label htmlFor="text-editor">Text</Label>
-            <b>WORD COUNT: {wordCount}</b>
-          </div>
-          <RichTextEditor
-            id="text-editor"
-            className="BoilerplateForm__ContentEditorInput"
-            ref={quillEl}
-            value={boilerplateFields.html}
-            onChange={(html) => {
-              setBoilerplateFields((previousBoilerplateFields) => ({
-                ...previousBoilerplateFields,
-                text: quillEl.current.getEditor().getText(),
-                html,
-              }));
-            }}
-          />
+    <form className="BoilerplateForm" onSubmit={handleSubmit}>
+      <Select
+        label="Category"
+        placeholder="Select a Category"
+        value={boilerplateFields.categoryName}
+        data={categories.map((category) => category.name)}
+        onChange={(categoryName) => {
+          console.log({ categoryName });
+          setBoilerplateFields({
+            ...boilerplateFields,
+            categoryName,
+          });
+        }}
+        searchable
+        nothingFound="No category found"
+        clearable
+        creatable
+        getCreateLabel={(query) => `+ Create ${query}`}
+        onCreate={(query) => {
+          createCategory({ name: query });
+          setBoilerplateFields({
+            ...boilerplateFields,
+            categoryName: query,
+          });
+          return query;
+        }}
+      />
+      <TextBox
+        labelText="Title"
+        value={boilerplateFields.title}
+        onChange={(event) =>
+          setBoilerplateFields({
+            ...boilerplateFields,
+            title: event.target.value,
+          })
+        }
+        required
+      />
+      <div className="BoilerplateForm__ContentEditor">
+        <div className="BoilerplateForm__ContentEditorHeader">
+          <Label htmlFor="text-editor">Text</Label>
+          <b>WORD COUNT: {wordCount}</b>
         </div>
-        <div className="BoilerplateForm__Actions">
-          {onDelete && (
-            <Button color="red" onClick={() => onDelete(props.boilerplate)}>
-              Delete
-            </Button>
-          )}
-          <div className="BoilerplateForm__FormControls">
-            <Button variant="subtle" onClick={() => props.onCancel(false)}>
-              Cancel
-            </Button>
-            <Button type="submit">Save</Button>
-          </div>
+        <RichTextEditor
+          id="text-editor"
+          className="BoilerplateForm__ContentEditorInput"
+          ref={quillEl}
+          value={boilerplateFields.html}
+          onChange={(html) => {
+            setBoilerplateFields((previousBoilerplateFields) => ({
+              ...previousBoilerplateFields,
+              text: quillEl.current.getEditor().getText(),
+              html,
+            }));
+          }}
+        />
+      </div>
+      <div className="BoilerplateForm__Actions">
+        {onDelete && (
+          <Button color="red" onClick={() => onDelete(props.boilerplate)}>
+            Delete
+          </Button>
+        )}
+        <div className="BoilerplateForm__FormControls">
+          <Button variant="subtle" onClick={() => props.onCancel(false)}>
+            Cancel
+          </Button>
+          <Button type="submit">Save</Button>
         </div>
-      </form>
-      <CategoryNew
-        show={showingCategoriesNew}
-        onClose={handleCloseCategoryNew}
-      />
-    </>
+      </div>
+    </form>
   );
 }