Merge branch 'develop' into steveStaffClientFeb15-9am

src/js/common/components/Search/SearchBase.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { createRef } from 'react';
 import styled from 'styled-components';
 import colors from '../Style/Colors';
 import normalizedImagePath from '../../utils/normalizedImagePath';
@@ -11,6 +11,13 @@ class SearchBase extends React.Component {
   constructor (props) {
     super(props);
     this.state = { searchText: '' };
+    this.inputRef = createRef();
+  }
+
+  componentDidMount () {
+    if (this.inputRef.current) {
+      this.inputRef.current.focus();
+    }
   }
 
   handleInputChange = (event) => {
@@ -40,12 +47,14 @@ class SearchBase extends React.Component {
       <SearchBaseWrapper>
         {!this.state.searchText && <SearchIcon />}
         <SearchInput
-          type="search"
-          placeholder={this.props.placeholder}
-          value={this.state.searchText}
+          autoFocus
+          maxLength={50}
           onBlur={this.props.onBlur}
           onChange={this.handleInputChange}
-          maxLength={50}
+          placeholder={this.props.placeholder}
+          ref={this.inputRef}
+          type="search"
+          value={this.state.searchText}
         />
         {this.state.searchText && <ClearButton onClick={this.handleClear} />}
       </SearchBaseWrapper>
@@ -110,7 +119,6 @@ const SearchInput = styled('input')`
   padding-right: 40px;
   padding-left: 12px;
 
-
   &:focus-visible {
     border: none;
     outline: ${colors.primary} solid 2px !important;

src/js/components/Drawers/AddPersonDrawer.jsx

@@ -1,19 +1,26 @@
 import React from 'react';
 import { renderLog } from '../../common/utils/logging';
 import AddPersonDrawerMainContent from '../Person/AddPersonDrawerMainContent';
+import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import DrawerTemplateA from './DrawerTemplateA';
 
 
 const AddPersonDrawer = () => {
   renderLog('AddPersonDrawer');  // Set LOG_RENDER_EVENTS to log all renders
+  const { getAppContextValue, setAppContextValue } = useConnectAppContext();
+
+  const onDrawerClose = () => {
+    setAppContextValue('addPersonDrawerTeam', undefined);
+  };
 
   return (
     <DrawerTemplateA
       drawerId="addPersonDrawer"
       drawerOpenGlobalVariableName="addPersonDrawerOpen"
       mainContentJsx={<AddPersonDrawerMainContent />}
-      headerTitleJsx={<>Add Team Member</>}
+      headerTitleJsx={<>{getAppContextValue('AddPersonDrawerLabel')}</>}
       headerFixedJsx={<></>}
+      onDrawerClose={onDrawerClose}
     />
   );
 };

src/js/components/Drawers/DrawerTemplateA.jsx

@@ -11,7 +11,8 @@ import { cordovaDrawerTopMargin } from '../../utils/cordovaOffsets';
 import { DrawerHeaderAnimateDownInnerContainer, DrawerHeaderAnimateDownOuterContainer, DrawerHeaderWrapper, DrawerTitle } from '../Style/drawerLayoutStyles';
 
 
-const DrawerTemplateA = ({ classes, drawerId, drawerOpenGlobalVariableName, headerFixedJsx, headerTitleJsx, mainContentJsx }) => {  //  classes, teamId
+const DrawerTemplateA = (props) => {
+  const { classes, drawerId, drawerOpenGlobalVariableName, headerFixedJsx, headerTitleJsx, mainContentJsx, onDrawerClose } = props;
   renderLog(`DrawerTemplateA (${drawerId})`);  // Set LOG_RENDER_EVENTS to log all renders
   const { getAppContextData, setAppContextValue, getAppContextValue } = useConnectAppContext();
 
@@ -31,6 +32,13 @@ const DrawerTemplateA = ({ classes, drawerId, drawerOpenGlobalVariableName, head
     }
   };
 
+  const onDrawerCloseLocal = () => {
+    setAppContextValue(drawerOpenGlobalVariableName, false);
+    if (onDrawerClose) {
+      onDrawerClose();
+    }
+  };
+
   useEffect(() => {
     // console.log('DrawerTemplateA: Context value changed: ',
     //   drawerId, drawerOpenGlobalVariableName, getAppContextValue(drawerOpenGlobalVariableName));
@@ -61,7 +69,7 @@ const DrawerTemplateA = ({ classes, drawerId, drawerOpenGlobalVariableName, head
       classes={{ paper: classes.drawer }}
       direction="left"
       id={drawerId}
-      onClose={() => setAppContextValue(drawerOpenGlobalVariableName, false)}
+      onClose={onDrawerCloseLocal}
       open={drawerOpen}
     >
       <DrawerHeaderWrapper>
@@ -73,7 +81,7 @@ const DrawerTemplateA = ({ classes, drawerId, drawerOpenGlobalVariableName, head
             aria-label="Close"
             className={classes.closeButton}
             id={`${drawerId}Close`}
-            onClick={() => setAppContextValue(drawerOpenGlobalVariableName, false)}
+            onClick={onDrawerCloseLocal}
             size="large"
           >
             <span className="u-cursor--pointer">
@@ -100,6 +108,7 @@ DrawerTemplateA.propTypes = {
   mainContentJsx: PropTypes.object,
   headerTitleJsx: PropTypes.object,
   headerFixedJsx: PropTypes.object,
+  onDrawerClose: PropTypes.func,
 };
 
 const styles = () => ({

src/js/components/Person/AddPersonDrawerMainContent.jsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import arrayContains from '../../common/utils/arrayContains';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
+import { getTeamMembersListByTeamId } from '../../models/TeamModel';
 import makeRequestParams from '../../react-query/makeRequestParams';
 import { useAddPersonToTeamMutation } from '../../react-query/mutations';
 import { SpanWithLinkStyle } from '../Style/linkStyles';
@@ -14,50 +15,68 @@ import AddPersonForm from './AddPersonForm';
 const AddPersonDrawerMainContent = () => {
   renderLog('AddPersonDrawerMainContent');
   const { apiDataCache, getAppContextValue } = useConnectAppContext();
-  const { allPeopleCache } = apiDataCache;
+  const { allPeopleCache, allTeamsCache } = apiDataCache;
   const { mutate } = useAddPersonToTeamMutation();
 
   // const params  = useParams();
   // console.log('AddPersonDrawerMainContent params: ', params);
 
+  const [addToTeamList, setAddToTeamList] = useState([]);
   const [allPeopleList, setAllPeopleList] = useState([]);
   const [remainingPeopleToAdd, setRemainingPeopleToAdd] = useState([]);
   const [searchResultsList, setSearchResultsList] = useState(undefined);
-  const [thisTeamsCurrentMembersList] = useState(getAppContextValue('addPersonDrawerTeamMemberList'));
+  const [thisTeamsCurrentMembersList, setThisTeamsCurrentMembersList] = useState([]);
   const [team] = useState(getAppContextValue('addPersonDrawerTeam'));
   const [teamMemberPersonIdList] = useState([]);
   const [matchingCountText, setMatchingCountText] = useState('');
 
   const searchStringRef = useRef('');
 
-  const initializeRemainingPeopleToAddList = () => {
+  const updateRemainingPeopleToAdd = () => {
     // console.log('initializeTheRemainingPeopleToAddListList in AddPersonDrawerMainContent');
     // Start with the passed in allPeopleList, create the remainingPeopleToAddList, by removing any people already on the team
-    if (allPeopleList && allPeopleList.length > 0) {
-      const personToDisplay = [];
-      allPeopleList.forEach((onePeople) => {
-        const isOnTeam = thisTeamsCurrentMembersList.some((obj) => obj.id === onePeople.id);
+    if (allPeopleList && allPeopleList.length > 0 && thisTeamsCurrentMembersList && thisTeamsCurrentMembersList.length >= 0) {
+      const remainingPeopleToAddTemp = [];
+      allPeopleList.forEach((onePerson) => {
+        const isOnTeam = thisTeamsCurrentMembersList.some((obj) => obj.id === onePerson.personId);
         if (!isOnTeam) {
-          personToDisplay.push(onePeople);
+          remainingPeopleToAddTemp.push(onePerson);
         }
       });
-      setRemainingPeopleToAdd(personToDisplay);
+      setRemainingPeopleToAdd(remainingPeopleToAddTemp);
     }
   };
 
   useEffect(() => {
-    initializeRemainingPeopleToAddList();
-  }, [apiDataCache]);
+    setAllPeopleList(Object.values(allPeopleCache));
+  }, [allPeopleCache]);
 
   useEffect(() => {
-    initializeRemainingPeopleToAddList();
-  }, [allPeopleList]);
+    const teamId = team ? team.teamId : -1;
+    if (teamId >= 0) {
+      const teamMembersListTemp = getTeamMembersListByTeamId(teamId, apiDataCache);
+      // console.log('useEffect in AddPersonDrawerMainContent teamMembersListTemp:', teamMembersListTemp);
+      setThisTeamsCurrentMembersList(teamMembersListTemp);
+    } else {
+      console.log('useEffect in AddPersonDrawerMainContent teamId is -1, so no teamId');
+    }
+  }, [allPeopleCache, allPeopleList, allTeamsCache, team]);
 
   useEffect(() => {
-    // console.log('useEffect in AddPersonDrawerMainContent allPeopleCache:', allPeopleCache);
+    updateRemainingPeopleToAdd();
+  }, [thisTeamsCurrentMembersList]);
+
+  useEffect(() => {
+    // TODO: Need to deal with preferred name searching and display, very possible but it will get more complicated
+    let addToTeamListTemp = searchResultsList || remainingPeopleToAdd || [];
+    addToTeamListTemp = addToTeamListTemp.filter((person) => person.firstName.length || person.lastName.length);
+    setAddToTeamList(addToTeamListTemp);
+  }, [searchResultsList, remainingPeopleToAdd]);
+
+  useEffect(() => {
+    // console.log('== INITIAL useEffect in AddPersonDrawerMainContent');
     if (allPeopleCache) {
       setAllPeopleList(Object.values(allPeopleCache));
-      setRemainingPeopleToAdd(Object.values(allPeopleCache));  // handles navigate to issues
     }
   }, []);
 
@@ -85,50 +104,52 @@ const AddPersonDrawerMainContent = () => {
     }
   };
 
-  const addClicked = (person) => {
+  const addClicked = (incomingPerson) => {
+    const personId = incomingPerson ? incomingPerson.personId : -1;
+    const teamId = team ? team.teamId : -1;
+    const teamName = team ? team.teamName : '';
     const plainParams = {
-      personId: person.id,
-      teamId: team.teamId,
-      teamMemberFirstName: person.firstName,
-      teamMemberLastName: person.lastName,
-      teamName: team.teamName,
+      personId,
+      teamId,
+      teamMemberFirstName: incomingPerson.firstName,
+      teamMemberLastName: incomingPerson.lastName,
+      teamName,
     };
     mutate(makeRequestParams(plainParams, {}));
     // Remove this person from the All People less Adds list (since they were added to the team)
-    const updatedRemainingPeopleToAdd = remainingPeopleToAdd.filter((p) => p.id !== person.id);
+
+    const updatedRemainingPeopleToAdd = remainingPeopleToAdd.filter((person) => person.personId !== incomingPerson.personId);
     setRemainingPeopleToAdd(updatedRemainingPeopleToAdd);
-    if (searchResultsList && searchResultsList.length) {
+    if (searchResultsList && searchResultsList.length >= 0) {
       // also remove them from the searchResultsList if it exists
-      const updatedSearchResultsList = searchResultsList.filter((p) => p.id !== person.id);
+      const updatedSearchResultsList = searchResultsList.filter((person) => person.personId !== incomingPerson.personId);
       setSearchResultsList(updatedSearchResultsList);
       setMatchingCounter(updatedSearchResultsList);
     }
   };
 
-  // TODO: Need to deal with preferred name searching and display, very possible but it will get more complicated
-  let displayList = searchResultsList || remainingPeopleToAdd || [];
-  displayList = displayList.filter((person) => person.firstName.length || person.lastName.length);
-
   return (
     <AddPersonDrawerMainContentWrapper>
-      <SearchBarWrapper>
-        <TextField
-          id="search_input"
-          label="Search for team members"
-          inputRef={searchStringRef}
-          name="searchByName"
-          onChange={searchFunction}
-          placeholder="Search by name"
-          defaultValue=""
-          sx={{ minWidth: '250px' }}
-        />
-        <MatchingPerson>{matchingCountText}</MatchingPerson>
-      </SearchBarWrapper>
-      {(displayList && displayList.length > 0) && (
+      {team && team.teamId >= 0 && (
+        <SearchBarWrapper>
+          <TextField
+            id="search_input"
+            label="Search for team members"
+            inputRef={searchStringRef}
+            name="searchByName"
+            onChange={searchFunction}
+            placeholder="Search by name"
+            defaultValue=""
+            sx={{ minWidth: '250px' }}
+          />
+          <MatchingPerson>{matchingCountText}</MatchingPerson>
+        </SearchBarWrapper>
+      )}
+      {(addToTeamList && addToTeamList.length > 0) && (
         <PersonSearchResultsWrapper>
           <PersonListTitle>{ searchResultsList ? 'Filtered list of people to add to team: ' : 'Can be added to team: '}</PersonListTitle>
           <PersonList>
-            {displayList.map((person) => (
+            {addToTeamList.map((person) => (
               <PersonItem key={`personResult-${person.id}`}>
                 {person.firstName}
                 {' '}

src/js/components/Person/AddPersonForm.jsx

@@ -10,7 +10,7 @@ import { usePersonSaveMutation } from '../../react-query/mutations';
 
 const AddPersonForm = ({ classes }) => {  //  classes, teamId
   renderLog('AddPersonForm');
-  const { getAppContextValue } = useConnectAppContext();
+  const { getAppContextValue, setAppContextValue } = useConnectAppContext();
   const { mutate } = usePersonSaveMutation();
 
   const [teamId, setTeamId] = useState(-1);
@@ -23,10 +23,11 @@ const AddPersonForm = ({ classes }) => {  //  classes, teamId
 
   useEffect(() => {  // Replaces onAppObservableStoreChange and will be called whenever the context value changes
     // console.log('AddPersonForm: Context value changed:', true);
-    setTeamId(getAppContextValue('addPersonDrawerTeam').id);
-    setTeamName(getAppContextValue('addPersonDrawerTeam').teamName);
-  }, []);
-  // }, [getAppContextValue]);  // TODO DALE: commented out for now to avoid infinite loop
+    if (getAppContextValue('addPersonDrawerTeam')) {
+      setTeamId(getAppContextValue('addPersonDrawerTeam').id);
+      setTeamName(getAppContextValue('addPersonDrawerTeam').teamName);
+    }
+  }, [getAppContextValue]);
 
 
   const saveNewPerson = () => {
@@ -41,6 +42,9 @@ const AddPersonForm = ({ classes }) => {  //  classes, teamId
       teamName,
     };
     mutate(makeRequestParams(plainParams, data));
+    setAppContextValue('addPersonDrawerOpen', false);
+    setAppContextValue('addPersonDrawerLabel', '');
+    setAppContextValue('addPersonDrawerTeam', undefined);
   };
 
   const updateSaveButton = () => {
@@ -53,7 +57,6 @@ const AddPersonForm = ({ classes }) => {  //  classes, teamId
     }
   };
 
-
   return (
     <AddPersonFormWrapper>
       <FormControl classes={{ root: classes.formControl }}>

src/js/components/Person/EditPersonDrawerMainContent.jsx

@@ -1,24 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
-import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import EditPersonForm from './EditPersonForm';
 
 
 const EditPersonDrawerMainContent = () => {
   renderLog('EditPersonDrawerMainContent');
-  const { getAppContextValue } = useConnectAppContext();
-
-  // eslint-disable-next-line no-unused-vars
-  const [teamId, setTeamId] = useState(-1);
-
-  useEffect(() => {  // Replaces onAppObservableStoreChange and will be called whenever the context value changes
-    // console.log('EditPersonDrawerMainContent: Context value changed:', true);
-    // 2/14/25 warning  React Hook useEffect contains a call to 'setTeamId'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [getAppContextValue] as a second argument to the useEffect Hook  react-hooks/exhaustive-deps
-    const teamIdTemp = getAppContextValue('editPersonDrawerTeamId');
-    setTeamId(teamIdTemp);
-  });
-  // }, [getAppContextValue]);  // TODO DALE: commented out for now to avoid infinite loop
 
   return (
     <EditPersonDrawerMainContentWrapper>

src/js/components/Team/AddTeamDrawerMainContent.jsx

@@ -18,6 +18,10 @@ const AddTeamDrawerMainContent = ({ classes }) => {  //  classes, teamId
   const [allTeamsList] = useState(Object.values(allTeamsCache));
   const [teamSearchResultsList, setTeamSearchResultsList] = useState([]);
 
+  const clearFunction = () => {
+    setTeamSearchResultsList([]);
+  };
+
   const searchFunction = (incomingSearchText) => {
     // console.log('AddTeamDrawerMainContent searchFunction incomingSearchText: ', incomingSearchText);
     const isSearching = (incomingSearchText && incomingSearchText.length > 0);
@@ -40,10 +44,6 @@ const AddTeamDrawerMainContent = ({ classes }) => {  //  classes, teamId
     }
   };
 
-  const clearFunction = () => {
-    setTeamSearchResultsList([]);
-  };
-
   return (
     <AddTeamDrawerMainContentWrapper>
       <SearchBarWrapper>