Add Team working now. AddPerson working. addPersonToTeam is still work in progress.

src/App.jsx

@@ -29,7 +29,8 @@ const FAQ = React.lazy(() => import(/* webpackChunkName: 'FAQ' */ './js/pages/FA
 const Footer = React.lazy(() => import(/* webpackChunkName: 'Footer' */ './js/components/Navigation/Footer'));
 const Header = React.lazy(() => import(/* webpackChunkName: 'Header' */ './js/components/Navigation/Header'));
 const PageNotFound = React.lazy(() => import(/* webpackChunkName: 'PageNotFound' */ './js/pages/PageNotFound'));
-const TeamMembers = React.lazy(() => import(/* webpackChunkName: 'FAQ' */ './js/pages/TeamMembers'));
+const TeamMembers = React.lazy(() => import(/* webpackChunkName: 'TeamMembers' */ './js/pages/TeamMembers'));
+const Teams = React.lazy(() => import(/* webpackChunkName: 'Teams' */ './js/pages/Teams'));
 
 // There are just too many "prop spreadings" in the use of Route, if someone can figure out an alternative...
 /* eslint-disable react/jsx-props-no-spreading */
@@ -275,7 +276,9 @@ class App extends Component {
                 <Switch>
                   <Route path="/faq" exact><FAQ /></Route>
                   <Route path="/login" exact><Login /></Route>
+                  <Route path="/teams" exact component={Teams} />
                   <Route path="/team-members/:teamId" exact component={TeamMembers} />
+                  <Route path="/" exact component={Teams} />
 
                   <Route path="*" component={PageNotFound} />
                 </Switch>

src/js/actions/PersonActions.js

@@ -1,6 +1,17 @@
 import Dispatcher from '../common/dispatcher/Dispatcher';
 
 export default {
+  personListRetrieve (searchText = '') {
+    // console.log('PersonActions, personListRetrieve searchText:', searchText);
+    if (searchText) {
+      Dispatcher.loadEndpoint('person-list-retrieve', {
+        searchText,
+      });
+    } else {
+      Dispatcher.loadEndpoint('person-list-retrieve');
+    }
+  },
+
   personRetrieve (personId = '') {
     // console.log('PersonActions, personRetrieve personId:', personId);
     if (personId) {
@@ -11,4 +22,13 @@ export default {
       Dispatcher.loadEndpoint('person-retrieve');
     }
   },
+
+  personSave (personId = '', incomingData = {}) {
+    // console.log('PersonActions, personSave personId:', personId, ', incomingData:', incomingData);
+    const data = {
+      personId,
+      ...incomingData,
+    };
+    Dispatcher.loadEndpoint('person-save', data);
+  },
 };

src/js/actions/TeamActions.js

@@ -1,6 +1,20 @@
 import Dispatcher from '../common/dispatcher/Dispatcher';
+import PersonStore from '../stores/PersonStore'; // eslint-disable-line import/no-cycle
+import TeamStore from '../stores/TeamStore'; // eslint-disable-line import/no-cycle
 
 export default {
+  addPersonToTeam (personId, teamId) {
+    console.log('TeamActions, addPersonToTeam personId:', personId, ', teamId:', teamId);
+    const teamMemberName = PersonStore.getFullNamePreferred(personId) || '';
+    const data = {
+      personId,
+      teamId,
+      teamMemberName,
+      teamName: TeamStore.getTeamById(teamId).teamName || '',
+    };
+    Dispatcher.loadEndpoint('add-person-to-team', data);
+  },
+
   teamRetrieve (teamId = '') {
     // console.log('TeamActions, teamRetrieve teamId:', teamId);
     if (teamId) {
@@ -11,4 +25,18 @@ export default {
       Dispatcher.loadEndpoint('team-retrieve');
     }
   },
+
+  teamListRetrieve () {
+    // console.log('TeamActions, teamListRetrieve');
+    Dispatcher.loadEndpoint('team-list-retrieve');
+  },
+
+  teamSave (teamId = '', incomingData = {}) {
+    // console.log('PersonActions, teamSave teamId:', teamId, ', incomingData:', incomingData);
+    const data = {
+      teamId,
+      ...incomingData,
+    };
+    Dispatcher.loadEndpoint('team-save', data);
+  },
 };

src/js/common/utils/prepareDataPackageFromAppObservableStore.js

@@ -0,0 +1,19 @@
+import AppObservableStore from '../../stores/AppObservableStore';
+
+export default function prepareDataPackageFromAppObservableStore (acceptedVariables) {
+  // Extract data from AppObservableStore and put into data object, with Changed variable, to be sent to server
+  const data = {};
+  for (let i = 0; i < acceptedVariables.length; i++) {
+    // Ex/ emailPersonalToBeSaved and emailPersonalChanged
+    // console.log(`prepareData: ${acceptedVariables[i]}ToBeSaved:`, AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}ToBeSaved`));
+    if (AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}ToBeSaved`) &&
+        AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}Changed`)) {
+      // If the value has changed, add it to the data dictionary
+      if (AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}Changed`) === true) {
+        data[`${acceptedVariables[i]}Changed`] = true;
+        data[`${acceptedVariables[i]}ToBeSaved`] = AppObservableStore.getGlobalVariableState(`${acceptedVariables[i]}ToBeSaved`);
+      }
+    }
+  }
+  return data;
+}

src/js/components/AddPerson/AddPersonForm.jsx

@@ -0,0 +1,173 @@
+import { Button, FormControl, TextField } from '@mui/material';
+import { withStyles } from '@mui/styles';
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import PersonActions from '../../actions/PersonActions';
+import PersonStore from '../../stores/PersonStore';
+import { renderLog } from '../../common/utils/logging';
+import prepareDataPackageFromAppObservableStore from '../../common/utils/prepareDataPackageFromAppObservableStore';
+
+
+const AddPersonForm = ({ classes }) => {  //  classes, teamId
+  renderLog('AddPersonForm');  // Set LOG_RENDER_EVENTS to log all renders
+  const [emailPersonal, setEmailPersonal] = React.useState('');
+  const [firstName, setFirstName] = React.useState('');
+  const [lastName, setLastName] = React.useState('');
+  const [teamId, setTeamId] = React.useState(-1);
+
+  const onAppObservableStoreChange = () => {
+    setTeamId(AppObservableStore.getGlobalVariableState('addPersonDrawerTeamId'));
+  };
+
+  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', '');
+  };
+
+  const onPersonStoreChange = () => {
+    const mostRecentPersonChanged = PersonStore.getMostRecentPersonChanged();
+    // console.log('AddPersonForm onPersonStoreChange mostRecentPersonChanged:', mostRecentPersonChanged);
+    // TODO: Figure out why firstName, lastName, and emailPersonal are not being updated
+    // console.log('firstName:', firstName, ', lastName:', lastName, ', emailPersonal:', emailPersonal);
+    // console.log('emailPersonalToBeSaved:', AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved'));
+    if (mostRecentPersonChanged.emailPersonal === AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved')) {
+      saveNewPersonSuccessful();
+    }
+  };
+
+  const saveNewPerson = () => {
+    const acceptedVariables = ['emailPersonal', 'firstName', 'lastName'];
+    const data = prepareDataPackageFromAppObservableStore(acceptedVariables);
+    // console.log('saveNewPerson data:', data);
+    PersonActions.personSave('-1', data);
+  };
+
+  const updateEmailPersonal = (event) => {
+    if (event.target.name === 'emailPersonalToBeSaved') {
+      const newEmailPersonal = event.target.value;
+      AppObservableStore.setGlobalVariableState('emailPersonalChanged', true);
+      AppObservableStore.setGlobalVariableState('emailPersonalToBeSaved', newEmailPersonal);
+      console.log('updateEmailPersonal:', newEmailPersonal);
+      setEmailPersonal(newEmailPersonal);
+    }
+  };
+
+  const updateFirstName = (event) => {
+    if (event.target.name === 'firstNameToBeSaved') {
+      const newFirstName = event.target.value;
+      AppObservableStore.setGlobalVariableState('firstNameChanged', true);
+      AppObservableStore.setGlobalVariableState('firstNameToBeSaved', newFirstName);
+      console.log('updateFirstName:', newFirstName);
+      setFirstName(newFirstName);
+    }
+  };
+
+  const updateLastName = (event) => {
+    if (event.target.name === 'lastNameToBeSaved') {
+      const newLastName = event.target.value;
+      AppObservableStore.setGlobalVariableState('lastNameChanged', true);
+      AppObservableStore.setGlobalVariableState('lastNameToBeSaved', newLastName);
+      console.log('updateLastName:', newLastName);
+      setLastName(newLastName);
+    }
+  };
+
+  React.useEffect(() => {
+    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
+    onAppObservableStoreChange();
+    const personStoreListener = PersonStore.addListener(onPersonStoreChange);
+    onPersonStoreChange();
+    // console.log('Initial load emailPersonalToBeSaved:', AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved'));
+    if (AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved')) {
+      setEmailPersonal(AppObservableStore.getGlobalVariableState('emailPersonalToBeSaved'));
+    }
+    if (AppObservableStore.getGlobalVariableState('firstNameToBeSaved')) {
+      setFirstName(AppObservableStore.getGlobalVariableState('firstNameToBeSaved'));
+    }
+    if (AppObservableStore.getGlobalVariableState('lastNameToBeSaved')) {
+      setLastName(AppObservableStore.getGlobalVariableState('lastNameToBeSaved'));
+    }
+
+    return () => {
+      appStateSubscription.unsubscribe();
+      personStoreListener.remove();
+    };
+  }, []);
+
+  return (
+    <AddPersonFormWrapper>
+      <FormControl classes={{ root: classes.formControl }}>
+        <TextField
+          // classes={{ root: classes.textField }} // Not working yet
+          id="firstNameToBeSaved"
+          label="First Name"
+          name="firstNameToBeSaved"
+          margin="dense"
+          variant="outlined"
+          placeholder="First Name"
+          value={firstName}
+          onChange={updateFirstName}
+        />
+        <TextField
+          // classes={{ root: classes.textField }} // Not working yet
+          id="lastNameToBeSaved"
+          label="Last Name"
+          name="lastNameToBeSaved"
+          margin="dense"
+          variant="outlined"
+          placeholder="Last Name"
+          value={lastName}
+          onChange={updateLastName}
+        />
+        <TextField
+          // classes={{ root: classes.textField }} // Not working yet
+          id="emailPersonalToBeSaved"
+          label="Email Address, Personal"
+          name="emailPersonalToBeSaved"
+          margin="dense"
+          variant="outlined"
+          placeholder="Email Address, Personal"
+          value={emailPersonal}
+          onBlur={updateEmailPersonal}
+          onChange={updateEmailPersonal}
+        />
+        <Button
+          classes={{ root: classes.saveNewPersonButton }}
+          color="primary"
+          variant="contained"
+          onClick={saveNewPerson}
+        >
+          Save New Person
+        </Button>
+      </FormControl>
+    </AddPersonFormWrapper>
+  );
+};
+AddPersonForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = (theme) => ({
+  formControl: {
+    width: '100%',
+  },
+  saveNewPersonButton: {
+    width: 300,
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+    },
+  },
+});
+
+const AddPersonFormWrapper = styled('div')`
+`;
+
+export default withStyles(styles)(AddPersonForm);

src/js/components/AddTeam/AddTeamForm.jsx

@@ -0,0 +1,113 @@
+import { Button, FormControl, TextField } from '@mui/material';
+import { withStyles } from '@mui/styles';
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
+import TeamActions from '../../actions/TeamActions';
+import TeamStore from '../../stores/TeamStore';
+import { renderLog } from '../../common/utils/logging';
+import prepareDataPackageFromAppObservableStore from '../../common/utils/prepareDataPackageFromAppObservableStore';
+
+
+const AddTeamForm = ({ classes }) => {  //  classes, teamId
+  renderLog('AddTeamForm');  // Set LOG_RENDER_EVENTS to log all renders
+  const [teamName, setTeamName] = React.useState('');
+
+  const onAppObservableStoreChange = () => {
+  };
+
+  const saveNewTeamSuccessful = () => {
+    AppObservableStore.setGlobalVariableState('addTeamDrawerOpen', false);
+    AppObservableStore.setGlobalVariableState('teamNameChanged', false);
+    AppObservableStore.setGlobalVariableState('teamNameToBeSaved', '');
+  };
+
+  const onTeamStoreChange = () => {
+    const mostRecentTeamChanged = TeamStore.getMostRecentTeamChanged();
+    console.log('AddTeamForm onTeamStoreChange mostRecentTeamChanged:', mostRecentTeamChanged);
+    // TODO: Figure out why teamName is not being updated locally
+    // console.log('teamName:', teamName);
+    if (mostRecentTeamChanged.teamName === AppObservableStore.getGlobalVariableState('teamNameToBeSaved')) {
+      saveNewTeamSuccessful();
+    }
+  };
+
+  const saveNewTeam = () => {
+    const acceptedVariables = ['teamName'];
+    const data = prepareDataPackageFromAppObservableStore(acceptedVariables);
+    // console.log('saveNewTeam data:', data);
+    TeamActions.teamSave('-1', data);
+  };
+
+  const updateTeamName = (event) => {
+    if (event.target.name === 'teamNameToBeSaved') {
+      const newTeamName = event.target.value;
+      AppObservableStore.setGlobalVariableState('teamNameChanged', true);
+      AppObservableStore.setGlobalVariableState('teamNameToBeSaved', newTeamName);
+      // console.log('updateTeamName:', newTeamName);
+      setTeamName(newTeamName);
+    }
+  };
+
+  React.useEffect(() => {
+    const appStateSubscription = messageService.getMessage().subscribe(() => onAppObservableStoreChange());
+    onAppObservableStoreChange();
+    const teamStoreListener = TeamStore.addListener(onTeamStoreChange);
+    onTeamStoreChange();
+    if (AppObservableStore.getGlobalVariableState('teamNameToBeSaved')) {
+      setTeamName(AppObservableStore.getGlobalVariableState('teamNameToBeSaved'));
+    }
+
+    return () => {
+      appStateSubscription.unsubscribe();
+      teamStoreListener.remove();
+    };
+  }, []);
+
+  return (
+    <AddTeamFormWrapper>
+      <FormControl classes={{ root: classes.formControl }}>
+        <TextField
+          // classes={{ root: classes.textField }} // Not working yet
+          id="teamNameToBeSaved"
+          label="Team Name"
+          name="teamNameToBeSaved"
+          margin="dense"
+          variant="outlined"
+          placeholder="Team Name"
+          value={teamName}
+          onChange={updateTeamName}
+        />
+        <Button
+          classes={{ root: classes.saveNewTeamButton }}
+          color="primary"
+          variant="contained"
+          onClick={saveNewTeam}
+        >
+          Save New Team
+        </Button>
+      </FormControl>
+    </AddTeamFormWrapper>
+  );
+};
+AddTeamForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const styles = (theme) => ({
+  formControl: {
+    width: '100%',
+  },
+  saveNewTeamButton: {
+    width: 300,
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+    },
+  },
+});
+
+const AddTeamFormWrapper = styled('div')`
+`;
+
+export default withStyles(styles)(AddTeamForm);