diff --git a/src/js/components/Person/AddPersonDrawerMainContent.jsx b/src/js/components/Person/AddPersonDrawerMainContent.jsx index ac304f9..a7f367b 100644 --- a/src/js/components/Person/AddPersonDrawerMainContent.jsx +++ b/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 ( @@ -120,11 +127,11 @@ const AddPersonDrawerMainContent = () => { /> {matchingCountText} - {(searchResultsList && searchResultsList.length > 0) && ( + {(displayList && displayList.length > 0) && ( - Search Results: + { searchResultsList ? 'Filtered list of people to add to team: ' : 'Can be added to team: '} - {searchResultsList.map((person) => ( + {displayList.map((person) => ( {person.firstName} {' '} @@ -140,24 +147,7 @@ const AddPersonDrawerMainContent = () => { )} - - {staffListLabelAdd ? 'Can be added to team' : 'Filtered list of people to add to team'} - - {staffToDisplayList.map((person) => ( - - {person.firstName} - {' '} - {person.lastName} - {!arrayContains(person.id, teamMemberPersonIdList) && ( - <> - {' '} - addClicked(person)}>add - - )} - - ))} - - + @@ -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')` `; diff --git a/src/js/components/Person/PersonProfile.jsx b/src/js/components/Person/PersonProfile.jsx index 8c1e771..d535911 100644 --- a/src/js/components/Person/PersonProfile.jsx +++ b/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 ( - {`${person.firstName} ${person.lastName}`} + {useGetFullNamePreferred(person)} {/* This was commented out as of January 28th, 2025 */} diff --git a/src/js/components/Person/PersonSummaryRow.jsx b/src/js/components/Person/PersonSummaryRow.jsx index 4aba8ea..8977190 100644 --- a/src/js/components/Person/PersonSummaryRow.jsx +++ b/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)} {person.location} diff --git a/src/js/contexts/ConnectAppContext.jsx b/src/js/contexts/ConnectAppContext.jsx index 254d996..ce7f6dd 100644 --- a/src/js/contexts/ConnectAppContext.jsx +++ b/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 ( {children} diff --git a/src/js/pages/QuestionnaireAnswers.jsx b/src/js/pages/QuestionnaireAnswers.jsx index 1bd815d..e54b4f5 100644 --- a/src/js/pages/QuestionnaireAnswers.jsx +++ b/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 }) => { Answered by: {' '} - {person ? `${person.firstName} ${person.lastName}` : 'tbd'} + {useGetFullNamePreferred(person)} {questionList && questionList.map((question) => ( diff --git a/src/js/pages/TeamHome.jsx b/src/js/pages/TeamHome.jsx index 67e564e..2eb6edb 100644 --- a/src/js/pages/TeamHome.jsx +++ b/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); diff --git a/src/js/react-query/useGetFullNamePreferred.js b/src/js/react-query/useGetFullNamePreferred.js new file mode 100644 index 0000000..f648e54 --- /dev/null +++ b/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;