Merge pull request #413 from bcgsc/bugfix/DEVSU-2165-new-project-user-undefined

[DEVSU-2165] new project user undefined

Author: kttkjl

app/components/ReportAutocomplete/index.tsx

@@ -6,9 +6,11 @@ import {
   Button,
 } from '@mui/material';
 import { ReportType } from '@/context/ReportContext';
-import api from '../../services/api';
 
 import './index.scss';
+import { useDebounce } from 'use-debounce';
+import { useSnackbar } from 'notistack';
+import api from '../../services/api';
 
 type ReportAutocompleteProps = {
   defaultValue?: ReportType;
@@ -24,20 +26,44 @@ const ReportAutocomplete = ({
   const [options, setOptions] = useState([]);
   const [loading, setLoading] = useState(false);
   const [value, setValue] = useState<ReportType>(null);
+  const [text, setText] = useState<string>(defaultValue?.patientId || '');
+  const [debouncedText] = useDebounce(text, 500);
+  const snackbar = useSnackbar();
 
   useEffect(() => {
     if (defaultValue) {
       setValue(defaultValue);
     }
   }, [defaultValue]);
 
-  const handleInputChange = async ({ target: { value: queryValue } }) => {
-    setLoading(true);
-    const autocompleted = await api.get(`/reports?searchText=${queryValue}`, {}).request();
+  useEffect(() => {
+    setText((prevVal) => {
+      if (!value?.patientId) { return ''; }
+      if (prevVal !== value?.patientId) { return value?.patientId; }
+      return prevVal;
+    });
+  }, [value?.patientId]);
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        setLoading(true);
+        const reportsResp = await api.get(`/reports?searchText=${debouncedText}`).request();
+        setOptions(reportsResp.reports);
+      } catch (e) {
+        snackbar.enqueueSnackbar('Error getting report autocomplete data');
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (debouncedText) {
+      getData();
+    }
+  }, [snackbar, debouncedText]);
 
-    setOptions(autocompleted.reports);
-    setLoading(false);
-  };
+  const handleTextChange = useCallback(({ target: { value: nextText } }) => {
+    setText((prevText) => (prevText === nextText ? prevText : nextText));
+  }, []);
 
   const handleSubmit = useCallback(async () => {
     onSubmit(value);
@@ -58,7 +84,7 @@ const ReportAutocomplete = ({
           label={label || 'Report'}
           variant="outlined"
           margin="normal"
-          onChange={handleInputChange}
+          onChange={handleTextChange}
           InputProps={{
             ...params.InputProps,
             endAdornment: (

app/components/UserAutocomplete/index.tsx

@@ -5,7 +5,8 @@ import {
   CircularProgress,
   Button,
 } from '@mui/material';
-
+import { useDebounce } from 'use-debounce';
+import { useSnackbar } from 'notistack';
 import api from '@/services/api';
 import { UserType } from '@/common';
 
@@ -27,19 +28,45 @@ const UserAutocomplete = ({
   const [options, setOptions] = useState([]);
   const [loading, setLoading] = useState(false);
   const [value, setValue] = useState<Partial<UserType>>(null);
+  const [text, setText] = useState<string>((value ? `${value.firstName} ${value.lastName}` : '') || '');
+  const [debouncedText] = useDebounce(text, 500);
+  const snackbar = useSnackbar();
 
   useEffect(() => {
     if (defaultValue) {
       setValue(defaultValue);
     }
   }, [defaultValue]);
 
-  const handleInputChange = async ({ target: { value: queryValue } }) => {
-    setLoading(true);
-    const autocompleted = await api.get(`/user/search?query=${queryValue}`, {}).request();
+  useEffect(() => {
+    setText((prevVal) => {
+      if (!value?.firstName) { return ''; }
+      if (prevVal !== `${value.firstName} ${value.lastName}`) {
+        return `${value.firstName} ${value.lastName}`;
+      }
+      return prevVal;
+    });
+  }, [value?.firstName, value?.lastName]);
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        setLoading(true);
+        const autocompleted = await api.get(`/user/search?query=${debouncedText}`, {}).request();
+        setOptions(autocompleted);
+      } catch (e) {
+        snackbar.enqueueSnackbar('Error getting user autocomplete data');
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (debouncedText) {
+      getData();
+    }
+  }, [snackbar, debouncedText]);
 
-    setOptions(autocompleted);
-    setLoading(false);
+  const handleTextChange = async ({ target: { value: nextText } }) => {
+    setText((prevText) => (prevText === nextText ? prevText : nextText));
   };
 
   const handleSubmit = useCallback(() => {
@@ -68,7 +95,7 @@ const UserAutocomplete = ({
           label={label || 'User'}
           variant="outlined"
           margin="normal"
-          onChange={handleInputChange}
+          onChange={handleTextChange}
           InputProps={{
             ...params.InputProps,
             endAdornment: (

app/views/ProjectsView/components/AddEditProjectDialog/index.tsx

@@ -121,7 +121,7 @@ const AddEditProjectDialog = ({
         const projectUpdateResp = await projectUpdateCall.request();
 
         // Handle relationships to projects
-        const { added: usersToAdd, removed: usersToRemove } = getIdentDiff(editData.users ?? [], users);
+        const { added: usersToAdd, removed: usersToRemove } = getIdentDiff(editData?.users ?? [], users);
         const { added: reportsToAdd, removed: reportsToRemove } = getIdentDiff(existingReports ?? [], reports);
 
         const apiCallQueue = [];
@@ -136,6 +136,7 @@ const AddEditProjectDialog = ({
         const updatedProject = await api.get(`/project/${projectUpdateResp.ident}`).request();
         onClose(updatedProject);
       } catch (e) {
+        console.error('handleClose ~ e:', e);
         snackbar.error(`Error ${editData ? 'editing' : 'creating'} report, ${e?.message}`);
       }
     } else {