Merge pull request #45 from 001elijah/column-update

create card edit add delete

src/components/TaskCard/TaskCard.jsx

@@ -5,12 +5,13 @@ import shortid from 'shortid';
 import PropTypes from 'prop-types';
 
 import sprite from '../../assets/icons/sprite.svg';
-import { removeCard } from 'redux/Cards/cardsOperations';
+import { removeCard, updateCard } from 'redux/Cards/cardsOperations';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 import { TaskControlButton } from '../TaskControlButton/TaskControlButton';
 import { ModalChangeColumn } from 'components/ModalChangeColumn/ModalChangeColumn';
 import { BackdropModal } from 'components/BackdropMain/BackdropMain';
 import s from './TaskCard.module.scss';
+import { CardModalWindow } from 'components/CardModalWindow/CardModalWindow';
 
 export const TaskCard = ({
   id,
@@ -24,7 +25,7 @@ export const TaskCard = ({
   const dispatch = useDispatch();
   const theme = useSelector(selectorTheme);
   const [isModalChangeOpen, setIsModalChangeOpen] = useState(false);
-  // const [isModalEditOpen, setIsModalEditOpen] = useState(false);
+  const [isModalEditOpen, setIsModalEditOpen] = useState(false);
 
   const date = new Date();
   // const currentTime = `${date.toISOString().split('T')[0]} ${
@@ -39,21 +40,27 @@ export const TaskCard = ({
 
   const closeModalChangeColumn = () => setIsModalChangeOpen(false);
 
-  // const openModalEditCard = () => {
-  //   setIsModalEditOpen(true);
-  // };
-  // const closeModalEditCard = () => {
-  //   setIsModalEditOpen(false);
-  // };
+  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,}))
+  }
+
+  const openModalEditCard = () => {
+    setIsModalEditOpen(true);
+  };
+  const closeModalEditCard = () => {
+    setIsModalEditOpen(false);
+  };
 
   return (
     <li className={clsx(s.cardWrapper, s[theme])}>
       <div
         className={clsx(
           s.priorityLine,
-          label === 'Medium' && s.bg_medium,
-          label === 'High' && s.bg_high,
-          label === 'Low' && s.bg_low,
+          label === 'medium' && s.bg_medium,
+          label === 'high' && s.bg_high,
+          label === 'low' && s.bg_low,
         )}
       ></div>
       <div className={s.infoWrapper}>
@@ -72,9 +79,9 @@ export const TaskCard = ({
               <div
                 className={clsx(
                   s.priorityCircle,
-                  label === 'Low' && s.bg_low,
-                  label === 'Medium' && s.bg_medium,
-                  label === 'High' && s.bg_high,
+                  label === 'low' && s.bg_low,
+                  label === 'medium' && s.bg_medium,
+                  label === 'high' && s.bg_high,
                 )}
               ></div>
               <p className={clsx(s.text, s[theme])}>{label}</p>
@@ -104,7 +111,7 @@ export const TaskCard = ({
               <TaskControlButton
                 icon="#icon-pencil"
                 onClick={() => {
-                  // openModalEditCard();
+                  openModalEditCard();
                 }}
               />
             </li>
@@ -127,7 +134,19 @@ export const TaskCard = ({
           />
         </BackdropModal>
       )}
-      {/* {isModalEditOpen && <ModalEditCard closeModal={closeModalEditCard} />} */}
+      {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>
   );
 };

src/components/TaskColumn/TaskColumn.jsx

@@ -1,18 +1,27 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { TaskCard } from '../TaskCard/TaskCard';
 import { AddButton } from '../ButtonAddColumn/ButtonAddColumn';
 import { CardModalWindow } from '../CardModalWindow/CardModalWindow';
 import { useState } from 'react';
 import { selectCards } from 'redux/Cards/cardsSelectors';
+import { addCard } from 'redux/Cards/cardsOperations';
 import shortid from 'shortid';
+import { currentBoard } from 'redux/Boards/boardsSelectors';
 
 export const TaskColumn = ({ columnId }) => {
+  const dispatch = useDispatch();
+  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 { value, coment, color, date } = dataForm;
+    dispatch(addCard({title: value, description: coment, deadline: date, label: color, columnId, boardId: _id}))
+  }
+
   return (
     <>
       <ul>
@@ -26,6 +35,7 @@ export const TaskColumn = ({ columnId }) => {
               id={task._id}
               title={task.title}
               label={task.label}
+              description={task.description}
               deadline={task.deadline}
               boardId={task.boardId}
               columnId={task.columnId}
@@ -44,6 +54,7 @@ export const TaskColumn = ({ columnId }) => {
           inputTitle="Add card"
           titleModalButton="Add card"
           handleToggleModal={modalWindowClose}
+          onSubmit={handleAddCard}
           // handleToggleModal={ModalWindowClose}
         />
       )}

src/redux/Cards/cardsOperations.js

@@ -54,9 +54,10 @@ export const addCard = createAsyncThunk(
 
 export const updateCard = createAsyncThunk(
   'card/update',
-  async (id, data, { rejectWithValue }) => {
+  async (data, { rejectWithValue }) => {
+    const {title, description, deadline, label} = data
     try {
-      const newData = await updateCardApi(id, data);
+      const newData = await updateCardApi(data.id, {title, description, deadline, label});
       Notiflix.Notify.success('Your card has been successfully updated');
       return newData;
     } catch (error) {

src/redux/Cards/cardsSlice.js

@@ -21,36 +21,26 @@ const cardsSlice = createSlice({
         state.items.push(...payload);
       })
       .addCase(addCard.fulfilled, (state, { payload }) => {
-        return {
-          ...state,
-          isLoading: false,
-          items: state.items.push(payload),
-        };
+        state.items.push(payload)
       })
       .addCase(updateCard.fulfilled, (state, { payload }) => {
         return {
-          ...state,
-          isLoading: false,
-          items: state.items.map(el =>
-            el.id !== payload.id ? el : { ...el, ...payload },
+          items: state.items.map(card => {
+            return card._id !== payload._id ? card : payload
+          }
           ),
         };
       })
       .addCase(removeCard.fulfilled, (state, { payload }) => {
         return {
           ...state,
           isLoading: false,
-          items: state.items.filter(el => el.id !== payload),
+          items: state.items.filter(el => el._id !== payload),
         };
       })
       .addCase(updateCardColumn.fulfilled, (state, { payload }) =>  {
         return {
-          items: state.items.map(card =>
-          {
-            console.log(card._id, payload)
-            return card._id === payload.cardId ? { ...card, columnId: payload.id } : card
-          },
-          ),
+          items: state.items.map(card => card._id === payload.cardId ? { ...card, columnId: payload.id } : card),
         };
       })
       .addMatcher(