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

calendar in nutrition tracker signed in

src/components/signed-in/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -0,0 +1,70 @@
+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 { NutritionTrackerContext } from "../../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
+
+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 { nutritionTrackedDays, selectScheduledNutritionTrackedDay } = useContext(NutritionTrackerContext)
+
+ // 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)
+ 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-in/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;
+} 
+
+.fitness-schedule-calendar-container {
+ display: block;
+ justify-content: center;
+ align-items: center;
+ margin: 2%;
+ padding: 1%;
+}

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

@@ -0,0 +1,53 @@
+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 { NutritionTrackerContext } from "../../../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context"
+
+const paperStyles = {
+ backgroundColor: COLOR_CODES.general["1"],
+ width: 400
+}
+
+const ScheduleDayInfo = () => {
+ const { scheduledNutritionTrackedDaysView } = useContext(NutritionTrackerContext)
+
+ 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-in/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%;
+}

src/components/signed-in/nutrition-tracker/top-search/top-search.component.jsx

@@ -30,9 +30,9 @@ const TopSearch = () => {
  <NutritionTrackerTable></NutritionTrackerTable>
  </div>
 
- <div className="search-days-nutrition-tracker-container">
+ {/* <div className="search-days-nutrition-tracker-container">
  <SearchDays></SearchDays>
- </div>
+ </div> */}
  </div>
  );
 };

src/contexts/signed-in/nutrition-tracker/nutrition-tracker.context.js

@@ -181,6 +181,16 @@ const setDefaultNutritionTrackedDaysSummaryValuesHelper = () => {
  return DEFAULT_NUTRITION_TRACKED_DAYS_SUMMARY;
 };
 
+const selectScheduledNutritionTrackedDayHelper = (nutritionTrackedDays, trackedDay) => {
+ const filteredNutritionTrackedDay = nutritionTrackedDays.find((nutritionTrackedDay) => {
+ return nutritionTrackedDay.dateTracked === trackedDay
+ })
+
+ if (!filteredNutritionTrackedDay) return null
+
+ return filteredNutritionTrackedDay
+}
+
 export const NutritionTrackerContext = createContext({
  nutritionTrackedDays: [],
  // nutritionTrackedDays structure:
@@ -213,6 +223,9 @@ export const NutritionTrackerContext = createContext({
  // }
  // ]
 
+ // selectedNutritionTrackedDay is the selected date from the calendar component
+ selectedNutritionTrackedDay: null,
+
  filterConditions: {},
  // filterConditions structure:
  // {
@@ -222,10 +235,15 @@ export const NutritionTrackerContext = createContext({
 
  nutritionTrackedDaysView: [],
 
+ // scheduledNutritionTrackedDaysView is the selected selectedNutritionTrackedDay info from the calendar component
+ scheduledNutritionTrackedDaysView: null,
+
  addDayTracked: () => {},
  updateDayTracked: () => {},
  getDayTracked: () => {},
 
+ selectScheduledNutritionTrackedDay: () => {},
+
  // tracked day in searchDays component
  dayTrackedSearchResult: undefined,
 
@@ -257,6 +275,8 @@ export const NutritionTrackerProvider = ({ children }) => {
  const [nutritionTrackedDays, setNutritionTrackedDays] = useState([]);
  const [formInputMicronutrients, setFormInputMicronutrients] = useState([]);
  const [filterConditions, setFilterConditions] = useState(null)
+ const [selectedNutritionTrackedDay, setSelectedNutritionTrackedDay] = useState(null)
+ const [scheduledNutritionTrackedDaysView, setScheduledNutritionTrackedDaysView] = useState(null)
  const [nutritionTrackedDaysView, setNutritionTrackedDaysView] = useState(nutritionTrackedDays)
  const [dayTrackedSearchResult, setDayTrackedSearchResult] = useState(undefined)
  const [nutritionTrackedDaysSummary, setNutritionTrackedDaysSummary] = useState({});
@@ -287,6 +307,15 @@ export const NutritionTrackerProvider = ({ children }) => {
  }
  }, [nutritionTrackedDays, filterConditions])
 
+ // update scheduledNutritionTrackedDaysView when nutritionTrackedDays or selectedNutritionTrackedDay change
+ useEffect(() => {
+ if (selectedNutritionTrackedDay) {
+ setScheduledNutritionTrackedDaysView(selectScheduledNutritionTrackedDayHelper(nutritionTrackedDays, selectedNutritionTrackedDay))
+ } else {
+ setScheduledNutritionTrackedDaysView(null)
+ }
+ }, [nutritionTrackedDays, selectedNutritionTrackedDay])
+
  useEffect(() => {
  async function fetchNutritionTrackedDaysData() {
  if (currentUser) {
@@ -385,14 +414,19 @@ export const NutritionTrackerProvider = ({ children }) => {
  setFormInputMicronutrients([]);
  }
 
- const value = { nutritionTrackedDays, formInputMicronutrients, 
+ const selectScheduledNutritionTrackedDay = (dayTracked) => {
+ setSelectedNutritionTrackedDay(dayTracked)
+ setScheduledNutritionTrackedDaysView(selectScheduledNutritionTrackedDayHelper(nutritionTrackedDays, dayTracked))
+ }
+
+ const value = { nutritionTrackedDays, formInputMicronutrients, scheduledNutritionTrackedDaysView,
  addDayTracked, updateDayTracked, getDayTracked, 
  addFormInputMicronutrients, updateFormInputMicronutrients, deleteFormInputMicronutrients, 
  nutritionTrackedDaysSummary,
  nutritionTrackedDaysView, dayTrackedSearchResult,
  filterDayTracked, removeDayTracked, clearDayTrackedFilter,
  setDefaultNutritionTrackedDaysValues, setDefaultNutritionTrackedDaysSummaryValues, updateNutritionTrackedDaysAndSummary,
- addDayTrackedFromPrediction }
+ addDayTrackedFromPrediction, selectScheduledNutritionTrackedDay }
 
  return (
  <NutritionTrackerContext.Provider

src/pages/signed-in/nutrition-tracker/nutrition-tracker.component.jsx

@@ -10,14 +10,27 @@ import ConsumptionInfo from "../../../components/signed-in/nutrition-tracker/con
 import TopSearch from "../../../components/signed-in/nutrition-tracker/top-search/top-search.component";
 
 import { NutritionTrackerContext } from "../../../contexts/signed-in/nutrition-tracker/nutrition-tracker.context";
+import ScheduleCalendar from "../../../components/signed-in/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component";
+import ScheduleDayInfo from "../../../components/signed-in/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component";
+import { Divider } from "@mui/material";
 
 const NutritionTracker = () => {
- const { nutritionTrackedDays } = useContext(NutritionTrackerContext);
+ const { nutritionTrackedDays, scheduledNutritionTrackedDaysView } = useContext(NutritionTrackerContext);
 
  return (
  <div className="nutrition-tracker-container">
+ <ScheduleCalendar></ScheduleCalendar>
  {
- nutritionTrackedDays.length !== 0 &&
+ scheduledNutritionTrackedDaysView ?
+ <ScheduleDayInfo></ScheduleDayInfo> : null
+ }
+
+ <br/>
+ <Divider/>
+ <br/>
+
+ {
+ nutritionTrackedDays && nutritionTrackedDays.length !== 0 &&
  <Fragment>
  <h2 className="nutrition-tracker-summary-header">Summary</h2>
  <TopSearch></TopSearch>

src/pages/signed-out/nutrition-tracker/nutrition-tracker.component.jsx

@@ -80,8 +80,6 @@ const NutritionTracker = () => {
  <Divider/>
  <br/>
 
-
-
  {
  nutritionTrackedDays && nutritionTrackedDays.length !== 0 &&
  <Fragment>