add tabs

show unpublished activities for staff and educators
unstructuredstudio · Feb 29, 2024 · 2b81fef · 2b81fef
1 parent 81a6269
commit 2b81fef
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 205 deletions.
diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -649,7 +649,7 @@
     },
     "activityLog": {
       "activity": "Activity Log",
-      "addActivityLog": "Seems like there isn't any activity on your account yet! Get involved to see activity logs!" 
+      "addActivityLog": "Seems like there isn't any activity on your account yet! Get involved to see activity logs!"
     },
     "team": "Team",
     "createteam": "Create Team",
@@ -1075,6 +1075,12 @@
   },
 
  "activities": {
+  "title": "Activities",
+  "tabs": {
+    "published": "Published",
+    "unpublished": "Unpublished",
+    "ariaLabel": "Activity Tabs"
+  },
    "LinkedProjects": "Linked Projects",
    "errors": {
       "emptyList": "No activities created yet !",
@@ -1191,4 +1197,4 @@
       "buttonLabel": "Get Started"
     }
   }
-}
+}
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js
@@ -1,4 +1,15 @@
 const styles = theme => ({
+  tabs: {
+    margin: '2em 0',
+    [theme.breakpoints.up('900')]: {
+      paddingRight: '1em',
+    },
+  },
+  tab: {
+    textTransform: 'none',
+    fontSize: '1.2em',
+    fontWeight: 600,
+  },
   activityListContainer: {
     padding: '4em 0',
     width: '70%',
@@ -10,6 +21,9 @@ const styles = theme => ({
       width: '95%',
     },
   },
+  activitiesContainer: {
+    marginTop: 0,
+  },
   activityBoxContainer: {
     padding: '5vh 10px',
     position: 'relative',

diff --git a/zubhub_frontend/zubhub/src/store/actions/activityActions.js b/zubhub_frontend/zubhub/src/store/actions/activityActions.js
@@ -2,181 +2,155 @@ import { toast } from 'react-toastify';
 
 import API from '../../api/api';
 import * as at from '../actionTypes';
-let ActivityAPI = new API();
 
-export const setActivities = activities => {
-  return dispatch => {
-    dispatch({
-      type: at.SET_ACTIVITIES,
-      payload: { all_activities: activities },
-    });
-  };
+const ActivityAPI = new API();
+
+export const setActivities = activities => dispatch => {
+  dispatch({
+    type: at.SET_ACTIVITIES,
+    payload: { all_activities: activities },
+  });
 };
 
-export const setActivity = activity => {
-  return dispatch => {
-    dispatch({
-      type: at.SET_ACTIVITY,
-      payload: { activity: activity },
-    });
-  };
+export const setActivity = activity => dispatch => {
+  dispatch({
+    type: at.SET_ACTIVITY,
+    payload: { activity },
+  });
 };
 
 export const getMyActivities = ({ t, token }) => {
   console.log('getMyActivities', token);
-  return async dispatch => {
-    return ActivityAPI.getMyActivities(token)
+  return async dispatch =>
+    ActivityAPI.getMyActivities(token)
       .then(res => {
         console.log('result', res);
 
         if (res.status >= 200 && res.status < 300) {
-          let response = res.json();
+          const response = res.json();
           response.then(all => {
             console.log('all', all);
             dispatch({
               type: at.SET_ACTIVITIES,
               payload: {
-                all_activities: all,
+                userActivities: all,
               },
             });
           });
+        } else if (res.status === 403 && res.statusText === 'Forbidden') {
+          toast.warning(t('activityDetails.activity.delete.dialog.forbidden'));
         } else {
-          if (res.status === 403 && res.statusText === 'Forbidden') {
-            toast.warning(
-              t('activityDetails.activity.delete.dialog.forbidden'),
-            );
-          } else {
-            toast.warning(t('activities.errors.dialog.serverError'));
-          }
+          toast.warning(t('activities.errors.dialog.serverError'));
         }
       })
-      .catch(error => {
+      .catch(() => {
         toast.warning(t('activities.errors.dialog.serverError'));
       });
-  };
 };
 
 export const getUnPublishedActivities = ({ t, token }) => {
   console.log('getUnPublishedActivities', token);
-  return async dispatch => {
-    return ActivityAPI.getUnPublishedActivities(token)
+  return async dispatch =>
+    ActivityAPI.getUnPublishedActivities(token)
       .then(res => {
         console.log('result', res);
 
         if (res.status >= 200 && res.status < 300) {
-          let response = res.json();
+          const response = res.json();
           response.then(all => {
             console.log('all', all);
             dispatch({
               type: at.SET_ACTIVITIES,
               payload: {
-                all_activities: all,
+                unPublishedActivities: all,
               },
             });
           });
+        } else if (res.status === 403 && res.statusText === 'Forbidden') {
+          toast.warning(t('activityDetails.activity.delete.dialog.forbidden'));
         } else {
-          if (res.status === 403 && res.statusText === 'Forbidden') {
-            toast.warning(
-              t('activityDetails.activity.delete.dialog.forbidden'),
-            );
-          } else {
-            toast.warning(t('activities.errors.dialog.serverError'));
-          }
+          toast.warning(t('activities.errors.dialog.serverError'));
         }
       })
-      .catch(error => {
+      .catch(() => {
         toast.warning(t('activities.errors.dialog.serverError'));
       });
-  };
 };
 
-export const getActivities = t => {
-  return async dispatch => {
-    return ActivityAPI.getActivities()
-      .then(res => {
-        if (res.status >= 200 && res.status < 300) {
-          let response = res.json();
-          response.then(all => {
-            dispatch({
-              type: at.SET_ACTIVITIES,
-              payload: {
-                all_activities: all,
-              },
-            });
+export const getActivities = t => async dispatch =>
+  ActivityAPI.getActivities()
+    .then(res => {
+      if (res.status >= 200 && res.status < 300) {
+        const response = res.json();
+        response.then(all => {
+          dispatch({
+            type: at.SET_ACTIVITIES,
+            payload: {
+              all_activities: all,
+            },
           });
-        } else {
-          if (res.status === 403 && res.statusText === 'Forbidden') {
-            toast.warning(
-              t('activityDetails.activity.delete.dialog.forbidden'),
-            );
-          } else {
-            toast.warning(t('activities.errors.dialog.serverError'));
-          }
-        }
-      })
-      .catch(error => {
-        toast.warning(t('activities.errors.dialog.serverError'));
-      });
-  };
-};
-
-export const activityCountView = args => {
-  return async dispatch => {
-    try {
-      const result = await ActivityAPI.activityToggleSave(args);
-      dispatch({
-        type: at.SET_ACTIVITY,
-        payload: { activity: result },
-      });
-      return { loading: false };
-    } catch (error) {
-      if (error.message.startsWith('Unexpected')) {
-        toast.warning(args.t('projects.errors.unexpected'));
+        });
+      } else if (res.status === 403 && res.statusText === 'Forbidden') {
+        toast.warning(t('activityDetails.activity.delete.dialog.forbidden'));
       } else {
-        toast.warning(error.message);
+        toast.warning(t('activities.errors.dialog.serverError'));
       }
-      return { loading: false };
+    })
+    .catch(() => {
+      toast.warning(t('activities.errors.dialog.serverError'));
+    });
+
+export const activityCountView = args => async dispatch => {
+  try {
+    const result = await ActivityAPI.activityToggleSave(args);
+    dispatch({
+      type: at.SET_ACTIVITY,
+      payload: { activity: result },
+    });
+    return { loading: false };
+  } catch (error) {
+    if (error.message.startsWith('Unexpected')) {
+      toast.warning(args.t('projects.errors.unexpected'));
+    } else {
+      toast.warning(error.message);
     }
-  };
+    return { loading: false };
+  }
 };
 
-export const activityToggleSave = args => {
-  return async dispatch => {
-    try {
-      const result = await ActivityAPI.activityToggleSave(args);
-      dispatch({
-        type: at.SET_ACTIVITY,
-        payload: { activity: result },
-      });
-      return { loading: false };
-    } catch (error) {
-      if (error.message.startsWith('Unexpected')) {
-        toast.warning(args.t('projects.errors.unexpected'));
-      } else {
-        toast.warning(error.message);
-      }
-      return { loading: false };
+export const activityToggleSave = args => async dispatch => {
+  try {
+    const result = await ActivityAPI.activityToggleSave(args);
+    dispatch({
+      type: at.SET_ACTIVITY,
+      payload: { activity: result },
+    });
+    return { loading: false };
+  } catch (error) {
+    if (error.message.startsWith('Unexpected')) {
+      toast.warning(args.t('projects.errors.unexpected'));
+    } else {
+      toast.warning(error.message);
     }
-  };
+    return { loading: false };
+  }
 };
 
-export const activityTogglePublish = args => {
-  return async dispatch => {
-    try {
-      const result = await ActivityAPI.activityTogglePublish(args);
+export const activityTogglePublish = args => async dispatch => {
+  try {
+    const result = await ActivityAPI.activityTogglePublish(args);
 
-      dispatch({
-        type: at.SET_ACTIVITY,
-        payload: { activity: result },
-      });
-      return result;
-    } catch (error) {
-      if (error.message.startsWith('Unexpected')) {
-        toast.warning(args.t('projects.errors.unexpected'));
-      } else {
-        toast.warning(error.message);
-      }
-      return { error: error };
+    dispatch({
+      type: at.SET_ACTIVITY,
+      payload: { activity: result },
+    });
+    return result;
+  } catch (error) {
+    if (error.message.startsWith('Unexpected')) {
+      toast.warning(args.t('projects.errors.unexpected'));
+    } else {
+      toast.warning(error.message);
     }
-  };
+    return { error };
+  }
 };
diff --git a/zubhub_frontend/zubhub/src/store/reducers/activityReducer.js b/zubhub_frontend/zubhub/src/store/reducers/activityReducer.js
@@ -1,9 +1,11 @@
 import * as at from '../actionTypes';
+
 const default_state = {
   all_activities: [],
   published: [],
   unPublishedActivities: [],
   selectedActivity: {},
+  userActivities: [],
 };
 const activities = (state = default_state, action) => {
   switch (action.type) {