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>