Merge pull request #133 from tahmid-saj/dev-general-cleanup-2

adding nutrition tracker calendar to dashboard

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

@@ -17,7 +17,7 @@ const ScheduleDayInfo = () => {
  <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">{`Activity - ${scheduledTrackedCaloriesBurnedView.activity}`}</Typography>
  <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Total calories burned - ${scheduledTrackedCaloriesBurnedView.totalCaloriesBurned}`}</Typography>
 
  <br/>

src/components/signed-out/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 (
+ <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-out/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-out/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-out/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">{`Activity - ${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-out/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-out/dashboard/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -0,0 +1,72 @@
+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 { useDispatch, useSelector } from "react-redux";
+import { selectNutritionTrackedDays } from "../../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+import { selectScheduledNutritionTrackedDay } from "../../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
+
+function getScheduledData(date, nutritionTrackedDays) {
+ date = date.toISOString().split('T')[0]
+
+ let scheduledNutritionTrackedDaysForDate = []
+ nutritionTrackedDays.map((nutritionTrackedDay) => {
+ if (nutritionTrackedDay.dateTracked === date) {
+ scheduledNutritionTrackedDaysForDate.push({
+ calories: nutritionTrackedDay.calories
+ })
+ }
+ })
+
+ return scheduledNutritionTrackedDaysForDate
+}
+
+const ScheduleCalendar = () => {
+ const dispatch = useDispatch()
+ const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
+
+ // console.log(nutritionTrackedDays)
+
+ function renderCell(date) {
+ const list = getScheduledData(date, nutritionTrackedDays);
+ 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.calories}`}</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)
+ dispatch(selectScheduledNutritionTrackedDay(selectedDate))
+ }
+
+ return (
+ <div className="nutrition-tracker-schedule-calendar-container" style={{ backgroundColor: COLOR_CODES.general["0"] }}>
+ <Typography sx={{ display: "flex", marginLeft: "1%" }} 
+ variant="h6">{`Nutrition tracker calendar`}</Typography>
+ <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate } style={{ backgroundColor: COLOR_CODES.general["0"] }}/>
+ </div>
+ )
+}
+
+export default ScheduleCalendar

src/components/signed-out/dashboard/nutrition-tracker/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;
+} 
+
+.nutrition-tracker-calendar-container {
+ display: block;
+ justify-content: center;
+ align-items: center;
+ margin: 2%;
+ padding: 1%;
+}

src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component.jsx

@@ -0,0 +1,54 @@
+import "./schedule-day-info.styles.scss"
+import { useSelector } from "react-redux"
+import { selectScheduledNutritionTrackedDaysView } from "../../../../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector"
+import { Typography, Divider } from "@mui/material"
+import { Fragment } from "react"
+import SimplePaper from "../../../../../shared/mui/paper/paper.component"
+import { COLOR_CODES } from "../../../../../../utils/constants/shared.constants"
+
+const paperStyles = {
+ backgroundColor: COLOR_CODES.general["1"],
+ width: 400
+}
+
+const ScheduleDayInfo = () => {
+ const scheduledNutritionTrackedDaysView = useSelector(selectScheduledNutritionTrackedDaysView)
+
+ return (
+ <div className="nutrition-tracker-schedule-day-info">
+ <SimplePaper styles={ paperStyles }>
+ <Typography sx={{ display: "flex", justifyContent: "center" }} variant="h6">{`${scheduledNutritionTrackedDaysView.dateTracked}`}</Typography>
+ <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Calories - ${scheduledNutritionTrackedDaysView.calories}`}</Typography>
+
+ <br/>
+ <Divider/>
+ <br/>
+
+ <strong><h4>Macronutrients</h4></strong>
+ <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Carbohydrates - ${scheduledNutritionTrackedDaysView.macronutrients.carbohydrates} g`}</Typography>
+ <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Protein - ${scheduledNutritionTrackedDaysView.macronutrients.protein} g`}</Typography>
+ <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`Fat - ${scheduledNutritionTrackedDaysView.macronutrients.fat} g`}</Typography>
+
+ {
+ scheduledNutritionTrackedDaysView.micronutrients && scheduledNutritionTrackedDaysView.micronutrients.length !== 0 ? 
+ <Fragment>
+ <br/>
+ <Divider/>
+ <br/>
+
+ <strong><h4>Micronutrients</h4></strong>
+ {
+ scheduledNutritionTrackedDaysView.micronutrients.map((micronutrient) => {
+ return (
+ <Typography sx={{ display: "flex", justifyContent: "center" }} variant="body1">{`${micronutrient.name} - ${micronutrient.amount} ${micronutrient.unit}`}</Typography>
+ )
+ })
+ }
+ </Fragment> : null
+ }
+ </SimplePaper>
+ </div>
+ )
+}
+
+export default ScheduleDayInfo

src/components/signed-out/dashboard/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.styles.scss

@@ -0,0 +1,6 @@
+.nutrition-tracker-schedule-day-info {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2% 2% 2% 2%;
+}