feat : list All User-Added Tags Before Submission (code100x#1241)

* Input tag Enhancement * fixes * Made Input empty after adding tag
Smnthjm08 · Sep 25, 2024 · b3b65c1 · b3b65c1
1 parent e67b700
commit b3b65c1
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 12 deletions.
diff --git a/src/components/NewPostDialog.tsx b/src/components/NewPostDialog.tsx
@@ -26,7 +26,9 @@ export const NewPostDialog = () => {
   const paramsObject = searchParamsToObject(searchParam);
   const path = usePathname();
   const router = useRouter();
+  const tagInputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('**Hello world!!!**');
+  const [tags, setTags] = useState<string[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
   const { ref, onOpen, onClose } = useModal();
   const handleMarkdownChange = (newValue?: string) => {
@@ -54,6 +56,7 @@ export const NewPostDialog = () => {
       formRef?.current?.reset();
       setValue('');
       router.push(`/question/${data.slug}`);
+      setTags([]); 
       handleOnCloseClick();
     },
     onError: (error) => {
@@ -68,20 +71,41 @@ export const NewPostDialog = () => {
       setFieldErrors({});
     }
   };
+
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
     const title = formData.get('title');
-
-    const tags = formData.get('tags');
-
     execute({
       title: title?.toString() || '',
       content: value,
-      tags: (tags?.toString() || '').split(','),
+      tags,
     });
   };
 
+  const addTag = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === ',') {
+      event.preventDefault();
+      const formData = new FormData(formRef.current as HTMLFormElement);
+      const tag = formData.get('tags')?.toString().trim().replace(/,+$/, '');
+
+      if (tag) {
+        setTags((prevTags) => [
+          ...prevTags,
+          tag
+        ]);
+      }
+      if (tagInputRef.current) {
+        tagInputRef.current.value = '';
+      }
+    }
+  };
+
+
+  const removeTag = (tag: string) => {
+    setTags(tags.filter((t) => t !== tag));
+  };
+
   return (
     <Modal ref={ref} onClose={handleOnCloseClick}>
       <div className="fixed inset-0 bg-black/50 backdrop-blur-md" />
@@ -130,12 +154,31 @@ export const NewPostDialog = () => {
                 <h3 className="wmde-markdown-var text-lg font-bold tracking-tighter">
                   Tags
                 </h3>
-                <FormPostInput
-                  id="tags"
-                  placeholder="Enter tags separated by comma"
-                  errors={fieldErrors}
-                  className="w-full"
-                />
+                <div className="flex flex-col gap-2">
+                  <div className="flex gap-1">
+                    {tags.map((tag, index) => (
+                      <span
+                        key={index}
+                        className="mr-2 flex items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-xs text-primary"
+                      >
+                        {tag}
+                        <X
+                          size={12}
+                          className="cursor-pointer"
+                          onClick={() => removeTag(tag)}
+                        />
+                      </span>
+                    ))}
+                  </div>
+                  <FormPostInput
+                    id="tags"
+                    placeholder="Enter tags separated by comma"
+                    errors={fieldErrors}
+                    className="w-full"
+                    onKeyUp={addTag}
+                    ref={tagInputRef}
+                  />
+                </div>
               </div>
 
               <div
@@ -163,4 +206,4 @@ export const NewPostDialog = () => {
       </AnimatePresence>
     </Modal>
   );
-};
+};
diff --git a/src/components/posts/form/form-input.tsx b/src/components/posts/form/form-input.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { forwardRef } from 'react';
 import { useFormStatus } from 'react-dom';
 
@@ -19,6 +20,7 @@ interface FormInputProps {
   className?: string;
   defaultValue?: string;
   onBlur?: () => void;
+  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
@@ -33,6 +35,7 @@ export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
       errors,
       className,
       defaultValue = '',
+      onKeyUp,
       onBlur,
     },
     ref,
@@ -57,6 +60,7 @@ export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
             required={required}
             name={id}
             id={id}
+            onKeyUp={onKeyUp}
             placeholder={placeholder}
             type={type}
             disabled={pending || disabled}
@@ -73,4 +77,4 @@ export const FormPostInput = forwardRef<HTMLInputElement, FormInputProps>(
   },
 );
 
-FormPostInput.displayName = 'FormPostInput';
+FormPostInput.displayName = 'FormPostInput';