From 2b4e21739a5338329e33e54601ccd7245d354478 Mon Sep 17 00:00:00 2001 From: tahmid-saj Date: Sat, 22 Jun 2024 03:25:56 -0400 Subject: [PATCH] adding upcoming exercises --- .../upcoming-exercises.component.jsx | 74 +++++++++++++++++++ .../upcoming-exercises.styles.jsx | 19 +++++ .../upcoming-exercises.component.jsx | 74 +++++++++++++++++++ .../upcoming-exercises.styles.jsx | 19 +++++ .../upcoming-exercises.component.jsx | 68 +++++++++++++++++ .../upcoming-exercises.styles.jsx | 20 +++++ .../signed-in/fitness/fitness.context.js | 27 ++++++- .../signed-out/fitness/fitness.context.js | 27 ++++++- .../dashboard/dashboard.component.jsx | 12 ++- .../dashboard/dashboard.component.jsx | 38 ++++++---- .../signed-out/fitness/fitness.component.jsx | 8 +- src/utils/constants/shared.constants.js | 3 + 12 files changed, 369 insertions(+), 20 deletions(-) create mode 100644 src/components/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx create mode 100644 src/components/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.styles.jsx create mode 100644 src/components/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx create mode 100644 src/components/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.styles.jsx create mode 100644 src/components/signed-out/fitness/upcoming-exercises/upcoming-exercises.component.jsx create mode 100644 src/components/signed-out/fitness/upcoming-exercises/upcoming-exercises.styles.jsx diff --git a/src/components/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx b/src/components/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx new file mode 100644 index 0000000..740aa53 --- /dev/null +++ b/src/components/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 ( + + + Upcoming scheduled exercises + + + +
+
+ { + upcomingExercisesView.map((upcomingExercise, index) => { + return ( +
+ + + {`${upcomingExercise.exerciseName}`} + {`${upcomingExercise.exerciseDate}`} + +
+ +
+ + {`Sets: ${upcomingExercise.exerciseSets}`} + {`Reps: ${upcomingExercise.exerciseReps}`} + {`Type: ${upcomingExercise.exerciseType}`} + +
+ +
+ + {`Muscle: ${upcomingExercise.exerciseMuscle}`} + {`Equipment: ${upcomingExercise.exerciseEquipment}`} + {`Difficulty: ${upcomingExercise.exerciseDifficulty}`} + + +
+ ) + }) + } +
+
+ + + ) +} + +export default UpcomingExercises \ No newline at end of file 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 new file mode 100644 index 0000000..3c4c31b --- /dev/null +++ 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; +` \ No newline at end of file diff --git a/src/components/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx b/src/components/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.component.jsx new file mode 100644 index 0000000..e8de52f --- /dev/null +++ b/src/components/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 ( + + + Upcoming scheduled exercises + + + +
+
+ { + upcomingExercisesView.map((upcomingExercise, index) => { + return ( +
+ + + {`${upcomingExercise.exerciseName}`} + {`${upcomingExercise.exerciseDate}`} + +
+ +
+ + {`Sets: ${upcomingExercise.exerciseSets}`} + {`Reps: ${upcomingExercise.exerciseReps}`} + {`Type: ${upcomingExercise.exerciseType}`} + +
+ +
+ + {`Muscle: ${upcomingExercise.exerciseMuscle}`} + {`Equipment: ${upcomingExercise.exerciseEquipment}`} + {`Difficulty: ${upcomingExercise.exerciseDifficulty}`} + + +
+ ) + }) + } +
+
+ + + ) +} + +export default UpcomingExercises \ No newline at end of file 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 new file mode 100644 index 0000000..3c4c31b --- /dev/null +++ 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; +` \ No newline at end of file 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 new file mode 100644 index 0000000..0d84688 --- /dev/null +++ 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 ( + + + Upcoming scheduled exercises + + + { + upcomingExercisesView.map((upcomingExercise, index) => { + return ( + + + {`${upcomingExercise.exerciseName}`} + {`${upcomingExercise.exerciseDate}`} + +
+ +
+ + {`Sets: ${upcomingExercise.exerciseSets}`} + {`Reps: ${upcomingExercise.exerciseReps}`} + {`Type: ${upcomingExercise.exerciseType}`} + +
+ +
+ + {`Muscle: ${upcomingExercise.exerciseMuscle}`} + {`Equipment: ${upcomingExercise.exerciseEquipment}`} + {`Difficulty: ${upcomingExercise.exerciseDifficulty}`} + + + ) + }) + } + + + ) +} + +export default UpcomingExercises \ No newline at end of file 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 new file mode 100644 index 0000000..da4b5b3 --- /dev/null +++ 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%; +` \ No newline at end of file diff --git a/src/contexts/signed-in/fitness/fitness.context.js b/src/contexts/signed-in/fitness/fitness.context.js index 547b0e1..04cecd9 100644 --- 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 index 1bd36de..3a728b0 100644 --- 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 } diff --git a/src/pages/signed-in/dashboard/dashboard.component.jsx b/src/pages/signed-in/dashboard/dashboard.component.jsx index 86ff7ca..f2921ca 100644 --- a/src/pages/signed-in/dashboard/dashboard.component.jsx +++ b/src/pages/signed-in/dashboard/dashboard.component.jsx @@ -20,6 +20,7 @@ import ScheduleCalendarCaloriesBurned from "../../../components/signed-in/dashbo import ScheduleDayInfoCaloriesBurned from "../../../components/signed-in/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component" import ScheduleCalendarFitness from "../../../components/signed-in/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component" import ScheduleDayInfoFitness from "../../../components/signed-in/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component" +import UpcomingExercises from "../../../components/signed-in/dashboard/fitness/upcoming-exercises/upcoming-exercises.component" import ItemTabs from "../../../components/shared/mui/tabs/tabs.component" import SmartToyIcon from '@mui/icons-material/SmartToy'; import RestaurantIcon from '@mui/icons-material/Restaurant'; @@ -30,7 +31,7 @@ import { COMMON_SPACING } from "../../../utils/constants/shared.constants" const Dashboard = () => { const { nutritionTrackedDays, scheduledNutritionTrackedDaysView } = useContext(NutritionTrackerContext) const { trackedCaloriesBurned, scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext) - const { exercises, selectedSearchedExercise } = useContext(FitnessContext) + const { exercises, selectedSearchedExercise, upcomingExercisesView } = useContext(FitnessContext) let tabList = [ { @@ -110,6 +111,15 @@ const Dashboard = () => {
+ +
+ +
+ + { + upcomingExercisesView.length !== 0 ? + : null + } ) }) diff --git a/src/pages/signed-out/dashboard/dashboard.component.jsx b/src/pages/signed-out/dashboard/dashboard.component.jsx index 3415aec..d061bc1 100644 --- a/src/pages/signed-out/dashboard/dashboard.component.jsx +++ b/src/pages/signed-out/dashboard/dashboard.component.jsx @@ -25,6 +25,7 @@ import ScheduleCalendarCaloriesBurned from "../../../components/signed-out/dashb import ScheduleDayInfoCaloriesBurned from "../../../components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component" import ScheduleCalendarFitness from "../../../components/signed-out/dashboard/fitness/schedule/schedule-calendar/schedule-calendar.component" import ScheduleDayInfoFitness from "../../../components/signed-out/dashboard/fitness/schedule/schedule-day-info/schedule-day-info.component" +import UpcomingExercises from "../../../components/signed-out/dashboard/fitness/upcoming-exercises/upcoming-exercises.component" import ItemTabs from "../../../components/shared/mui/tabs/tabs.component" import SmartToyIcon from '@mui/icons-material/SmartToy'; import RestaurantIcon from '@mui/icons-material/Restaurant'; @@ -39,7 +40,7 @@ const Dashboard = () => { const selectedNutritionTrackedDay = useSelector(selectSelectedNutritionTrackedDay) const { trackedCaloriesBurned, scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext) - const { exercises } = useContext(FitnessContext) + const { exercises, upcomingExercisesView } = useContext(FitnessContext) // update scheduledNutritionTrackedDaysView when nutritionTrackedDays or selectedNutritionTrackedDay change useEffect(() => { @@ -120,6 +121,15 @@ const Dashboard = () => {
+ +
+ +
+ + { + upcomingExercisesView.length !== 0 ? + : null + } ) }) @@ -136,19 +146,19 @@ const Dashboard = () => { value: "calories-burned", children: ( - - { - scheduledTrackedCaloriesBurnedView ? - : null - } - -
- -
- - - - + + { + scheduledTrackedCaloriesBurnedView ? + : null + } + +
+ +
+ + + + ) }) diff --git a/src/pages/signed-out/fitness/fitness.component.jsx b/src/pages/signed-out/fitness/fitness.component.jsx index 053be66..11f22b1 100644 --- a/src/pages/signed-out/fitness/fitness.component.jsx +++ b/src/pages/signed-out/fitness/fitness.component.jsx @@ -7,9 +7,10 @@ import SearchExerciseResults from "../../../components/signed-out/fitness/search import "./fitness.styles.scss" import { useContext, Fragment } from "react" import { FitnessContext } from "../../../contexts/signed-out/fitness/fitness.context" +import UpcomingExercises from "../../../components/signed-out/fitness/upcoming-exercises/upcoming-exercises.component" const Fitness = () => { - const { exercises, exercisesSearchResults } = useContext(FitnessContext) + const { exercises, exercisesSearchResults, upcomingExercisesView } = useContext(FitnessContext) console.log(exercises, exercisesSearchResults) @@ -25,6 +26,11 @@ const Fitness = () => { + { + upcomingExercisesView.length !== 0 ? + : null + } +

diff --git a/src/utils/constants/shared.constants.js b/src/utils/constants/shared.constants.js index 7f1c9ea..1206135 100644 --- a/src/utils/constants/shared.constants.js +++ b/src/utils/constants/shared.constants.js @@ -240,5 +240,8 @@ export const COMMON_SPACING = { }, filterTable: { height: 650 + }, + exercisesInfoCard: { + width: 325 } } \ No newline at end of file