Filter review periods so that we only show open periods or closed periods in which we were involved.

Author: ocielliottc

web-ui/src/components/reviews/periods/ReviewPeriods.jsx

@@ -99,11 +99,15 @@ const ReviewStatus = {
   UNKNOWN: 'UNKNOWN'
 };
 
+// mode will be either "self" or undefined.
+const selfReviewMode = "self";
+
 const ReviewPeriods = ({ onPeriodSelected, mode }) => {
   const { state, dispatch } = useContext(AppContext);
 
   const [canSave, setCanSave] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [periods, setPeriods] = useState([]);
   const [periodToAdd, setPeriodToAdd] = useState({
     name: '',
     reviewStatus: ReviewStatus.PLANNING,
@@ -119,9 +123,15 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
 
   const currentUserId = selectCurrentUserId(state);
   const csrf = selectCsrfToken(state);
-  const periods = selectReviewPeriods(state);
   const userProfile = selectUserProfile(state);
 
+  useEffect(() => {
+    setPeriods(selectReviewPeriods(state)
+                 .filter((r) => mode !== selfReviewMode ||
+                                r.reviewStatus === ReviewStatus.OPEN ||
+                                r.reviewStatus === ReviewStatus.CLOSED));
+  }, [state, mode]);
+
   useQueryParameters([
     {
       name: 'add',
@@ -255,6 +265,7 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
 
   useEffect(() => {
     const getSelfReviews = async () => {
+      setLoading(true);
       let reviews = {};
       Promise.all(
         periods.map(async period => {
@@ -280,7 +291,17 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
             });
           }
         })
-      ).then(() => setSelfReviews(reviews));
+      ).then(() => {
+               // Now that we have the reviews loaded, filter out closed
+               // self-review periods in which the current user is not involved.
+               if (mode == selfReviewMode) {
+                 setPeriods(periods.filter((r) =>
+                              r.reviewStatus !== ReviewStatus.CLOSED ||
+                              !!reviews[r.id]));
+               }
+               setSelfReviews(reviews);
+               setLoading(false);
+             });
     };
     if (
       csrf &&
@@ -291,18 +312,17 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
     ) {
       getSelfReviews();
     }
-  }, [csrf, periods, currentUserId, selfReviews]);
+  }, [csrf, periods, currentUserId, selfReviews ]);
 
   const onPeriodClick = useCallback(
     id => {
       const status = selectReviewPeriod(state, id)?.reviewStatus;
       switch (status) {
         case ReviewStatus.PLANNING:
-          onPeriodSelected(id);
-          break;
         case ReviewStatus.AWAITING_APPROVAL:
-          // TODO: Check for the required permission.
-          onPeriodSelected(id);
+          if (mode !== selfReviewMode) {
+            onPeriodSelected(id);
+          }
           break;
         case ReviewStatus.OPEN:
           onPeriodSelected(id);