From 50554faa688fa5d5ae43dc6c97ee8c9a245533e0 Mon Sep 17 00:00:00 2001 From: tahmid-saj Date: Tue, 18 Jun 2024 21:53:10 -0400 Subject: [PATCH] adding calories burned calendar to dashboard --- .../schedule-day-info.component.jsx | 28 +++++--- .../schedule-day-info.component.jsx | 30 +++++--- .../schedule-calendar.component.jsx | 68 +++++++++++++++++++ .../schedule-calendar.styles.scss | 26 +++++++ .../schedule-day-info.component.jsx | 42 ++++++++++++ .../schedule-day-info.styles.scss | 6 ++ ...ition-tracker-graph-calories.component.jsx | 2 - ...tracker-graph-macronutrients.component.jsx | 3 +- .../nutrition-tracker-graph-pie.component.jsx | 2 - .../nutrition-tracker-summary.component.jsx | 2 - .../schedule-calendar.component.jsx | 2 +- .../calories-burned.context.js | 2 +- .../calories-burned.context.js | 2 +- .../dashboard/dashboard.component.jsx | 9 ++- 14 files changed, 187 insertions(+), 37 deletions(-) create mode 100644 src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx create mode 100644 src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss create mode 100644 src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx create mode 100644 src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.scss diff --git a/src/components/signed-in/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-in/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx index 5e327c9..e95ed27 100644 --- a/src/components/signed-in/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx +++ b/src/components/signed-in/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx @@ -13,20 +13,28 @@ const paperStyles = { const ScheduleDayInfo = () => { const { scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext) + if (!scheduledTrackedCaloriesBurnedView.length) return + return (
- - {`${scheduledTrackedCaloriesBurnedView.dateTracked}`} - {`Activity - ${scheduledTrackedCaloriesBurnedView.activity}`} - {`Total calories burned - ${scheduledTrackedCaloriesBurnedView.totalCaloriesBurned}`} + { + scheduledTrackedCaloriesBurnedView.map((trackedCaloriesBurned) => { + return ( + + {`${trackedCaloriesBurned.dateTracked}`} + {`Activity - ${trackedCaloriesBurned.activity}`} + {`Total calories burned - ${trackedCaloriesBurned.totalCaloriesBurned}`} -
- -
+
+ +
- {`Duration (mins) - ${scheduledTrackedCaloriesBurnedView.durationMinutes}`} - {`Calories burned / hr - ${scheduledTrackedCaloriesBurnedView.caloriesBurnedPerHour}`} - + {`Duration (mins) - ${trackedCaloriesBurned.durationMinutes}`} + {`Calories burned / hr - ${trackedCaloriesBurned.caloriesBurnedPerHour}`} + + ) + }) + }
) } diff --git a/src/components/signed-out/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-out/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx index c4d003f..c6103e1 100644 --- a/src/components/signed-out/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx +++ b/src/components/signed-out/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx @@ -7,26 +7,34 @@ import { CaloriesBurnedContext } from "../../../../../contexts/signed-out/calori const paperStyles = { backgroundColor: COLOR_CODES.general["1"], - width: 400 + width: 400, } const ScheduleDayInfo = () => { const { scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext) + if (!scheduledTrackedCaloriesBurnedView.length) return + return (
- - {`${scheduledTrackedCaloriesBurnedView.dateTracked}`} - {`Activity - ${scheduledTrackedCaloriesBurnedView.activity}`} - {`Total calories burned - ${scheduledTrackedCaloriesBurnedView.totalCaloriesBurned}`} + { + scheduledTrackedCaloriesBurnedView.map((trackedCaloriesBurned) => { + return ( + + {`${trackedCaloriesBurned.dateTracked}`} + {`Activity - ${trackedCaloriesBurned.activity}`} + {`Total calories burned - ${trackedCaloriesBurned.totalCaloriesBurned}`} -
- -
+
+ +
- {`Duration (mins) - ${scheduledTrackedCaloriesBurnedView.durationMinutes}`} - {`Calories burned / hr - ${scheduledTrackedCaloriesBurnedView.caloriesBurnedPerHour}`} - + {`Duration (mins) - ${trackedCaloriesBurned.durationMinutes}`} + {`Calories burned / hr - ${trackedCaloriesBurned.caloriesBurnedPerHour}`} + + ) + }) + }
) } diff --git a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx new file mode 100644 index 0000000..ac29fae --- /dev/null +++ b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component.jsx @@ -0,0 +1,68 @@ +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 { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"; + +import { CaloriesBurnedContext } from "../../../../../../contexts/signed-out/calories-burned/calories-burned.context"; + +function getScheduledData(date, trackedCaloriesBurned) { + date = date.toISOString().split('T')[0] + + let scheduledTrackedCaloriesBurnedForDate = [] + trackedCaloriesBurned.map((trackedDay) => { + if (trackedDay.dateTracked === date) { + scheduledTrackedCaloriesBurnedForDate.push({ + caloriesBurned: trackedDay.totalCaloriesBurned + }) + } + }) + + return scheduledTrackedCaloriesBurnedForDate +} + +const ScheduleCalendar = () => { + const { trackedCaloriesBurned, selectScheduledTrackedCaloriesBurned } = useContext(CaloriesBurnedContext) + + function renderCell(date) { + const list = getScheduledData(date, trackedCaloriesBurned); + const displayList = list.filter((item, index) => index < 1); + + if (list.length) { + const moreCount = list.length - displayList.length; + + return ( + +
    + {displayList.map((item, index) => ( +
  • + {`Calories: ${item.caloriesBurned}`} +
    • + ))} + {moreCount ? `${moreCount} more` : null} +
+ {/* {moreCount} more */} + + ); + } + + return null; + } + + const onSelectDate = (date) => { + const selectedDate = date.toISOString().split('T')[0] + console.log(selectedDate) + selectScheduledTrackedCaloriesBurned(selectedDate) + } + + return ( +
+ {`Calories burned calendar`} + +
+ ) +} + +export default ScheduleCalendar \ No newline at end of file diff --git a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss new file mode 100644 index 0000000..4abd345 --- /dev/null +++ b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.styles.scss @@ -0,0 +1,26 @@ +.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; +} + +.calories-burned-calendar-container { + display: block; + justify-content: center; + align-items: center; + margin: 2%; + padding: 1%; +} \ No newline at end of file diff --git a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx new file mode 100644 index 0000000..5229e53 --- /dev/null +++ b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx @@ -0,0 +1,42 @@ +import "./schedule-day-info.styles.scss" +import { Typography, Divider } from "@mui/material" +import { Fragment, useContext } from "react" +import SimplePaper from "../../../../../shared/mui/paper/paper.component" +import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants" +import { CaloriesBurnedContext } from "../../../../../../contexts/signed-out/calories-burned/calories-burned.context" + +const paperStyles = { + backgroundColor: COLOR_CODES.general["1"], + width: 400 +} + +const ScheduleDayInfo = () => { + const { scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext) + + if (!scheduledTrackedCaloriesBurnedView.length) return + + return ( +
+ { + scheduledTrackedCaloriesBurnedView.map((trackedCaloriesBurned) => { + return ( + + {`${trackedCaloriesBurned.dateTracked}`} + {`Activity - ${trackedCaloriesBurned.activity}`} + {`Total calories burned - ${trackedCaloriesBurned.totalCaloriesBurned}`} + +
+ +
+ + {`Duration (mins) - ${trackedCaloriesBurned.durationMinutes}`} + {`Calories burned / hr - ${trackedCaloriesBurned.caloriesBurnedPerHour}`} + + ) + }) + } +
+ ) +} + +export default ScheduleDayInfo \ No newline at end of file diff --git a/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.scss b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.scss new file mode 100644 index 0000000..b55704d --- /dev/null +++ b/src/components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.styles.scss @@ -0,0 +1,6 @@ +.calories-burned-schedule-day-info { + display: flex; + justify-content: center; + align-items: center; + padding: 2% 2% 2% 2%; +} \ No newline at end of file diff --git a/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx b/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx index d540bfe..274ede3 100644 --- a/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx +++ b/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx @@ -1,7 +1,5 @@ import "./nutrition-tracker-graph-calories.styles.scss" import ReactApexChart from "react-apexcharts" -// import { useContext } from "react" -// import { NutritionTrackerContext } from "../../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context" import { useSelector } from "react-redux" import { selectNutritionTrackedDays } from "../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector" diff --git a/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx b/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx index 0c3f9e2..2296f48 100644 --- a/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx +++ b/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx @@ -1,8 +1,7 @@ import "./nutrition-tracker-graph-macronutrients.styles.scss" -import { Fragment, useContext, useState, Component } from "react"; +import { Fragment, useState, Component } from "react"; import ReactApexChart from 'react-apexcharts' -// import { NutritionTrackerContext } from "../../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context"; import { GRAPH_FIELDS } from "../../../../../utils/constants/nutrition-tracker.constants"; import { useSelector } from "react-redux"; diff --git a/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx b/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx index ae6e496..73d94f3 100644 --- a/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx +++ b/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx @@ -1,7 +1,5 @@ import "./nutrition-tracker-graph-pie.styles.scss" import ReactApexChart from "react-apexcharts"; -// import { useContext, Fragment } from "react" -// import { NutritionTrackerContext } from "../../../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context" import { GRAPH_FIELDS } from "../../../../../../utils/constants/nutrition-tracker.constants"; diff --git a/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx b/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx index cc6ce2e..c9135c6 100644 --- a/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx +++ b/src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx @@ -1,6 +1,4 @@ import "./nutrition-tracker-summary.styles.scss" -// import { useContext } from "react"; -// import { NutritionTrackerContext } from "../../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context"; import NutritionTrackerGraphPie from "./nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component"; import { useSelector } from "react-redux"; import { selectNutritionTrackedDaysSummary } from "../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector"; diff --git a/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx index 4f1358d..0c9b152 100644 --- a/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx +++ b/src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx @@ -1,6 +1,6 @@ import "./schedule-calendar.styles.scss" import 'rsuite/Calendar/styles/index.css'; -import { Fragment, useContext, useState } from "react"; +import { Fragment, useState } from "react"; import { Calendar, Whisper, Popover, Badge } from 'rsuite'; import { Typography } from "@mui/material"; import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"; diff --git a/src/contexts/signed-in/calories-burned/calories-burned.context.js b/src/contexts/signed-in/calories-burned/calories-burned.context.js index cff5e64..bea13b3 100644 --- a/src/contexts/signed-in/calories-burned/calories-burned.context.js +++ b/src/contexts/signed-in/calories-burned/calories-burned.context.js @@ -77,7 +77,7 @@ const setDefaultTrackedCaloriesBurnedSummaryValuesHelper = () => { const selectScheduledTrackedCaloriesBurnedHelper = (trackedCaloriesBurned, trackedDay) => { console.log(trackedDay) - const filteredTrackedCaloriesBurned = trackedCaloriesBurned.find((caloriesTrackedDay) => { + const filteredTrackedCaloriesBurned = trackedCaloriesBurned.filter((caloriesTrackedDay) => { return caloriesTrackedDay.dateTracked === trackedDay }) diff --git a/src/contexts/signed-out/calories-burned/calories-burned.context.js b/src/contexts/signed-out/calories-burned/calories-burned.context.js index c4f5a21..6cdcbfb 100644 --- a/src/contexts/signed-out/calories-burned/calories-burned.context.js +++ b/src/contexts/signed-out/calories-burned/calories-burned.context.js @@ -53,7 +53,7 @@ const removeActivityDateHelper = (trackedCaloriesBurned, activityId) => { const selectScheduledTrackedCaloriesBurnedHelper = (trackedCaloriesBurned, trackedDay) => { console.log(trackedDay) - const filteredTrackedCaloriesBurned = trackedCaloriesBurned.find((caloriesTrackedDay) => { + const filteredTrackedCaloriesBurned = trackedCaloriesBurned.filter((caloriesTrackedDay) => { return caloriesTrackedDay.dateTracked === trackedDay }) diff --git a/src/pages/signed-out/dashboard/dashboard.component.jsx b/src/pages/signed-out/dashboard/dashboard.component.jsx index 15ed8f5..bf9d71e 100644 --- a/src/pages/signed-out/dashboard/dashboard.component.jsx +++ b/src/pages/signed-out/dashboard/dashboard.component.jsx @@ -7,7 +7,6 @@ import NutritionTrackerGraphMacronutrients from "../../../components/signed-out/ import NutritionTrackerSummary from "../../../components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component" import { useContext, Fragment, useEffect } from "react" -// import { NutritionTrackerContext } from "../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context" import { useDispatch, useSelector } from "react-redux" import { selectNutritionTrackedDays, selectScheduledNutritionTrackedDaysView, selectSelectedNutritionTrackedDay @@ -19,8 +18,8 @@ import ChatBot from "../../shared/chatbot/chatbot.component" import ScheduleCalendarNutritionTracker from "../../../components/signed-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component" import ScheduleDayInfoNutritionTracker from "../../../components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component" -// import ScheduleCalendarCaloriesBurned from "../../../components/signed-out/dashboard/calories-burned" -// import ScheduleDayInfoCaloriesBurned from "../../../components/signed-out/calories-burned/schedule/schedule-day-info/schedule-day-info.component" +import ScheduleCalendarCaloriesBurned from "../../../components/signed-out/dashboard/calories-burned/schedule/schedule-calendar/schedule-calendar.component" +import ScheduleDayInfoCaloriesBurned from "../../../components/signed-out/dashboard/calories-burned/schedule/schedule-day-info/schedule-day-info.component" const Dashboard = () => { const dispatch = useDispatch() @@ -80,11 +79,11 @@ const Dashboard = () => {
- {/* + { scheduledTrackedCaloriesBurnedView ? : null - } */} + }