Fix the search function when adding a member to a team in the drawer.

src/js/components/Person/AddPersonDrawerMainContent.jsx

@@ -20,14 +20,12 @@ const AddPersonDrawerMainContent = () => {
   console.log('AddPersonDrawerMainContent params: ', params);
 
   const [allStaffList] = useState(getAppContextValue('allStaffList'));
-  const [allStaffLessAdds, setAllStaffLessAdds] = useState(getAppContextValue('allStaffList'));
-  const [staffToDisplayList, setStaffToDisplayList] = useState([]);
-  const [staffListLabelAdd, setStaffListLabelAdd] = useState(true);
+  const [remainingStaffToAdd, setRemainingStaffToAdd] = useState(getAppContextValue('allStaffList'));
+  const [searchResultsList, setSearchResultsList] = useState(undefined);
   const [thisTeamsCurrentMembersList, setThisTeamsCurrentMembersList] = useState([]);
   const [teamId, setTeamId] = useState(getAppContextValue('teamId'));
   const [teamName, setTeamName] = useState('');
   const [teamMemberPersonIdList] = useState([]);
-  const [searchResultsList] = useState([]);
   const [matchingCountText, setMatchingCountText] = useState('');
   const [addPersonDrawerOpen] = useState(getAppContextValue('addPersonDrawerOpen'));
 
@@ -48,9 +46,9 @@ const AddPersonDrawerMainContent = () => {
     // console.log('no teamListFromContext yet!');
   }
 
-  const setTheAllStaffToDisplayList = () => {
-    console.log('setTheAllStaffList in AddPersonDrawerMainContent');
-    // Start with the passed in allStaffList, create the staffToDisplayList, by removing any staff already on the team
+  const initializeRemainingStaffToAddList = () => {
+    console.log('initializeTheRemainingStaffToAddListList in AddPersonDrawerMainContent');
+    // Start with the passed in allStaffList, create the remainingStaffToAddList, by removing any staff already on the team
     if (allStaffList && allStaffList.length > 0) {
       const staffToDisplay = [];
       allStaffList.forEach((oneStaff) => {
@@ -59,30 +57,37 @@ const AddPersonDrawerMainContent = () => {
           staffToDisplay.push(oneStaff);
         }
       });
-      setStaffToDisplayList(staffToDisplay);
+      setRemainingStaffToAdd(staffToDisplay);
     }
   };
 
   useEffect(() => {
-    setAllStaffLessAdds(allStaffList);
-    setTheAllStaffToDisplayList();
+    setRemainingStaffToAdd(allStaffList);  // handles navigate to issues
+    initializeRemainingStaffToAddList();
   }, [addPersonDrawerOpen]);
 
-  const searchFunction = () => {
-    // TODO:  This currently only searches for matches in the staff member's last name
+  const setMatchingCounter = (matchingElements) => {
+    const matchingCount = matchingElements.length === 0 ? '' : `${matchingElements.length} matches out of ${remainingStaffToAdd.length} staff members`;
+    setMatchingCountText(matchingCount);
+  };
+
+
+  const searchFunction = () => {   // Now searches first and last name
     const currentValue = searchStringRef.current.value;
     if (currentValue.length === 0) {
       setMatchingCountText('');
-      setTheAllStaffToDisplayList();
-      setStaffListLabelAdd(true);
+      setSearchResultsList(undefined);
     } else {
-      const isMatch = (element) => element.lastName.toLowerCase().includes(currentValue.toLowerCase());
-      const matchingElements = staffToDisplayList ? staffToDisplayList.filter((element) => isMatch(element)) : {};
-      setStaffToDisplayList(matchingElements);
-      const matchingCount = matchingElements.length === 0 ? '' : `${matchingElements.length} matches out of ${allStaffList.length} staff members`;
-      setMatchingCountText(matchingCount);
-      setStaffListLabelAdd(false);
-      console.log(matchingElements);
+      const isMatch = (element) => (element.lastName.toLowerCase().includes(currentValue.toLowerCase()) ||
+          element.firstName.toLowerCase().includes(currentValue.toLowerCase()));
+      const matchingElements = remainingStaffToAdd ? remainingStaffToAdd.filter((element) => isMatch(element)) : {};
+      if (matchingElements && matchingElements.length) {
+        setSearchResultsList(matchingElements);
+        setMatchingCounter(matchingElements);
+        console.log(matchingElements);
+      } else {
+        setMatchingCountText('');
+      }
     }
   };
 
@@ -96,15 +101,17 @@ const AddPersonDrawerMainContent = () => {
     };
     mutate(makeRequestParams(plainParams, {}));
     // Remove this staff from the All Staff less Adds list (since they were added to the team)
-    const updatedAllStaffLessAdds = allStaffLessAdds.filter((staff) => staff.id !== person.id);
-    setAllStaffLessAdds(updatedAllStaffLessAdds);
-    if (staffToDisplayList && staffToDisplayList.length > 0) {
-      // If we are currently showing filtered, remove this staff member from the filtered Staff To Display List
-      const updatedStaffToDisplayList = staffToDisplayList.filter((staff) => staff.id !== person.id);
-      setStaffToDisplayList(updatedStaffToDisplayList);
+    const updatedRemainingStaffToAdd = remainingStaffToAdd.filter((staff) => staff.id !== person.id);
+    setRemainingStaffToAdd(updatedRemainingStaffToAdd);
+    if (searchResultsList && searchResultsList.length) {
+      // also remove them from the searchResultsList if it exists
+      const updatedSearchResultsList = searchResultsList.filter((staff) => staff.id !== person.id);
+      setSearchResultsList(updatedSearchResultsList);
+      setMatchingCounter(updatedSearchResultsList);
     }
   };
 
+  const displayList = searchResultsList || remainingStaffToAdd || [];
   return (
     <AddPersonDrawerMainContentWrapper>
       <SearchBarWrapper>
@@ -120,11 +127,11 @@ const AddPersonDrawerMainContent = () => {
         />
         <MatchingPerson>{matchingCountText}</MatchingPerson>
       </SearchBarWrapper>
-      {(searchResultsList && searchResultsList.length > 0) && (
+      {(displayList && displayList.length > 0) && (
         <PersonSearchResultsWrapper>
-          <PersonListTitle>Search Results:</PersonListTitle>
+          <PersonListTitle>{ searchResultsList ? 'Filtered list of people to add to team: ' : 'Can be added to team: '}</PersonListTitle>
           <PersonList>
-            {searchResultsList.map((person) => (
+            {displayList.map((person) => (
               <PersonItem key={`personResult-${person.id}`}>
                 {person.firstName}
                 {' '}
@@ -140,24 +147,7 @@ const AddPersonDrawerMainContent = () => {
           </PersonList>
         </PersonSearchResultsWrapper>
       )}
-      <PersonDirectoryWrapper>
-        <PersonListTitle>{staffListLabelAdd ? 'Can be added to team' : 'Filtered list of people to add to team'}</PersonListTitle>
-        <PersonList>
-          {staffToDisplayList.map((person) => (
-            <PersonItem key={`personResult-${person.id}`}>
-              {person.firstName}
-              {' '}
-              {person.lastName}
-              {!arrayContains(person.id, teamMemberPersonIdList) && (
-                <>
-                  {' '}
-                  <SpanWithLinkStyle onClick={() => addClicked(person)}>add</SpanWithLinkStyle>
-                </>
-              )}
-            </PersonItem>
-          ))}
-        </PersonList>
-      </PersonDirectoryWrapper>
+
       <AddPersonWrapper>
         <AddPersonForm />
       </AddPersonWrapper>
@@ -176,9 +166,9 @@ const MatchingPerson = styled('div')`
   font-style: italic;
 `;
 
-const PersonDirectoryWrapper = styled('div')`
-  margin-top: 16px;
-`;
+// const PersonDirectoryWrapper = styled('div')`
+//   margin-top: 16px;
+// `;
 
 const PersonItem = styled('div')`
 `;

src/js/components/Person/PersonProfile.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
+import useGetFullNamePreferred from '../../react-query/useGetFullNamePreferred';
 import CopyQuestionnaireLink from '../Questionnaire/CopyQuestionnaireLink';
 
 
@@ -18,7 +19,7 @@ const PersonProfile = () => {
   return (
     <PersonProfileWrapper>
       <FullName>
-        {`${person.firstName} ${person.lastName}`}
+        {useGetFullNamePreferred(person)}
       </FullName>
       {/* <PersonDetails /> This was commented out as of January 28th, 2025 */}
       <CopyQuestionnaireLink />

src/js/components/Person/PersonSummaryRow.jsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
+import useGetFullNamePreferred from '../../react-query/useGetFullNamePreferred';
 import { useRemoveTeamMemberMutation } from '../../react-query/mutations';
 import { DeleteStyled, EditStyled } from '../Style/iconStyles';
 
@@ -52,7 +53,7 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
         }}
         width={200}
       >
-        {person.firstName} {person.lastName}
+        {useGetFullNamePreferred(person)}
       </PersonCell>
       <PersonCell id={`location-personId-${person.personId}`} $smallFont width={300}>
         {person.location}

src/js/contexts/ConnectAppContext.jsx

@@ -1,6 +1,6 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-// import { messageService } from '../stores/AppObservableStore';
+import { useFetchData } from '../react-query/WeConnectQuery';
 
 // Replaces AppObservableStore.js
 // Create the context
@@ -29,6 +29,16 @@ export const ConnectAppContextProvider = ({ children }) => {
     }
   };
 
+  const { data: dataP, isSuccess: isSuccessP, isFetching: isFetchingP, isStale: isStaleP } = useFetchData(['person-list-retrieve'], {});
+  useEffect(() => {
+    console.log('useFetchData in TeamHome (person-list-retrieve) useEffect:', dataP, isSuccessP, isFetchingP, isStaleP);
+    if (isSuccessP) {
+      // console.log('useFetchData in TeamHome (person-list-retrieve)useEffect data good:', dataP, isSuccessP, isFetchingP, isStaleP);
+      setAppContextValue('allStaffList', dataP ? dataP.personList : []);
+      console.log('allStaffList fetched in ConnectAppContext');
+    }
+  }, [dataP, isSuccessP, isFetchingP]);
+
   return (
     <ConnectAppContext.Provider value={{ getAppContextData, setAppContextValue, getAppContextValue, setAppContextValuesInBulk }}>
       {children}

src/js/pages/QuestionnaireAnswers.jsx

@@ -5,11 +5,12 @@ import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useParams } from 'react-router';
 import styled from 'styled-components';
-import { useFetchData } from '../react-query/WeConnectQuery';
 import DesignTokenColors from '../common/components/Style/DesignTokenColors';
 import { renderLog } from '../common/utils/logging';
 import { PageContentContainer } from '../components/Style/pageLayoutStyles';
 import webAppConfig from '../config';
+import useGetFullNamePreferred from '../react-query/useGetFullNamePreferred';
+import { useFetchData } from '../react-query/WeConnectQuery';
 
 
 // eslint-disable-next-line no-unused-vars
@@ -78,7 +79,7 @@ const QuestionnaireAnswers = ({ classes, match }) => {
         <AnsweredBy>
           Answered by:
           {' '}
-          <AnsweredBySpan>{person ? `${person.firstName} ${person.lastName}` : 'tbd'}</AnsweredBySpan>
+          <AnsweredBySpan>{useGetFullNamePreferred(person)}</AnsweredBySpan>
         </AnsweredBy>
         <FormControl classes={{ root: classes.formControl }}>
           {questionList && questionList.map((question) => (

src/js/pages/TeamHome.jsx

@@ -37,17 +37,7 @@ const TeamHome = ({ classes }) => {
       setAppContextValue('teamListNested', tList);
       updateTeam(tList);
     }
-  }, [isAddPersonDrawerOpen, data]);
-
-  const { data: dataP, isSuccess: isSuccessP, isFetching: isFetchingP, isStale: isStaleP } = useFetchData(['person-list-retrieve'], {});
-  useEffect(() => {
-    console.log('useFetchData in TeamHome (person-list-retrieve) useEffect:', dataP, isSuccessP, isFetchingP, isStaleP);
-    if (isSuccessP) {
-      // console.log('useFetchData in TeamHome (person-list-retrieve)useEffect data good:', dataP, isSuccessP, isFetchingP, isStaleP);
-      setAppContextValue('allStaffList', dataP ? dataP.personList : []);
-      // console.log('allStaffList --- dataP.personList:', dataP ? dataP.personList : []);
-    }
-  }, [dataP, isSuccessP, isFetchingP]);
+  }, [isAddPersonDrawerOpen, data, isSuccess]);
 
   const addTeamMemberClick = () => {
     // console.log('TeamHome addTeamMemberClick, teamId:', teamId);

src/js/react-query/useGetFullNamePreferred.js

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { useConnectAppContext } from '../contexts/ConnectAppContext';
+
+// When the function name starts with 'use' React treats it as a custom hook, and it can then access Context variables
+const useGetFullNamePreferred = (person) => {
+  const { getAppContextValue } = useConnectAppContext();
+  const [allStaffList] = useState(getAppContextValue('allStaffList'));
+  const [personId] = Object.values(person);  // This is silly, but this is a proof of concept
+  const foundPerson = allStaffList && allStaffList.find((onePerson) => onePerson.id === parseInt(personId));
+  let fullName = '';
+  if (foundPerson?.id >= 0) {
+    if (foundPerson?.firstNamePreferred) {
+      fullName += foundPerson.firstNamePreferred;
+    } else if (foundPerson?.firstName) {
+      fullName += foundPerson.firstName;
+    }
+    if (fullName.length > 0 && foundPerson.lastName) {
+      fullName += ' ';
+    }
+    if (foundPerson?.lastName) {
+      fullName += foundPerson.lastName;
+    }
+  }
+  return fullName;
+};
+
+export default useGetFullNamePreferred;