adding calendar to calories burned

src/components/signed-in/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-in/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 (
+        <Fragment>
+          <ul className="calendar-todo-list">
+            {displayList.map((item, index) => (
+              <li key={index}>
+                <Badge /> <b>{`Calories: ${item.caloriesBurned}`}</b>
+              </li>
+            ))}
+            {moreCount ? `${moreCount} more` : null}
+          </ul>
+          {/* {moreCount} more */}
+        </Fragment>
+      );
+    }
+
+    return null;
+  }
+
+  const onSelectDate = (date) => {
+    const selectedDate = date.toISOString().split('T')[0]
+    console.log(selectedDate)
+    selectScheduledTrackedCaloriesBurned(selectedDate)
+  }
+
+  return (
+    <div className="calories-burned-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+      <Typography sx={{ display: "flex", marginLeft: "1%" }} 
+        variant="h6">{`Calories burned calendar`}</Typography>
+      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
+    </div>
+  )
+}
+
+export default ScheduleCalendar

src/components/signed-in/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%;
+}

src/components/signed-in/calories-burned/schedule/schedule-day-info/schedule-day-info.component.jsx

@@ -0,0 +1,34 @@
+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-in/calories-burned/calories-burned.context"
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.general["1"],
+  width: 400
+}
+
+const ScheduleDayInfo = () => {
+  const { scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext)
+
+  return (
+    <div className="calories-burned-schedule-day-info">
+      <SimplePaper styles={ paperStyles }>
+        <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${scheduledTrackedCaloriesBurnedView.dateTracked}`}</Typography>
+        <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${scheduledTrackedCaloriesBurnedView.activity}`}</Typography>
+        <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Total calories burned - ${scheduledTrackedCaloriesBurnedView.totalCaloriesBurned}`}</Typography>
+
+        <br/>
+        <Divider/>
+        <br/>
+
+        <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Duration (mins) - ${scheduledTrackedCaloriesBurnedView.durationMinutes}`}</Typography>
+        <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories burned / hr - ${scheduledTrackedCaloriesBurnedView.caloriesBurnedPerHour}`}</Typography>
+      </SimplePaper>
+    </div>
+  )
+}
+
+export default ScheduleDayInfo

src/components/signed-in/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%;
+}

src/components/signed-in/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss

@@ -17,7 +17,7 @@
   height: 6px;
 }  
 
-.fitness-schedule-calendar-container {
+.nutrition-tracker-calendar-container {
   display: block;
   justify-content: center;
   align-items: center;

src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-calories/nutrition-tracker-graph-calories.component.jsx

@@ -1,12 +1,14 @@
 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 { 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"
 
 import { GRAPH_FIELDS } from "../../../../../utils/constants/nutrition-tracker.constants"
 
 const NutritionTrackerGraphCalories = () => {
-  const { nutritionTrackedDays } = useContext(NutritionTrackerContext)
+  const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
 
   let trackedCalories = new Map()
   const trackedDayCalories = nutritionTrackedDays.map((trackedDate) => {

src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-graph-macronutrients/nutrition-tracker-graph-macronutrients.component.jsx

@@ -2,11 +2,14 @@ import "./nutrition-tracker-graph-macronutrients.styles.scss"
 import { Fragment, useContext, useState, Component } from "react";
 import ReactApexChart from 'react-apexcharts'
 
-import { NutritionTrackerContext } from "../../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// 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";
+import { selectNutritionTrackedDaysView } from "../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+
 const NutritionTrackerGraphMacronutrients = () => {
-  const { nutritionTrackedDaysView } = useContext(NutritionTrackerContext);
+  const nutritionTrackedDaysView = useSelector(selectNutritionTrackedDaysView)
 
   const carbohydratesData = nutritionTrackedDaysView.map(nutritionTrackedDay => {
     return nutritionTrackedDay.macronutrients.carbohydrates

src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-graph-pie/nutrition-tracker-graph-pie.component.jsx

@@ -1,12 +1,15 @@
 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 { useContext, Fragment } from "react"
+// 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";
+import { selectNutritionTrackedDaysSummary } from "../../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+
 const NutritionTrackerGraphPie = () => {
-  const { nutritionTrackedDaysSummary } = useContext(NutritionTrackerContext);
+  const nutritionTrackedDaysSummary = useSelector(selectNutritionTrackedDaysSummary)
 
   const trackedMacronutrients = new Map([
     [GRAPH_FIELDS.carbohydrates, nutritionTrackedDaysSummary.averageDailyCarbohydratesConsumption !== 0 ? nutritionTrackedDaysSummary.averageDailyCarbohydratesConsumption : 0],

src/components/signed-out/dashboard/nutrition-tracker/nutrition-tracker-summary/nutrition-tracker-summary.component.jsx

@@ -1,7 +1,9 @@
 import "./nutrition-tracker-summary.styles.scss"
-import { useContext } from "react";
-import { NutritionTrackerContext } from "../../../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
+// 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";
 
 const date = new Date();
 let currentDay= String(date.getDate()).padStart(2, '0');
@@ -10,7 +12,7 @@ let currentYear = date.getFullYear();
 let currentDate = `${currentYear}-${currentMonth}-${currentDay}`;
 
 const NutritionTrackerSummary = () => {
-  const { nutritionTrackedDaysSummary } = useContext(NutritionTrackerContext)
+  const nutritionTrackedDaysSummary = useSelector(selectNutritionTrackedDaysSummary)
 
   return (
     <div className="nutrition-tracker-dashboard-summary-container">

src/components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.styles.scss

@@ -17,7 +17,7 @@
   height: 6px;
 }  
 
-.fitness-schedule-calendar-container {
+.nutrition-tracker-calendar-container {
   display: block;
   justify-content: center;
   align-items: center;

src/contexts/signed-in/calories-burned/calories-burned.context.js

@@ -74,6 +74,18 @@ const setDefaultTrackedCaloriesBurnedSummaryValuesHelper = () => {
   return DEFAULT_TRACKED_CALORIES_BURNED_SUMMARY
 }
 
+const selectScheduledTrackedCaloriesBurnedHelper = (trackedCaloriesBurned, trackedDay) => {
+  console.log(trackedDay)
+
+  const filteredTrackedCaloriesBurned = trackedCaloriesBurned.find((caloriesTrackedDay) => {
+    return caloriesTrackedDay.dateTracked === trackedDay
+  })
+
+  if (!filteredTrackedCaloriesBurned) return null
+
+  return filteredTrackedCaloriesBurned
+}
+
 // initial state
 export const CaloriesBurnedContext = createContext({
   trackedCaloriesBurned: [],
@@ -89,6 +101,10 @@ export const CaloriesBurnedContext = createContext({
   //   }
   // ]
   trackedCaloriesBurnedLength: 0,
+
+  // selectedTrackedCaloriesBurned is the selected date from the calendar component
+  selectedTrackedCaloriesBurned: null,
+
   filterConditions: {},
   // filterConditions structure:
   // {
@@ -98,12 +114,17 @@ export const CaloriesBurnedContext = createContext({
 
   trackedCaloriesBurnedView: [],
 
+  // scheduledTrackedCaloriesBurnedView is the selected selectedTrackedCaloriesBurned info from the calendar component
+  scheduledTrackedCaloriesBurnedView: null,
+
   searchActivity: () => {},
   addTrackedActivityDate: () => {},
   filterActivityDates: () => {},
   removeActivityDate: () => {},
   clearActivityDatesFilter: () => {},
 
+  selectScheduledTrackedCaloriesBurned: () => {},
+
   searchActivityResults: [],
   // searchActivityResults
   // [
@@ -134,6 +155,8 @@ export const CaloriesBurnedProvider = ({ children }) => {
   const [trackedCaloriesBurned, setTrackedCaloriesBurned] = useState([])
   const [trackedCaloriesBurnedLength, setTrackedCaloriesBurnedLength] = useState(0)
   const [filterConditions, setFilterConditions] = useState(null)
+  const [selectedTrackedCaloriesBurned, setSelectedTrackedCaloriesBurned] = useState(null)
+  const [scheduledTrackedCaloriesBurnedView, setScheduledTrackedCaloriesBurnedView] = useState(null)
   const [searchActivityResults, setSearchActivityResults] = useState([])
   const [trackedCaloriesBurnedView, setTrackedCaloriesBurnedView] = useState(trackedCaloriesBurned)
   const [trackedCaloriesBurnedSummary, setTrackedCaloriesBurnedSummary] = useState({})
@@ -185,6 +208,15 @@ export const CaloriesBurnedProvider = ({ children }) => {
     }
   }, [trackedCaloriesBurned, filterConditions])
 
+  // update scheduledTrackedCaloriesBurnedView when trackedCaloriesBurned or selectedTrackedCaloriesBurned change
+  useEffect(() => {
+    if (selectedTrackedCaloriesBurned) {
+      setScheduledTrackedCaloriesBurnedView(selectScheduledTrackedCaloriesBurnedHelper(trackedCaloriesBurned, selectedTrackedCaloriesBurned))
+    } else {
+      setScheduledTrackedCaloriesBurnedView(null)
+    }
+  }, [trackedCaloriesBurned, selectedTrackedCaloriesBurned])
+
   const searchActivity = async (trackedDayInfo) => {
     if (validateSearchActivity(trackedDayInfo)) {
       return
@@ -239,10 +271,17 @@ export const CaloriesBurnedProvider = ({ children }) => {
     putTrackedCaloriesBurned(currentUser.uid, currentUser.email, trackedCaloriesBurned)
   }
 
+  const selectScheduledTrackedCaloriesBurned = (dayTracked) => {
+    setSelectedTrackedCaloriesBurned(dayTracked)
+    setScheduledTrackedCaloriesBurnedView(selectScheduledTrackedCaloriesBurnedHelper(trackedCaloriesBurned, dayTracked))
+  }
+
   const value = { trackedCaloriesBurned, trackedCaloriesBurnedView, filterConditions, searchActivityResults,
+    scheduledTrackedCaloriesBurnedView,
     searchActivity, addTrackedActivityDate, filterActivityDates, removeActivityDate, clearActivityDatesFilter,
     trackedCaloriesBurnedSummary,
-    setDefaultTrackedCaloriesBurnedValues, setDefaultTrackedCaloriesBurnedSummaryValues, updateTrackedCaloriesBurned }
+    setDefaultTrackedCaloriesBurnedValues, setDefaultTrackedCaloriesBurnedSummaryValues, updateTrackedCaloriesBurned,
+    selectScheduledTrackedCaloriesBurned }
 
   return (
     <CaloriesBurnedContext.Provider

src/pages/signed-in/calories-burned/calories-burned.component.jsx

@@ -13,11 +13,21 @@ import ActivityDateTable from "../../../components/signed-in/calories-burned/add
 import { Fragment, useContext } from "react"
 import { CaloriesBurnedContext } from "../../../contexts/signed-in/calories-burned/calories-burned.context"
 
+import ScheduleCalendar from "../../../components/signed-in/calories-burned/schedule/schedule-calendar/schedule-calendar.component"
+import ScheduleDayInfo from "../../../components/signed-in/calories-burned/schedule/schedule-day-info/schedule-day-info.component"
+
 const CaloriesBurned = () => {
-  const { trackedCaloriesBurned } = useContext(CaloriesBurnedContext)
+  const { trackedCaloriesBurned, scheduledTrackedCaloriesBurnedView } = useContext(CaloriesBurnedContext)
+  console.log(scheduledTrackedCaloriesBurnedView)
 
   return (
     <div className="calories-burned-container">
+      <ScheduleCalendar></ScheduleCalendar>
+      {
+        scheduledTrackedCaloriesBurnedView ?
+        <ScheduleDayInfo></ScheduleDayInfo> : null
+      }
+
       {
         trackedCaloriesBurned.length ? 
           <Fragment>

src/pages/signed-in/calories-burned/calories-burned.styles.scss

@@ -1,4 +1,6 @@
 .calories-burned-container {
+  padding: 0% 2% 0% 230px;
+
   h1, h2, h3 {
     display: flex;
     justify-content: space-evenly;

src/pages/signed-in/nutrition-tracker/nutrition-tracker.styles.scss

@@ -1,3 +1,7 @@
+.nutrition-tracker-container {
+  padding: 0% 2% 0% 230px;
+}
+
 .nutrition-tracker-summary-header {
   display: flex;
   justify-content: center;