Merge pull request #148 from tahmid-saj/dev-fitness-styling

adding upcoming exercises
tahmid-saj · Jun 22, 2024 · b6886ed · b6886ed
2 parents 311555d + 2b4e217
commit b6886ed
Show file tree

Hide file tree

Showing 12 changed files with 369 additions and 20 deletions.
diff --git a/...omponents/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx b/...omponents/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx
@@ -0,0 +1,74 @@
+import "./upcoming-exercises.styles.jsx"
+import { UpcomingExercisesContainer, UpcomingExercisesScheduled,
+  UpcomingExerciseContainer 
+} from "./upcoming-exercises.styles.jsx"
+import { Fragment, useContext } from "react"
+import { FitnessContext } from "../../../../../contexts/signed-out/fitness/fitness.context.js"
+import OutlinedCard from "../../../../shared/mui/card/card.component.jsx"
+import { Divider, Typography } from "@mui/material"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants.js"
+
+const outlinedCardStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: COMMON_SPACING.summaryInfoCard.width,
+}
+
+const UpcomingExercises = () => {
+  const { upcomingExercisesView } = useContext(FitnessContext)
+
+  return (
+    <UpcomingExercisesContainer>
+      <Typography sx={{ display: "center", justifyContent: "center", color: COLOR_CODES.general["1"], marginBottom: "1%" }}
+        variant="h6">
+        Upcoming scheduled exercises
+      </Typography>
+
+      <UpcomingExercisesScheduled>
+        <div className="container">
+          <div className="row justify-content-evenly align-items-center">
+            {
+              upcomingExercisesView.map((upcomingExercise, index) => {
+                return (
+                  <div className="col-sm-12 col-md-4 col-lg-3">
+                    <OutlinedCard styles={ outlinedCardStyles }>
+                      <UpcomingExerciseContainer key={ index }>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="h6">{`${upcomingExercise.exerciseName}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body1">{`${upcomingExercise.exerciseDate}`}</Typography>
+
+                        <br/>
+                        <Divider/>
+                        <br/>
+
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body1">{`Sets: ${upcomingExercise.exerciseSets}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body1">{`Reps: ${upcomingExercise.exerciseReps}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body1">{`Type: ${upcomingExercise.exerciseType}`}</Typography>
+
+                        <br/>
+                        <Divider/>
+                        <br/>
+
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body2">{`Muscle: ${upcomingExercise.exerciseMuscle}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body2">{`Equipment: ${upcomingExercise.exerciseEquipment}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body2">{`Difficulty: ${upcomingExercise.exerciseDifficulty}`}</Typography>
+                      </UpcomingExerciseContainer>
+                    </OutlinedCard>
+                  </div>
+                )
+              })
+            }
+          </div>
+        </div>
+      </UpcomingExercisesScheduled>
+    </UpcomingExercisesContainer>
+  )
+}
+
+export default UpcomingExercises
diff --git a/src/components/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.styles.jsx b/src/components/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.styles.jsx
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const UpcomingExercisesContainer = styled.div`
+  display: block;
+  align-items: center;
+  justify-content: center;
+`
+
+export const UpcomingExercisesScheduled = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const UpcomingExerciseContainer = styled.div`
+  display: block;
+  align-items: center;
+  justify-content: center;
+`
diff --git a/...mponents/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx b/...mponents/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx
@@ -0,0 +1,74 @@
+import "./upcoming-exercises.styles.jsx"
+import { UpcomingExercisesContainer, UpcomingExercisesScheduled,
+  UpcomingExerciseContainer 
+} from "./upcoming-exercises.styles.jsx"
+import { Fragment, useContext } from "react"
+import { FitnessContext } from "../../../../../contexts/signed-out/fitness/fitness.context.js"
+import OutlinedCard from "../../../../shared/mui/card/card.component.jsx"
+import { Divider, Typography } from "@mui/material"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../../utils/constants/shared.constants.js"
+
+const outlinedCardStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: COMMON_SPACING.exercisesInfoCard.width,
+}
+
+const UpcomingExercises = () => {
+  const { upcomingExercisesView } = useContext(FitnessContext)
+
+  return (
+    <UpcomingExercisesContainer>
+      <Typography sx={{ display: "center", justifyContent: "center", color: COLOR_CODES.general["1"], marginBottom: "1%" }}
+        variant="h6">
+        Upcoming scheduled exercises
+      </Typography>
+
+      <UpcomingExercisesScheduled>
+        <div className="container">
+          <div className="row justify-content-evenly align-items-center">
+            {
+              upcomingExercisesView.map((upcomingExercise, index) => {
+                return (
+                  <div className="col-sm-12 col-md-4 col-lg-3">
+                    <OutlinedCard styles={ outlinedCardStyles }>
+                      <UpcomingExerciseContainer key={ index }>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="h6">{`${upcomingExercise.exerciseName}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body1">{`${upcomingExercise.exerciseDate}`}</Typography>
+
+                        <br/>
+                        <Divider/>
+                        <br/>
+
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body1">{`Sets: ${upcomingExercise.exerciseSets}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body1">{`Reps: ${upcomingExercise.exerciseReps}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body1">{`Type: ${upcomingExercise.exerciseType}`}</Typography>
+
+                        <br/>
+                        <Divider/>
+                        <br/>
+
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body2">{`Muscle: ${upcomingExercise.exerciseMuscle}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body2">{`Equipment: ${upcomingExercise.exerciseEquipment}`}</Typography>
+                        <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                          variant="body2">{`Difficulty: ${upcomingExercise.exerciseDifficulty}`}</Typography>
+                      </UpcomingExerciseContainer>
+                    </OutlinedCard>
+                  </div>
+                )
+              })
+            }
+          </div>
+        </div>
+      </UpcomingExercisesScheduled>
+    </UpcomingExercisesContainer>
+  )
+}
+
+export default UpcomingExercises
diff --git a/src/components/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.styles.jsx b/src/components/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.styles.jsx
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const UpcomingExercisesContainer = styled.div`
+  display: block;
+  align-items: center;
+  justify-content: center;
+`
+
+export const UpcomingExercisesScheduled = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const UpcomingExerciseContainer = styled.div`
+  display: block;
+  align-items: center;
+  justify-content: center;
+`
diff --git a/src/components/signed-out/fitness/upcoming-exercises/upcoming-exercises.component.jsx b/src/components/signed-out/fitness/upcoming-exercises/upcoming-exercises.component.jsx
@@ -0,0 +1,68 @@
+import "./upcoming-exercises.styles.jsx"
+import { UpcomingExercisesContainer, UpcomingExercisesScheduled,
+  UpcomingExerciseContainer 
+} from "./upcoming-exercises.styles.jsx"
+import { Fragment, useContext } from "react"
+import { FitnessContext } from "../../../../contexts/signed-out/fitness/fitness.context.js"
+import OutlinedCard from "../../../shared/mui/card/card.component.jsx"
+import { Divider, Typography } from "@mui/material"
+import { COLOR_CODES, COMMON_SPACING } from "../../../../utils/constants/shared.constants.js"
+
+const outlinedCardStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: COMMON_SPACING.summaryInfoCard.width,
+  margin: "1%"
+}
+
+const UpcomingExercises = () => {
+  const { upcomingExercisesView } = useContext(FitnessContext)
+
+  return (
+    <UpcomingExercisesContainer>
+      <Typography sx={{ display: "center", justifyContent: "center", color: COLOR_CODES.general["1"] }}
+        variant="h6">
+        Upcoming scheduled exercises
+      </Typography>
+      <UpcomingExercisesScheduled>
+          {
+            upcomingExercisesView.map((upcomingExercise, index) => {
+              return (
+                <OutlinedCard styles={ outlinedCardStyles }>
+                  <UpcomingExerciseContainer key={ index }>
+                    <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                      variant="h6">{`${upcomingExercise.exerciseName}`}</Typography>
+                    <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                      variant="body1">{`${upcomingExercise.exerciseDate}`}</Typography>
+
+                    <br/>
+                    <Divider/>
+                    <br/>
+
+                    <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                      variant="body1">{`Sets: ${upcomingExercise.exerciseSets}`}</Typography>
+                    <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                      variant="body1">{`Reps: ${upcomingExercise.exerciseReps}`}</Typography>
+                    <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                      variant="body1">{`Type: ${upcomingExercise.exerciseType}`}</Typography>
+
+                    <br/>
+                    <Divider/>
+                    <br/>
+
+                    <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                      variant="body2">{`Muscle: ${upcomingExercise.exerciseMuscle}`}</Typography>
+                    <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                      variant="body2">{`Equipment: ${upcomingExercise.exerciseEquipment}`}</Typography>
+                    <Typography sx={{ display: "flex", justifyContent: "center" }} 
+                      variant="body2">{`Difficulty: ${upcomingExercise.exerciseDifficulty}`}</Typography>
+                  </UpcomingExerciseContainer>
+                </OutlinedCard>
+              )
+            })
+          }
+      </UpcomingExercisesScheduled>
+    </UpcomingExercisesContainer>
+  )
+}
+
+export default UpcomingExercises
diff --git a/src/components/signed-out/fitness/upcoming-exercises/upcoming-exercises.styles.jsx b/src/components/signed-out/fitness/upcoming-exercises/upcoming-exercises.styles.jsx
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const UpcomingExercisesContainer = styled.div`
+  display: block;
+  align-items: center;
+  justify-content: center;
+`
+
+export const UpcomingExercisesScheduled = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const UpcomingExerciseContainer = styled.div`
+  display: block;
+  align-items: center;
+  justify-content: center;
+  padding: 2%;
+`
diff --git a/src/contexts/signed-in/fitness/fitness.context.js b/src/contexts/signed-in/fitness/fitness.context.js
@@ -95,6 +95,9 @@ export const FitnessContext = createContext({
   // exercisesView is the filtered version of exercises
   exercisesView: [],
 
+  // upcomingExercisesView is a list of all exercises in the next scheduled date from the current date
+  upcomingExercisesView: [],
+
   searchExercise: () => {},
   addExercise: () => {},
 
@@ -124,6 +127,7 @@ export const FitnessProvider = ({ children }) => {
   const [exercisesSearchResults, setExercisesSearchResults] = useState([])
   const [selectedSearchedExercise, setSelectedSearchedExercise] = useState(null)
   const [exercisesView, setExercisesView] = useState(exercises)
+  const [upcomingExercisesView, setUpcomingExercisesView] = useState([])
 
   const currentUser = useSelector(selectCurrentUser)
 
@@ -144,10 +148,29 @@ export const FitnessProvider = ({ children }) => {
     fetchExercisesData()
   }, [currentUser])
 
-  // update exercisesTagLimit when exercises change
+  // update exercisesTagLimit when exercises change and also update upcomingExercisesView
   // TODO: need to better manage tags
   useEffect(() => {
     setExercisesTagLimit(exercises.length)
+
+    let today = new Date()
+    today = today.toISOString().split('T')[0]
+
+    let firstScheduledNextDate;
+    exercises.map((exercise) => {
+      if (exercise.exerciseDate >= today) {
+        firstScheduledNextDate = exercise.exerciseDate
+      }
+    })
+
+    let newUpcomingExercises = []
+    exercises.map((exercise) => {
+      if (exercise.exerciseDate === firstScheduledNextDate) {
+        newUpcomingExercises.push(exercise)
+      }
+    })
+
+    setUpcomingExercisesView(newUpcomingExercises)
   }, [exercises])
 
   // update exercisesView when exercises or selectedScheduledExerciseDate change
@@ -209,7 +232,7 @@ export const FitnessProvider = ({ children }) => {
     putExercises(currentUser.uid, currentUser.email, exercises)
   }
 
-  const value = { exercises, exercisesSearchResults, exercisesView, selectedSearchedExercise,
+  const value = { exercises, exercisesSearchResults, exercisesView, selectedSearchedExercise, upcomingExercisesView,
     searchExercise, addExercise, 
     selectScheduledExercise, unselectScheduledExercise, selectSearchedExercises,
     removeExercise,

diff --git a/src/contexts/signed-out/fitness/fitness.context.js b/src/contexts/signed-out/fitness/fitness.context.js
@@ -80,6 +80,9 @@ export const FitnessContext = createContext({
   // exercisesView is the filtered version of exercises
   exercisesView: [],
 
+  // upcomingExercisesView is a list of all exercises in the next scheduled date from the current date
+  upcomingExercisesView: [],
+
   searchExercise: () => {},
   addExercise: () => {},
 
@@ -106,11 +109,31 @@ export const FitnessProvider = ({ children }) => {
   const [exercisesSearchResults, setExercisesSearchResults] = useState([])
   const [selectedSearchedExercise, setSelectedSearchedExercise] = useState(null)
   const [exercisesView, setExercisesView] = useState(exercises)
+  const [upcomingExercisesView, setUpcomingExercisesView] = useState([])
 
-  // update exercisesTagLimit when exercises change
+  // update exercisesTagLimit when exercises change and also update upcomingExercisesView
   // TODO: need to better manage tags
   useEffect(() => {
     setExercisesTagLimit(exercises.length)
+
+    let today = new Date()
+    today = today.toISOString().split('T')[0]
+
+    let firstScheduledNextDate;
+    exercises.map((exercise) => {
+      if (exercise.exerciseDate >= today) {
+        firstScheduledNextDate = exercise.exerciseDate
+      }
+    })
+
+    let newUpcomingExercises = []
+    exercises.map((exercise) => {
+      if (exercise.exerciseDate === firstScheduledNextDate) {
+        newUpcomingExercises.push(exercise)
+      }
+    })
+
+    setUpcomingExercisesView(newUpcomingExercises)
   }, [exercises])
 
   // update exercisesView when exercises or selectedScheduledExerciseDate change
@@ -162,7 +185,7 @@ export const FitnessProvider = ({ children }) => {
     }
   }
 
-  const value = { exercises, exercisesSearchResults, exercisesView, selectedSearchedExercise,
+  const value = { exercises, exercisesSearchResults, exercisesView, selectedSearchedExercise, upcomingExercisesView,
     searchExercise, addExercise, 
     selectScheduledExercise, unselectScheduledExercise, selectSearchedExercises,
     removeExercise }