From ebd451373155d60c90b5c22a7a7cd9ed81c9bfa0 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Fri, 9 Feb 2024 10:58:50 +0100
Subject: [PATCH 1/6] fix: make it easier to make tags

---
 .../frontend/src/components/editor-drawer.jsx | 81 ++-----------------
 1 file changed, 8 insertions(+), 73 deletions(-)

diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx
index 8739d6089..333dfdebb 100644
--- a/apps/frontend/src/components/editor-drawer.jsx
+++ b/apps/frontend/src/components/editor-drawer.jsx
@@ -18,9 +18,7 @@ import {
   IconButton,
   Wrap,
   Tag,
-  FormControl,
   Divider,
-  FormErrorMessage,
   TagLabel,
   TagCloseButton,
   CloseButton,
@@ -32,7 +30,6 @@ import {
   DrawerContent,
   useToast,
 } from "@chakra-ui/react";
-import { Field, Form, Formik } from "formik";
 import slugify from "slugify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
@@ -56,7 +53,6 @@ const EditorDrawer = ({
 }) => {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const [searchedTags, setSearchedTags] = useState([]);
-  const [isAddingTag, setIsAddingTag] = useState(false);
 
   const [postTagInputText, setPostTagInputText] = useState("");
   const [postTags, setPostTags] = useState([]);
@@ -317,6 +313,14 @@ const EditorDrawer = ({
                   handleTagSearch(event.target.value);
                   setPostTagInputText(event.target.value);
                 }}
+                onKeyUp={(event) => {
+                  const noResults = searchedTags.length === 0;
+                  if (event.key === "Enter" && noResults) {
+                    event.preventDefault();
+                    handleTagSubmit(event.target.value);
+                    setPostTagInputText("");
+                  }
+                }}
               />
               <AutoCompleteList>
                 {(searchedTags.length > 0 ? searchedTags : tagsList)
@@ -325,8 +329,6 @@ const EditorDrawer = ({
                     <AutoCompleteItem
                       key={tag.id}
                       value={tag.attributes.name}
-                      // this gives is the opportunity to add the tag to the post
-                      // by setting the label to the slug
                       label={tag.attributes.slug}
                       textTransform="capitalize"
                       onClick={() => {
@@ -339,73 +341,6 @@ const EditorDrawer = ({
                   ))}
               </AutoCompleteList>
             </AutoComplete>
-            {isEditor(user) && (
-              <>
-                {!isAddingTag ? (
-                  <Button
-                    colorScheme="blue"
-                    variant="link"
-                    onClick={() => setIsAddingTag(true)}
-                  >
-                    Add new Tag
-                  </Button>
-                ) : (
-                  <>
-                    <Spacer h="1rem" />
-                    <Formik
-                      initialValues={{ tagName: "" }}
-                      onSubmit={(values, actions) => {
-                        setIsAddingTag(false);
-                        handleTagSubmit(values.tagName);
-                        actions.setSubmitting(false);
-                        handleUnsavedChanges();
-                      }}
-                    >
-                      {(props) => (
-                        <Form>
-                          <Field name="tagName">
-                            {({ field, form }) => (
-                              <FormControl
-                                isInvalid={
-                                  form.errors.tagName && form.touched.tagName
-                                }
-                              >
-                                <Input
-                                  {...field}
-                                  placeholder="tag name"
-                                  w="100%"
-                                  required
-                                />
-                                <FormErrorMessage>
-                                  {form.errors.tagName}
-                                </FormErrorMessage>
-                              </FormControl>
-                            )}
-                          </Field>
-                          <Button
-                            colorScheme="blue"
-                            isLoading={props.isSubmitting}
-                            type="submit"
-                            w="100%"
-                            margin={{ base: "1rem 0 0 0" }}
-                          >
-                            Submit
-                          </Button>
-                          <Button
-                            colorScheme="red"
-                            width="100%"
-                            margin={{ base: "1rem 0 0 0" }}
-                            onClick={() => setIsAddingTag(false)}
-                          >
-                            Cancel
-                          </Button>
-                        </Form>
-                      )}
-                    </Formik>
-                  </>
-                )}
-              </>
-            )}
             <Spacer h="1rem" />
             {isEditor(user) && (
               <>

From f8e1c0b4e3e40683b630d0482ff47c677ddfccf6 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Fri, 9 Feb 2024 11:04:00 +0100
Subject: [PATCH 2/6] fix: add editor permission back to add new tags

---
 apps/frontend/src/components/editor-drawer.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx
index 333dfdebb..d2df111d8 100644
--- a/apps/frontend/src/components/editor-drawer.jsx
+++ b/apps/frontend/src/components/editor-drawer.jsx
@@ -315,7 +315,7 @@ const EditorDrawer = ({
                 }}
                 onKeyUp={(event) => {
                   const noResults = searchedTags.length === 0;
-                  if (event.key === "Enter" && noResults) {
+                  if (event.key === "Enter" && noResults && isEditor(user)) {
                     event.preventDefault();
                     handleTagSubmit(event.target.value);
                     setPostTagInputText("");

From 216908bff591f844a6f7bc94a88481687cba131b Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Wed, 14 Feb 2024 08:06:20 +0100
Subject: [PATCH 3/6] fix: use built in creation functionality and custom text
 when no tag is available

---
 apps/frontend/src/components/editor-drawer.jsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx
index d2df111d8..e62c6dfa2 100644
--- a/apps/frontend/src/components/editor-drawer.jsx
+++ b/apps/frontend/src/components/editor-drawer.jsx
@@ -3,6 +3,7 @@ import { isEditor } from "@/lib/current-user";
 import Link from "next/link";
 import {
   AutoComplete,
+  AutoCompleteCreatable,
   AutoCompleteInput,
   AutoCompleteItem,
   AutoCompleteList,
@@ -302,6 +303,11 @@ const EditorDrawer = ({
                 addTag(list.item.value, list.item.label);
                 setPostTagInputText("");
               }}
+              creatable={isEditor(user) && searchedTags.length === 0}
+              onCreateOption={() => {
+                handleTagSubmit(postTagInputText);
+                setPostTagInputText("");
+              }}
             >
               <AutoCompleteInput
                 variant="outline"
@@ -313,14 +319,6 @@ const EditorDrawer = ({
                   handleTagSearch(event.target.value);
                   setPostTagInputText(event.target.value);
                 }}
-                onKeyUp={(event) => {
-                  const noResults = searchedTags.length === 0;
-                  if (event.key === "Enter" && noResults && isEditor(user)) {
-                    event.preventDefault();
-                    handleTagSubmit(event.target.value);
-                    setPostTagInputText("");
-                  }
-                }}
               />
               <AutoCompleteList>
                 {(searchedTags.length > 0 ? searchedTags : tagsList)
@@ -339,6 +337,9 @@ const EditorDrawer = ({
                       {tag.attributes.name}
                     </AutoCompleteItem>
                   ))}
+                <AutoCompleteCreatable>
+                  {({ value }) => <span>Create a tag named <strong>{value}</strong></span>}
+                </AutoCompleteCreatable>
               </AutoCompleteList>
             </AutoComplete>
             <Spacer h="1rem" />

From 20c017c8c8e33a8265d4cbd4cb239ee66382acda Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Wed, 14 Feb 2024 11:07:04 +0100
Subject: [PATCH 4/6] fix: tag creation

---
 .../frontend/src/components/editor-drawer.jsx | 43 ++++++++++++++++---
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx
index e62c6dfa2..caf0d2111 100644
--- a/apps/frontend/src/components/editor-drawer.jsx
+++ b/apps/frontend/src/components/editor-drawer.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState } from "react";
 import { isEditor } from "@/lib/current-user";
 import Link from "next/link";
 import {
@@ -124,7 +124,6 @@ const EditorDrawer = ({
       setPostTags(newTags);
       handlePostTagId(newTagsId);
       setPostTagSlug(newTagSlugs);
-
       handleUnsavedChanges();
     }
   }
@@ -148,6 +147,10 @@ const EditorDrawer = ({
       setTagsList([...tags, res.data]);
       setSearchedTags([]);
 
+      setPostTags([...postTags, res.data.attributes.name]);
+      setPostTagSlug([...postTagSlug, res.data.attributes.slug]);
+      handlePostTagId([...postTagId, res.data.id]);
+
       toast({
         title: "Tag Created.",
         description: "We've created your tag for you.",
@@ -300,12 +303,31 @@ const EditorDrawer = ({
               openOnFocus
               restoreOnBlurIfEmpty={false}
               onSelectOption={(list) => {
-                addTag(list.item.value, list.item.label);
-                setPostTagInputText("");
+                const item = list.item.value;
+
+                console.log(item.value)
+
+                const inSearchedTags = searchedTags.some((tag) => tag.attributes.name === item);
+                const inDefaultTags = tagsList.some((tag) => tag.attributes.name === item);
+
+                const tagExists = !inSearchedTags && !inDefaultTags;
+
+                if(isEditor(user) && !tagExists && searchedTags.length > 0){
+                  handleTagSubmit(postTagInputText);
+                  addTag(postTagInputText, postTagInputText);
+                  setPostTagInputText("");
+                }
+
+                if(inSearchedTags || inDefaultTags) {
+                  addTag(list.item.value, list.item.label);
+                  setPostTagInputText("");
+                }
+
               }}
               creatable={isEditor(user) && searchedTags.length === 0}
               onCreateOption={() => {
                 handleTagSubmit(postTagInputText);
+                addTag(postTagInputText, postTagInputText);
                 setPostTagInputText("");
               }}
             >
@@ -337,8 +359,19 @@ const EditorDrawer = ({
                       {tag.attributes.name}
                     </AutoCompleteItem>
                   ))}
+                {
+                  searchedTags.length > 0 && !searchedTags.includes(postTagInputText) && (
+                    <AutoCompleteItem
+                      value={postTagInputText}
+                      label={postTagInputText}
+                      textTransform="capitalize"
+                    >
+                      <p>Create a Tag Named <strong>{postTagInputText}</strong></p>
+                    </AutoCompleteItem>
+                  )
+                }
                 <AutoCompleteCreatable>
-                  {({ value }) => <span>Create a tag named <strong>{value}</strong></span>}
+                  {({ value }) => <span>Create a Tag Named <strong>{value}</strong></span>}
                 </AutoCompleteCreatable>
               </AutoCompleteList>
             </AutoComplete>

From 8694ef30caf14d81262474ebb5d2a865e58c7af6 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Wed, 14 Feb 2024 11:13:44 +0100
Subject: [PATCH 5/6] fix: issues with Capatalization and Ability to add
 already existing tags

---
 apps/frontend/src/components/editor-drawer.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx
index caf0d2111..2344bda63 100644
--- a/apps/frontend/src/components/editor-drawer.jsx
+++ b/apps/frontend/src/components/editor-drawer.jsx
@@ -305,8 +305,6 @@ const EditorDrawer = ({
               onSelectOption={(list) => {
                 const item = list.item.value;
 
-                console.log(item.value)
-
                 const inSearchedTags = searchedTags.some((tag) => tag.attributes.name === item);
                 const inDefaultTags = tagsList.some((tag) => tag.attributes.name === item);
 
@@ -350,7 +348,6 @@ const EditorDrawer = ({
                       key={tag.id}
                       value={tag.attributes.name}
                       label={tag.attributes.slug}
-                      textTransform="capitalize"
                       onClick={() => {
                         addTag(tag.attributes.name, tag.attributes.slug);
                         setPostTagInputText("");
@@ -360,11 +357,10 @@ const EditorDrawer = ({
                     </AutoCompleteItem>
                   ))}
                 {
-                  searchedTags.length > 0 && !searchedTags.includes(postTagInputText) && (
+                  searchedTags.length > 0 && !searchedTags.some((tag) => tag.attributes.name === postTagInputText ) && (
                     <AutoCompleteItem
                       value={postTagInputText}
                       label={postTagInputText}
-                      textTransform="capitalize"
                     >
                       <p>Create a Tag Named <strong>{postTagInputText}</strong></p>
                     </AutoCompleteItem>

From 8fc3161d3f958de9807217c58b8a0c9937fe9d17 Mon Sep 17 00:00:00 2001
From: sembauke <semboot699@gmail.com>
Date: Wed, 14 Feb 2024 11:14:23 +0100
Subject: [PATCH 6/6] fix: linting

---
 .../frontend/src/components/editor-drawer.jsx | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx
index 2344bda63..f8b1e26d6 100644
--- a/apps/frontend/src/components/editor-drawer.jsx
+++ b/apps/frontend/src/components/editor-drawer.jsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { isEditor } from "@/lib/current-user";
 import Link from "next/link";
 import {
@@ -305,22 +305,25 @@ const EditorDrawer = ({
               onSelectOption={(list) => {
                 const item = list.item.value;
 
-                const inSearchedTags = searchedTags.some((tag) => tag.attributes.name === item);
-                const inDefaultTags = tagsList.some((tag) => tag.attributes.name === item);
+                const inSearchedTags = searchedTags.some(
+                  (tag) => tag.attributes.name === item,
+                );
+                const inDefaultTags = tagsList.some(
+                  (tag) => tag.attributes.name === item,
+                );
 
                 const tagExists = !inSearchedTags && !inDefaultTags;
 
-                if(isEditor(user) && !tagExists && searchedTags.length > 0){
+                if (isEditor(user) && !tagExists && searchedTags.length > 0) {
                   handleTagSubmit(postTagInputText);
                   addTag(postTagInputText, postTagInputText);
                   setPostTagInputText("");
                 }
 
-                if(inSearchedTags || inDefaultTags) {
+                if (inSearchedTags || inDefaultTags) {
                   addTag(list.item.value, list.item.label);
                   setPostTagInputText("");
                 }
-
               }}
               creatable={isEditor(user) && searchedTags.length === 0}
               onCreateOption={() => {
@@ -356,18 +359,25 @@ const EditorDrawer = ({
                       {tag.attributes.name}
                     </AutoCompleteItem>
                   ))}
-                {
-                  searchedTags.length > 0 && !searchedTags.some((tag) => tag.attributes.name === postTagInputText ) && (
+                {searchedTags.length > 0 &&
+                  !searchedTags.some(
+                    (tag) => tag.attributes.name === postTagInputText,
+                  ) && (
                     <AutoCompleteItem
                       value={postTagInputText}
                       label={postTagInputText}
                     >
-                      <p>Create a Tag Named <strong>{postTagInputText}</strong></p>
+                      <p>
+                        Create a Tag Named <strong>{postTagInputText}</strong>
+                      </p>
                     </AutoCompleteItem>
-                  )
-                }
+                  )}
                 <AutoCompleteCreatable>
-                  {({ value }) => <span>Create a Tag Named <strong>{value}</strong></span>}
+                  {({ value }) => (
+                    <span>
+                      Create a Tag Named <strong>{value}</strong>
+                    </span>
+                  )}
                 </AutoCompleteCreatable>
               </AutoCompleteList>
             </AutoComplete>