Displays flows on Dashboard for googleID tempgenelee (#38)

* initial backend setup for dashboard page

* sets up functions for displaying flow

* displays flows for googleId tempgenelee

client/src/api/index.js

@@ -29,7 +29,7 @@ const signUp = userObject =>
     })
     .catch(error => console.log(error));
 
-const currentUser = id =>
+const fetchCurrentUser = id =>
   API.post(`/user/signIn`, { id })
     .then(res => {
       const { user } = res.data;
@@ -104,7 +104,7 @@ const getCourse = courseNumber => API.get('/course/getCourse', { params: { cours
 export {
   signIn,
   signUp,
-  currentUser,
+  fetchCurrentUser,
   deleteUser,
   getAllUserFlows,
   getFlowInfo,

client/src/components/DashboardPage/FlowCard.js

@@ -58,7 +58,7 @@ const FlowCard = ({ flowID, flowName }) => {
       </Avatar>
 
       {/* FlowCard menu Popover */}
-      <FlowCardMenu showMenu={showMenu} setShowMenu={setShowMenu} />
+      <FlowCardMenu showMenu={showMenu} setShowMenu={setShowMenu} flowID={flowID} />
 
       {/* FlowCard image */}
       <CardMedia component='img' height='80%' image={testImg} alt='test image' />

client/src/components/DashboardPage/FlowCardGrid.js

@@ -1,36 +1,53 @@
-import { Card, CardContent, Typography, Grid, Box } from '@mui/material';
+import { useState, useEffect } from 'react';
+import { getUserFlowNames } from '../../utils.js';
+
+import { Grid, Box } from '@mui/material';
 import FlowCard from './FlowCard';
 
 const TempFlows = [
   {
-    id       : 1,
+    _id      : 1,
     flowName : 'FLOW 1'
   },
   {
-    id       : 2,
+    _id      : 2,
     flowName : 'FLOW 2'
   },
   {
-    id       : 3,
+    _id      : 3,
     flowName : 'FLOW 3'
   },
   {
-    id       : 4,
+    _id      : 4,
     flowName : 'FLOW 4'
   },
   {
-    id       : 5,
+    _id      : 5,
     flowName : 'FLOW 5'
   }
 ];
 
-const FlowCardGrid = () => {
+const FlowCardGrid = ({ userID }) => {
+  const [ userFlows, setUserFlows ] = useState([]);
+
+  const getFlows = async userID => {
+    setUserFlows(await getUserFlowNames(userID));
+  };
+
+  useEffect(() => {
+    getFlows(userID);
+  }, []);
+
+  // console.log('user flows:');
+  // console.log(userFlows);
+
   return (
     <Box sx={{ flexGrow: 1, mt: '20px', ml: '30px', mr: '30px' }}>
       <Grid container spacing={4}>
-        {TempFlows.map(flow => (
-          <Grid item xs={6} sm={5} md={3} key={flow.id}>
-            <FlowCard flowID={flow.id} flowName={flow.flowName} />
+        {/* {TempFlows.map(flow => ( */}
+        {userFlows.map(flow => (
+          <Grid item xs={6} sm={5} md={3} key={flow._id}>
+            <FlowCard flowID={flow.id} flowName={flow.name} />
           </Grid>
         ))}
       </Grid>

client/src/components/DashboardPage/FlowCardMenu.js

@@ -1,3 +1,6 @@
+import { useEffect } from 'react';
+import { getUserFlowNames } from '../../utils.js';
+
 // material-ui
 import { Menu, MenuItem } from '@mui/material';
 
@@ -6,28 +9,28 @@ import DriveFileRenameOutlineIcon from '@mui/icons-material/DriveFileRenameOutli
 import FileCopyTwoToneIcon from '@mui/icons-material/FileCopyOutlined';
 import DeleteIcon from '@mui/icons-material/Delete';
 
-const FlowCardMenu = ({ showMenu, setShowMenu }) => {
+const FlowCardMenu = ({ showMenu, setShowMenu, flowID }) => {
   // function to close menu
-  const closeMenu = (e) => {
+  const closeMenu = e => {
     e.stopPropagation();
     console.log('close menu');
     setShowMenu(null);
   };
 
   // TODO: function to rename Flow
-  const renameFlow = (e) => {
+  const renameFlow = e => {
     e.stopPropagation();
     console.log('rename flow');
   };
 
   // TODO: function to copy Flow to a new Flow
-  const copyFlow = (e) => {
+  const copyFlow = e => {
     e.stopPropagation();
     console.log('copy flow');
   };
 
   // TODO: function to delete Flow
-  const deleteFlow = (e) => {
+  const deleteFlow = e => {
     e.stopPropagation();
     console.log('delete flow');
   };

client/src/pages/Dashboard.js

@@ -1,24 +1,26 @@
 // server
-import { currentuser } from '../utils';
+import { currentUser } from '../utils.js';
+
 // components
 import NavBar from '../components/NavBar/NavBar';
 import FlowCardGrid from '../components/DashboardPage/FlowCardGrid';
-import NewFlow from '../components/DashboardPage/NewFlow';
 
 const Dashboard = () => {
-  const curUser = async () => {
-    const data = localStorage.getItem('google_id');
-    const cur_user = currentuser(data);
-    console.log('current User:');
-    console.log(cur_user);
-  };
+  // const currUser = async () => {
+  //   const data = localStorage.getItem('google_id');
+  //   const userID = await currentUser(data);
+  //   console.log('current User:');
+  //   console.log(userID);
+  // };
+
+  //currUser();
 
-  curUser();
+  const userID = 'tempgenelee'; // TODO: connect backend to get actual userID
 
   return (
     <div>
       <NavBar />
-      <FlowCardGrid />
+      <FlowCardGrid userID={userID} />
     </div>
   );
 };

client/src/utils.js

@@ -5,7 +5,7 @@ import {
   updateUserFlow,
   createUserFlow,
   deleteUser,
-  currentUser,
+  fetchCurrentUser,
   signUp,
   signIn,
   getAllUserFlows
@@ -112,7 +112,7 @@ export const determineType = (course, elements) => {
 /**
  * Function to call to update a flows information
  * @param {String} flowID the autogenerated id from mongodb for each flow
- * @param {{Object}} changes in the json form
+ * @param {{Object}} changes in the json form (name and major keys)
  */
 export const updateFlow = async (flowID, changes) => {
   await updateUserFlow(flowID, changes);
@@ -132,9 +132,9 @@ export const createNewFlow = async (userGoogleId, name, major) => {
  * Function to call when trying to find current user data
  * @param {String} userID the google ID
  */
-export const currentuser = async userID => {
+export const currentUser = async userID => {
   // TODO: need to check valid input
-  return await currentUser(userID);
+  return await fetchCurrentUser(userID);
 };
 
 export const getUserFlowNames = async userID => {