Eivind branch

Client/App.jsx

@@ -1,15 +1,29 @@
+/**
+ * ************************************
+ *
+ * @module
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/03/23
+ * @description main app container rendering 3 child containers
+ *
+ * ************************************
+ */
+
 import React from 'react';
-import MainContainer from './containers/MainContainer.jsx';
-import HeaderContainer from './containers/HeaderContainer.jsx';
+import TimerContainer from './containers/TimerContainer.jsx';
+import MenuContainer from './containers/MenuContainer.jsx';
+import StretchContainer from './containers/StretchContainer.jsx';
+import './stylesheets/styles.css';
 
 // Init func app that returns our main containers
 const App = () => {
   return (
     <div>
-      <HeaderContainer />
-      <MainContainer />
+      <TimerContainer />
+      <MenuContainer />
+      <StretchContainer />
     </div>
   );
 };
 
-export default App
+export default App;

Client/actionCreator/actionCreator.js

@@ -0,0 +1,6 @@
+import * as types from '../constant/actionTypes';
+
+export const updateExercisesFromAPI = (array) => ({
+  type: types.UPDATE_FROM_API,
+  payload: array,
+});

Client/constant/actionTypes.js

@@ -0,0 +1 @@
+export const UPDATE_FROM_API = "UPDATE_FROM_API"

Client/containers/HeaderContainer.jsx

@@ -1,26 +1,24 @@
-import React from 'react';
-import '../styles.css';
+/**
+ * ************************************
+ *
+ * @module Header
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/2023
+ * @description header feature on main page of app
+ *
+ * ************************************
+ */
 
-{
-  /* This is the HeaderContainer in Client/containers/HeaderContainer.jsx */
-}
+import React from 'react';
+import * as actions from '../actionCreator/actionCreator.js';
 
 const HeaderContainer = () => {
-  // insert any logic for the HeaderContainer here
-  return (
-    <div id='navBar'>
-      <header>
-        <h1>Ready to get your stretch on?</h1>
-      </header>
-      <div id='flex-item'></div>
-      <div id='flex-item'>
-        <p>Stretch.io</p>
-      </div>
-      <div id='flex-item'>
-        <p>Sign Up / Log in</p>
-      </div>
-    </div>
-  );
-};
+    return (
+        <div className="appHeaderBox">
+        <h4 className="mainHeader">Stretch</h4>
+        <button>Logout</button>
+        </div>
+    );
+}
 
-export default HeaderContainer;
+export default HeaderContainer;

Client/containers/MenuContainer.jsx

@@ -0,0 +1,66 @@
+/**
+ * ************************************
+ *
+ * @module
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/03/23
+ * @description drop down menu item for selecting stretch target muscle group and difficulty
+ * question: can we pass the data from the drop down menus in menu container to the stretch container to render the stretch components? menu container and stretch container are siblings, do we need a parent to hold both containers?
+ *
+ * ************************************
+ */
+
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import * as actions from '../actionCreator/actionCreator.js';
+
+const MenuContainer = (prop) => {
+  const dispatch = useDispatch();
+
+    const refreshExercises = () => {
+      const muscle = document.getElementById('muscle').value;
+      const difficulty = document.getElementById('difficulty').value;
+      fetch(
+        `http://localhost:3000/api?muscle=${muscle}&difficulty=${difficulty}&type=stretching`
+      )
+        // .then(data => json(data))
+        .then( data => console.log(data) )
+        .catch( error => console.log('error'))
+        // .then((data) => dispatch(actions.updateExercisesFromAPI(data)))
+        // .catch((error) => console.log('Error in MenuContainer.jsx fetch', error));
+    };
+
+  return (
+    <div>
+      <select className="muscle" id="muscle" onChange={() => null}>
+        <option value="abdominals">Abdominals</option>
+        <option value="abductors">Abductors</option>
+        <option value="adductors">Adductors</option>
+        <option value="biceps">Biceps</option>
+        <option value="calves">Calves</option>
+        <option value="chest">Chest</option>
+        <option value="forearms">Forearms</option>
+        <option value="glutes">Glutes</option>
+        <option value="hamstrings">Hamstrings</option>
+        <option value="lats">Lats</option>
+        <option value="lower_back">Lower Back</option>
+        <option value="middle_back">Middle Back</option>
+        <option value="neck">Neck</option>
+        <option value="quadriceps">Quadriceps</option>
+        <option value="traps">Traps</option>
+        <option value="triceps">Triceps</option>
+      </select>
+      <select
+        className="difficulty"
+        id="difficulty"
+        onChange={() => null}
+      >
+        <option value="beginner">Beginner</option>
+        <option value="intermediate">Intermediate</option>
+        <option value="expert">Expert</option>
+      </select>
+    </div>
+  );
+};
+
+export default MenuContainer;

Client/containers/OldHeaderContainer.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import '../styles.css';
+
+{
+  /* This is the HeaderContainer in Client/containers/HeaderContainer.jsx */
+}
+
+const HeaderContainer = () => {
+  // insert any logic for the HeaderContainer here
+  return (
+    <div id="navBar">
+      <header>
+        <h1>Ready to get your stretch on?</h1>
+      </header>
+      <div id="flex-item"></div>
+      <div id="flex-item">
+        <p>Stretch.io</p>
+      </div>
+      <div id="flex-item">
+        <p>Sign Up / Log in</p>
+      </div>
+    </div>
+  );
+};
+
+export default HeaderContainer;

Client/containers/StretchContainer.jsx

@@ -0,0 +1,19 @@
+/**
+ * ************************************
+ *
+ * @module
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/03/23
+ * @description stretch container rendering stretch components based on search from drop down menus found in menu container
+ * question: can we pass the data from the drop down menus in menu container to the stretch container to render the stretch components? menu container and stretch container are siblings, do we need a parent to hold both containers?
+ *
+ * ************************************
+ */
+
+import React from 'react';
+
+const StretchContainer = (prop) => {
+  return <div></div>;
+};
+
+export default StretchContainer;

Client/containers/TimerContainer.jsx

@@ -0,0 +1,18 @@
+/**
+ * ************************************
+ *
+ * @module
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/03/23
+ * @description timer container rendering timer and start button
+ *
+ * ************************************
+ */
+
+import React from 'react';
+
+const TimerContainer = (prop) => {
+  return <div></div>;
+};
+
+export default TimerContainer;

Client/index.html

@@ -1,11 +1,10 @@
-<!-- this is our landing page -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <!-- the title is what is displayed on tab header -->
+    <!-- <script defer href="dist/bundle.js"></script> -->
     <title>Get stretching</title>
     <link type="stylesheet" src="./styles.css" />
   </head>

Client/index.js

@@ -1,6 +1,34 @@
+/**
+ * ************************************
+ *
+ * @module  App.jsx
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/03/23
+ * @description index file to render app
+ *
+ * ************************************
+ */
+
 import React from 'react';
 import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import store from './store.js';
 import App from './App.jsx';
+import './stylesheets/styles.css';
+
+// import { createRoot } from 'react-dom/client';
 
 // render app from App.jsx file on the html element with id of app in the index.html page
-render(<App />, document.getElementById('app'));
+// const root = ReactDOM.createRoot(document.getElementById('root'));
+// root.render(
+//   <Provider store={store}>
+//     <App />
+//   </Provider>
+// );
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('app')
+);

Client/reducers/index.js

@@ -0,0 +1,19 @@
+/**
+ * ************************************
+ *
+ * @module  stretchReducer
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/2023
+ * @description combine reducers
+ *
+ * ************************************
+ */
+
+import { combineReducers } from 'redux';
+import stretchReducer from './stretchReducer';
+
+const reducers = combineReducers({
+  stretch: stretchReducer,
+});
+
+export default reducers;

Client/reducers/stretchReducer.js

@@ -0,0 +1,27 @@
+/**
+ * ************************************
+ *
+ * @module  stretchReducer
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/2023
+ * @description reducer for stretch
+ *
+ * ************************************
+ */
+import * as types from '../constant/actionTypes.js';
+
+const initialState = {
+  exercisesFromAPI: [],
+};
+
+const stretchReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case types.UPDATE_FROM_API: {
+      return {...state, exercisesFromAPI : action.payload};
+    }
+    default:
+      return state;
+  }
+};
+
+export default stretchReducer;

Client/store.js

@@ -0,0 +1,17 @@
+/**
+ * ************************************
+ *
+ * @module  Store
+ * @author Eivind Del Fierro, Morah Geist
+ * @date 07/2023
+ * @description redux store
+ *
+ * ************************************
+ */
+
+import { configureStore } from '@reduxjs/toolkit';
+import reducers from './reducers';
+
+const store = configureStore({ reducer: reducers });
+
+export default store;

Server/server.js

@@ -11,15 +11,17 @@ require('dotenv').config();
 
 const express = require('express');
 const app = express();
-const path = require('path');
-const controller = require('./controller/ExerciseController.js');
-const startServer = require('./database/dbConnection.js');
-const userController = require('./controller/UserController.js');
-const cors = require('cors');
+const path = require("path");
+const controller = require("./controller/ExerciseController.js");
+const startServer = require("./database/dbConnection.js");
+const userController = require("./controller/UserController.js");
+const cors = require('cors')
+
 const PORT = 3000;
 
 app.use(express.json());
 app.use(cors());
+app.use(cors());
 // if you ever have a form on your frontend, express.urlencoded
 app.use(express.urlencoded({ extended: true })); // this will be helpful for stringifying a form req from an .html file
 

package.json

@@ -12,17 +12,21 @@
   "author": "Alana Herlands, Serena Romano, Diane Moon, Josh Hall, Rodrigo Samour Calderon",
   "license": "ISC",
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "bcrypt": "^5.1.0",
+    "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "express": "^4.16.3",
     "express-async-handler": "^1.2.0",
     "mongodb": "^5.6.0",
     "mongoose": "^6.8.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-hot-loader": "^4.6.3",
+    "react-redux": "^8.1.1",
     "react-router": "^4.3.1",
-    "react-router-dom": "^6.14.0"
+    "react-router-dom": "^6.14.0",
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",