Merge pull request #66 from Tasitaforme/checking-nutrients

Checking nutrients

README.md

@@ -1,117 +1,89 @@
-# React + Vite template
-
-Цей проєкт було створено за допомогою [Create Vite](https://vitejs.dev/). Для
-знайомства і налаштування додаткових можливостей
-[звернися до документації](https://vitejs.dev/guide/).
-
-## Створення репозиторію за шаблоном
-
-Використовуй цей репозиторій організації GoIT як шаблон для створення
-репозиторію свого проєкту. Для цього натисни на кнопку `"Use this template"` і
-обери опцію `"Create a new repository"`, як показано на зображенні.
-
-![Creating repo from a template step 1](./assets/template-step-1.png)
-
-На наступному кроці відкриється сторінка створення нового репозиторію. Заповни
-поле його імені, переконайся що репозиторій публічний, після чого натисни кнопку
-`"Create repository from template"`.
-
-![Creating repo from a template step 2](./assets/template-step-2.png)
-
-Після того як репозиторій буде створено, необхідно перейти в налаштування
-створеного репозиторію на вкладку `Settings` > `Actions` > `General` як показано
-на зображенні.
-
-![Settings GitHub Actions permissions step 1](./assets/gh-actions-perm-1.png)
-
-Проскроливши сторінку до самого кінця, у секції `"Workflow permissions"` вибери
-опцію `"Read and write permissions"` і постав галочку в чекбоксі. Це необхідно
-для автоматизації процесу деплою проєкту.
-
-![Settings GitHub Actions permissions step 2](./assets/gh-actions-perm-2.png)
-
-Тепер у тебе є особистий репозиторій проєкту, зі структурою файлів і папок
-репозиторія-шаблону. Далі працюй з ним як з будь-яким іншим особистим
-репозиторієм, клонуй його собі на комп'ютер, пиши код, роби комміти і відправляй
-їх на GitHub.
-
-## Підготовка до роботи
-
-1. Переконайся, що на комп'ютері встановлена LTS-версія Node.js.
-   [Скачай і встанови](https://nodejs.org/en/) її якщо необхідно.
-2. Встановіть базові залежності проекту командою `npm install`.
-3. Запустіть режим розробки, виконавши команду `npm run dev`.
-4. Перейди в браузері за адресою, що зазначено в терміналі.
-
-## Деплой
-
-Продакшн версія проєкту буде автоматично збиратися і деплоїтися на GitHub Pages,
-у гілку `gh-pages`, щоразу, коли оновлюється гілка `main`. Наприклад, після
-прямого пушу або прийнятого пул-реквесту. Для цього необхідно у файлі
-`vite.config.js` відредагувати поле `base`, замінивши `react_vite` на свою назву
-репозиторію `"/your_repo_name"`, і відправити зміни на GitHub.
-
-Далі необхідно зайти в налаштування GitHub-репозиторію (`Settings` > `Pages`) і
-виставити роздачу продакшн версії файлів із папки `/root` гілки `gh-pages`, якщо
-це не було зроблено автоматично.
-
-![GitHub Pages settings](./assets/repo-settings.png)
-
-### Статус деплоя
-
-Статус деплою крайнього коміту відображається іконкою біля його ідентифікатора.
-
-- **Жовтий колір** - виконується збірка і деплой проєкту.
-- **Зелений колір** - деплой завершився успішно.
-- **Червоний колір** - під час збирання або деплою сталася помилка.
-
-Детальнішу інформацію про статус можна подивитися, клікнувши на іконку, і в
-випадаючому вікні перейти за посиланням `Details`.
-
-![Deployment status](./assets/deploy-status.png)
-
-### Жива сторінка
-
-Через якийсь час, зазвичай кілька хвилин, живу сторінку можна буде подивитися за
-адресою, вказаною в налаштуваннях GitHub-репозиторію (`Settings` > `Pages`).
-
-![GitHub-pages URL](./assets/gh-pages-url.png)
-
-Якщо відкривається порожня сторінка, переконайся що у вкладці `Console` немає
-помилок пов'язаних із неправильними шляхами до CSS і JS файлів проекту
-(**404**). Швидше за все найімовірніше, у тебе неправильне значення поля `base`
-у файлі `vite.config.js`.
-
-### Маршрутизація
-
-Якщо додаток використовує бібліотеку `react-router-dom` для маршрутизації,
-необхідно додатково налаштувати компонент `<BrowserRouter>`, передавши в пропе
-`basename` точну назву твого репозиторію. Слеш на початку рядка обов'язковий.
-
-```jsx
-<BrowserRouter basename="/your_repo_name">
-  <App />
-</BrowserRouter>
-```
-
-### Додавання змінних в .env
-
-Для зберігання конфігураційних даних, таких як API ключі, адреси серверів, порти
-та інші змінні використовуйте файл `.env`. Для цього необхідно з назви файлу
-`.env.template` видалити зайві ".template",після чого файл відповідатиме умовам
-файлу `.ignore` і буде зберігатися лише локально, не публікуючись на віддаленому
-репозиторії з метою безпеки. Задля використання змінних на GitHub-pages усі
-змінні, передбачені файлом .env, слід додати до файлу
-`.github/workflows/deploy.yml`, а також до налаштувань репозиторію. Для цього
-слід перейти (`Settings` > `Secrets and variables` > `Actions`)
-
-![Add enviroments from .env](./assets/secrets.png)
-
-## Як це працює
-
-1. Після кожного пушу в гілку `main` GitHub-репозиторію, запускається
-   спеціальний скрипт (GitHub Action) з файлу `.github/workflows/deploy.yml`.
-2. Усі файли репозиторію копіюються на сервер, де проєкт ініціалізується і
-   проходить збірку перед деплоєм. 3 Якщо всі кроки пройшли успішно, зібрана
-   продакшн-версія файлів проєкту відправляється в гілку `gh-pages`. В іншому
-   випадку, в логах виконання скрипта буде вказано в чому проблема.
+![preview-hw](./assets//preview.jpg)
+
+# HealthyHub (App)
+
+**Team project.**  
+**Title:** HealthyHub  
+**Target:** app development according to the design layout using the Vite
+bundler.  
+**Description:** HealthyHub is a app-tracker for those who monitor their diet.
+
+Depending on your weight, height, age, and goals, the app provides personalized
+recommendations for calorie and water consumption. It also shows in the form of
+pie charts how much of the recommendations for daily calorie, carbohydrate,
+protein, and fat intake have been met.
+
+The app allows you to:
+
+👉 keep a food diary (add, correct and delete foods that were consumed during
+the day);  
+👉 keep track of the amount of calories and water consumed by month, as well as
+track your weight;  
+👉 view a list of suggested foods with information on the calorie content per
+100 grams of food;  
+👉 change information and add an avatar in the user profile;  
+👉 change the login password;  
+👉 delete a user from the application.
+
+**Skills:** HTML/CSS, JavaScript, React/Router DOM, Redux/toolkit/persist,
+Axios, Chart.js, Formik/Yup, Styled-components, Figma, Git/GitHub, Vite, Postman
+, Teamwork.
+
+**Basic functionality:**
+
+- Designed according to the mobile-first approach.
+- Implemented layout with three fractures (for mobile devices, tablets, and
+  desktop).
+- The layout is valid.
+- Compliance with semantics in accordance with HTML5 standards.
+- Connecting fonts using font-face.
+- Optimization of vector and raster graphics sizes.
+- Optimization of image loading.
+- Added display of the page favicon for browsers and app icons for mobile
+  devices.
+- Providing support for displaying images for retina screens.
+- Implementation of the frontend-y project on Vite + React (Build - github.com).
+- Implementation of the backend-y project on Node.js (Build - render.com).
+
+# HealthyHub (App)
+
+**Командний проект.**  
+**Назва:** HealthyHub  
+**Ціль:** розробка додатку згідно дизайн-макету з використанням збірника Vite.  
+**Опис:** Трекер-додаток «HealthyHub» для тих, хто слідкує за своїм харчуванням.
+
+Залежно від ваги, зросту, віку та поставлених цілей додаток надає
+персоналізовані рекомендації по споживанню калорій та води. А також показує у
+вигляді кругових діаграм на скільки рекомендації по щоденному споживанню
+калорій, вуглеводів, білків і жирів були досягнуті.
+
+В додатку є можливість:  
+👉 вести щоденник харчування (додавати, корегувати та видаляти продукти які були
+спожитті протягом дня);  
+👉 відслідковувати за місяцями спожиту кількість калорій та води, а також
+відстежувати свою вагу;  
+👉 переглянути перелік запропонованих продуктів харчування з інформацією про
+вміст калорій на 100г продукту;  
+👉 змінювати інформацію та додавати аватарку в профілі користувача;  
+👉 змінювати пароль для входу;  
+👉 видалення користувача з додатку.
+
+**Навички:** HTML/CSS, JavaScript, React/Router DOM, Redux/toolkit/persist,
+Axios, Chart.js, Formik/Yup, Styled-components, Figma, Git/GitHub, Vite, Postman
+, Teamwork.
+
+**Базовий функціонал:**
+
+• Розроблено по макету відповідно до підходу mobile-first.  
+• Реалізована верстка з трьома переломами (для мобільних девайсів, планшетів та
+десктопу).  
+• Верстка валідна.  
+• Дотримання семантики відповідно до стандартів HTML5.  
+• Підключення шрифтів за допомогою font-face.  
+• Оптимізація розмірів векторної та растрової графіки.  
+• Оптимізація завантаження зображень.  
+• Додано відображення фавікону сторінки для браузерів та іконок додатку для
+мобільних пристроїв.  
+• Забезпечення підтримки відображення картинок для retina-екранів.  
+• Реалізація frontend-y проекту на Vite + React (Build - github.com).  
+• Реалізація backend-y проекту Node.js (Build - render.com).

src/components/Diary/DiaryItem/DiaryItem.jsx

@@ -79,15 +79,15 @@ export default function DiaryItem({ data, meals }) {
           <ItemWrapInfo>
             <BodyTextWrap>
               <BodyTextFirst>Carbonohidrates:</BodyTextFirst>
-              <BodyTextSecond>{data.carbohydrate}</BodyTextSecond>
+              <BodyTextSecond>{Math.round(data.carbohydrate)}</BodyTextSecond>
             </BodyTextWrap>
             <BodyTextWrap>
               <BodyTextFirst>Protein:</BodyTextFirst>
-              <BodyTextSecond>{data.protein}</BodyTextSecond>
+              <BodyTextSecond>{Math.round(data.protein)}</BodyTextSecond>
             </BodyTextWrap>
             <BodyTextWrap>
               <BodyTextFirst>Fat:</BodyTextFirst>
-              <BodyTextSecond>{data.fat}</BodyTextSecond>
+              <BodyTextSecond>{Math.round(data.fat)}</BodyTextSecond>
             </BodyTextWrap>
             <ButtonIcon
               type="button"

src/components/Food/Doughnuts/DoughnutCalories.jsx

@@ -12,7 +12,8 @@ const DoughnutCalories = ({ calories, baseCalories }) => {
     [calories, baseCalories]
   );
 
-  const arcColor = calories >= baseCalories ? 'red' : 'rgba(69, 255, 188, 1)';
+  const arcColor =
+    calories >= baseCalories ? '#e74a3b' : 'rgba(69, 255, 188, 1)';
   const borderRad = calories >= baseCalories ? [0] : [50];
 
   const data = {
@@ -69,8 +70,8 @@ const DoughnutCalories = ({ calories, baseCalories }) => {
     <div
       className="doughnut"
       style={{
-        height: 168,
-        width: 168,
+        height: '168px',
+        width: '168px',
       }}
     >
       <Doughnut plugins={[textCenterPlugin, backgroundCircle]} data={data} />

src/components/Food/Food.jsx

@@ -1,6 +1,5 @@
-import React, { useEffect } from 'react';
 import { HeadlineSecond } from '../StyledComponents/Components.styled';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { selectDiaryInfo } from '../../redux/diary/selectors';
 import { getTotalNutrients } from '../../helpers';
 import { selectUserInfo } from '../../redux/auth/selectors';
@@ -10,8 +9,6 @@ import DoughnutNutrients from './Doughnuts/DoughnutNutrients';
 import Loader from '../Loader/Loader';
 
 export default function Food() {
-  const dispatch = useDispatch();
-
   const {
     fat: baseFat,
     protein: baseProtein,
@@ -31,7 +28,10 @@ export default function Food() {
         <Loader />
       ) : (
         <WrapMain>
-          <BigDoughnutChart calories={calories} baseCalories={baseCalories} />
+          <BigDoughnutChart
+            calories={Math.round(calories)}
+            baseCalories={baseCalories}
+          />
 
           <NutrientsList>
             <DoughnutNutrients

src/components/Loader/LoadingModal.jsx

@@ -0,0 +1,52 @@
+import Modal from 'react-modal';
+import {
+  BodyTextFirst,
+  HeadlineFirst,
+} from '../StyledComponents/Components.styled';
+import Loader from './Loader';
+Modal.setAppElement('#root');
+
+const customStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
+    borderRadius: '12px',
+    background: '#0F0F0F',
+    boxShadow: '0px 4px 14px 0px rgba(227, 255, 168, 0.20',
+    outline: 'none',
+    border: 'none',
+  },
+  overlay: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 1000,
+  },
+};
+
+export default function LoadingModal({ isOpen }) {
+  return (
+    <Modal isOpen={isOpen} style={customStyles}>
+      <div style={{ padding: '10px', width: '250px' }}>
+        <HeadlineFirst>Please wait a moment...</HeadlineFirst>
+        <BodyTextFirst>
+          <br />
+          The first request may take some time... Don't worry, that's because we
+          use a free deployment service for our backend.
+          <br />
+          <br />
+          Web services on free instances automatically “fall asleep” after 15
+          minutes of inactivity. When a new request comes in for the free
+          service, the service is started again so that it can process the
+          request. This may cause a delay in the first response.
+        </BodyTextFirst>
+        <Loader />
+      </div>
+    </Modal>
+  );
+}
+
+// import LoadingModal from '../Loader/LoadingModal';
+// {isLoading && <LoadingModal isOpen={isLoading} />}