diff --git a/package.json b/package.json index 77032a0..c88cc44 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@daohaus/connect": "^0.4.1", "@daohaus/connect-context": "^0.4.1", "@daohaus/contract-utils": "^0.4.1", + "@daohaus/data-fetch-utils": "^0.4.1", "@daohaus/form-builder": "^0.4.1", "@daohaus/form-builder-base": "^0.4.1", "@daohaus/keychain-utils": "^0.4.1", @@ -24,14 +25,14 @@ "@daohaus/moloch-v3-macro-ui": "^0.4.1", "@daohaus/profile-data": "^0.4.1", "@daohaus/tx-builder": "^0.4.1", - "@daohaus/data-fetch-utils": "^0.4.1", "@daohaus/ui": "^0.4.1", "@daohaus/utils": "^0.4.1", "ethers": "^5.7", "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 new file mode 100644 index 0000000..7782d69 --- /dev/null +++ b/src/components/customFields/MultiSelect.tsx @@ -0,0 +1,99 @@ +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) => { + const { setValue, watch } = useFormContext(); + const [content, createdAt] = watch([props.id, "createdAt"]); + + const options = [ + { value: 'technology', label: 'Technology' }, + { value: 'education', label: 'Education' }, + { value: 'philosophy', label: 'Philosophy' }, + { value: 'art', label: 'Art' }, + { value: 'finance', label: 'Finance' }, + { value: 'activism', label: 'Activism' }, + { value: 'health', label: 'Health' }, + { value: 'science', label: 'Science' }, + { value: 'politics', label: 'Politics' }, + { value: 'adventure', label: 'Adventure' }, + { value: 'wtf', label: 'wtf' }, + { 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 ( + +