Merge pull request #44 from Tasitaforme/diaryPage

did edit, addMore, delete

src/pages/DiaryPage/DiaryItem.jsx

@@ -21,22 +21,29 @@ export default function DiaryItem({ data, type }) {
             <ListItem key={item?.id || index}>
               <p>{index + 1}</p>
               {item?.id ? (
-                <RecordedMeal />
+                <RecordedMeal
+                  data={item}
+                  type={type}
+                  modalData={modalData}
+                  setModalData={setModalData}
+                />
               ) : index === 0 || arr[index - 1].id ? (
                 <RecordBtn onClick={() => setModalData({ type })}>
                   <StyledAddMealIcon>
                     <use href={`${sprite}#add`} />
                   </StyledAddMealIcon>
                   <RecordBtnLabel>Record your meal</RecordBtnLabel>
                 </RecordBtn>
-              ) : (
-                <RecordedMeal />
-              )}
+              ) : null}
             </ListItem>
           );
         })}
       </List>
-      <DiaryModal modalData={modalData} setModalData={setModalData} />
+      <DiaryModal
+        key={modalData?.id}
+        modalData={modalData}
+        setModalData={setModalData}
+      />
     </>
   );
 }

src/pages/DiaryPage/DiaryModal.jsx

@@ -27,35 +27,48 @@ import sprite from '../../assets/sprite.svg';
 import { FormikStyledField } from '../../components/StyledComponents/Formik.styled';
 import { diarySchema } from '../../schemas/formikDiary';
 import { useCallback } from 'react';
-import { createFoodDiary } from '../../redux/diary/operations';
+import {
+  createFoodDiary,
+  deleteFoodDiary,
+  updateFoodDiary,
+} from '../../redux/diary/operations';
 import { useDispatch } from 'react-redux';
 
 export const DiaryModal = ({ modalData, setModalData }) => {
   const dispatch = useDispatch();
   const {
+    id,
     type,
     name = '',
     carbohydrate = '',
     protein = '',
     fat = '',
     calories = '',
   } = modalData;
+
   const onSubmit = useCallback(
     async (formData) => {
-      console.log(formData);
       try {
-        const res = await dispatch(
-          createFoodDiary({ ...formData, diary: type })
-        );
+        if (id) {
+          await dispatch(
+            updateFoodDiary({ id, body: { ...formData, diary: type } })
+          );
+        } else {
+          await dispatch(createFoodDiary({ ...formData, diary: type }));
+        }
         setModalData(false);
-        console.log('Res', res);
       } catch (err) {
         console.log('ERR', err);
       }
     },
-    [dispatch, setModalData, type]
+    [dispatch, id, type]
   );
 
+  const handleDelete = async () => {
+    await dispatch(deleteFoodDiary({ id, diary: type }));
+    setModalData(false);
+  };
+
   return (
     <ModalMain modalActive={!!modalData} setModalActive={setModalData}>
       <ModalWrapper>
@@ -75,9 +88,9 @@ export const DiaryModal = ({ modalData, setModalData }) => {
           validationSchema={diarySchema}
           onSubmit={onSubmit}
         >
-          {({ errors, touched, isSubmitting, isValid, dirty }) => {
+          {({ errors, touched, isSubmitting, isValid, dirty, submitForm }) => {
             return (
-              <FormikWrapper>
+              <FormikWrapper as="div">
                 <FormikWrapperTablet>
                   <NameForm>
                     <FormikStyledField
@@ -155,21 +168,30 @@ export const DiaryModal = ({ modalData, setModalData }) => {
                         }
                       />
                     </CaloriesForm>
-                    <TrashModalIcon>
-                      <use href={`${sprite}#trash`} />
-                    </TrashModalIcon>
+                    {modalData?.id ? (
+                      <TrashModalIcon onClick={handleDelete}>
+                        <use href={`${sprite}#trash`} />
+                      </TrashModalIcon>
+                    ) : null}
                   </FormikWrapperMobile>
                 </FormikWrapperTablet>
-                <AddMoreBtn>
+                <AddMoreBtn
+                  onClick={async () => {
+                    await submitForm();
+                    setModalData({ type });
+                  }}
+                >
                   <AddMoreIcon>
                     <use href={`${sprite}#add`} />
                   </AddMoreIcon>
                   <AddMoreLabel>Add more</AddMoreLabel>
                 </AddMoreBtn>
                 <BtnWrapper>
                   <ConfirmModalBtn
-                    type="submit"
                     disabled={!isValid || isSubmitting || !dirty || !touched}
+                    onClick={async () => {
+                      await submitForm();
+                    }}
                   >
                     Confirm
                   </ConfirmModalBtn>

src/pages/DiaryPage/DiaryPage.styled.js

@@ -108,13 +108,12 @@ export const List = styled.ul`
   margin-bottom: 24px;
 
   @media (min-width: 1200px) {
-    margin-bottom: 0%;
+    margin-bottom: 0;
   }
 `;
 
 export const ListItem = styled.li`
   display: flex;
-  align-items: center;
 
   &:not(:last-child) {
     margin-bottom: 30px;
@@ -234,6 +233,7 @@ export const TrashModalIcon = styled.svg`
   height: 20px;
   stroke: var(--green-light);
   margin-top: 10px;
+  cursor: pointer;
 `;
 
 export const AddMoreBtn = styled.button`
@@ -291,12 +291,23 @@ export const CancelModalBtn = styled.button`
 `;
 
 export const RecordedMealWrapper = styled.div`
+  margin-left: 16px;
+`;
+
+export const MealsNameWrapper = styled.div`
   display: flex;
-  align-items: center;
 `;
 
 export const MealsName = styled.h4`
   font-size: 14px;
+  font-weight: 400;
+`;
+
+export const EditBtn = styled.button`
+  display: flex;
+  margin-left: auto;
+  cursor: pointer;
+  padding: 0;
 `;
 
 export const EditIcon = styled.svg`
@@ -310,3 +321,22 @@ export const EditLabel = styled.p`
   color: var(--grey-light);
   margin-left: 6px;
 `;
+
+export const RecordedNutritionsWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+  gap: 12px;
+  margin-top: 6px;
+
+  /* @media (min-width: 768px) {
+    display: flex;
+    justify-content: flex-end;
+    gap: 30px;
+    margin-right: 80px;
+  } */
+`;
+
+export const RecordedNutritions = styled.p`
+  font-size: 12px;
+  color: var(--grey-light);
+`;

src/pages/DiaryPage/RecordedMeal.jsx

@@ -1,25 +1,34 @@
 import {
+  EditBtn,
   EditIcon,
   EditLabel,
   MealsName,
+  MealsNameWrapper,
   RecordedMealWrapper,
+  RecordedNutritions,
+  RecordedNutritionsWrapper,
 } from './DiaryPage.styled';
 import sprite from '../../assets/sprite.svg';
 
-export default function RecordedMeal(...data) {
-  const recorded = {
-    name: data.name,
-    carbohydrate: data.carbohydrate,
-    protein: data.protein,
-    fat: data.fat,
-  };
+export default function RecordedMeal({ data, type, setModalData }) {
   return (
-    <RecordedMealWrapper>
-      <MealsName>{recorded.name}</MealsName>
-      <EditIcon>
-        <use href={`${sprite}#edit`} />
-      </EditIcon>
-      <EditLabel>Edit</EditLabel>
-    </RecordedMealWrapper>
+    <>
+      <RecordedMealWrapper>
+        <MealsNameWrapper>
+          <MealsName>{data.name}</MealsName>
+          <EditBtn onClick={() => setModalData({ type, ...data })}>
+            <EditIcon>
+              <use href={`${sprite}#edit`} />
+            </EditIcon>
+            <EditLabel>Edit</EditLabel>
+          </EditBtn>
+        </MealsNameWrapper>
+        <RecordedNutritionsWrapper>
+          <RecordedNutritions>Carb. {data.carbohydrate}</RecordedNutritions>
+          <RecordedNutritions>Prot. {data.protein}</RecordedNutritions>
+          <RecordedNutritions>Fat. {data.fat}</RecordedNutritions>
+        </RecordedNutritionsWrapper>
+      </RecordedMealWrapper>
+    </>
   );
 }

src/redux/diary/diarySlice.js

@@ -49,8 +49,8 @@ const handleGetDiaryToday = (state, { payload }) => {
 };
 
 const handleCreateFoodDiary = (state, { payload }) => {
-  const { diary, ...data } = payload;
-  state.meals[diary.toLowerCase()].push(data);
+  const { diary, _id, ...data } = payload;
+  state.meals[diary.toLowerCase()].push({ ...data, id: data.id || _id });
 
   state.calories = payload.calories + data.calories || 0;
   state.protein = payload.protein + data.protein || 0;
@@ -62,27 +62,41 @@ const handleCreateFoodDiary = (state, { payload }) => {
 
 const handleUpdateFoodDiary = (state, { payload }) => {
   const { diary, ...data } = payload;
-  state.meals[diary.toLowerCase()].push(data);
 
-  state.calories = payload.calories + data.calories || 0;
-  state.protein = payload.protein + data.protein || 0;
-  state.carbohydrate = payload.carbohydrate + data.carbohydrate || 0;
-  state.fat = payload.fat + data.fat || 0;
+  state.meals[diary.toLowerCase()] = state.meals[diary.toLowerCase()].map(
+    (item) => {
+      if (item.id === data.id) {
+        state.calories = state.calories - item.calories + data.calories;
+        state.protein = state.protein - item.protein + data.protein;
+        state.carbohydrate =
+          state.carbohydrate - item.carbohydrate + data.carbohydrate;
+        state.fat = state.fat - item.fat + data.fat;
+        return data;
+      } else {
+        return item;
+      }
+    }
+  );
 
   handleFulfilled(state);
 };
 
 const handleDeleteFoodDiary = (state, { payload }) => {
-  const { diary, ...data } = payload;
-  state.meals[diary.toLowerCase()].push(data);
-
-  state.calories = payload.calories - data.calories || 0;
-  state.protein = payload.protein - data.protein || 0;
-  state.carbohydrate = payload.carbohydrate - data.carbohydrate || 0;
-  state.fat = payload.fat - data.fat || 0;
-
-  const index = state.items.findIndex((data) => data.id === payload.id);
-  state.items.splice(index, 1);
+  const { diary, id } = payload;
+  state.meals[diary.toLowerCase()] = state.meals[diary.toLowerCase()].filter(
+    (item) => {
+      if (item.id === id) {
+        state.calories = payload.calories - (item.calories || 0);
+        state.protein = payload.protein - (item.protein || 0);
+        state.carbohydrate = payload.carbohydrate - (item.carbohydrate || 0);
+        state.fat = payload.fat - (item.fat || 0);
+
+        return false;
+      } else {
+        return true;
+      }
+    }
+  );
 
   handleFulfilled(state);
 };

src/redux/diary/operations.js

@@ -44,7 +44,7 @@ export const updateFoodDiary = createAsyncThunk(
   async ({ id, body }, thunkAPI) => {
     try {
       const { data } = await instance.put(`/api/user/food/${id}`, body);
-      return data;
+      return { id, ...data };
     } catch (error) {
       return thunkAPI.rejectWithValue(error.message);
     }
@@ -58,10 +58,10 @@ export const updateFoodDiary = createAsyncThunk(
  */
 export const deleteFoodDiary = createAsyncThunk(
   'user/diary/delete',
-  async (id, thunkAPI) => {
+  async ({ id, diary }, thunkAPI) => {
     try {
-      const { data } = await instance.delete(`/api/user/food/${id}`);
-      return data;
+      await instance.delete(`/api/user/food/${id}`);
+      return { id, diary };
     } catch (error) {
       return thunkAPI.rejectWithValue(error.message);
     }

src/schemas/formikDiary.js

@@ -5,21 +5,21 @@ export const diarySchema = Yup.object().shape({
   carbohydrate: Yup.number()
     .required()
     .positive('Carbonohidrates must be a positive number')
-    .min(100, 'Carbonohidrates must be greater than or equal to 100')
-    .max(2000, 'Carbonohidrates must be lower than or equal to 2000'),
+    .min(1, 'Carbonohidrates must be greater than or equal to 100')
+    .max(6000, 'Carbonohidrates must be lower than or equal to 2000'),
   protein: Yup.number()
     .required()
     .positive('Protein must be a positive number')
-    .min(100, 'Protein must be greater than or equal to 100')
-    .max(2000, 'Protein must be lower than or equal to 2000'),
+    .min(1, 'Protein must be greater than or equal to 100')
+    .max(6000, 'Protein must be lower than or equal to 2000'),
   fat: Yup.number()
     .required()
     .positive('Fat must be a positive number')
-    .min(100, 'Fat must be greater than or equal to 100')
-    .max(2000, 'Fat must be lower than or equal to 2000'),
+    .min(1, 'Fat must be greater than or equal to 100')
+    .max(6000, 'Fat must be lower than or equal to 2000'),
   calories: Yup.number()
     .required()
     .positive('Fat must be a positive number')
-    .min(100, 'Fat must be greater than or equal to 100')
-    .max(2000, 'Fat must be lower than or equal to 2000'),
+    .min(1, 'Fat must be greater than or equal to 100')
+    .max(6000, 'Fat must be lower than or equal to 2000'),
 });