Merge pull request #126 from tahmid-saj/dev-fitness-context

updating fitness for signed in

src/App.js

@@ -13,6 +13,7 @@ import RecipesRoute from "./routes/shared/recipes/recipes.component";
 
 import DashboardRouteSignedIn from "./routes/signed-in/dashboard/dashboard.component";
 import NutritionTrackerRouteSignedIn from "./routes/signed-in/nutrition-tracker/nutrition-tracker.component";
+import FitnessRouteSignedIn from "./routes/signed-in/fitness/fitness.component";
 import CaloriesBurnedRouteSignedIn from "./routes/signed-in/calories-burned/calories-burned.component"
 
 import { Fragment, useEffect } from "react";
@@ -52,6 +53,7 @@ function App() {
             <Fragment>
               <Route path="dashboard-signed-in" element={ <DashboardRouteSignedIn/> }/>
               <Route path="nutrition-tracker-signed-in" element={ <NutritionTrackerRouteSignedIn/> }/>
+              <Route path="fitness-signed-in" element={ <FitnessRouteSignedIn/> }/>
               <Route path="calories-burned-signed-in" element={ <CaloriesBurnedRouteSignedIn/> }/>
             </Fragment>
           ) : (

src/components/shared/mui/drawer/drawer.component.jsx

@@ -38,6 +38,7 @@ import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import { Link, useNavigate } from 'react-router-dom';
 import { NutritionTrackerContext } from "../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
 import { CaloriesBurnedContext } from "../../../../contexts/signed-in/calories-burned/calories-burned.context";
+import { FitnessContext } from "../../../../contexts/signed-in/fitness/fitness.context";
 // import { signOutUser } from '../../../../utils/firebase/firebase.utils';
 
 import { NAV_LINKS } from '../../../../utils/constants/shared.constants';
@@ -122,6 +123,7 @@ export default function MiniDrawer({ navLinksHeaders, children }) {
   const currentUser = useSelector(selectCurrentUser)
   const { updateNutritionTrackedDaysAndSummary } = useContext(NutritionTrackerContext);
   const { updateTrackedCaloriesBurned } = useContext(CaloriesBurnedContext)
+  const { updateExercises } = useContext(FitnessContext)
   const navigate = useNavigate();
 
   const handleDrawerOpen = () => {
@@ -135,6 +137,7 @@ export default function MiniDrawer({ navLinksHeaders, children }) {
   const handleSignOut = () => {
     updateNutritionTrackedDaysAndSummary();
     updateTrackedCaloriesBurned()
+    updateExercises()
     // signOutUser();
     dispatch(signOutStart())
     navigate("/")

src/components/signed-in/fitness/add-exercise-form/add-exercise-form-info/add-exercise-form-info.component.jsx

@@ -0,0 +1,37 @@
+import "./add-exercise-form-info.styles.scss"
+import { Divider, Typography } from "@mui/material"
+import { FitnessContext } from "../../../../../contexts/signed-in/fitness/fitness.context"
+import { useContext } from "react"
+
+const AddExerciseFormInfo = () => {
+  const { selectedSearchedExercise } = useContext(FitnessContext)
+
+  return (
+    <div className="fitness-add-exercise-form-info">
+      <Typography sx={{ display: "flex" }} 
+        variant="body1">{`${selectedSearchedExercise.exerciseName}`}</Typography>
+      <Typography sx={{ display: "flex" }} 
+        variant="body1">{`Type: ${selectedSearchedExercise.exerciseType}`}</Typography>
+
+      <br/>
+      <Divider/>
+      <br/>
+
+      <Typography sx={{ display: "flex" }} 
+        variant="body1">{`Muscle: ${selectedSearchedExercise.exerciseMuscle}`}</Typography>
+      <Typography sx={{ display: "flex" }} 
+        variant="body1">{`Equipment: ${selectedSearchedExercise.exerciseEquipment}`}</Typography>
+      <Typography sx={{ display: "flex" }} 
+            variant="body1">{`Difficulty: ${selectedSearchedExercise.exerciseDifficulty}`}</Typography>
+
+      <br/>
+      <Divider/>
+      <br/>
+
+      <Typography sx={{ display: "flex", whiteSpace: "pre-wrap" }} 
+            variant="body1">{`Instructions: \n\n${selectedSearchedExercise.exerciseInstructions}`}</Typography>
+    </div>
+  )
+}
+
+export default AddExerciseFormInfo

src/components/signed-in/fitness/add-exercise-form/add-exercise-form.component.jsx

@@ -0,0 +1,81 @@
+import { Fragment, useContext, useState } from "react"
+import "./add-exercise-form.styles.scss"
+import { Typography } from "@mui/material"
+import FormInput from "../../../shared/form-input/form-input.component"
+import { ButtonsContainer } from "../../../shared/button/button.styles"
+import Button from "../../../shared/button/button.component"
+import SimplePaper from "../../../shared/mui/paper/paper.component"
+import { COLOR_CODES } from "../../../../utils/constants/shared.constants"
+import AddExerciseFormInfo from "./add-exercise-form-info/add-exercise-form-info.component"
+import { FitnessContext } from "../../../../contexts/signed-in/fitness/fitness.context"
+
+const defaultFormFields = {
+  exerciseDate: "",
+  exerciseSets: "",
+  exerciseReps: ""
+}
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.paper.formPaper,
+}
+
+const AddExerciseForm = () => {
+  const [formFields, setFormFields] = useState(defaultFormFields)
+  const { addExercise, selectedSearchedExercise } = useContext(FitnessContext)
+
+  if (!selectedSearchedExercise) {
+    return (
+      <Fragment></Fragment>
+    )
+  }
+
+  const resetFormFields = () => {
+    setFormFields(defaultFormFields)
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+
+    if (!formFields.exerciseDate || formFields.exerciseDate === "") {
+      console.log("please fill in all info")
+      return
+    }
+
+    addExercise(formFields)
+    resetFormFields()
+  }
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div className="fitness-add-exercise-form-container">
+      <Typography variant="h6">Add exercise to the schedule</Typography>
+
+      <SimplePaper styles={ paperStyles }>
+        <AddExerciseFormInfo></AddExerciseFormInfo>
+
+        <form onSubmit={ handleSubmit } className="fitness-add-exercise-form">
+          <FormInput label="Scheduled date" type="date" required onChange={ handleChange }
+              name="exerciseDate" value={ formFields.exerciseDate }></FormInput>
+
+          <FormInput label="Sets" type="text" onChange={ handleChange }
+              name="exerciseSets" value={ formFields.exerciseSets }></FormInput>
+
+          <FormInput label="Reps" type="text" onChange={ handleChange }
+              name="exerciseReps" value={ formFields.exerciseReps }></FormInput>
+
+          <ButtonsContainer>
+              <Button type="submit">Add</Button>
+              <Button type="button" onClick={ resetFormFields }>Clear</Button>
+          </ButtonsContainer>
+        </form>
+      </SimplePaper>
+    </div>
+  )
+}
+
+export default AddExerciseForm

src/components/signed-in/fitness/add-exercise-form/add-exercise-form.styles.scss

@@ -0,0 +1,13 @@
+.fitness-add-exercise-form-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 0% 10% 2% 10%;
+  width: 50%;
+}
+
+.fitness-add-exercise-form {
+  display: block;
+  justify-content: center;
+  align-items: center;
+}

src/components/signed-in/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -0,0 +1,106 @@
+import "./schedule-calendar.styles.scss"
+import 'rsuite/Calendar/styles/index.css';
+import { Fragment, useContext, useState } from "react";
+import { Calendar, Whisper, Popover, Badge } from 'rsuite';
+import { Typography } from "@mui/material";
+import { FitnessContext } from "../../../../../contexts/signed-in/fitness/fitness.context";
+
+function getScheduledData(date, exercises) {
+  // const day = date.getDate();
+  date = date.toISOString().split('T')[0]
+
+  // switch (day) {
+  //   case 10:
+  //     return [
+  //       { time: '10:30 am', title: 'Meeting' },
+  //       { time: '12:00 pm', title: 'Lunch' }
+  //     ];
+  //   case 15:
+  //     return [
+  //       { time: '09:30 pm', title: 'Products Introduction Meeting' },
+  //       { time: '12:30 pm', title: 'Client entertaining' },
+  //       { time: '02:00 pm', title: 'Product design discussion' },
+  //       { time: '05:00 pm', title: 'Product test and acceptance' },
+  //       { time: '06:30 pm', title: 'Reporting' },
+  //       { time: '10:00 pm', title: 'Going home to walk the dog' }
+  //     ];
+  //   default:
+  //     return [];
+  // }
+
+  let scheduledExercisesForDate = []
+  exercises.map((exercise) => {
+    if (exercise.exerciseDate === date) {
+      scheduledExercisesForDate.push({
+        type: exercise.exerciseType,
+        name: exercise.exerciseName
+      })
+    }
+  })
+
+  return scheduledExercisesForDate
+}
+
+const ScheduleCalendar = () => {
+  const { exercises, selectScheduledExercise } = useContext(FitnessContext)
+
+  function renderCell(date) {
+    const list = getScheduledData(date, exercises);
+    const displayList = list.filter((item, index) => index < 1);
+
+    if (list.length) {
+      const moreCount = list.length - displayList.length;
+      // const moreItem = (
+      //   <li>
+      //     <Whisper
+      //       placement="top"
+      //       trigger="click"
+      //       speaker={
+      //         <Popover>
+      //           {list.map((item, index) => (
+      //             <p key={index}>
+      //               <b>{item.time}</b> - {item.title}
+      //             </p>
+      //           ))}
+      //         </Popover>
+      //       }
+      //     >
+      //       <h10>{moreCount} more</h10>
+      //     </Whisper>
+      //   </li>
+      // );
+
+      return (
+        <Fragment>
+          <ul className="calendar-todo-list">
+            {displayList.map((item, index) => (
+              <li key={index}>
+                <Badge /> <b>{item.type}</b> - {item.name}
+              </li>
+            ))}
+            {/* {moreCount ? moreItem : null} */}
+          </ul>
+          {moreCount} more
+        </Fragment>
+      );
+    }
+
+    return null;
+  }
+
+  const onSelectDate = (date) => {
+    const selectedDate = date.toISOString().split('T')[0]
+    console.log(selectedDate)
+    selectScheduledExercise(selectedDate)
+  }
+
+  return (
+    <div className="fitness-schedule-calendar-container">
+      <Typography sx={{ display: "flex", marginLeft: "1%" }} 
+        variant="h6">{`Exercises calendar`}</Typography>
+      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate }/>
+    </div>
+  )
+}
+
+export default ScheduleCalendar

src/components/signed-in/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss

@@ -0,0 +1,27 @@
+.calendar-todo-list {
+  text-align: left;
+  padding: 0;
+  list-style: none;
+}
+
+.calendar-todo-list li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calendar-todo-item-badge {
+  vertical-align: top;
+  margin-top: 8px;
+  width: 6px;
+  height: 6px;
+}  
+
+.fitness-schedule-calendar-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  background-color: lightblue;
+  margin: 2%;
+  padding: 1%;
+}