tagging feture frontend

frontend/src/components/Tags/Tags.tsx

@@ -5,7 +5,7 @@ import ReactTags from 'react-tag-autocomplete';
 // import { suggestions } from './country-list';
 
 type Tag = {
-  id: number;
+  id: string;
   name: string;
 };
 // const tags: Tag[] = [];
@@ -14,12 +14,12 @@ export const Tags = () => {
   const [tags, setTags] = useState<Tag[]>([]);
 
   const [suggestions, setSuggestions] = useState([
-    { id: 1, name: 'Apples' },
-    { id: 2, name: 'Pears' },
-    { id: 3, name: 'Bananas' },
-    { id: 4, name: 'Mangos' },
-    { id: 5, name: 'Lemons' },
-    { id: 6, name: 'Apricots' },
+    { id: 'Apples', name: 'Apples' },
+    { id: 'Pears', name: 'Pears' },
+    { id: 'Bananas', name: 'Bananas' },
+    { id: 'Mangos', name: 'Mangos' },
+    { id: 'Lemons', name: 'Lemons' },
+    { id: 'Apricots', name: 'Apricots' },
   ]);
 
   const reactTags = useRef(null);
@@ -27,18 +27,65 @@ export const Tags = () => {
   const onDelete = useCallback(
     (tagIndex) => {
       setTags(tags.filter((_, i) => i !== tagIndex));
+      console.log(tagIndex);
+      console.log(tags[tagIndex]);
+      setSuggestions(suggestions.filter((s) => s.name !== tags[tagIndex].name));
     },
-    [tags],
+    [tags, suggestions],
   );
 
   const onAddition = useCallback(
     (newTag) => {
-      setTags([...tags, newTag]);
+      setTags([...tags, { id: newTag.name, name: newTag.name }]);
+      if (suggestions.find((s) => s.name === newTag.name)) {
+        console.log(`We already have ${newTag.name}, not adding`);
+      } else {
+        setSuggestions([...suggestions, { id: newTag.name, name: newTag.name }]);
+      }
     },
-    [tags],
+    [tags, suggestions],
   );
 
   return (
-    <ReactTags ref={reactTags} tags={tags} suggestions={suggestions} onDelete={onDelete} onAddition={onAddition} />
+    <>
+      <ReactTags
+        ref={reactTags}
+        tags={tags}
+        suggestions={suggestions}
+        onDelete={onDelete}
+        onAddition={onAddition}
+        allowNew
+        classNames={{
+          root: 'react-tags',
+          rootFocused: 'is-focused',
+          selected: 'react-tags__selected',
+          selectedTag:
+            'react-tags__selected-tag inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10',
+          selectedTagName: 'react-tags__selected-tag-name',
+          search: 'react-tags__search my-6',
+          // searchWrapper: 'react-tags__search-wrapper',
+          searchInput:
+            'react-tags__search-input block w-full rounded-md border-0 py-1.5 mx-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6',
+          suggestions: 'react-tags__suggestions',
+          suggestionActive: 'is-active',
+          suggestionDisabled: 'is-disabled',
+          // suggestionPrefix: 'react-tags__suggestion-prefix',
+        }}
+      />
+      {suggestions.map((suggestion) => {
+        return (
+          <span
+            key={suggestion.id}
+            className="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+          >
+            {suggestion.name}
+            <button type="button" className="group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-gray-500/20" />
+          </span>
+        );
+      })}
+
+      {console.log(suggestions)}
+      {console.log(tags)}
+    </>
   );
 };