Merge pull request #14 from Mayotopia04/arvi-branch

Arvi's updated codes for hompage and sidebard

pull_request_list.txt

@@ -1 +1,4 @@
-https://github.com/Mayotopia04/Team-Outfit/pull/5
+https://github.com/Mayotopia04/Team-Outfit/pull/5
+https://github.com/Mayotopia04/Team-Outfit/pull/14
+https://github.com/Mayotopia04/Team-Outfit/pull/1#issue-2378652746
+https://github.com/Mayotopia04/Team-Outfit/pull/1/commits/69eb61f2932e2af3ee68bbfab4cb2ff4d05fbfd6

src/components/SideBar/SideBar.jsx

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+
 import { getDailyMeals } from 'redux/products/products-operations';
 import { DiaryDateСalendar } from '../';
 import categories from '../../categories.json';
-import styles from './SideBar.module.scss'; // Import SCSS module
+import s from './SideBar.module.css';
 
 const SideBar = () => {
   const { dailyMeals, date } = useSelector(state => state.products);
@@ -20,22 +21,19 @@ const SideBar = () => {
     dispatch(getDailyMeals({ date: date }));
   }, [dispatch, date, dailyMeals]);
 
-  const getCategoryName = i => categories[i];
 
   const dailyCalories = Number(userDailyDiet?.calories).toFixed(1);
   const consumedCalories = dailyMeals
-    ?.reduce((total, meal) => total + meal.calories, 0)
+    ?.reduce((total, meal) => {
+      return total + meal.calories;
+    }, 0)
     ?.toFixed(1);
   const leftCalories =
     (dailyCalories - consumedCalories).toFixed(1) < 0
       ? 0
       : (dailyCalories - consumedCalories).toFixed(1);
   const percent = ((consumedCalories * 100) / dailyCalories).toFixed(2);
 
-  const foodCategories = userDailyDiet?.categories?.map(i => {
-    return getCategoryName(i);
-  });
-
   const showInfo =
     userDailyDiet?.calories &&
     userDailyDiet?.notAllowedProduct?.length > 0 &&
@@ -52,58 +50,59 @@ const SideBar = () => {
     !userDailyDiet?.categories;
 
   const handleBtnClick = e => {
+
     if (e.target.textContent === activeCategory) {
       setProductsShown(false);
       setActiveCategory('');
       setSpecificProducts(null);
     } else {
       setActiveCategory(e.target.textContent);
       const productsToShow = userDailyDiet?.notAllowedProduct
-        ?.filter(i => getCategoryName(i.category) === e.target.textContent)
+        ?.filter(i => i.category === e.target.textContent)
         .sort((a, b) => a.title.localeCompare(b.title));
       setSpecificProducts(productsToShow);
       setProductsShown(true);
     }
   };
 
   return (
-    <div className={styles.sideBar}>
-      <div className={styles.box}>
-        <section className={styles.section}>
-          <h2 className={styles.title}>
+    <div className={s.sideBar}>
+      <div className={s.box}>
+        <section className={s.section}>
+          <h2 className={s.title}>
             Summary for <DiaryDateСalendar location="sidebar" />
           </h2>
           {noInfo && (
             <p>Please fill out the form on the Calculator page to see your personal statistics.</p>
           )}
           {showInfo && (
-            <ul className={styles.list}>
-              <li className={styles.item}>
+            <ul className={s.list}>
+              <li className={s.item}>
                 <p>Left</p>
-                <p>{showDailyInfo ? `${leftCalories} kcal` : '000 kcal'}</p>
+                <p>{showDailyInfo ? leftCalories : '000'} kcal</p>
               </li>
-              <li className={styles.item}>
+              <li className={s.item}>
                 <p>Consumed</p>
-                <p>{showDailyInfo ? `${consumedCalories} kcal` : '000 kcal'}</p>
+                <p>{showDailyInfo ? consumedCalories : '000'} kcal</p>
               </li>
-              <li className={styles.item}>
+              <li className={s.item}>
                 <p>Daily rate</p>
                 <p>{userDailyDiet.calories} kcal</p>
               </li>
-              <li className={styles.item}>
+              <li className={s.item}>
                 <p>n% of normal</p>
-                <p>{showDailyInfo ? `${percent} %` : '0 %'}</p>
+                <p>{showDailyInfo ? percent : 0} %</p>
               </li>
             </ul>
           )}
         </section>
-        <section className={styles.section}>
-          <h2 className={styles.title}>Food not recommended</h2>
+        <section className={s.section}>
+          <h2 className={s.title}>Food not recommended</h2>
           {showInfo && (
-            <ul className={styles.list}>
-              {foodCategories?.map((element, index) => (
-                <li key={`not-recommended-categories-${index}`} className={styles.item}>
-                  <button type="button" onClick={handleBtnClick} className={styles.button}>
+            <ul className={s.list}>
+              {userDailyDiet?.categories?.map((element, index) => (
+                <li key={`not-recommended-categories-${index}`} className={s.item}>
+                  <button type="button" onClick={handleBtnClick} className={s.button}>
                     {element}
                   </button>
                 </li>
@@ -115,18 +114,18 @@ const SideBar = () => {
         </section>
       </div>
       {showInfo && productsShown && (
-        <section className={styles.additional}>
-          <h3 className={styles.title}>Not recommended products in category {activeCategory}</h3>
-          <ul className={styles.productsList}>
-            {specificProducts?.map((element, index) => (
+        <section className={s.additional}>
+          <h3 className={s.title}>Not recommended products in category {activeCategory}</h3>
+          <ul className={s.productsList}>
+            {specificProducts.map((element, index) => (
               <li key={`not-recommended-products-${index}`}>{element.title}</li>
             ))}
           </ul>
         </section>
       )}
+
     </div>
   );
 };
 
-export default SideBar;
-
+export default SideBar;

src/components/SideBar/SideBar.module.css

@@ -1,116 +1,120 @@
-$sideBarColor: #ffffff;
-/* Set sidebar background color to white */
-
-.asideBox {
-  margin: 0 -20px;
-  background: $sideBarColor;
-  padding: 40px 20px;
-  min-width: 280px;
-  min-height: 433px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 40px;
-
-  @media #{$minTablet} {
-    margin: 0 -32px;
-    width: 100%;
-    min-height: 166px;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding: 80px 88px;
-    background-image: url('../../helpers/images/leaves-aside-tablet.png');
-    background-repeat: no-repeat;
-    background-position: top -180px;
-  }
+.sideBar {
+  width: 440px;
+  padding: 40px 0 84px 0;
+  /* color */
+  color: var(--second-color);
+  /* font */
+  line-height: 1.21;
+}
 
-  @media #{$desktop} {
-    margin: 0 -32px;
-    background: $sideBarColor;
-    margin-left: auto;
-    gap: 60px;
-    padding: 0;
-    width: 497px;
-    height: 850px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-image: url('../../helpers/images/leaves-desktop-aside.png');
-    background-repeat: no-repeat;
-    background-position: 0 -80%;
-    overflow: auto;
-  }
+.section {
+  width: 100%;
 }
 
 .title {
   margin-bottom: 20px;
-  font-weight: 700;
+  /* color */
+  color: var(--main-color);
+  /* font */
   font-size: 14px;
-  line-height: 17px;
-  letter-spacing: 0.04em;
-  color: #212121;
+}
 
-  @media screen and (min-width: 1280px) {
-    margin-bottom: 38px;
-  }
+.item {
+  display: flex;
+  justify-content: space-between;
 }
 
-.div {
-  min-width: 280px;
-  max-width: 520px;
+.item:not(:last-child) {
+  margin-bottom: 15px;
+}
 
-  @media screen and (min-width: 768px) {
-    width: 244px;
-  }
+.button {
+  border: none;
+  color: inherit;
+  transition: color 250ms linear;
+}
 
-  @media screen and (min-width: 1280px) {
-    width: 290px;
-  }
+.button:hover,
+.button:focus,
+.button:active {
+  color: var(--accent-color);
 }
 
-.kcalList {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+.additional {
+  margin-top: 40px;
 }
 
-.kcalItem {
-  display: flex;
-  justify-content: space-between;
+.productsList {
+  padding-right: 10px;
+  max-height: 160px;
+  overflow-y: auto;
 }
 
-$textBaseStyles: ` font-weight: 400;
-font-size: 14px;
-line-height: 17px;
-letter-spacing: 0.04em;
-color: #9b9faa;
-`;
+.productsList::-webkit-scrollbar {
+  width: 6px;
+}
 
-.text {
-  #{$textBaseStyles}
+.productsList::-webkit-scrollbar-track {
+  background-color: var(--bg-color);
 }
 
-.span {
-  #{$textBaseStyles}
+.productsList::-webkit-scrollbar-thumb {
+  background-color: var(--third-color);
 }
 
-.productList {
-  display: flex;
-  flex-direction: column;
-  height: 200px;
-  gap: 20px;
-  overflow-y: scroll;
+@media screen and (max-width: 479px) {
+  .sideBar {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .section:first-child {
+    margin-bottom: 40px;
+  }
+}
 
-  &::-webkit-scrollbar {
-    width: 6px;
+@media screen and (min-width: 768px) {
+  .sideBar {
+    width: 610px;
+    padding: 80px 0 90px 0;
   }
 
-  &::-webkit-scrollbar-track {
-    background: #e2e2e2;
+  .box {
+    display: flex;
+  }
+
+  .section:first-child {
+    flex-shrink: 0;
+    width: 288px;
+    margin-right: 80px;
+  }
+
+  .title {
+    margin-bottom: 30px;
+  }
+
+  .additional {
+    max-width: 360px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .sideBar {
+    width: 288px;
+    padding: 0;
+    margin-left: auto;
+    margin-right: 80px;
+  }
+
+  .box {
+    flex-direction: column;
   }
 
-  &::-webkit-scrollbar-thumb {
-    background-color: #264061;
+  .section:first-child {
+    margin-right: 0;
+    margin-bottom: 60px;
   }
 }

src/pages/HomePage/HomePage.js

@@ -1,21 +1,18 @@
-import React from 'react';
-import CalcForm from 'components/CalcForm';
-import { Container } from 'components/Container';
-import ThemeSwitcher from 'components/ThemeSwitcher';
-import styles from './Home.module.scss'; // Import SCSS module
+import s from './HomePage.module.css';
 
-const Home = () => {
+import { Container, DailyCaloriesForm } from 'components';
+
+const HomePage = () => {
   return (
-    <div className={styles.Container}>
-      <div className={styles.MainGrid}>
-        <CalcForm />
-      </div>
-      <div className={styles.ThemeSwitcherBox}>
-        <ThemeSwitcher />
-      </div>
-    </div>
+    <main>
+      <section className={s.section}>
+        <Container>
+          <h3 className="visually-hidden">HomePage </h3>
+          <DailyCaloriesForm />
+        </Container>
+      </section>
+    </main>
   );
 };
 
-export default Home;
-
+export default HomePage;