Merge pull request #46 from 001elijah/deadline-update

update deadline
001elijah · Jun 27, 2023 · 6a66fda · 6a66fda
2 parents 0a9ceb6 + d24692b
commit 6a66fda
Show file tree

Hide file tree

Showing 19 changed files with 119 additions and 101 deletions.
diff --git a/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx b/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx
@@ -4,11 +4,11 @@ import { selectorTheme } from 'redux/Auth/authSelectors';
 import PropTypes from 'prop-types';
 import s from './BoxRadioBackgroundGroup.module.scss';
 
-import {currentBoard} from '../../redux/Boards/boardsSelectors'
+import { currentBoard } from '../../redux/Boards/boardsSelectors';
 
 export const BoxRadioBackgroundGroup = ({ valueChange }) => {
-  const board = useSelector(currentBoard)
-  const currentBackgroud = board.background
+  const board = useSelector(currentBoard);
+  const currentBackgroud = board.background;
   const theme = useSelector(selectorTheme);
 
   const [background, setBackground] = useState(currentBackgroud);
@@ -35,7 +35,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
             className={s.radioInput1}
             type="radio"
             onChange={handleCheked}
-            value=''
+            value=""
             name="background"
             id="one"
             checked={background === 'one'}

diff --git a/src/components/CardModalWindow/CardModalWindow.jsx b/src/components/CardModalWindow/CardModalWindow.jsx
@@ -103,5 +103,4 @@ CardModalWindow.propTypes = {
   titleModalButton: PropTypes.string.isRequired,
   onSubmit: PropTypes.func,
   handleToggleModal: PropTypes.func,
-  id: PropTypes.func,
 };
diff --git a/src/components/MainBoard/MainBoard.styled.jsx b/src/components/MainBoard/MainBoard.styled.jsx
@@ -11,7 +11,6 @@ export const Wrapper = styled.div`
   @media screen and (min-width: 375px) {
     padding-left: 0px;
     background-image: url(${props =>
-
       props.BASE_URL + 'mobile/x1/' + props.imgid});
     @media (min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
@@ -48,7 +47,6 @@ export const Wrapper = styled.div`
         props.BASE_URL + 'mobile/x2/' + props.imgid});
     }
   }
-
 `;
 
 export const ColumnsList = styled.ul`
@@ -59,4 +57,3 @@ export const ContentBoard = styled.div`
   wrap: nowrap;
   overflow: auto;
 `;
-
diff --git a/src/components/ModalAddChangeCard/ModalAddChangeCard.jsx b/src/components/ModalAddChangeCard/ModalAddChangeCard.jsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 import { Modal } from 'components/Modal/Modal';
 import sprite from '../../assets/icons/sprite.svg';
-import s from './ReusableColumnModalWindow.module.scss';
+import s from './ModalAddChangeCard.module.scss';
 import { addNewBoard } from '../../redux/Boards/boardsOperations';
 
 export const ReusableColumnModalWindow = ({

diff --git a/src/components/ModalChangeColumn/ModalChangeColumn.jsx b/src/components/ModalChangeColumn/ModalChangeColumn.jsx
@@ -12,7 +12,7 @@ export const ModalChangeColumn = ({ closeModal, columnId, cardId }) => {
   const dispatch = useDispatch();
   const theme = useSelector(selectorTheme);
 
-  const {columns: columnList, _id: boardId} = useSelector(currentBoard);
+  const { columns: columnList, _id: boardId } = useSelector(currentBoard);
 
   return (
     <div className={clsx(s.modalWrapper, s[theme])}>
@@ -22,7 +22,7 @@ export const ModalChangeColumn = ({ closeModal, columnId, cardId }) => {
             <button
               className={clsx(s.button, s[theme], id === columnId && s.current)}
               onClick={() => {
-                dispatch(updateCardColumn({id, boardId, cardId}));
+                dispatch(updateCardColumn({ id, boardId, cardId }));
                 closeModal();
               }}
               type="button"
@@ -44,5 +44,5 @@ export const ModalChangeColumn = ({ closeModal, columnId, cardId }) => {
 ModalChangeColumn.propTypes = {
   closeModal: PropTypes.func,
   columnId: PropTypes.string,
-  cardId: PropTypes.string
+  cardId: PropTypes.string,
 };
diff --git a/src/components/ModalFilter/LabelBlock.jsx b/src/components/ModalFilter/LabelBlock.jsx
@@ -39,9 +39,9 @@ export const LabelBlock = ({ newField }) => {
   const handleOnClickAll = () => {
     setField('none');
   };
- useEffect(()=>{
-  newField(field)
- }, [field, ])
+  useEffect(() => {
+    newField(field);
+  }, [field]);
 
   return (
     <>

diff --git a/src/components/ModalFilter/ModalFilter.jsx b/src/components/ModalFilter/ModalFilter.jsx
@@ -5,19 +5,18 @@ import { LabelBlock } from './LabelBlock';
 // import { BackgroundBlock } from './BackgroundBlock';
 import { useEffect, useState } from 'react';
 import { selectorTheme } from 'redux/Auth/authSelectors';
-import {  useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { BoxRadioBackgroundGroup } from '../BoxRadioBackgroundGroup/BoxRadioBackgroundGroup';
 import clsx from 'clsx';
 
-export const ModalFilter = ({ closeModal, colorNew, iconNew}) => {
+export const ModalFilter = ({ closeModal, colorNew, iconNew }) => {
   const [colorFilter, setColorFilter] = useState('');
   const theme = useSelector(selectorTheme);
-  const [icon, setIcon] = useState('')
+  const [icon, setIcon] = useState('');
 
-  useEffect(()=>{
-    colorNew(colorFilter),
-    iconNew(icon)
-  }, [colorFilter, icon])
+  useEffect(() => {
+    colorNew(colorFilter), iconNew(icon);
+  }, [colorFilter, icon]);
   return (
     <>
       <div className={clsx(s.Wrapper, s[theme])}>

diff --git a/src/components/TaskCard/TaskCard.jsx b/src/components/TaskCard/TaskCard.jsx
@@ -17,8 +17,8 @@ export const TaskCard = ({
   id,
   title,
   description,
-  label = 'Low',
-  deadline = '26/06/2023',
+  label,
+  deadline,
   boardId,
   columnId,
 }) => {
@@ -27,24 +27,30 @@ export const TaskCard = ({
   const [isModalChangeOpen, setIsModalChangeOpen] = useState(false);
   const [isModalEditOpen, setIsModalEditOpen] = useState(false);
 
-  const date = new Date();
-  // const currentTime = `${date.toISOString().split('T')[0]} ${
-  //   date.toTimeString().split(' ')[0]
-  // }`;
-  // const isDeadline = deadline === currentTime.slice(0, -3);
-  const isDeadline = deadline === date.toLocaleDateString('en-GB');
-  // console.log(date);
+  const currentDate = new Date().toLocaleDateString('en-GB');
+  const endDate = new Date(deadline).toLocaleDateString('en-GB');
+
+  const isDeadline = endDate === currentDate;
+
   const openModalChangeColumn = () => {
     setIsModalChangeOpen(true);
   };
 
   const closeModalChangeColumn = () => setIsModalChangeOpen(false);
 
-  const handleEditCard = (dataForm) => {
+  const handleEditCard = dataForm => {
     const { value, coment, color, date } = dataForm;
-    // console.log(dispatch(updateCard(id,{title: value, description: coment, deadline: date, label: color,})))
-    dispatch(updateCard({id, title: value, description: coment, deadline: date, label: color,}))
-  }
+
+    dispatch(
+      updateCard({
+        id,
+        title: value,
+        description: coment,
+        deadline: date,
+        label: color,
+      }),
+    );
+  };
 
   const openModalEditCard = () => {
     setIsModalEditOpen(true);
@@ -64,12 +70,8 @@ export const TaskCard = ({
         )}
       ></div>
       <div className={s.infoWrapper}>
-        <h4 className={clsx(s.title, s[theme])}>
-          {title}
-        </h4>
-        <p className={clsx(s.description, s[theme])}>
-          {description}
-        </p>
+        <h4 className={clsx(s.title, s[theme])}>{title}</h4>
+        <p className={clsx(s.description, s[theme])}>{description}</p>
       </div>
       <div className={clsx(s.controlPanel, s[theme])}>
         <div className={s.statusInfo}>
@@ -89,7 +91,7 @@ export const TaskCard = ({
           </div>
           <div>
             <h5 className={clsx(s.subtitle, s[theme])}>Deadline</h5>
-            <p className={clsx(s.text, s[theme])}>{deadline}</p>
+            <p className={clsx(s.text, s[theme])}>{endDate}</p>
           </div>
         </div>
         <div className={s.iconsWrapper}>
@@ -134,29 +136,30 @@ export const TaskCard = ({
           />
         </BackdropModal>
       )}
-      {isModalEditOpen && 
-      <CardModalWindow
-        modalTitle="Edit card"
-        inputTitle="Edit card"
-        titleModalButton="Edit card"
-        handleToggleModal={closeModalEditCard}
-        // value={title}
-        // coment={description}
-        // date={deadline}
-        // color={label}
-        // title: value, description: coment, deadline: date, label: color
-        onSubmit={handleEditCard}
-      />}
+      {isModalEditOpen && (
+        <CardModalWindow
+          modalTitle="Edit card"
+          inputTitle="Edit card"
+          titleModalButton="Edit card"
+          handleToggleModal={closeModalEditCard}
+          // value={title}
+          // coment={description}
+          // date={deadline}
+          // color={label}
+          // title: value, description: coment, deadline: date, label: color
+          onSubmit={handleEditCard}
+        />
+      )}
     </li>
   );
 };
 
 TaskCard.propTypes = {
-  id: PropTypes.string,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  label: PropTypes.string,
-  deadline: PropTypes.string,
-  boardId: PropTypes.string,
-  columnId: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  deadline: PropTypes.string.isRequired,
+  boardId: PropTypes.string.isRequired,
+  columnId: PropTypes.string.isRequired,
 };
diff --git a/src/components/TaskColumn/TaskColumn.jsx b/src/components/TaskColumn/TaskColumn.jsx
@@ -11,16 +11,25 @@ import { currentBoard } from 'redux/Boards/boardsSelectors';
 
 export const TaskColumn = ({ columnId }) => {
   const dispatch = useDispatch();
-  const {_id} = useSelector(currentBoard);
+  const { _id } = useSelector(currentBoard);
   const [modalOpen, setModalOpen] = useState(false);
   const ModalWindowOpen = () => setModalOpen(true);
   const modalWindowClose = () => setModalOpen(false);
   const cards = useSelector(selectCards);
-  
-  const handleAddCard = (dataForm) => {
+
+  const handleAddCard = dataForm => {
     const { value, coment, color, date } = dataForm;
-    dispatch(addCard({title: value, description: coment, deadline: date, label: color, columnId, boardId: _id}))
-  }
+    dispatch(
+      addCard({
+        title: value,
+        description: coment,
+        deadline: date,
+        label: color,
+        columnId,
+        boardId: _id,
+      }),
+    );
+  };
 
   return (
     <>

diff --git a/src/index.scss b/src/index.scss
@@ -51,7 +51,7 @@ code {
 ::-webkit-scrollbar {
   width: 8px;
   height: 12px;
-  margin-left: 8px; 
+  margin-left: 8px;
   margin-right: 2px;
 }
 

diff --git a/src/redux/Boards/boardsOperations.js b/src/redux/Boards/boardsOperations.js
@@ -1,15 +1,13 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
-
 import {
   getListOfBoardsApi,
   addBoardApi,
   getBoardByIdApi,
-  updateBoardApi
+  updateBoardApi,
 } from '../../services/backendAPI';
 import { getListOfCards } from '../../redux/Cards/cardsOperations';
 
-
 export const addNewBoard = createAsyncThunk(
   'boards/addboard',
   async (dataBoard, { getState, rejectWithValue }) => {
@@ -49,7 +47,7 @@ export const getListOfBoards = createAsyncThunk(
     try {
       const boardsList = await getListOfBoardsApi(token);
       setTimeout(() => {
-        dispatch(getListOfCards())
+        dispatch(getListOfCards());
       }, 0);
       return boardsList;
     } catch (error) {

diff --git a/src/redux/Boards/boardsSlice.js b/src/redux/Boards/boardsSlice.js
@@ -25,7 +25,6 @@ const boardsSlice = createSlice({
       })
       .addCase(updateBoard.fulfilled, (state, { payload }) => {
         state = payload;
-
       });
   },
 });

diff --git a/src/redux/Cards/cardsOperations.js b/src/redux/Cards/cardsOperations.js
@@ -25,7 +25,8 @@ const returnStatusNotify = status => {
   }
 };
 
-export const getListOfCards = createAsyncThunk('cards/getListOfCards',
+export const getListOfCards = createAsyncThunk(
+  'cards/getListOfCards',
   async (_, { getState, rejectWithValue }) => {
     const { token } = getState().auth;
     try {
@@ -34,7 +35,8 @@ export const getListOfCards = createAsyncThunk('cards/getListOfCards',
     } catch (error) {
       rejectWithValue(error.message);
     }
-  })
+  },
+);
 
 export const addCard = createAsyncThunk(
   'card/add',
@@ -55,9 +57,14 @@ export const addCard = createAsyncThunk(
 export const updateCard = createAsyncThunk(
   'card/update',
   async (data, { rejectWithValue }) => {
-    const {title, description, deadline, label} = data
+    const { title, description, deadline, label } = data;
     try {
-      const newData = await updateCardApi(data.id, {title, description, deadline, label});
+      const newData = await updateCardApi(data.id, {
+        title,
+        description,
+        deadline,
+        label,
+      });
       Notiflix.Notify.success('Your card has been successfully updated');
       return newData;
     } catch (error) {

diff --git a/src/redux/Cards/cardsSelectors.js b/src/redux/Cards/cardsSelectors.js
@@ -1 +1 @@
-export const selectCards = state => state.cards.items;
+export const selectCards = state => state.cards.items;