[WIP] Add Diagnosa

frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosis.tsx

@@ -1,14 +1,97 @@
 import axios from "@/utils/axios";
 import { Autocomplete, TextField, CircularProgress } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { IcdType } from "@/@types/diagnosis";
 
-export default function AutocompleteDiagnosis({ onChange, textLabel, currentValue = null })
+type autocompleteValueType = {
+  title: string,
+  value: string | number | null,
+  readonly: boolean
+}
+
+type autocompleteDiagnosisType = {
+  onChange: void,
+  textLabel: string,
+  currentValue: autocompleteValueType | null,
+  currentOptions: autocompleteValueType[]
+}
+
+type optionType = {
+  title: string,
+  value: string | number | null,
+}
+
+// import TextField from '@material-ui/core/TextField';
+// import Autocomplete from '@material-ui/lab/Autocomplete';
+
+
+// const ControlledAutocomplete = ({ options = [], renderInput, getOptionLabel, onChange: ignored, control, defaultValue, name, renderOption }) => {
+//   return (
+//     <Controller
+//       render={({ onChange, ...props }) => (
+//         <Autocomplete
+//           options={options}
+//           getOptionLabel={getOptionLabel}
+//           renderOption={renderOption}
+//           renderInput={renderInput}
+//           onChange={(e, data) => onChange(data)}
+//           {...props}
+//         />
+//       )}
+//       onChange={([, data]) => data}
+//       defaultValue={defaultValue}
+//       name={name}
+//       control={control}
+//     />
+//   );
+// }
+
+export default function AutocompleteDiagnosis({ onChange, textLabel, currentValue, currentOptions = [] }: autocompleteDiagnosisType)
 {
-    const [options, setOptions] = useState([])
+    const [options, setOptions] = useState<autocompleteValueType>([])
     const [loading, setLoading] = useState(false)
+    // const [defaultValue, setDefaultValue] = useState(currentValue ?? {title: 'A00-CHOLERA', value: 1})
+
+    function icdsToOptions(icds: IcdType[]) : autocompleteValueType[] {
+      return icds.map(function(icd: IcdType) {
+          return {
+              title: icd.code + '-' + icd.name,
+              value: icd.id
+          }
+      })
+    }
+
+    useEffect(() => {
+      setOptions(icdsToOptions(currentOptions))
+      // setDefaultValue(currentValue)
+    }, [currentOptions])
+
+    const defaultValue = useMemo(
+      () => (currentValue)
+      , [currentValue]
+    )
+
+    // useEffect(() => {
+    //   if (currentValue && currentValue.value) {
+    //     onChange(currentValue)
+    //   }
+    //   console.log(currentValue)
+    // }, [currentValue])
+
+    const getOptions = (search: string) => {
+      axios.get('options?type=diagnosis&search='+search)
+        .then((res) => {
+            setOptions(icdsToOptions(res.data))
+        })
+        .then(() => {
+            setLoading(false);
+        })
+    }
+
+    // console.log('defaultValue', defaultValue)
 
     return (<Autocomplete
-        defaultValue={currentValue ?? null}
+        defaultValue={defaultValue ?? {title: '', value: null}}
         onChange={(event, value) => {onChange(value)}}
         isOptionEqualToValue={(option, value) => option.title === value.title}
         getOptionLabel={(option) => option.title}
@@ -20,18 +103,7 @@ export default function AutocompleteDiagnosis({ onChange, textLabel, currentValu
             label={textLabel != null ? textLabel : "Diagnosa ICD-X"}
             onChange={(event) => {
                 setLoading(true);
-                axios.get('options?type=diagnosis&search='+event.target.value)
-                    .then((res) => {
-                        setOptions(res.data.map(function(icd) {
-                            return {
-                                title: icd.code + '-' + icd.name,
-                                value: icd.id
-                            }
-                        }))
-                    })
-                    .then(() => {
-                        setLoading(false);
-                    })
+                getOptions(event.target.value)
             }}
             InputProps={{
               ...params.InputProps,