Merge pull request #43 from 001elijah/updateCardColumn

Get cards, move cards
001elijah · Jun 27, 2023 · 5a7853c · 5a7853c
2 parents 3436945 + 481f464
commit 5a7853c
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 41 deletions.
diff --git a/src/components/BoardList/BoardList.jsx b/src/components/BoardList/BoardList.jsx
@@ -11,7 +11,7 @@ export const BoardList = ({ theme, boards }) => {
     <ul className={s.list}>
       {boards.map(({ title, icon, _id }) => (
         <BoardItem
-          key={title}
+          key={_id}
           id={_id}
           boardName={title}
           icon={`${sprite}#${icon}`}

diff --git a/src/components/MainBoard/MainBoard.styled.jsx b/src/components/MainBoard/MainBoard.styled.jsx
@@ -9,7 +9,7 @@ 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});
+    props.BASE_URL + 'mobile/x1/' + props.imgid});
   }
   @media screen and (min-width: 768px) {
     padding-left: 24px;
@@ -26,12 +26,13 @@ export const Wrapper = styled.div`
     (min-resolution: 2dppx) {
     @content;
   }
-`;
+`
+
 export const ColumnsList = styled.ul`
   display: flex;
 `;
 export const ContentBoard = styled.div`
-  display: flex;
-  wrap: nowrap;
-  overflow: auto;
-`;
+display:flex;
+flex-wrap:nowrap;
+overflow:auto;
+`
diff --git a/src/components/ModalChangeColumn/ModalChangeColumn.jsx b/src/components/ModalChangeColumn/ModalChangeColumn.jsx
@@ -3,35 +3,31 @@ import { useSelector, useDispatch } from 'react-redux';
 import clsx from 'clsx';
 
 import { selectorTheme } from 'redux/Auth/authSelectors';
-// import { selectorColumns } from 'redux/Column/columnSelectors';
 import { updateCardColumn } from 'redux/Cards/cardsOperations';
+import { currentBoard } from 'redux/Boards/boardsSelectors';
 import sprite from '../../assets/icons/sprite.svg';
 import s from './ModalChangeColumn.module.scss';
 
-export const ModalChangeColumn = ({ closeModal, columnId = 3 }) => {
+export const ModalChangeColumn = ({ closeModal, columnId, cardId }) => {
   const dispatch = useDispatch();
-  // const columnList = useSelector(selectorColumns);
   const theme = useSelector(selectorTheme);
-  const columnList = [
-    { id: 1, name: 'to do' },
-    { id: 2, name: 'in progress' },
-    { id: 3, name: 'done' },
-  ];
+
+  const {columns: columnList, _id: boardId} = useSelector(currentBoard);
 
   return (
     <div className={clsx(s.modalWrapper, s[theme])}>
       <ul>
-        {columnList.map(({ id, name }) => (
+        {columnList.map(({ id, title }) => (
           <li key={id} className={s.item}>
             <button
               className={clsx(s.button, s[theme], id === columnId && s.current)}
               onClick={() => {
-                dispatch(updateCardColumn(id));
+                dispatch(updateCardColumn({id, boardId, cardId}));
                 closeModal();
               }}
               type="button"
             >
-              {name}
+              {title}
               <svg
                 className={clsx(s.icon, s[theme], id === columnId && s.current)}
               >
@@ -48,4 +44,5 @@ export const ModalChangeColumn = ({ closeModal, columnId = 3 }) => {
 ModalChangeColumn.propTypes = {
   closeModal: PropTypes.func,
   columnId: PropTypes.string,
+  cardId: PropTypes.string
 };
diff --git a/src/components/TaskCard/TaskCard.jsx b/src/components/TaskCard/TaskCard.jsx
@@ -47,7 +47,7 @@ export const TaskCard = ({
   // };
 
   return (
-    <li key={id} className={clsx(s.cardWrapper, s[theme])}>
+    <li className={clsx(s.cardWrapper, s[theme])}>
       <div
         className={clsx(
           s.priorityLine,
@@ -59,13 +59,9 @@ export const TaskCard = ({
       <div className={s.infoWrapper}>
         <h4 className={clsx(s.title, s[theme])}>
           {title}
-          Lorem, ipsum dolor.
         </h4>
         <p className={clsx(s.description, s[theme])}>
           {description}
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-          laboriosam numquam vero totam quidem nostrum deserunt harum voluptate,
-          quaerat illum.
         </p>
       </div>
       <div className={clsx(s.controlPanel, s[theme])}>
@@ -127,6 +123,7 @@ export const TaskCard = ({
             closeModal={closeModalChangeColumn}
             boardId={boardId}
             columnId={columnId}
+            cardId={id}
           />
         </BackdropModal>
       )}

diff --git a/src/components/TaskColumn/TaskColumn.jsx b/src/components/TaskColumn/TaskColumn.jsx
@@ -1,18 +1,44 @@
+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 { useSelector } from 'react-redux';
+import { selectCards } from 'redux/Cards/cardsSelectors';
+import shortid from 'shortid';
 
-export const TaskColumn = () => {
+export const TaskColumn = ({ columnId }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const ModalWindowOpen = () => setModalOpen(true);
   const modalWindowClose = () => setModalOpen(false);
-
+  const cards = useSelector(selectCards);
+  // const columnTasks = cards.length && cards.filter(card => {
+  //   return card.columnId === columnId
+  // });
+
+
+// id,
+//   title,
+//   description,
+//   label = 'Low',
+//   deadline = '26/06/2023',
+//   boardId,
+//   columnId,
   return (
     <>
       <ul>
-        <TaskCard />
+        {cards.filter(card => {
+    return card.columnId === columnId
+  }).map(task => <TaskCard
+          key={shortid.generate()}
+          id={task._id}
+          title={task.title} 
+          label={task.label} 
+          deadline={task.deadline} 
+          boardId={task.boardId} 
+          columnId={task.columnId} />)}
+        {/* <TaskCard columnId={columnId} /> */}
       </ul>
       <AddButton
         title="Add another card"
@@ -31,3 +57,9 @@ export const TaskColumn = () => {
     </>
   );
 };
+
+
+TaskColumn.propTypes = {
+  columnId: PropTypes.string,
+  boardId: PropTypes.string,
+};
diff --git a/src/components/TasksColumnHeader/TasksColumnHeader.jsx b/src/components/TasksColumnHeader/TasksColumnHeader.jsx
@@ -47,7 +47,7 @@ export const TasksColumnHeader = ({ title, id, boardId }) => {
           </li>
         </ul>
       </div>
-      <TaskColumn />
+      <TaskColumn key={id} columnId={id} />
       {isModalOpen && (
         <ColumnModalWindow
           inputTitle={title}

diff --git a/src/redux/Boards/boardsOperations.js b/src/redux/Boards/boardsOperations.js
@@ -5,6 +5,7 @@ import {
   addBoardApi,
   getBoardByIdApi,
 } from '../../services/backendAPI';
+import { getListOfCards } from 'redux/Cards/cardsOperations';
 
 export const addNewBoard = createAsyncThunk(
   'boards/addboard',
@@ -40,10 +41,13 @@ export const getBoardById = createAsyncThunk(
 
 export const getListOfBoards = createAsyncThunk(
   'boards/getListOfBoards',
-  async (_, { getState, rejectWithValue }) => {
+  async (_, { getState, rejectWithValue, dispatch }) => {
     const { token } = getState().auth;
     try {
       const boardsList = await getListOfBoardsApi(token);
+      setTimeout(() => {
+        dispatch(getListOfCards())
+      }, 0);
       return boardsList;
     } catch (error) {
       rejectWithValue(error.message);

diff --git a/src/redux/Cards/cardsOperations.js b/src/redux/Cards/cardsOperations.js
@@ -3,6 +3,7 @@ import Notiflix from 'notiflix';
 
 import {
   addCardApi,
+  getListOfCardsApi,
   removeCardApi,
   updateCardApi,
   updateCardColumnApi,
@@ -24,6 +25,17 @@ const returnStatusNotify = status => {
   }
 };
 
+export const getListOfCards = createAsyncThunk('cards/getListOfCards',
+  async (_, { getState, rejectWithValue }) => {
+    const { token } = getState().auth;
+    try {
+      const cardsList = await getListOfCardsApi(token);
+      return cardsList;
+    } catch (error) {
+      rejectWithValue(error.message);
+    }
+  })
+
 export const addCard = createAsyncThunk(
   'card/add',
   async (newCard, { rejectWithValue }) => {
@@ -57,12 +69,12 @@ export const updateCard = createAsyncThunk(
 );
 
 export const updateCardColumn = createAsyncThunk(
-  'card/column/update',
-  async (id, { rejectWithValue }) => {
+  'cards/updateCardColumn',
+  async (columnData, { rejectWithValue }) => {
     try {
-      const data = await updateCardColumnApi(id);
+      await updateCardColumnApi(columnData);
       Notiflix.Notify.success('Your card has been transferred successfully');
-      return data;
+      return columnData;
     } catch (error) {
       const status = error.response.status;
       returnStatusNotify(status);

diff --git a/src/redux/Cards/cardsSelectors.js b/src/redux/Cards/cardsSelectors.js
@@ -1 +1 @@
-export const selectorCards = state => state.cards.items;
+export const selectCards = state => state.cards.items;
diff --git a/src/redux/Cards/cardsSlice.js b/src/redux/Cards/cardsSlice.js
@@ -5,6 +5,7 @@ import {
   addCard,
   removeCard,
   updateCardColumn,
+  getListOfCards,
 } from './cardsOperations';
 
 const cardsSlice = createSlice({
@@ -16,6 +17,9 @@ const cardsSlice = createSlice({
   },
   extraReducers: builder => {
     builder
+      .addCase(getListOfCards.fulfilled, (state, { payload }) => {
+        state.items.push(...payload);
+      })
       .addCase(addCard.fulfilled, (state, { payload }) => {
         return {
           ...state,
@@ -39,12 +43,13 @@ const cardsSlice = createSlice({
           items: state.items.filter(el => el.id !== payload),
         };
       })
-      .addCase(updateCardColumn.fulfilled, (state, { payload }) => {
+      .addCase(updateCardColumn.fulfilled, (state, { payload }) =>  {
         return {
-          ...state,
-          isLoading: false,
-          items: state.items.map(el =>
-            el.id !== payload.id ? el : { ...el, columnId: payload.columnId },
+          items: state.items.map(card =>
+          {
+            console.log(card._id, payload)
+            return card._id === payload.cardId ? { ...card, columnId: payload.id } : card
+          },
           ),
         };
       })

diff --git a/src/services/backendAPI.js b/src/services/backendAPI.js
@@ -66,7 +66,7 @@ export const getListOfBoardsApi = async userToken => {
 
 export const addColumnApi = async (dataColumn, userToken) => {
   token.set(userToken);
-  const { data } = await axios.post('board/column', dataColumn);
+  const { data } = await axios.post('/board/column', dataColumn);
   return data;
 };
 export const editColumnApi = async (
@@ -93,6 +93,14 @@ export const sendEmailApi = async userEmail => {
   return data.message;
 };
 
+//---------------------------------------------CARDS---------------------//
+
+export const getListOfCardsApi = async userToken => {
+  token.set(userToken);
+  const { data } = await axios.get('/card/');
+  return data;
+};
+
 export const addCardApi = async newCard => {
   const { data } = await axios.post('/card', newCard);
   return data;
@@ -103,8 +111,9 @@ export const updateCardApi = async (id, cardData) => {
   return data;
 };
 
-export const updateCardColumnApi = async id => {
-  const { data } = await axios.patch(`/card/column/${id}`);
+export const updateCardColumnApi = async (columnData) => {
+  const { id: columnId, boardId, cardId } = columnData;
+  const { data } = await axios.patch(`/card/column/${cardId}`, {boardId, columnId});
   return data;
 };