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

fitness components update

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

@@ -1,23 +1,35 @@
 import "./add-exercise-form-info.styles.scss"
-import { Typography } from "@mui/material"
+import { Divider, Typography } from "@mui/material"
+import { FitnessContext } from "../../../../../contexts/signed-out/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">{`Name`}</Typography>
+        variant="body1">{`${selectedSearchedExercise.exerciseName}`}</Typography>
       <Typography sx={{ display: "flex" }} 
-        variant="body1">{`Type`}</Typography>
+        variant="body1">{`Type: ${selectedSearchedExercise.exerciseType}`}</Typography>
+
+      <br/>
+      <Divider/>
+      <br/>
 
       <Typography sx={{ display: "flex" }} 
-        variant="body1">{`Muscle`}</Typography>
+        variant="body1">{`Muscle: ${selectedSearchedExercise.exerciseMuscle}`}</Typography>
       <Typography sx={{ display: "flex" }} 
-        variant="body1">{`Equipment`}</Typography>
+        variant="body1">{`Equipment: ${selectedSearchedExercise.exerciseEquipment}`}</Typography>
       <Typography sx={{ display: "flex" }} 
-            variant="body1">{`Difficulty`}</Typography>
+            variant="body1">{`Difficulty: ${selectedSearchedExercise.exerciseDifficulty}`}</Typography>
 
-      <Typography sx={{ display: "flex" }} 
-            variant="body1">{`Instructions`}</Typography>
+      <br/>
+      <Divider/>
+      <br/>
+
+      <Typography sx={{ display: "flex", whiteSpace: "pre-wrap" }} 
+            variant="body1">{`Instructions: \n\n${selectedSearchedExercise.exerciseInstructions}`}</Typography>
     </div>
   )
 }

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

@@ -1,4 +1,4 @@
-import { useState } from "react"
+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"
@@ -7,6 +7,7 @@ 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-out/fitness/fitness.context"
 
 const defaultFormFields = {
   exerciseDate: "",
@@ -20,6 +21,13 @@ const paperStyles = {
 
 const AddExerciseForm = () => {
   const [formFields, setFormFields] = useState(defaultFormFields)
+  const { addExercise, selectedSearchedExercise } = useContext(FitnessContext)
+
+  if (!selectedSearchedExercise) {
+    return (
+      <Fragment></Fragment>
+    )
+  }
 
   const resetFormFields = () => {
     setFormFields(defaultFormFields)
@@ -33,6 +41,7 @@ const AddExerciseForm = () => {
       return
     }
 
+    addExercise(formFields)
     resetFormFields()
   }
 

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

@@ -1,35 +1,51 @@
 import "./schedule-calendar.styles.scss"
 import 'rsuite/Calendar/styles/index.css';
-import { Fragment, useState } from "react";
+import { Fragment, useContext, useState } from "react";
 import { Calendar, Whisper, Popover, Badge } from 'rsuite';
 import { Typography } from "@mui/material";
+import { FitnessContext } from "../../../../../contexts/signed-out/fitness/fitness.context";
 
-function getTodoList(date) {
-  const day = date.getDate();
+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 [];
-  }
+  // 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 = getTodoList(date);
+    const list = getScheduledData(date, exercises);
     const displayList = list.filter((item, index) => index < 1);
 
     if (list.length) {
@@ -59,7 +75,7 @@ const ScheduleCalendar = () => {
           <ul className="calendar-todo-list">
             {displayList.map((item, index) => (
               <li key={index}>
-                <Badge /> <b>{item.time}</b> - {item.title}
+                <Badge /> <b>{item.type}</b> - {item.name}
               </li>
             ))}
             {/* {moreCount ? moreItem : null} */}
@@ -73,7 +89,9 @@ const ScheduleCalendar = () => {
   }
 
   const onSelectDate = (date) => {
-    alert("Date selected: " + date)
+    const selectedDate = date.toISOString().split('T')[0]
+    console.log(selectedDate)
+    selectScheduledExercise(selectedDate)
   }
 
   return (

src/components/signed-out/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx

@@ -10,15 +10,35 @@ import Button from "../../../../shared/button/button.component";
 import { ButtonsContainer } from "../../../../shared/button/button.styles";
 import SimplePaper from "../../../../shared/mui/paper/paper.component";
 import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
+import { FitnessContext } from "../../../../../contexts/signed-out/fitness/fitness.context";
 
 const paperStyles = {
   backgroundColor: COLOR_CODES.paper.formPaper,
   height: 600
 }
 
 const ScheduleDayInfo = () => {
+  const { exercisesView, removeExercise, unselectScheduledExercise } = useContext(FitnessContext)
+  console.log(exercisesView)
+
   const gridRef = useRef()
 
+  const rowData = exercisesView.map((exercise) => {
+    return {
+      // AddToExpenses: "",
+      Date: exercise.exerciseDate,
+      Exercise: exercise.exerciseName,
+      Sets: exercise.exerciseSets,
+      Reps: exercise.exerciseReps,
+      Type: exercise.exerciseType,
+      Muscle: exercise.exerciseMuscle,
+      Equipment: exercise.exerciseEquipment,
+      Difficulty: exercise.exerciseDifficulty,
+      Instructions: exercise.exerciseInstructions,
+      Tag: exercise.exerciseTag
+    }
+  })
+
   // column definitions
   const [columnDefs, setColumnDefs] = useState([
     { field: "Date" },
@@ -30,6 +50,7 @@ const ScheduleDayInfo = () => {
     { field: "Equipment" },
     { field: "Difficulty" },
     { field: "Instructions" },
+    { field: "Tag" },
   ])
 
   const onRemoveSelected = (event) => {
@@ -41,7 +62,12 @@ const ScheduleDayInfo = () => {
     }
 
     console.log(selectedData[0])
-    // removeInsurance(selectedData[0].For)
+    removeExercise(selectedData[0].Tag)
+  }
+
+  const handleUnselect = (event) => {
+    event.preventDefault()
+    unselectScheduledExercise()
   }
 
   return (
@@ -54,11 +80,14 @@ const ScheduleDayInfo = () => {
           style={{ height: 500, width: '100%' }} // the grid will fill the size of the parent container
           >
           <AgGridReact 
-            // rowData={ rowData } 
+            rowData={ rowData } 
             columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "multiple" }/>
             <ButtonsContainer>
               <div className="remove-exercise-selected-button">
-                <Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
+                <Button type="button" onClick={ (e) => onRemoveSelected(e) }>Remove</Button>
+              </div>
+              <div className="unselect-exercise-button">
+                <Button type="button" onClick={ (e) => handleUnselect(e) }>Unselect</Button>
               </div>
             </ButtonsContainer>
         </div>

src/components/signed-out/fitness/schedule/schedule-day-info/schedule-day-info.styles.scss

@@ -9,6 +9,7 @@
   padding: 1% 1% 0% 1%;
 }
 
-.remove-exercise-selected-button {
+.remove-exercise-selected-button,
+.unselect-exercise-button {
   margin: 1%;
 }

src/components/signed-out/fitness/search-exercise-form/search-exercise-form.component.jsx

@@ -32,7 +32,7 @@ const SearchExerciseForm = () => {
   const handleSubmit = (event) => {
     event.preventDefault()
 
-    if (!formFields.exerciseName || formFields.exerciseName === "") {
+    if (!formFields.exerciseMuscle || formFields.exerciseMuscle === "") {
       console.log("please fill in all info")
       return
     }
@@ -53,27 +53,10 @@ const SearchExerciseForm = () => {
 
       <SimplePaper styles={ paperStyles }>
         <form onSubmit={ handleSubmit } className="fitness-search-exercise-form">
-          <FormInput label="Name of exercise" type="text" required onChange={ handleChange }
-            name="exerciseName" value={ formFields.exerciseName }></FormInput>
-
           <div className="fitness-search-exercise-form-dropdown">
-            <Typography sx={{ display: "inline-block", position: "relative", marginRight: "2%" }} paragraph>Type</Typography>
-            <DropButton name="exerciseType" id="exerciseType" 
-                    onChange={ handleChange } value={ formFields.exerciseType }>
-              <option value="cardio">Cardio</option>
-              <option value="strength">Strength</option>
-              <option value="powerlifting">Powerlifting</option>
-              <option value="stretching">Stretching</option>
-              <option value="plyometrics">Plyometrics</option>
-              <option value="strongman">Strongman</option>
-              <option value="olympic_weightlifting">Olympic Weightlifting</option>
-            </DropButton>
-          </div>
-
-          <div className="fitness-search-exercise-form-dropdown">
-            <Typography sx={{ display: "inline-block", position: "relative", marginRight: "2%" }} paragraph>Muscle</Typography>
+            <Typography sx={{ display: "inline-block", position: "relative", marginRight: "2%", marginTop: "4%" }} paragraph>Muscle</Typography>
             <DropButton name="exerciseMuscle" id="exerciseMuscle" 
-                    onChange={ handleChange } value={ formFields.exerciseMuscle }>
+                    required onChange={ handleChange } value={ formFields.exerciseMuscle }>
               <option value="abdominals">Abdominals</option>
               <option value="abductors">Abductors</option>
               <option value="biceps">Biceps</option>
@@ -92,6 +75,25 @@ const SearchExerciseForm = () => {
             </DropButton>
           </div>
 
+          <Typography sx={{ marginTop: "2%" }} paragraph>Optional:</Typography>
+
+          <div className="fitness-search-exercise-form-dropdown">
+            <Typography sx={{ display: "inline-block", position: "relative", marginRight: "2%" }} paragraph>Type</Typography>
+            <DropButton name="exerciseType" id="exerciseType" 
+                    onChange={ handleChange } value={ formFields.exerciseType }>
+              <option value="cardio">Cardio</option>
+              <option value="strength">Strength</option>
+              <option value="powerlifting">Powerlifting</option>
+              <option value="stretching">Stretching</option>
+              <option value="plyometrics">Plyometrics</option>
+              <option value="strongman">Strongman</option>
+              <option value="olympic_weightlifting">Olympic Weightlifting</option>
+            </DropButton>
+          </div>
+
+          <FormInput label="Name of exercise" type="text" onChange={ handleChange }
+            name="exerciseName" value={ formFields.exerciseName }></FormInput>
+
           <div className="fitness-search-exercise-form-dropdown">
             <Typography sx={{ display: "inline-block", position: "relative", marginRight: "2%" }} paragraph>Difficulty</Typography>
             <DropButton name="exerciseDifficulty" id="exerciseDifficulty" 

src/components/signed-out/fitness/search-exercise-result/search-exercise-result.component.jsx

@@ -2,33 +2,41 @@ import OutlinedCard from "../../../shared/mui/card/card.component"
 import { Typography } from "@mui/material"
 import "./search-exercise-result.styles.scss"
 import { COLOR_CODES } from "../../../../utils/constants/shared.constants"
+import { useContext } from "react"
+import { FitnessContext } from "../../../../contexts/signed-out/fitness/fitness.context"
 
 const outlinedCardStyles = {
   backgroundColor: COLOR_CODES.card.infoCard
 }
 
 const SearchExerciseResult = ({ exerciseSearchResult }) => {
+  const { selectSearchedExercises } = useContext(FitnessContext)
+
+  const handleClick = (event) => {
+    event.preventDefault()
+
+    selectSearchedExercises(exerciseSearchResult)
+  }
+
   return (
-    <div className="fitness-search-exercise-result">
-      <OutlinedCard styles={ outlinedCardStyles }>
-        <div className="fitness-search-result-info">
-          <Typography sx={{ display: "flex" }} 
-            variant="body1">{`${exerciseSearchResult.exerciseName}`}</Typography>
-
-          <Typography sx={{ display: "flex" }} 
-            variant="body1">{`Type: ${exerciseSearchResult.exerciseType}`}</Typography>
-
-          <Typography sx={{ display: "flex" }} 
-            variant="body2">{`Muscle: ${exerciseSearchResult.exerciseMuscle}`}</Typography>
-
-          <Typography sx={{ display: "flex" }} 
-            variant="body2">{`Equipment: ${exerciseSearchResult.exerciseEquipment}`}</Typography>
-
-          <Typography sx={{ display: "flex" }} 
-            variant="body2">{`Difficulty: ${exerciseSearchResult.exercistDifficulty}`}</Typography>
-        </div>
-      </OutlinedCard>
-    </div>
+    <OutlinedCard styles={ outlinedCardStyles }>
+      <div className="fitness-search-result-info" onClick={ handleClick }>
+        <Typography sx={{ display: "flex" }} 
+          variant="body1">{`${exerciseSearchResult.exerciseName}`}</Typography>
+
+        <Typography sx={{ display: "flex", whiteSpace: "pre-wrap" }} 
+          variant="body1">{`Type: ${exerciseSearchResult.exerciseType}\n\n`}</Typography>
+
+        <Typography sx={{ display: "flex" }} 
+          variant="body2">{`Muscle: ${exerciseSearchResult.exerciseMuscle}`}</Typography>
+
+        <Typography sx={{ display: "flex" }} 
+          variant="body2">{`Equipment: ${exerciseSearchResult.exerciseEquipment}`}</Typography>
+
+        <Typography sx={{ display: "flex" }} 
+          variant="body2">{`Difficulty: ${exerciseSearchResult.exerciseDifficulty}`}</Typography>
+      </div>
+    </OutlinedCard>
   )
 }
 

src/components/signed-out/fitness/search-exercise-result/search-exercise-result.styles.scss

@@ -2,4 +2,10 @@
   display: block;
   justify-content: center;
   align-items: center;
+  padding: 2%;
+
+  &:hover {
+    background-color: rgba(1, 146, 66, 0.15);
+    border: none;
+  }
 }