2024-11-04 - external-recips page

Luch76 · Luch76 · commit 0439bb0fddc0 · 2024-11-04T11:30:46.000-05:00
diff --git a/web-ui/src/components/feedback_external_recipient_selector/FeedbackExternalRecipientSelector.jsx b/web-ui/src/components/feedback_external_recipient_selector/FeedbackExternalRecipientSelector.jsx
@@ -6,7 +6,7 @@ import {
   selectProfile,
   selectCsrfToken,
   selectCurrentUser,
-  selectNormalizedMembers
+  selectNormalizedMembers, selectFeedbackExternalRecipient
 } from '../../context/selectors';
 import {getExternalRecipients} from '../../api/feedback';
 import Typography from '@mui/material/Typography';
@@ -194,7 +194,7 @@ const FeedbackExternalRecipientSelector = ({ changeQuery, fromQuery, forQuery })
                   <FeedbackExternalRecipientCard
                       key={id}
                       profileId={id}
-                      recipientProfile={selectProfile(state, id)}
+                      recipientProfile={selectFeedbackExternalRecipient(state, id)}
                       selected
                       onClick={() => cardClickHandler(id)}
                   />
diff --git a/web-ui/src/context/AppContext.jsx b/web-ui/src/context/AppContext.jsx
@@ -14,7 +14,7 @@ import {
   UPDATE_CERTIFICATIONS,
   UPDATE_TEAMS,
   UPDATE_PEOPLE_LOADING,
-  UPDATE_TEAMS_LOADING
+  UPDATE_TEAMS_LOADING, UPDATE_EXTERNAL_RECIPIENTS, UPDATE_EXTERNAL_RECIPIENTS_LOADING
 } from './actions';
 import {
   getCurrentUser,
@@ -31,6 +31,7 @@ import { getAllGuilds } from '../api/guild';
 import { getSkills } from '../api/skill';
 import { getAllTeams } from '../api/team';
 import {getCertifications} from "../api/certification.js";
+import { getExternalRecipients } from '../api/feedback.js';
 
 const AppContext = React.createContext();
 
@@ -54,6 +55,7 @@ const AppContextProvider = props => {
     teams,
     memberSkills,
     memberProfiles,
+      feedbackExternalRecipients,
     checkins,
     skills,
     certifications,
@@ -145,7 +147,28 @@ const AppContextProvider = props => {
     if (csrf && !memberSkills) {
       getAllMemberSkills();
     }
-  }, [csrf, memberSkills]);
+  }
+  , [csrf, memberSkills])
+  ;
+
+  useEffect(() => {
+    async function getAllExternalRecipients() {
+      let res = await getExternalRecipients(csrf);
+      let externalRecipients =
+          res.payload && res.payload.data && !res.error
+              ? res.payload.data
+              : undefined
+      ;
+      if (externalRecipients) {
+        dispatch({ type: UPDATE_EXTERNAL_RECIPIENTS, payload: externalRecipients });
+        dispatch({ type: UPDATE_EXTERNAL_RECIPIENTS_LOADING, payload: false });
+      }
+    }
+    if (csrf && !feedbackExternalRecipients) {
+      getAllExternalRecipients();
+    }
+  }, [csrf, feedbackExternalRecipients])
+  ;
 
   useEffect(() => {
     async function getMemberProfiles() {
@@ -178,7 +201,8 @@ const AppContextProvider = props => {
         getTerminatedMembers();
       }
     }
-  }, [csrf, userProfile, memberProfiles]);
+  }
+  , [csrf, userProfile, memberProfiles]);
 
   useEffect(() => {
     function getAllTheCheckins() {
diff --git a/web-ui/src/context/actions.js b/web-ui/src/context/actions.js
@@ -25,14 +25,14 @@ export const UPDATE_SKILLS = '@@check-ins/update_skills';
 export const UPDATE_CERTIFICATIONS = '@@check-ins/update_certifications';
 export const UPDATE_TEAM_MEMBERS = '@@check-ins/update_team_members';
 export const UPDATE_TEAMS = '@@check-ins/update_teams';
-export const UPDATE_TERMINATED_MEMBERS =
-  '@@check-ins/update_terminated_members';
+export const UPDATE_TERMINATED_MEMBERS = '@@check-ins/update_terminated_members';
 export const UPDATE_TOAST = '@@check-ins/update_toast';
 export const UPDATE_USER_BIO = '@@check-ins/update_bio';
-export const UPDATE_FEEEDBACK_SUGGESTIONS =
-  '@@check-ins/update_feedback_suggestions';
+export const UPDATE_FEEEDBACK_SUGGESTIONS = '@@check-ins/update_feedback_suggestions';
 export const UPDATE_PEOPLE_LOADING = '@@check-ins/update_people_loading';
 export const UPDATE_TEAMS_LOADING = '@@check-ins/update_teams_loading';
 export const UPDATE_REVIEW_PERIOD = '@@check-ins/update_review_period';
 export const UPDATE_REVIEW_PERIODS = '@@check-ins/update_review_periods';
 export const ADD_REVIEW_PERIOD = '@@check-ins/add_review_period';
+export const UPDATE_EXTERNAL_RECIPIENTS = '@@check-ins/update_external_recipients';
+export const UPDATE_EXTERNAL_RECIPIENTS_LOADING = '@@check-ins/update_external_recipients_loading';
diff --git a/web-ui/src/context/reducer.js b/web-ui/src/context/reducer.js
@@ -32,7 +32,7 @@ import {
   UPDATE_TEAMS_LOADING,
   UPDATE_REVIEW_PERIOD,
   UPDATE_REVIEW_PERIODS,
-  ADD_REVIEW_PERIOD
+  ADD_REVIEW_PERIOD, UPDATE_EXTERNAL_RECIPIENTS, UPDATE_EXTERNAL_RECIPIENTS_LOADING
 } from './actions';
 
 export const initialState = {
@@ -46,6 +46,7 @@ export const initialState = {
   memberProfiles: null,
   terminatedMembers: [],
   memberSkills: null,
+  feedbackExternalRecipients: null,
   roles: null,
   userRoles: null,
   skills: null,
@@ -248,6 +249,12 @@ export const reducer = (state, action) => {
     case UPDATE_REVIEW_PERIODS:
       state.reviewPeriods = action.payload;
       break;
+    case UPDATE_EXTERNAL_RECIPIENTS:
+      state.feedbackExternalRecipients = action.payload;
+      break;
+    case UPDATE_EXTERNAL_RECIPIENTS_LOADING:
+      state.loading = { ...state.loading, feedbackExternalRecipients: action.payload };
+      break;
     default:
   }
   return { ...state };
diff --git a/web-ui/src/context/selectors.js b/web-ui/src/context/selectors.js
@@ -15,6 +15,7 @@ export const selectGuilds = state => state.guilds || [];
 export const selectLoading = state => state.loading;
 export const selectReviewPeriods = state => state.reviewPeriods;
 export const selectPermissions = state => state.permissions;
+export const selectFeedbackExternalRecipients = state => state.feedbackExternalRecipients || [];
 
 export const noPermission = 'You do not have permission to view this page.';
 
@@ -724,3 +725,14 @@ export const selectReviewPeriod = createSelector(
   (state, periodId) => periodId,
   (periodMap, periodId) => periodMap[periodId]
 );
+
+export const selectFeedbackExternalRecipientIds = createSelector(
+    selectFeedbackExternalRecipients,
+    externalRecipients => externalRecipients.map(externalRecipient => externalRecipient.id)
+);
+
+export const selectFeedbackExternalRecipient = createSelector(
+    selectFeedbackExternalRecipients,
+    (state, feedbackExternalRecipientId) => feedbackExternalRecipientId,
+    (feedbackExternalRecipients, feedbackExternalRecipientId) => feedbackExternalRecipients.find(feedbackExternalRecipient => feedbackExternalRecipient.id === feedbackExternalRecipientId)
+);
diff --git a/web-ui/src/pages/FeedbackRequestPage.jsx b/web-ui/src/pages/FeedbackRequestPage.jsx
@@ -25,7 +25,7 @@ import {
   selectCurrentUser,
   selectCurrentMemberIds,
   selectHasCreateFeedbackPermission,
-  noPermission,
+  noPermission, selectFeedbackExternalRecipientIds,
 } from '../context/selectors';
 import DateFnsUtils from '@date-io/date-fns';
 import { getFeedbackTemplate, softDeleteAdHocTemplates } from '../api/feedbacktemplate';
@@ -126,6 +126,7 @@ const FeedbackRequestPage = () => {
   const [templateIsForExternalRecipient, setTemplateIsForExternalRecipient] = useState();
   const [requestee, setRequestee] = useState({});
   const [memberIds, setMemberIds] = useState([]);
+  const [externalRecipientIds, setExternalRecipientIds] = useState([]);
   const [activeStep, setActiveStep] = useState(1);
 
   const handleQueryChange = useCallback(
@@ -151,27 +152,51 @@ const FeedbackRequestPage = () => {
   }, [query.for, memberIds]);
 
   const hasFrom = useCallback(() => {
-    if (!memberIds.length) return true;
-    let from = query.from;
-    if (from) {
-      from = Array.isArray(from) ? from : [from];
-      for (let recipientId of from) {
-        if (!memberIds.includes(recipientId)) {
-          dispatch({
-            type: UPDATE_TOAST,
-            payload: {
-              severity: 'error',
-              toast: 'Member ID in URL is invalid'
-            }
-          });
-          handleQueryChange('from', undefined);
-          return false;
+    if (templateIsForExternalRecipient) {
+      if (!externalRecipientIds.length) return true;
+      let from = query.from;
+      if (from) {
+        from = Array.isArray(from) ? from : [from];
+        for (let externalRecipientId of from) {
+          if (!externalRecipientIds.includes(externalRecipientId)) {
+            dispatch({
+              type: UPDATE_TOAST,
+              payload: {
+                severity: 'error',
+                toast: 'External Recipient ID in URL is invalid'
+              }
+            });
+            handleQueryChange('from', undefined);
+            return false;
+          }
+        }
+        return true;
+      }
+      return false;
+    } else {
+      if (!memberIds.length) return true;
+      let from = query.from;
+      if (from) {
+        from = Array.isArray(from) ? from : [from];
+        for (let recipientId of from) {
+          if (!memberIds.includes(recipientId)) {
+            dispatch({
+              type: UPDATE_TOAST,
+              payload: {
+                severity: 'error',
+                toast: 'Member ID in URL is invalid'
+              }
+            });
+            handleQueryChange('from', undefined);
+            return false;
+          }
         }
+        return true;
       }
-      return true;
+      return false;
     }
-    return false;
-  }, [memberIds, query, dispatch, handleQueryChange]);
+
+  }, [memberIds, query, dispatch, handleQueryChange, externalRecipientIds]);
 
   const isValidDate = useCallback(dateString => {
     const today = new Date().setHours(0, 0, 0, 0);
@@ -269,7 +294,8 @@ const FeedbackRequestPage = () => {
         id: null,
         creatorId: currentUserId,
         requesteeId: query.for,
-        recipientId: recipient,
+        recipientId: (templateIsForExternalRecipient) ? null : recipient,
+        externalRecipientId: (templateIsForExternalRecipient) ? recipient : null,
         templateId: query.template,
         sendDate,
         dueDate,
@@ -331,6 +357,14 @@ const FeedbackRequestPage = () => {
     }
   }, [state]);
 
+  useEffect(() => {
+    const feedbackExternalRecipients = selectFeedbackExternalRecipientIds(state);
+    console.log("FeedbackRequestPage, useEffect, feedbackExternalRecipients: ", feedbackExternalRecipients);
+    if (feedbackExternalRecipients) {
+      setExternalRecipientIds(feedbackExternalRecipients);
+    }
+  }, [state]);
+
   useEffect(() => {
     const params = queryString.parse(location?.search);
     console.log("FeedbackRequestPage, useEffect, setQuery, params: ", params);
