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

dev-general-cleanup-2

src/components/signed-in/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -79,9 +79,9 @@ const ScheduleCalendar = () => {
  <Badge /> <b>{item.type}</b> - {item.name}
  </li>
  ))}
- {/* {moreCount ? moreItem : null} */}
+ {moreCount ? `${moreCount} more` : null}
  </ul>
- {moreCount} more
+ {/* {moreCount} more */}
  </Fragment>
  );
  }

src/components/signed-out/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -79,9 +79,9 @@ const ScheduleCalendar = () => {
  <Badge /> <b>{item.type}</b> - {item.name}
  </li>
  ))}
- {/* {moreCount ? moreItem : null} */}
+ {moreCount ? `${moreCount} more` : null}
  </ul>
- {moreCount} more
+ {/* {moreCount} more */}
  </Fragment>
  );
  }

src/components/signed-out/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/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-out/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/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/contexts/signed-out/nutrition-tracker/nutrition-tracker.context.js

@@ -147,6 +147,16 @@ const removeDayTrackedHelper = (nutritionTrackedDays, trackedDay) => {
  return nutritionTrackedDays.filter(nutritionTrackedDay => nutritionTrackedDay.dateTracked !== trackedDay)
 }
 
+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:
@@ -179,6 +189,9 @@ export const NutritionTrackerContext = createContext({
  // }
  // ]
 
+ // selectedNutritionTrackedDay is the selected date from the calendar component
+ selectedNutritionTrackedDay: null,
+
  filterConditions: {},
  // filterConditions structure:
  // {
@@ -188,10 +201,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,
 
@@ -219,6 +237,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({});
@@ -246,6 +266,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])
+
  const addDayTracked = (trackedDayInfo) => {
  setNutritionTrackedDays(addDayTrackedHelper(nutritionTrackedDays, formInputMicronutrients, trackedDayInfo));
  setFormInputMicronutrients([]);
@@ -297,13 +326,18 @@ 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,
- addDayTrackedFromPrediction }
+ addDayTrackedFromPrediction, selectScheduledNutritionTrackedDay }
 
  return (
  <NutritionTrackerContext.Provider

src/pages/signed-in/fitness/fitness.styles.scss

@@ -2,7 +2,7 @@
  display: block;
  justify-content: center;
  align-items: center;
- margin: 2% 5% 2% 5%;
+ margin: 2% 2% 2% 230px;
 }
 
 .fitness-schedule-container {

src/pages/signed-out/fitness/fitness.styles.scss

@@ -2,7 +2,7 @@
  display: block;
  justify-content: center;
  align-items: center;
- margin: 2% 5% 2% 5%;
+ margin: 2% 2% 2% 230px;
 }
 
 .fitness-schedule-container {

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

@@ -11,18 +11,23 @@ import TopSearch from "../../../components/signed-out/nutrition-tracker/top-sear
 
 // import { NutritionTrackerContext } from "../../../contexts/signed-out/nutrition-tracker/nutrition-tracker.context";
 import { useDispatch, useSelector } from "react-redux"
-import { selectNutritionTrackedDays, selectFilterConditions, selectNutritionTrackedDaysView } from "../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
+import { selectNutritionTrackedDays, selectFilterConditions, selectNutritionTrackedDaysView,
+ selectSelectedNutritionTrackedDay, selectScheduledNutritionTrackedDaysView
+} from "../../../store/signed-out/nutrition-tracker/nutrition-tracker.selector";
 import { setNutritionTrackedDaysSummary, setNutritionTrackedDaysView, 
- filterDayTrackedHelper 
+ filterDayTrackedHelper, selectScheduledNutritionTrackedDayHelper, setScheduledNutritionTrackedDaysView
 } from "../../../store/signed-out/nutrition-tracker/nutrition-tracker.action";
 import { calculateSummary } from "../../../utils/calculations/nutrition-tracker.calculations";
-import ScheduleCalendar from "../../../components/signed-out/fitness/schedule/schedule-calendar/schedule-calendar.component";
+import ScheduleCalendar from "../../../components/signed-out/nutrition-tracker/schedule/schedule-calendar/schedule-calendar.component";
 import { Divider } from "rsuite";
+import ScheduleDayInfo from "../../../components/signed-out/nutrition-tracker/schedule/schedule-day-info/schedule-day-info.component";
 
 const NutritionTracker = () => {
  // const { nutritionTrackedDays } = useContext(NutritionTrackerContext);
  const nutritionTrackedDays = useSelector(selectNutritionTrackedDays)
  const filterConditions = useSelector(selectFilterConditions)
+ const selectedNutritionTrackedDay = useSelector(selectSelectedNutritionTrackedDay)
+ const scheduledNutritionTrackedDaysView = useSelector(selectScheduledNutritionTrackedDaysView)
  const nutritionTrackedDaysView = useSelector(selectNutritionTrackedDaysView)
  const dispatch = useDispatch()
 
@@ -53,9 +58,23 @@ const NutritionTracker = () => {
  }
  }, [nutritionTrackedDays, filterConditions, dispatch])
 
+ // update scheduledNutritionTrackedDaysView when nutritionTrackedDays or selectedNutritionTrackedDay change
+ useEffect(() => {
+ if (selectedNutritionTrackedDay) {
+ console.log(nutritionTrackedDays, selectedNutritionTrackedDay)
+ dispatch(setScheduledNutritionTrackedDaysView(selectScheduledNutritionTrackedDayHelper(nutritionTrackedDays, selectedNutritionTrackedDay)))
+ } else {
+ dispatch(setScheduledNutritionTrackedDaysView(null))
+ }
+ }, [nutritionTrackedDays, selectedNutritionTrackedDay, dispatch])
+
  return (
  <div className="nutrition-tracker-container">
  <ScheduleCalendar></ScheduleCalendar>
+ {
+ scheduledNutritionTrackedDaysView ?
+ <ScheduleDayInfo></ScheduleDayInfo> : null
+ }
 
  <br/>
  <Divider/>

src/pages/signed-out/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;

src/store/signed-out/nutrition-tracker/nutrition-tracker.action.js

@@ -148,6 +148,16 @@ const removeDayTrackedHelper = (nutritionTrackedDays, trackedDay) => {
  return nutritionTrackedDays.filter(nutritionTrackedDay => nutritionTrackedDay.dateTracked !== trackedDay)
 }
 
+export const selectScheduledNutritionTrackedDayHelper = (nutritionTrackedDays, trackedDay) => {
+ const filteredNutritionTrackedDay = nutritionTrackedDays.find((nutritionTrackedDay) => {
+ return nutritionTrackedDay.dateTracked === trackedDay
+ })
+
+ if (!filteredNutritionTrackedDay) return null
+
+ return filteredNutritionTrackedDay
+}
+
 // actions
 
 export const addDayTracked = (nutritionTrackedDays, formInputMicronutrients, trackedDayInfo) => {
@@ -215,4 +225,12 @@ export const addDayTrackedFromPrediction = (nutritionTrackedDays, predictionNutr
  const newNutritionTrackedDays = addDayTrackedFromPredictionHelper(nutritionTrackedDays, predictionNutritionInfo)
 
  return createAction(NUTRITION_TRACKER_ACTION_TYPES.SET_NUTRITION_TRACKED_DAYS, newNutritionTrackedDays)
+}
+
+export const selectScheduledNutritionTrackedDay = (dayTracked) => {
+ return createAction(NUTRITION_TRACKER_ACTION_TYPES.SET_SELECTED_NUTRITION_TRACKED_DAY, dayTracked)
+}
+
+export const setScheduledNutritionTrackedDaysView = (scheduledNutritionTrackedDaysView) => {
+ return createAction(NUTRITION_TRACKER_ACTION_TYPES.SET_SCHEDULED_NUTRITION_TRACKED_DAYS_VIEW, scheduledNutritionTrackedDaysView)
 }