Merge pull request #5 from DINHaus/feat/multi-select

add multiselect tag field
DINHaus · Mar 28, 2024 · eb04e4c · eb04e4c
2 parents 086bcdb + 9556c81
commit eb04e4c
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.4.3"
+    "react-router-dom": "^6.4.3",
+    "react-select": "^5.8.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.22",

diff --git a/src/components/customFields/MultiSelect.tsx b/src/components/customFields/MultiSelect.tsx
@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+    Buildable,
+
+    Field,
+
+} from '@daohaus/ui';
+import { useFormContext } from 'react-hook-form';
+import Select from 'react-select'
+
+import styled from 'styled-components';
+
+
+
+const MultiSelectContainer = styled.div`
+  
+`;
+
+export const MultiSelect = (props: Buildable<Field>) => {
+    const { setValue, watch } = useFormContext();
+    const [content, createdAt] = watch([props.id, "createdAt"]);
+
+    const options = [
+        { value: 'publication', label: 'Publication' },
+        { value: 'event', label: 'Event' },
+        { value: 'document', label: 'Document' },
+        { value: 'special', label: 'Special' },
+      ]
+
+    const [selectedOption, setSelectedOption] = useState();
+
+    function handleChange(selectedOption: any) {
+        const selectedValues = selectedOption.map((option: any) => option.value)
+        setValue(props.id, selectedValues);
+        setSelectedOption(selectedOption)
+    }
+
+    useEffect(() => {
+        const drafts = localStorage.getItem("drafts") || "{}" as string;
+        const parsedDrafts = JSON.parse(drafts);
+
+        if (parsedDrafts[createdAt]) {
+
+            if(!parsedDrafts[createdAt].tags) {
+                return
+            }
+
+            const tags = parsedDrafts[createdAt]?.tags.map((tag: string) => {
+                return { value: tag, label: tag[0].toUpperCase() + tag.substring(1).toLowerCase() }
+            }
+            );
+            setSelectedOption(tags || []);
+
+        }
+
+      }, [createdAt]);
+
+
+    return (
+        <MultiSelectContainer>
+            <Select 
+              options={options}
+              value={selectedOption}
+              onChange={handleChange}
+              isMulti
+              styles={{
+                control: (baseStyles, state) => ({
+                  ...baseStyles,
+                  background: "hsl(228, 43.3%, 17.5%)", // TODO: use theme,
+                }),
+                menuList: base => ({
+                    ...base,
+                    background: "hsl(228, 43.3%, 17.5%)"
+                }),
+                option: (styles, {isFocused, isSelected}) => ({
+                    ...styles,
+                    background: isFocused
+                        ? 'hsl(226, 70.0%, 55.5%)'
+                        : isSelected
+                            ? 'hsla(291, 64%, 42%, 1)'
+                            : undefined
+                }),
+                multiValueRemove: (styles) => ({
+                    ...styles,
+                    backgroundColor: 'hsl(226, 70.0%, 55.5%)'
+                }),
+              }}
+               />
+        </MultiSelectContainer>
+    );
+};
diff --git a/src/components/customFields/SaveAsDraft.tsx b/src/components/customFields/SaveAsDraft.tsx
@@ -11,11 +11,12 @@ export const SaveAsDraftField = (props: Buildable<object>) => {
     const { address } = useDHConnect();
 
 
-    const [title, content, link, createdAt] = watch([
+    const [title, content, link, createdAt, tags] = watch([
         "title",
         "content",
         "link",
-        "createdAt"
+        "createdAt",
+        "tags"
     ]);
 
 
@@ -42,11 +43,14 @@ export const SaveAsDraftField = (props: Buildable<object>) => {
             title,
             content,
             link,
+            tags
         };
         const newDrafts = {
             ...parsedDrafts
         };
 
+        console.log("saving draft", newDrafts);
+
         localStorage.setItem("drafts", JSON.stringify(newDrafts));
         setErrorText("Draft saved");
     }

diff --git a/src/legos/fields.ts b/src/legos/fields.ts
@@ -57,4 +57,8 @@ export const APP_FIELD: Record<string, CustomFieldLego> = {
     id: 'saveAsDraft',
     type: 'saveAsDraft',
   },
+  TAGS_MULTISELECT_FIELD: {
+    id: 'tags',
+    type: 'multiSelect',
+  },
 };
diff --git a/src/legos/forms.ts b/src/legos/forms.ts
@@ -20,6 +20,7 @@ export const APP_FORM: Record<string, CustomFormLego> = {
       {...APP_FIELD.CONTENT_FIELD, type: "mdxEditor"},
       APP_FIELD.CONTENTHASH_FIELD,
       APP_FIELD.CREATEDAT_FIELD,
+      APP_FIELD.TAGS_MULTISELECT_FIELD,
       FIELD.PROP_OFFERING,
     ],
   },
@@ -56,6 +57,7 @@ export const APP_FORM: Record<string, CustomFormLego> = {
       {...APP_FIELD.CONTENT_FIELD, type: "mdxEditor", label: "Comment"},
       APP_FIELD.CREATEDAT_FIELD,
       APP_FIELD.CONTENTHASH_FIELD,
+      APP_FIELD.TAGS_MULTISELECT_FIELD,
       APP_FIELD.SAVEASDRAFT_FIELD,
     ],
   },

diff --git a/src/legos/legoConfig.ts b/src/legos/legoConfig.ts
@@ -8,6 +8,7 @@ import { CommentParentIdField } from "../components/customFields/CommentParentID
 import { CreatedAtField } from "../components/customFields/CreatedAt";
 import { MDXEditorField } from "../components/customFields/MDXEditorField";
 import { SaveAsDraftField } from "../components/customFields/SaveAsDraft";
+import { MultiSelect } from "../components/customFields/MultiSelect";
 
 export const AppFieldLookup = {
   ...MolochFields,
@@ -16,7 +17,8 @@ export const AppFieldLookup = {
   commentParentId: CommentParentIdField,
   createdAt: CreatedAtField,
   mdxEditor: MDXEditorField,
-  saveAsDraft: SaveAsDraftField
+  saveAsDraft: SaveAsDraftField,
+  multiSelect: MultiSelect
 };
 
 export type CustomFieldLego = FieldLegoBase<typeof AppFieldLookup>;

diff --git a/src/legos/tx.ts b/src/legos/tx.ts
@@ -31,7 +31,8 @@ export const APP_TX = {
             id: '.formValues.contentHash',
             authorAddress: '.memberAddress',
             createdAt: '.formValues.createdAt',
-            chainId: ".chainId"
+            chainId: ".chainId",
+            tags: '.formValues.tags',
           },
         },
         { type: 'static', value: POSTER_TAGS.daoDatabaseSharesOrLoot },
@@ -58,8 +59,8 @@ export const APP_TX = {
               id: ".formValues.contentHash",
               authorAddress: ".memberAddress",
               createdAt: '.formValues.createdAt',
-              chainId: `.chainId`
-
+              chainId: `.chainId`,
+              tags: '.formValues.tags',    
             },
           },
       ],
@@ -80,7 +81,9 @@ export const APP_TX = {
             id: '.formValues.contentHash',
             authorAddress: '.memberAddress',
             createdAt: '.formValues.createdAt',
-            chainId: ".chainId"
+            chainId: ".chainId",
+            tags: '.formValues.tags',
+
           },
         },
         { type: 'static', value: POSTER_TAGS.daoDatabaseSharesOrLoot },
@@ -120,8 +123,9 @@ export const APP_TX = {
               id: ".formValues.contentHash",
               authorAddress: ".memberAddress",
               createdAt: '.formValues.createdAt',
-              chainId: `.chainId`
-
+              chainId: `.chainId`,
+              tags: '.formValues.tags',
+
             },
           },
         ],