diff --git a/src/js/components/Drawers/DrawerTemplateA.jsx b/src/js/components/Drawers/DrawerTemplateA.jsx index 09b36bb..5811f49 100644 --- a/src/js/components/Drawers/DrawerTemplateA.jsx +++ b/src/js/components/Drawers/DrawerTemplateA.jsx @@ -18,7 +18,7 @@ const DrawerTemplateA = (props) => { // eslint-disable-next-line no-unused-vars const [scrolledDown, setScrolledDown] = useState(false); - const drawerOpen = getAppContextValue(drawerOpenGlobalVariableName); + const drawerOpen = getAppContextValue(drawerOpenGlobalVariableName) || false; // console.log('DrawerTemplateA drawerOpen: ', drawerOpenGlobalVariableName, drawerOpen); diff --git a/src/js/components/Navigation/HeaderBar.jsx b/src/js/components/Navigation/HeaderBar.jsx index b474812..a5f663d 100644 --- a/src/js/components/Navigation/HeaderBar.jsx +++ b/src/js/components/Navigation/HeaderBar.jsx @@ -10,6 +10,7 @@ import { normalizedHrefPage } from '../../common/utils/hrefUtils'; import { renderLog } from '../../common/utils/logging'; import { useConnectAppContext } from '../../contexts/ConnectAppContext'; import { clearSignedInGlobals } from '../../contexts/contextFunctions'; +import { viewerCanSeeOrDo } from '../../models/AuthModel'; import { useLogoutMutation } from '../../react-query/mutations'; import weConnectQueryFn, { METHOD } from '../../react-query/WeConnectQuery'; import { displayTopMenuShadow } from '../../utils/applicationUtils'; @@ -21,7 +22,8 @@ import HeaderBarLogo from './HeaderBarLogo'; const HeaderBar = ({ hideTabs }) => { renderLog('HeaderBar'); const navigate = useNavigate(); - const { getAppContextValue, setAppContextValue } = useConnectAppContext(); + const { apiDataCache, getAppContextValue, setAppContextValue } = useConnectAppContext(); + const { viewerAccessRights } = apiDataCache; const { mutate: mutateLogout } = useLogoutMutation(); const [scrolledDown] = useState(false); @@ -141,7 +143,9 @@ const HeaderBar = ({ hideTabs }) => { > handleTabChangeClick('1')} /> handleTabChangeClick('2')} /> - handleTabChangeClick('3')} /> + {viewerCanSeeOrDo('canViewSystemSettings', viewerAccessRights) && ( + handleTabChangeClick('3')} /> + )} )} diff --git a/src/js/components/Person/PersonSummaryRow.jsx b/src/js/components/Person/PersonSummaryRow.jsx index e892af0..ef04899 100644 --- a/src/js/components/Person/PersonSummaryRow.jsx +++ b/src/js/components/Person/PersonSummaryRow.jsx @@ -11,14 +11,14 @@ import { } from '../../models/PersonModel'; import { useRemoveTeamMemberMutation } from '../../react-query/mutations'; import { DeleteStyled, EditStyled } from '../Style/iconStyles'; -import { viewerCanSeeOrDo } from '../../models/AuthModel'; +import { viewerCanSeeOrDo, viewerCanSeeOrDoForThisTeam } from '../../models/AuthModel'; // import { useRemoveTeamMemberMutationDiverged } from '../../models/TeamModel'; const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => { renderLog('PersonSummaryRow'); // Set LOG_RENDER_EVENTS to log all renders const { apiDataCache, setAppContextValue } = useConnectAppContext(); - const { viewerAccessRights } = apiDataCache; + const { viewerAccessRights, viewerTeamAccessRights } = apiDataCache; const { mutate } = useRemoveTeamMemberMutation(); // const [person, setPerson] = useState(useGetPersonById(personId)); 2/5/2025 does not work @@ -50,6 +50,7 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => { // } // }, [apiDataCache]); + const canEditPerson = viewerCanSeeOrDo('canEditPersonAnyone', viewerAccessRights) || viewerCanSeeOrDoForThisTeam('canEditPersonThisTeam', teamId, viewerTeamAccessRights); const hasEditRights = true; return ( @@ -91,7 +92,7 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => { > {person.jobTitle} - {viewerCanSeeOrDo('canEditPersonAnyone', viewerAccessRights) ? ( + {canEditPerson ? ( editPersonClick(hasEditRights)} diff --git a/src/js/components/PrivateRoute.jsx b/src/js/components/PrivateRoute.jsx index 5f36687..be3736a 100644 --- a/src/js/components/PrivateRoute.jsx +++ b/src/js/components/PrivateRoute.jsx @@ -15,7 +15,7 @@ const PrivateRoute = () => { const { data: dataAuth, isSuccess: isSuccessAuth } = useFetchData(['get-auth'], {}, METHOD.POST); useEffect(() => { if (isSuccessAuth) { - console.log('useFetchData in PrivateRoute useEffect dataAuth good:', dataAuth, isSuccessAuth); + // console.log('useFetchData in PrivateRoute useEffect dataAuth good:', dataAuth, isSuccessAuth); setIsAuthenticated(dataAuth.isAuthenticated); // setAppContextValue('loggedInPersonIsAdmin', dataAuth.loggedInPersonIsAdmin); captureAccessRightsData(dataAuth, isSuccessAuth, apiDataCache, dispatch); diff --git a/src/js/components/Questionnaire/QuestionnaireResponsesList.jsx b/src/js/components/Questionnaire/QuestionnaireResponsesList.jsx index c319235..a436ac8 100644 --- a/src/js/components/Questionnaire/QuestionnaireResponsesList.jsx +++ b/src/js/components/Questionnaire/QuestionnaireResponsesList.jsx @@ -6,16 +6,18 @@ import styled from 'styled-components'; import DesignTokenColors from '../../common/components/Style/DesignTokenColors'; import { renderLog } from '../../common/utils/logging'; import webAppConfig from '../../config'; -import { useConnectAppContext } from '../../contexts/ConnectAppContext'; +import { useConnectAppContext, useConnectDispatch } from '../../contexts/ConnectAppContext'; import { useGetPersonById } from '../../models/PersonModel'; import { METHOD, useFetchData } from '../../react-query/WeConnectQuery'; -import CopyQuestionnaireLink from './CopyQuestionnaireLink'; +import { captureQuestionnaireListRetrieveData } from '../../models/QuestionnaireModel'; const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ '../../common/components/Widgets/OpenExternalWebSite')); const QuestionnaireResponsesList = ({ personId }) => { renderLog('QuestionnaireList'); // Set LOG_RENDER_EVENTS to log all renders - const { getAppContextValue } = useConnectAppContext(); + const { apiDataCache, getAppContextValue } = useConnectAppContext(); + const { allQuestionsCache } = apiDataCache; + const dispatch = useConnectDispatch(); // const [person] = useState(getAppContextValue('personDrawersPerson')); const [person] = useState(useGetPersonById(getAppContextValue('personDrawersPersonId'))); @@ -24,17 +26,27 @@ const QuestionnaireResponsesList = ({ personId }) => { // Although we are sending a list, there will only be one person id, if there were more, just append them with commas const requestParams = `personIdList[]=${person.id}`; - const { data: dataQRL, isSuccess: isSuccessQRL, isFetching: isFetchingQRL } = useFetchData(['questionnaire-responses-list-retrieve'], requestParams, METHOD.GET); - if (isFetchingQRL) { - console.log('isFetching ------------ \'questionnaire-responses-list-retrieve\''); - } + const questionnaireResponsesListRetrieveResults = useFetchData(['questionnaire-responses-list-retrieve'], requestParams, METHOD.GET); + // const { data: dataQRL, isSuccess: isSuccessQRL, isFetching: isFetchingQRL } = responsesRetrieveResults; + const { data: dataQRL, isFetching: isFetchingQRL } = questionnaireResponsesListRetrieveResults; + // if (isFetchingQRL) { + // console.log('isFetching ------------ \'questionnaire-responses-list-retrieve\''); + // } + // useEffect(() => { + // if (dataQRL !== undefined && isFetchingQRL === false && person) { + // console.log('useFetchData in QuestionnaireResponsesList useEffect dataQRL is good:', dataQRL, isSuccessQRL, isFetchingQRL); + // console.log('Successfully retrieved QuestionnaireResponsesList...'); + // setQuestionnaireList(dataQRL.questionnaireList); + // } + // }, [dataQRL, isFetchingQRL, isSuccessQRL, person]); useEffect(() => { - if (dataQRL !== undefined && isFetchingQRL === false && person) { - console.log('useFetchData in QuestionnaireResponsesList useEffect dataQRL is good:', dataQRL, isSuccessQRL, isFetchingQRL); - console.log('Successfully retrieved QuestionnaireResponsesList...'); - setQuestionnaireList(dataQRL.questionnaireList); + if (questionnaireResponsesListRetrieveResults) { + captureQuestionnaireListRetrieveData(questionnaireResponsesListRetrieveResults, apiDataCache, dispatch); + if (dataQRL && dataQRL.questionnaireList && isFetchingQRL === false) { + setQuestionnaireList(dataQRL.questionnaireList); + } } - }, [dataQRL, isFetchingQRL, isSuccessQRL, person]); + }, [questionnaireResponsesListRetrieveResults, allQuestionsCache]); return (
diff --git a/src/js/components/Team/TeamHeader.jsx b/src/js/components/Team/TeamHeader.jsx index 4598637..00185c2 100644 --- a/src/js/components/Team/TeamHeader.jsx +++ b/src/js/components/Team/TeamHeader.jsx @@ -6,29 +6,21 @@ import styled from 'styled-components'; import { renderLog } from '../../common/utils/logging'; import { useConnectAppContext } from '../../contexts/ConnectAppContext'; import { viewerCanSeeOrDo } from '../../models/AuthModel'; -import { useRemoveTeamMutation } from '../../react-query/mutations'; -import { DeleteStyled, EditStyled } from '../Style/iconStyles'; +import { EditStyled } from '../Style/iconStyles'; -// eslint-disable-next-line no-unused-vars -const TeamHeader = ({ classes, showHeaderLabels, showIcons, team }) => { +const TeamHeader = ({ showHeaderLabels, showIcons, team }) => { renderLog('TeamHeader'); const { apiDataCache, getAppContextValue, setAppContextValue } = useConnectAppContext(); const { viewerAccessRights } = apiDataCache; - const { mutate } = useRemoveTeamMutation(); let teamLocal = team; if (!teamLocal || !teamLocal.teamName) { teamLocal = getAppContextValue('teamForAddTeamDrawer'); } - const removeTeamClick = () => { - console.log('removeTeamMutation team: ', teamLocal.id); - mutate({ teamId: teamLocal.id }); - }; - const editTeamClick = () => { - console.log('editTeamClick: ', teamLocal); + // console.log('editTeamClick: ', teamLocal); setAppContextValue('addTeamDrawerOpen', true); setAppContextValue('AddTeamDrawerLabel', 'Edit Team Name'); setAppContextValue('teamForAddTeamDrawer', teamLocal); @@ -61,21 +53,14 @@ const TeamHeader = ({ classes, showHeaderLabels, showIcons, team }) => { )} )} - {/* Delete icon */} + {/* Delete icon - Moved to TeamHome */} {showIcons && ( - <> - {viewerCanSeeOrDo('canRemoveTeam', viewerAccessRights) && ( - - - - )} - + <> )} ); }; TeamHeader.propTypes = { - classes: PropTypes.object.isRequired, showHeaderLabels: PropTypes.bool, team: PropTypes.object, showIcons: PropTypes.bool, diff --git a/src/js/components/Team/TeamMemberList.jsx b/src/js/components/Team/TeamMemberList.jsx index 3c2f165..5ab20f6 100644 --- a/src/js/components/Team/TeamMemberList.jsx +++ b/src/js/components/Team/TeamMemberList.jsx @@ -4,7 +4,8 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; import { renderLog } from '../../common/utils/logging'; import { isSearchTextFoundInPerson } from '../../controllers/PersonController'; -import { useConnectAppContext } from '../../contexts/ConnectAppContext'; +import { useConnectAppContext, useConnectDispatch } from '../../contexts/ConnectAppContext'; +import capturePersonListRetrieveData from '../../models/capturePersonListRetrieveData'; import { getTeamMembersListByTeamId } from '../../models/TeamModel'; import { METHOD, useFetchData } from '../../react-query/WeConnectQuery'; import PersonSummaryRow from '../Person/PersonSummaryRow'; @@ -13,12 +14,21 @@ import PersonSummaryRow from '../Person/PersonSummaryRow'; const TeamMemberList = ({ searchText, teamId, team }) => { // teamMemberList renderLog('TeamMemberList'); const { apiDataCache } = useConnectAppContext(); - // const { allPeopleCache, allTeamsCache } = apiDataCache; + const { allPeopleCache } = apiDataCache; + const dispatch = useConnectDispatch(); + const [teamMemberListApiDataCache, setTeamMemberListApiDataCache] = useState([]); const [teamMemberListReactQuery, setTeamMemberListReactQuery] = useState(team.teamMemberList || []); // const teamMemberList = useGetTeamMembersListByTeamId(teamId); // console.log('TeamMemberList teamMemberList:', teamMemberList); + const personListRetrieveResults = useFetchData(['person-list-retrieve'], {}, METHOD.GET); + useEffect(() => { + if (personListRetrieveResults) { + capturePersonListRetrieveData(personListRetrieveResults, apiDataCache, dispatch); + } + }, [personListRetrieveResults, allPeopleCache, dispatch]); + const { data: dataTLR, isSuccess: isSuccessTLR, isFetching: isFetchingTLR } = useFetchData(['team-list-retrieve'], {}, METHOD.GET); // console.log('useFetchData in TeamMemberList:', dataTLR, isSuccessTLR, isFetchingTLR); useEffect(() => { diff --git a/src/js/contexts/ConnectAppContext.jsx b/src/js/contexts/ConnectAppContext.jsx index 8874183..ac971c8 100644 --- a/src/js/contexts/ConnectAppContext.jsx +++ b/src/js/contexts/ConnectAppContext.jsx @@ -71,7 +71,7 @@ export const ConnectAppContextProvider = ({ children }) => { const { data: dataAuth, isSuccess: isSuccessAuth, isFetching: isFetchingAuth } = useFetchData(['get-auth'], {}, METHOD.POST); useEffect(() => { if (isSuccessAuth) { - console.log('useFetchData in ConnectAppContext useEffect dataAuth good:', dataAuth, isSuccessAuth, isFetchingAuth); + // console.log('useFetchData in ConnectAppContext useEffect dataAuth good:', dataAuth, isSuccessAuth, isFetchingAuth); const { isAuthenticated } = dataAuth; setAppContextValue('authenticatedPerson', dataAuth.person); setAppContextValue('authenticatedPersonId', dataAuth.personId); diff --git a/src/js/models/AuthModel.jsx b/src/js/models/AuthModel.jsx index 76cc053..ba933e1 100644 --- a/src/js/models/AuthModel.jsx +++ b/src/js/models/AuthModel.jsx @@ -11,17 +11,32 @@ export const viewerCanSeeOrDo = (accessRightName, viewerAccessRights) => { return viewerAccessRights[accessRightName] || false; }; +export const viewerCanSeeOrDoForThisTeam = (accessRightName, teamId = -1, teamAccessRights = {}) => { + if (!accessRightName || !teamId || !teamAccessRights) { + return false; + } + if (teamId > -1 && teamAccessRights && teamAccessRights[teamId] && teamAccessRights[teamId][accessRightName]) { + return teamAccessRights[teamId][accessRightName] || false; + } + return false; +}; + export function captureAccessRightsData (data = {}, isSuccess = false, apiDataCache = {}, dispatch) { + const viewerTeamAccessRights = apiDataCache.viewerTeamAccessRights || {}; const viewerAccessRights = apiDataCache.viewerAccessRights || {}; let changeResults = { viewerAccessRights, viewerAccessRightsChanged: false, + viewerTeamAccessRights, + viewerTeamAccessRightsChanged: false, }; let viewerAccessRightsNew = { ...viewerAccessRights }; + let viewerTeamAccessRightsNew = { ...viewerTeamAccessRights }; // console.log('captureAccessRightsData data:', data); if (data && data.accessRights && isSuccess === true) { let newDataReceived = false; const { accessRights } = data; + // Checking to make sure common access right exists so we know results were returned if (accessRights && !('canAddPerson' in accessRights)) { viewerAccessRightsNew = accessRights; newDataReceived = true; @@ -33,10 +48,32 @@ export function captureAccessRightsData (data = {}, isSuccess = false, apiDataCa // console.log('=== captureAccessRightsData viewerAccessRightsNew:', viewerAccessRightsNew, ', newDataReceived:', newDataReceived); dispatch({ type: 'updateByKeyValue', key: 'viewerAccessRights', value: viewerAccessRightsNew }); changeResults = { + ...changeResults, viewerAccessRights: viewerAccessRightsNew, viewerAccessRightsChanged: true, }; } } + if (data && data.teamAccessRights && isSuccess === true) { + let newDataReceived = false; + const { teamAccessRights } = data; + // Checking to make sure common access right exists so we know results were returned + if (teamAccessRights && !('canEditPersonThisTeam' in teamAccessRights)) { + viewerTeamAccessRightsNew = teamAccessRights; + newDataReceived = true; + } else if (!isEqual(teamAccessRights, viewerTeamAccessRightsNew)) { + viewerTeamAccessRightsNew = teamAccessRights; + newDataReceived = true; + } + if (newDataReceived) { + // console.log('=== captureAccessRightsData viewerTeamAccessRightsNew:', viewerTeamAccessRightsNew, ', newDataReceived:', newDataReceived); + dispatch({ type: 'updateByKeyValue', key: 'viewerTeamAccessRights', value: viewerTeamAccessRightsNew }); + changeResults = { + ...changeResults, + viewerTeamAccessRights: viewerTeamAccessRightsNew, + viewerTeamAccessRightsChanged: true, + }; + } + } return changeResults; } diff --git a/src/js/models/QuestionnaireModel.jsx b/src/js/models/QuestionnaireModel.jsx index 239aa8d..4408ed2 100644 --- a/src/js/models/QuestionnaireModel.jsx +++ b/src/js/models/QuestionnaireModel.jsx @@ -198,7 +198,7 @@ export const getAnswerToQuestion = (personId, questionId, allAnswersCache) => { return answer; }; -export const getAnswerValueToQuestion = (personId, questionId, allAnswersCache) => { +export const getAnswerValueToQuestion = (questionId, personId, allAnswersCache) => { const answer = getAnswerToQuestion(personId, questionId, allAnswersCache) || {}; if (!answer || !answer.answerType) { // console.log(`No answer found for questionId: ${questionId}`); diff --git a/src/js/pages/AnswerQuestions.jsx b/src/js/pages/AnswerQuestions.jsx index 801580e..f4ea4de 100644 --- a/src/js/pages/AnswerQuestions.jsx +++ b/src/js/pages/AnswerQuestions.jsx @@ -104,7 +104,7 @@ const AnswerQuestions = ({ classes, setShowHeaderFooter }) => { if (`questionAnswer-${question.id}` in inputValuesRevised) { answerValue = inputValuesRevised[`questionAnswer-${question.id}`]; } else { - answerValue = getAnswerValueToQuestion(personId, question.id, allAnswersCache); + answerValue = getAnswerValueToQuestion(question.id, personId, allAnswersCache); } if (answerValue === undefined || answerValue === null || answerValue === '') { requiredValueMissing = true; @@ -253,13 +253,13 @@ const AnswerQuestions = ({ classes, setShowHeaderFooter }) => { YOU ANSWERED: {' '} - {getAnswerValueToQuestion(personId, question.id, allAnswersCache)} + {getAnswerValueToQuestion(question.id, personId, allAnswersCache)} ) : ( { renderLog('QuestionnaireAnswers'); const { apiDataCache } = useConnectAppContext(); - const { allQuestionsCache } = apiDataCache; + const { allAnswersCache, allPeopleCache, allQuestionnairesCache, allQuestionsCache } = apiDataCache; const dispatch = useConnectDispatch(); const [personId] = useState(parseInt(useParams().personId)); const [questionList, setQuestionList] = useState(undefined); - const [questionnaire] = useState({}); + const [questionnaire, setQuestionnaire] = useState({}); const [questionnaireId] = useState(parseInt(useParams().questionnaireId)); + const personListRetrieveResults = useFetchData(['person-list-retrieve'], {}, METHOD.GET); + useEffect(() => { + if (personListRetrieveResults) { + capturePersonListRetrieveData(personListRetrieveResults, apiDataCache, dispatch); + } + }, [personListRetrieveResults, allPeopleCache, dispatch]); + const questionListRetrieveResults = useFetchData(['question-list-retrieve'], { questionnaireId: questionnaireId || '-1' }, METHOD.GET); useEffect(() => { if (questionListRetrieveResults) { @@ -34,28 +48,36 @@ const QuestionnaireAnswers = ({ classes }) => { } }, [questionListRetrieveResults, allQuestionsCache]); - const getAnswerValue = (questionId) => { - // if (allAnswersCache && allAnswersCache[questionId]) { - // const questionAnswer = allAnswersCache[questionId]; - // return getAnswerValueFromAnswerDict(questionAnswer); - // } - return ''; - }; + const requestParams = `personIdList[]=${personId}`; + const answersListRetrieveResults = useFetchData(['questionnaire-responses-list-retrieve'], requestParams, METHOD.GET); + useEffect(() => { + if (answersListRetrieveResults) { + captureQuestionnaireListRetrieveData(answersListRetrieveResults, apiDataCache, dispatch); + captureAnswerListRetrieveData(answersListRetrieveResults, apiDataCache, dispatch); + } + }, [answersListRetrieveResults, apiDataCache, dispatch]); + + useEffect(() => { + // console.log('useEffect in QuestionnaireAnswers questionnaireId:', questionnaireId); + // console.log('allQuestionnairesCache:', allQuestionnairesCache); + if (allQuestionnairesCache && allQuestionnairesCache[questionnaireId]) { + setQuestionnaire(allQuestionnairesCache[questionnaireId]); + } + }, [allQuestionnairesCache, questionnaireId]); useEffect(() => { // console.log('useEffect in QuestionnaireAnswers (question-list-retrieve)'); - // if (allQuestionsCache) { - // setQuestionList(Object.values(allQuestionsCache)); - // } + if (allQuestionsCache) { + setQuestionList(getQuestionsForQuestionnaire(questionnaireId, allQuestionsCache)); + } }, [allQuestionsCache]); + const titleString = `${questionnaire.questionnaireName ? questionnaire.questionnaireName : 'Questionnaire Answers'} - ${webAppConfig.NAME_FOR_BROWSER_TAB_TITLE}`; return (
- Questionnaire Answers - - {' '} - {webAppConfig.NAME_FOR_BROWSER_TAB_TITLE} + {titleString} @@ -73,7 +95,7 @@ const QuestionnaireAnswers = ({ classes }) => { {questionList && questionList.map((question) => ( - + {question.questionText} {question.requireAnswer && *} @@ -91,7 +113,7 @@ const QuestionnaireAnswers = ({ classes }) => { margin="dense" variant="outlined" placeholder={question.questionPlaceholder || ''} - value={getAnswerValue(question.id)} + value={getAnswerValueToQuestion(question.id, personId, allAnswersCache)} /> @@ -121,10 +143,10 @@ const styles = (theme) => ({ }); const AnsweredBy = styled('div')` + align-content: center; font-size: 1.3em; font-weight: 300; - height: 100px; - align-content: center; + margin-bottom: 16px; `; const AnsweredBySpan = styled('span')` @@ -134,6 +156,7 @@ const AnsweredBySpan = styled('span')` const OneQuestionWrapper = styled('div')` border-top: 1px solid ${DesignTokenColors.neutralUI200}; margin-top: 24px; + padding-top: 6px; `; const QuestionInstructions = styled('div')` @@ -153,7 +176,7 @@ const RequiredStar = styled('span')` `; const TitleWrapper = styled('h1')` - margin-bottom: 8px; + margin-bottom: 4px; `; export default withStyles(styles)(QuestionnaireAnswers); diff --git a/src/js/pages/TeamHome.jsx b/src/js/pages/TeamHome.jsx index a504501..573d9b4 100644 --- a/src/js/pages/TeamHome.jsx +++ b/src/js/pages/TeamHome.jsx @@ -4,23 +4,25 @@ import PropTypes from 'prop-types'; import React, { useEffect, useState } from 'react'; import { Helmet } from 'react-helmet-async'; import { Link, useParams } from 'react-router'; +import convertToInteger from '../common/utils/convertToInteger'; import { renderLog } from '../common/utils/logging'; import { PageContentContainer } from '../components/Style/pageLayoutStyles'; import TeamHeader from '../components/Team/TeamHeader'; import TeamMemberList from '../components/Team/TeamMemberList'; import webAppConfig from '../config'; import { useConnectAppContext, useConnectDispatch } from '../contexts/ConnectAppContext'; -import capturePersonListRetrieveData from '../models/capturePersonListRetrieveData'; +import { viewerCanSeeOrDo } from '../models/AuthModel'; import { captureTeamListRetrieveData, useGetTeamById } from '../models/TeamModel'; +import { useRemoveTeamMutation } from '../react-query/mutations'; import { METHOD, useFetchData } from '../react-query/WeConnectQuery'; -import convertToInteger from '../common/utils/convertToInteger'; const TeamHome = ({ classes }) => { renderLog('TeamHome'); const { apiDataCache, setAppContextValue } = useConnectAppContext(); - const { allPeopleCache, allTeamsCache } = apiDataCache; + const { allTeamsCache, viewerAccessRights } = apiDataCache; const dispatch = useConnectDispatch(); + const { mutate: removeTeamMutation } = useRemoveTeamMutation(); const params = useParams(); const [team, setTeam] = useState(useGetTeamById(convertToInteger(params.teamId))); @@ -33,24 +35,22 @@ const TeamHome = ({ classes }) => { // const isAddPersonDrawerOpen = document.getElementById('addPersonDrawer'); - // TODO is this even used? - const personListRetrieveResults = useFetchData(['person-list-retrieve'], {}, METHOD.GET); - useEffect(() => { - if (personListRetrieveResults) { - capturePersonListRetrieveData(personListRetrieveResults, apiDataCache, dispatch); - } - }, [personListRetrieveResults, allPeopleCache, dispatch]); + // Steve question: is this even used? + // Dale answer: I moved this 'person-list-retrieve' call to TeamMemberList to be next to where the data is used, although + // it might be better to leave common API calls here on the page level, TBD. + // const personListRetrieveResults = useFetchData(['person-list-retrieve'], {}, METHOD.GET); + // useEffect(() => { + // if (personListRetrieveResults) { + // capturePersonListRetrieveData(personListRetrieveResults, apiDataCache, dispatch); + // } + // }, [personListRetrieveResults, allPeopleCache, dispatch]); const teamListRetrieveResults = useFetchData(['team-list-retrieve'], {}, METHOD.GET); useEffect(() => { - // console.log('useFetchData team-list-retrieve in TeamHome useEffect:', teamListRetrieveResults); if (teamListRetrieveResults) { - // console.log('In useEffect apiDataCache:', apiDataCache); - // const changeResults = captureTeamListRetrieveData(teamListRetrieveResults, apiDataCache, dispatch); - // console.log('Teams useEffect changeResults:', changeResults); } - }, [teamListRetrieveResults, allTeamsCache, dispatch]); + }, [teamListRetrieveResults, allTeamsCache, apiDataCache, dispatch]); useEffect(() => { // console.log('TeamHome teamId: ', teamId, ', allTeamsCache:', allTeamsCache); @@ -66,6 +66,11 @@ const TeamHome = ({ classes }) => { setAppContextValue('addPersonDrawerTeam', team); }; + const removeTeamClick = () => { + // console.log('removeTeamMutation team: ', teamLocal.id); + removeTeamMutation({ teamId }); + }; + return (
@@ -103,15 +108,32 @@ const TeamHome = ({ classes }) => { /> )} - + {viewerCanSeeOrDo('canAddTeamMemberAnyTeam', viewerAccessRights) && ( +
+ +
+ )} + {viewerCanSeeOrDo('canRemoveTeam', viewerAccessRights) && ( +
+ +
+ )}
); @@ -131,6 +153,12 @@ const styles = (theme) => ({ width: '100%', }, }, + deleteTeamButtonRoot: { + width: 180, + [theme.breakpoints.down('md')]: { + width: '100%', + }, + }, }); // const TeamMember = styled('div')` diff --git a/src/js/react-query/WeConnectQuery.js b/src/js/react-query/WeConnectQuery.js index 0c2d532..8f0435f 100644 --- a/src/js/react-query/WeConnectQuery.js +++ b/src/js/react-query/WeConnectQuery.js @@ -17,7 +17,7 @@ const weConnectQueryFn = async (queryKey, params, isGet) => { url.search = new URLSearchParams(params); } // 2/12/24 temporarily replaced: httpLog(`weConnectQueryFn ${isGet ? 'GET' : 'POST'} url.href: ${url.href}`); // DO NOT REMOVE, this is the only way to see if we are hitting the API server unnecessarily - console.log(`weConnectQueryFn ${isGet ? 'GET' : 'POST'} url.href: ${url.href}`); + // console.log(`weConnectQueryFn ${isGet ? 'GET' : 'POST'} url.href: ${url.href}`); let response; try {