Merge pull request #39 from badger-advisor/dev

Sprint 1 complete

.editorconfig

@@ -9,4 +9,3 @@ indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true

.env.example

@@ -0,0 +1,5 @@
+DATABASE=mongodb+srv://devUser:<PASSWORD>@cluster0.lwnmb.mongodb.net/madflow?retryWrites=true&w=majority
+DATABASE_PASSWORD=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+SKIP_PREFLIGHT_CHECK=true

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+
+	]
+}

.vscode/settings.json

@@ -7,4 +7,5 @@
   "prettier.openOutput": false,
   "prettier.printWidth": 100,
   "prettier.useTabs": false,
-}
+  "prettier.arrowParens": false,
+}

DEVELOP.md

@@ -0,0 +1,59 @@
+# Development Guide
+
+
+## VScode
+
+Instead of setting up prettier and eslint as dev dependencies, we'll just use VScode extensions and custimized settings.
+
+### Must
+
+- [Prettier Now](https://marketplace.visualstudio.com/items?itemName=remimarsal.prettier-now)
+- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
+- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+
+
+### Recommendations
+
+- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
+- [npm Intelliscense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
+- [path Intelliscense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
+- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
+- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
+
+---
+## To get started
+First clone this repo
+```shell
+> git clone https://github.com/badger-advisor/madflow.git
+```
+
+Next, from the root directory
+
+### Install all dependencies
+```shell
+> npm run dev-install
+```
+This will install dependencies for both the server and the client
+
+
+### Serve app
+```shell
+> npm run dev
+```
+This will serve both the server on `http://localhost:8080` and the frontend on `http://localhost:3000`
+
+
+#### Only serve frontend
+```shell
+> npm run client
+```
+or if in `client/` already
+```shell
+npm start
+```
+
+#### Only serve backend
+```shell
+> npm run server
+```
+This will start up nodemon, and all changes made will be updated in the server immediately, no need to restart the server each time.

README.md

@@ -1,27 +1,30 @@
 # MadFlow
 
-Currently, students at the University of Wisconsin-Madison can navigate through their major requirement paths using a few different methods such as DARS, the major requirements web page, or the provided sample course flow. However, none of these tools are interactive or intuitive to use. For this project, we are building a web application that provides a solution to this problem. 
+🌊 Helping students with course selection and planning
+
+## Problem
+
+Currently, students at the University of Wisconsin-Madison can navigate through their major requirement paths using a few different methods such as DARS, the major requirements web page, or the provided sample course flow. However, none of these tools are interactive or intuitive to use. For this project, we are building a web application that provides a solution to this problem.
 
 ## Structure
 
-### `frontend/`
-Using React with JavaScript
+We are using the Model View Controller architecture for this app.
+
+### `client/`
+
+This is where all of the front-end magic happens. All of the React code is in here.
+
+### `models/`
 
-### `backend/`
-Using Node, Express, MongoDB, and Firebase
+Here we define what our data will look like.
 
-## Vscode Extensions
-### For this project
+### `routes/`
 
-- [Prettier Now](https://marketplace.visualstudio.com/items?itemName=remimarsal.prettier-now)
-- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
-- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+Custom API routes for our Express server.
 
+### `controllers/`
 
-### Recommendations 
+The brains of the server.
 
-- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
-- [npm Intelliscense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
-- [path Intelliscense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
-- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
-- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
+## How to contribute
+Head over to [our guidelines and instructions.](./DEVELOP.md)

client/package.json

@@ -5,29 +5,34 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@material-ui/core": "^4.12.3",
+    "@mui/icons-material": "^5.0.4",
     "@mui/material": "^5.0.4",
+    "@mui/styled-engine": "^5.0.1",
     "@mui/styles": "^5.0.1",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.24.0",
+    "formik": "^2.2.9",
+    "http-proxy-middleware": "^2.0.1",
+    "js-cookie": "^3.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-flow-renderer": "^9.6.9",
+    "react-google-login": "^5.2.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2"
+    "react-show-more-text": "^1.5.0",
+    "web-vitals": "^2.1.2",
+    "yup": "^0.32.11"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

client/public/index.html

@@ -12,6 +12,7 @@
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
   <title>MadFlow</title>
+
 </head>
 
 <body>

client/src/App.js

@@ -1,14 +1,41 @@
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import { Landing, Dashboard, Profile, Graph } from './pages';
+import ApiTests from './components/ApiTests';
+
+const TempNav = () => {
+  return (
+    <ul>
+      <li>
+        <Link to='/'>Home</Link>
+      </li>
+      <li>
+        <Link to='/landing'>landing</Link>
+      </li>
+      <li>
+        <Link to='/dashboard'>dashboard</Link>
+      </li>
+      <li>
+        <Link to='/profile'>profile</Link>
+      </li>
+      <li>
+        <Link to='/flow'>flow</Link>
+      </li>
+    </ul>
+  );
+};
 
 const App = () => {
   return (
     <Router>
       <Switch>
+        <Route exact path='/' render={TempNav} />
         <Route exact path='/landing' render={Landing} />
         <Route exact path='/dashboard' render={Dashboard} />
         <Route exact path='/profile' render={Profile} />
-        <Route exact path='/flow' render={Graph} />
+        <Route exact path='/flow'>
+          <Graph />
+        </Route>
+        <Route exact path='/test' render={ApiTests} />
       </Switch>
     </Router>
   );

client/src/api/index.js

@@ -0,0 +1,119 @@
+import axios from 'axios';
+
+// Initialize axios
+const API = axios.create({ baseURL: 'http://localhost:8080' });
+
+/* ###################################### User ###################################### */
+const signIn = id =>
+  API.post(`/user/signIn`, {
+    id : id
+  })
+    .then(res => {
+      const { user } = res.data;
+      localStorage.setItem('google_id', id);
+      return user;
+    })
+    .catch(error => console.log(error));
+
+const signUp = userObject =>
+  API.post(`/user/signup`, {
+    id             : userObject.googleId,
+    displayName    : userObject.name,
+    email          : userObject.email,
+    profilePicture : userObject.imageUrl
+  })
+    .then(res => {
+      const { user } = res.data;
+      localStorage.setItem('google_id', userObject.googleId);
+      return user;
+    })
+    .catch(error => console.log(error));
+
+const fetchCurrentUser = id =>
+  API.post(`/user/signIn`, { id })
+    .then(res => {
+      const { user } = res.data;
+      localStorage.setItem('google_id', id);
+      return user;
+    })
+    .catch(error => console.log(error));
+
+// TODO: Remove all flows assiciated with the user
+const deleteUser = userGoogleID =>
+  API.delete('/user/deleteUser', {
+    googleId : userGoogleID
+  }).then(res => {
+    console.log(res);
+  });
+
+/* ###################################### Flow ###################################### */
+const getAllUserFlows = googleId =>
+  API.get('/flow/getUserFlows', { params: { googleId } }).then(res => {
+    const { flows } = res.data;
+    return flows;
+  });
+
+const getFlowInfo = flowID => API.get('/flow/getFlow', { id: flowID });
+
+const removeFlow = flowID =>
+  API.delete('/flow/removeFlow/', { id: flowID })
+    .then(res => console.log(JSON.stringify(res.data)))
+    .catch(error => console.log(error));
+
+const getUserFlow = (userID, flowID) => API.get(`/flow/${userID}/${flowID}`);
+
+const deleteUserFlow = (userID, flowID) => API.delete(`/flow/${userID}/${flowID}`);
+
+const createUserFlow = (userGoogleID, flowName, major) =>
+  API.post(`/flow/newFlow`, {
+    elements     : [],
+    userGoogleID,
+    flowName,
+    major
+  })
+    .then(res => console.log(res))
+    .catch(error => console.log(error));
+
+/**
+ * Only for updating the elements array in the flow
+ */
+const updateUserFlowElements = (flowID, updatedUserFlow) =>
+  API.post(`/flow/updateElements`, {
+    id       : flowID,
+    elements : updatedUserFlow
+  }).then(res => {
+    // console.log(JSON.stringify(res.data));
+  });
+
+/**
+ * Only for updating the NAME and MAJOR of a flow
+ */
+const updateUserFlow = (flowID, updatedUserFlow) =>
+  API.post(`/flow/update`, {
+    id      : flowID,
+    changes : updatedUserFlow
+  }).then(res => {
+    console.log(res);
+  });
+
+const getPrefilledFlow = majorID => API.get(`/flow/prefilled/${majorID}`);
+
+/* ###################################### Course ###################################### */
+const getCourse = courseNumber => API.get('/course/getCourse', { params: { courseNumber } });
+
+export {
+  signIn,
+  signUp,
+  fetchCurrentUser,
+  deleteUser,
+  getAllUserFlows,
+  getFlowInfo,
+  removeFlow,
+  createUserFlow,
+  updateUserFlowElements,
+  getPrefilledFlow,
+  getCourse,
+  updateUserFlow,
+  getUserFlow,
+  deleteUserFlow
+};

client/src/components/ApiTests.js

@@ -0,0 +1,17 @@
+import { getCourse } from '../api';
+
+const handleGetCourse = async () => {
+  console.log(await getCourse('CS506'));
+};
+
+const ApiTests = () => {
+  return (
+    <div>
+      <div>
+        <button onClick={handleGetCourse}>GET COURSE</button>
+      </div>
+    </div>
+  );
+};
+
+export default ApiTests;