Merge pull request #20 from joh748/main

Make the workout management page (with three divs) Resolves #9

fitness_tracker/package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@material/tab": "^14.0.0",
+    "@material/tabs": "^2.3.0",
+    "@mui/material": "^5.16.6",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

fitness_tracker/src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 20vh;
   display: flex;
   flex-direction: column;
   align-items: center;

fitness_tracker/src/App.js

@@ -1,7 +1,8 @@
 import './App.css';
 import { useState, useEffect } from 'react';
 import TempWorkoutDisplay from './components/TempWorkoutDisplay';
-import { LineChart, Line, CartesianGrid, XAxis, YAxis, Brush, Legend, Tooltip } from 'recharts';
+import TabDisplay from './components/TabDisplay';
+import GraphDisplay from './components/GraphDisplay';
 
 const data = [{name: 'Monday', volume1: 400, volume2: 900, amt: 2400}, 
   {name: 'Tuesday', volume1: 200, volume2: 2400, amt: 2400},
@@ -36,26 +37,14 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <TempWorkoutDisplay data={workouts}/>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        what to add in the app header
       </header>
-      <LineChart width={400} height={400} data={data}>
-        <Line type="monotone" dataKey="volume1" stroke="#8884d8" strokeWidth={3} />
-        <Line type="monotone" dataKey="volume2" stroke="#afafaf" strokeWidth={3} />
-        <CartesianGrid stroke="#ccc" />
-        <XAxis dataKey="name" />
-        <YAxis />
-        <Tooltip />
-        <Legend />
-        <Brush dataKey='name' height={30} stroke="#8884d8"/>
-      </LineChart>
+      <GraphDisplay data={data}/>
+
+      <TabDisplay/>
+
+      <TempWorkoutDisplay data={workouts}/>
+
     </div>
   );
 }

fitness_tracker/src/App.test.js

@@ -1,8 +1,14 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders Routines', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  const rountinesElement = screen.getByText("Routines");
+  expect(rountinesElement).toBeInTheDocument();
 });
+
+test('renders Today\'s Workout', () => {
+  render(<App/>);
+  const exercisesElemet = screen.getByText("Today's Workout");
+  expect(exercisesElemet).toBeInTheDocument();
+});

fitness_tracker/src/components/ExercisesDisplay.jsx

@@ -0,0 +1,9 @@
+function ExercisesDisplay() {
+    return (
+        <div>
+            Exercises Display
+        </div>
+    )
+}
+
+export default ExercisesDisplay

fitness_tracker/src/components/GraphDisplay.jsx

@@ -0,0 +1,18 @@
+import { LineChart, Line, CartesianGrid, XAxis, YAxis, Brush, Legend, Tooltip } from 'recharts';
+
+function GraphDisplay({ data }) {
+    return (
+        <LineChart width={400} height={400} data={data}>
+            <Line type="monotone" dataKey="volume1" stroke="#8884d8" strokeWidth={3} />
+            <Line type="monotone" dataKey="volume2" stroke="#afafaf" strokeWidth={3} />
+            <CartesianGrid stroke="#ccc" />
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Brush dataKey='name' height={30} stroke="#8884d8"/>
+        </LineChart>
+    )   
+}
+
+export default GraphDisplay

fitness_tracker/src/components/RoutinesDisplay.jsx

@@ -0,0 +1,9 @@
+function RoutinesDisplay() {
+    return (
+        <div>
+            Routines Display
+        </div>
+    )
+}
+
+export default RoutinesDisplay

fitness_tracker/src/components/TabDisplay.jsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import RoutinesDisplay from './RoutinesDisplay';
+import ExercisesDisplay from './ExercisesDisplay';
+
+function CustomTabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+CustomTabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+// Todo: need to add swipe for mobile
+function TabDisplay() {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={value} onChange={handleChange} aria-label="Routines and Today's Workout Tab" centered={true}>
+          <Tab label="Routines" {...a11yProps(0)} />
+          <Tab label="Today's Workout" {...a11yProps(1)} />
+        </Tabs>
+      </Box>
+
+      <CustomTabPanel value={value} index={0}>
+        <RoutinesDisplay/>
+      </CustomTabPanel>
+
+      <CustomTabPanel value={value} index={1}>
+        <ExercisesDisplay/>
+      </CustomTabPanel>
+    </Box>
+  );
+}
+
+export default TabDisplay

fitness_tracker/src/components/TempWorkoutDisplay.jsx

@@ -1,6 +1,7 @@
 const TempWorkoutDisplay = ({ data }) => {
     return (
       <div>
+        <h1>Below is TempWorkoutDisplay.jxs</h1>
         {data.map((item) => (
           <div key={item.id}>
             <h3>{item.name}</h3>