From 8e9deb0ba00cd12fd7bb34654280d910a8dae8b6 Mon Sep 17 00:00:00 2001
From: ArnobChowdhury <chowdhury.sami.al@gmail.com>
Date: Tue, 11 Jul 2023 19:48:13 +0600
Subject: [PATCH] Make aspect multi select input

---
 src/components/Chip/index.tsx | 33 ++++++++++++++++++++-------------
 src/components/Form/index.tsx |  6 +++---
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/Chip/index.tsx b/src/components/Chip/index.tsx
index 6f2ef75b..8de9dd06 100644
--- a/src/components/Chip/index.tsx
+++ b/src/components/Chip/index.tsx
@@ -1,17 +1,13 @@
-import React, { useEffect } from 'react'
-import { Theme, useTheme } from '@mui/material/styles'
-import Box from '@mui/material/Box'
-import OutlinedInput from '@mui/material/OutlinedInput'
-import InputLabel from '@mui/material/InputLabel'
-import MenuItem from '@mui/material/MenuItem'
-import FormControl from '@mui/material/FormControl'
-import Select, { SelectChangeEvent } from '@mui/material/Select'
-import Chip from '@mui/material/Chip'
 import data from '../Form'
+import { useState } from 'react'
 import CancelIcon from '@mui/icons-material/Cancel'
-import { FormHelperText } from '@mui/material'
+import { useController, Control } from 'react-hook-form'
+import Select, { SelectChangeEvent } from '@mui/material/Select'
+import { Box, MenuItem, FormHelperText, InputLabel, FormControl, OutlinedInput, Chip } from '@mui/material'
+
 const ITEM_HEIGHT = 48
 const ITEM_PADDING_TOP = 8
+
 const MenuProps = {
   PaperProps: {
     style: {
@@ -22,10 +18,19 @@ const MenuProps = {
 }
 
 const names = ['Impact', 'Quality', 'Test', 'RelationShip']
+interface MultipleSelectChipProps {
+  name: string
+  control: Control<any>
+}
+
+export default function MultipleSelectChip({ name, control }: MultipleSelectChipProps) {
+  const { field } = useController({
+    control,
+    name
+  })
 
-export default function MultipleSelectChip() {
-  const theme = useTheme()
-  const [options, setOptions] = React.useState<string[]>([])
+  const { value, onChange } = field
+  const [options, setOptions] = useState<string[]>(value)
 
   const handleChange = (event: SelectChangeEvent<typeof options>) => {
     const {
@@ -39,6 +44,7 @@ export default function MultipleSelectChip() {
     }
 
     setOptions(selectedValues)
+    onChange(selectedValues)
   }
 
   const handleDelete = (value: any) => {
@@ -51,6 +57,7 @@ export default function MultipleSelectChip() {
       setOptions(options.filter(name => name !== value))
     }
   }
+
   return (
     <div>
       <FormControl sx={{ m: 1, width: 250 }}>
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
index 4390532b..52996e1d 100644
--- a/src/components/Form/index.tsx
+++ b/src/components/Form/index.tsx
@@ -115,7 +115,7 @@ export const Form = ({
       claim: 'rated',
       object: '' as string,
       statement: '' as string,
-      aspect: '' as string,
+      aspect: [],
       howKnown: '' as string,
       sourceURI: '' as string,
       effectiveDate: new Date(),
@@ -174,7 +174,7 @@ export const Form = ({
       setValue('object', '')
     } else {
       setValue('stars', null)
-      setValue('aspect', '')
+      setValue('aspect', [])
     }
   }, [watchClaim, setValue])
 
@@ -333,7 +333,7 @@ export const Form = ({
                 {watchClaim === 'rated' ? (
                   <>
                     <Tooltip title='A specific dimension being evaluated or rated' placement='right' arrow>
-                      <MultipleSelectChip />
+                      <MultipleSelectChip control={control} name={'aspect'} />
                     </Tooltip>
 
                     <Controller