Displaying more fields on Teams landing page. Capturing people from team-list-retrieve. Can update existing person (Added EditPersonDrawer).

src/js/actions/PersonActions.js

@@ -23,7 +23,7 @@ export default {
     }
   },
 
-  personSave (personId = '', incomingData = {}) {
+  personSave (personId = 0, incomingData = {}) {
     // console.log('PersonActions, personSave personId:', personId, ', incomingData:', incomingData);
     const data = {
       personId,

src/js/components/Drawers/Drawers.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@mui/styles';
 import AddPersonDrawer from './AddPersonDrawer';
 import AddTeamDrawer from './AddTeamDrawer';
+import EditPersonDrawer from './EditPersonDrawer';
 import { messageService } from '../../stores/AppObservableStore';
 import { renderLog } from '../../common/utils/logging';
 
@@ -27,6 +28,7 @@ const Drawers = () => {  //  classes, teamId
     <Suspense fallback={<></>}>
       <AddPersonDrawer />
       <AddTeamDrawer />
+      <EditPersonDrawer />
     </Suspense>
   );
 };

src/js/components/Drawers/EditPersonDrawer.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+import DrawerTemplateA from './DrawerTemplateA';
+import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import PersonStore from '../../stores/PersonStore';
+import TeamStore from '../../stores/TeamStore';
+import { renderLog } from '../../common/utils/logging';
+import EditPersonDrawerMainContent from './EditPersonDrawerMainContent';
+
+
+const EditPersonDrawer = ({ classes }) => {  //  classes, teamId
+  renderLog('EditPersonDrawer');  // Set LOG_RENDER_EVENTS to log all renders
+  const [headerTitleJsx, setHeaderTitleJsx] = React.useState(<></>);
+  const [headerFixedJsx, setHeaderFixedJsx] = React.useState(<></>);
+  const [teamId, setTeamId] = React.useState(-1);
+
+  const onAppObservableStoreChange = () => {
+    setTeamId(AppObservableStore.getGlobalVariableState('editPersonDrawerTeamId'));
+  };
+
+  const onRetrieveTeamChange = () => {
+  };
+
+  const onPersonStoreChange = () => {
+    onRetrieveTeamChange();
+  };
+
+  const onTeamStoreChange = () => {
+    onRetrieveTeamChange();
+  };
+
+  React.useEffect(() => {
+    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
+    onAppObservableStoreChange();
+    const personStoreListener = PersonStore.addListener(onPersonStoreChange);
+    onPersonStoreChange();
+    const teamStoreListener = TeamStore.addListener(onTeamStoreChange);
+    onTeamStoreChange();
+
+    setHeaderTitleJsx(<>Edit Person</>);
+
+    return () => {
+      appStateSubscription.unsubscribe();
+      personStoreListener.remove();
+      teamStoreListener.remove();
+    };
+  }, []);
+
+  return (
+    <DrawerTemplateA
+      drawerId="editPersonDrawer"
+      drawerOpenGlobalVariableName="editPersonDrawerOpen"
+      mainContentJsx={<EditPersonDrawerMainContent />}
+      headerTitleJsx={headerTitleJsx}
+      headerFixedJsx={headerFixedJsx}
+    />
+  );
+};
+EditPersonDrawer.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = () => ({
+});
+
+const EditPersonDrawerWrapper = styled('div')`
+`;
+
+export default withStyles(styles)(EditPersonDrawer);

src/js/components/Drawers/EditPersonDrawerMainContent.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import PersonActions from '../../actions/PersonActions';
+import PersonStore from '../../stores/PersonStore';
+import TeamStore from '../../stores/TeamStore';
+import apiCalming from '../../common/utils/apiCalming';
+import { renderLog } from '../../common/utils/logging';
+import EditPersonForm from '../Person/EditPersonForm';
+
+
+const EditPersonDrawerMainContent = ({ classes }) => {  //  classes, teamId
+  renderLog('EditPersonDrawerMainContent');  // Set LOG_RENDER_EVENTS to log all renders
+  const [teamId, setTeamId] = React.useState(-1);
+
+  const onAppObservableStoreChange = () => {
+    const teamIdTemp = AppObservableStore.getGlobalVariableState('editPersonDrawerTeamId');
+    // console.log('EditPersonDrawerMainContent AppObservableStore-editPersonDrawerTeamId: ', teamIdTemp);
+    setTeamId(teamIdTemp);
+  };
+
+  const onPersonStoreChange = () => {
+    const personIdTemp = AppObservableStore.getGlobalVariableState('editPersonDrawerPersonId');
+    const teamIdTemp = AppObservableStore.getGlobalVariableState('editPersonDrawerTeamId');
+    // console.log('EditPersonDrawerMainContent personSearchResultsList:', personSearchResultsListTemp);
+  };
+
+  const onTeamStoreChange = () => {
+    const teamIdTemp = AppObservableStore.getGlobalVariableState('editPersonDrawerTeamId');
+    // console.log('EditPersonDrawerMainContent-onTeamStoreChange teamIdTemp: ', teamIdTemp);
+  };
+
+  React.useEffect(() => {
+    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
+    onAppObservableStoreChange();
+    const personStoreListener = PersonStore.addListener(onPersonStoreChange);
+    onPersonStoreChange();
+    const teamStoreListener = TeamStore.addListener(onTeamStoreChange);
+    onTeamStoreChange();
+
+    const personIdTemp = AppObservableStore.getGlobalVariableState('editPersonDrawerPersonId');
+    if (apiCalming(`personRetrieve-${personIdTemp}`, 30000)) {
+      PersonActions.personRetrieve(personIdTemp);
+    }
+
+    return () => {
+      // console.log('EditPersonDrawerMainContent cleanup');
+      appStateSubscription.unsubscribe();
+      personStoreListener.remove();
+      teamStoreListener.remove();
+    };
+  }, []);
+
+  return (
+    <EditPersonDrawerMainContentWrapper>
+      <EditPersonWrapper>
+        <EditPersonForm />
+      </EditPersonWrapper>
+    </EditPersonDrawerMainContentWrapper>
+  );
+};
+EditPersonDrawerMainContent.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = () => ({
+});
+
+const EditPersonDrawerMainContentWrapper = styled('div')`
+`;
+
+const EditPersonWrapper = styled('div')`
+  margin-top: 32px;
+`;
+
+export default withStyles(styles)(EditPersonDrawerMainContent);

src/js/components/Person/AddPersonForm.jsx

@@ -10,6 +10,7 @@ import TeamStore from '../../stores/TeamStore';
 import { renderLog } from '../../common/utils/logging';
 import prepareDataPackageFromAppObservableStore from '../../common/utils/prepareDataPackageFromAppObservableStore';
 
+const FIELDS_IN_FORM = ['emailPersonal', 'firstName', 'lastName'];
 
 const AddPersonForm = ({ classes }) => {  //  classes, teamId
   renderLog('AddPersonForm');  // Set LOG_RENDER_EVENTS to log all renders
@@ -25,12 +26,11 @@ const AddPersonForm = ({ classes }) => {  //  classes, teamId
   const saveNewPersonSuccessful = () => {
     AppObservableStore.setGlobalVariableState('addPersonDrawerOpen', false);
     AppObservableStore.setGlobalVariableState('addPersonDrawerTeamId', -1);
-    AppObservableStore.setGlobalVariableState('emailPersonalChanged', false);
-    AppObservableStore.setGlobalVariableState('emailPersonalToBeSaved', '');
-    AppObservableStore.setGlobalVariableState('firstNameChanged', false);
-    AppObservableStore.setGlobalVariableState('firstNameToBeSaved', '');
-    AppObservableStore.setGlobalVariableState('lastNameChanged', false);
-    AppObservableStore.setGlobalVariableState('lastNameToBeSaved', '');
+    for (let i = 0; i < FIELDS_IN_FORM.length; i++){
+      const fieldName = FIELDS_IN_FORM[i];
+      AppObservableStore.setGlobalVariableState(`${fieldName}Changed`, false);
+      AppObservableStore.setGlobalVariableState(`${fieldName}ToBeSaved`, '');
+    }
   };
 
   const onPersonStoreChange = () => {
@@ -45,7 +45,7 @@ const AddPersonForm = ({ classes }) => {  //  classes, teamId
   };
 
   const saveNewPerson = () => {
-    const acceptedVariables = ['emailPersonal', 'firstName', 'lastName'];
+    const acceptedVariables = FIELDS_IN_FORM;
     const data = prepareDataPackageFromAppObservableStore(acceptedVariables);
     if (teamId >= 0) {
       data.teamId = teamId;