show unpublished activities for staff and educators

Author: brrkrmn

zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js

@@ -21,6 +21,9 @@ const styles = theme => ({
       width: '95%',
     },
   },
+  activitiesContainer: {
+    marginTop: 0
+  },
   activityBoxContainer: {
     padding: '5vh 10px',
     position: 'relative',

zubhub_frontend/zubhub/src/store/actions/activityActions.js

@@ -36,7 +36,7 @@ export const getMyActivities = ({ t, token }) => {
             dispatch({
               type: at.SET_ACTIVITIES,
               payload: {
-                all_activities: all,
+                userActivities: all,
               },
             });
           });
@@ -70,7 +70,7 @@ export const getUnPublishedActivities = ({ t, token }) => {
             dispatch({
               type: at.SET_ACTIVITIES,
               payload: {
-                all_activities: all,
+                unPublishedActivities: all,
               },
             });
           });

zubhub_frontend/zubhub/src/store/reducers/activityReducer.js

@@ -4,6 +4,7 @@ const default_state = {
   published: [],
   unPublishedActivities: [],
   selectedActivity: {},
+  userActivities: [],
 };
 const activities = (state = default_state, action) => {
   switch (action.type) {

zubhub_frontend/zubhub/src/views/activities/activities.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 import {
   getActivities,
   getMyActivities,
@@ -21,46 +20,69 @@ import LoadingPage from '../loading/LoadingPage';
 const useStyles = makeStyles(styles);
 
 function Activities(props) {
-  const location = useLocation();
   const classes = useStyles();
   const [loading, setLoading] = useState(true);
   const { activities } = useSelector(state => state);
-  let [activityList, setActivityList] = useState([]);
+  let [activityList, setActivityList] = useState({
+    published: [],
+    unPublishedActivities: [],
+    userActivities: []
+  });
   const [tab, setTab] = useState("published");
   const commonClasses = makeStyles(DefaultStyles)();
   const { t } = useTranslation();
 
   useEffect(() => {
-    setActivityList(activities.all_activities);
+    setActivityList(activities);
   }, [activities]);
-
-  const flagMap = {
-    staff: () =>
-      props.getUnPublishedActivities({
-        t: props.t,
-        token: props.auth.token,
-      }),
-    educator: () =>
-      props.getMyActivities({
-        t: props.t,
-        token: props.auth.token,
-      }),
-  };
-  useEffect(async () => {
+  
+  useEffect(() => {
     setLoading(true);
-    if (location.state?.flag && flagMap[location.state.flag]) {
-      await flagMap[location.state.flag]();
-    } else {
-      await props.getActivities(props.t);
+    async function getActivityList () {
+      if (props.auth?.tags.includes('staff')) {
+        await props.getUnPublishedActivities({
+          t: props.t,
+          token: props.auth.token,
+        })
+      } else if (props.auth?.tags.includes('educator')) {
+        await props.getMyActivities({
+          t: props.t,
+          token: props.auth.token,
+        })
+      }
+      await props.getActivities(props.t)
     }
-    setActivityList(activities.all_activities);
+    getActivityList()
     setLoading(false);
-  }, [location]);
+  }, []);
 
   const handleTabChange = (event, newTab) => {
     setTab(newTab)
   }
 
+  const ActivityCard = ({ activity }) => {
+    return (
+      <Grid
+        key={activity.id}
+        item
+        xs={12}
+        sm={6}
+        lg={4}
+        align="center"
+        className={classes.activityBoxContainer}
+      >
+        <Activity
+          key={activity.id}
+          activity={activity}
+          auth={props.auth}
+          activityToggleSave={props.activityToggleSave}
+          t={props.t}
+          navigate={props.navigate}
+        />
+      </Grid>
+    )
+  }
+
   if (loading) {
     return <LoadingPage />;
   } else {
@@ -72,39 +94,46 @@ function Activities(props) {
           <Typography className={commonClasses.title1}>
             {t('activities.title')}
           </Typography>
-          <Tabs
-            value={tab}
-            onChange={handleTabChange}
-            aria-label={t('activities.tabs.ariaLabel')}
-            indicatorColor="primary"
-            variant="fullWidth"
-            className={classes.tabs}
-          >
-            <Tab value="published" label={`${t('activities.tabs.published')} (${activityList.length})`} className={classes.tab} />
-            <Tab value="unpublished" label={`${t('activities.tabs.unpublished')} (${activityList.length})`} className={classes.tab} />
-          </Tabs>
-          <Grid container spacing={3}>
-            {activityList &&
-              activityList.map((activity, index) => (
-                <Grid
-                  key={`activityContainer-${index}`}
-                  item
-                  xs={12}
-                  sm={6}
-                  lg={4}
-                  align="center"
-                  className={classes.activityBoxContainer}
-                >
-                  <Activity
-                    key={`activity-${index}`}
-                    activity={activity}
-                    auth={props.auth}
-                    activityToggleSave={props.activityToggleSave}
-                    t={props.t}
-                    navigate={props.navigate}
-                  />
-                </Grid>
+          {(props.auth?.tags.includes('staff') || props.auth?.tags.includes('educator')) && (
+            <Tabs
+              value={tab}
+              onChange={handleTabChange}
+              aria-label={t('activities.tabs.ariaLabel')}
+              indicatorColor="primary"
+              variant="fullWidth"
+              className={classes.tabs}
+            >
+              <Tab
+                value="published"
+                label={`${t('activities.tabs.published')} (${activityList.published?.length})`}
+                className={classes.tab} 
+              />
+              <Tab
+                value="unpublished"
+                label={
+                  `${t('activities.tabs.unpublished')} (${props.auth?.tags.includes('staff') ?
+                    activityList.unPublishedActivities?.length :
+                    activityList.userActivities.filter(activity => !activity.publish).length})
+                  `}
+                className={classes.tab}
+              />
+            </Tabs>
+          )}
+          <Grid container spacing={3} className={classes.activitiesContainer}>
+            {activityList.published && tab === "published" &&
+              activityList.published.map((activity) => (
+                <ActivityCard activity={activity} key={activity.id} />
               ))}
+            {activityList.unPublishedActivities && tab === "unpublished" && props.auth?.tags.includes('staff') &&
+              activityList.unPublishedActivities.map(activity => (
+                <ActivityCard activity={activity} key={activity.id} />
+              ))
+            }
+            {activityList.userActivities && tab === "unpublished" && props.auth?.tags.includes('educator') && 
+              activityList.userActivities.filter(activity => !activity.publish).map(activity => (
+                <ActivityCard activity={activity} key={activity.id} />
+              ))
+            }
           </Grid>
         </div>
       );