Merge pull request #37 from 001elijah/dashboard

fix

src/components/BoardList/BoardList.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { useState } from 'react';
 
 export const BoardList = ({ theme, boards }) => {
+
   const [current, setCurrent] = useState(null);
 
   return (
@@ -16,9 +17,8 @@ export const BoardList = ({ theme, boards }) => {
           boardName={title}
           icon={`${sprite}#${icon}`}
           theme={theme}
-          onClick={() => setCurrent(title)}
-          // onClick={getBoard(_id)}
           isCurrent={current === title && true}
+          onClick={() => setCurrent(title)}
         />
       ))}
     </ul>

src/components/ColumnModalWindow/ColumnModalWindow.jsx

@@ -7,25 +7,31 @@ import sprite from '../../assets/icons/sprite.svg';
 import s from './ColumnModalWindow.module.scss';
 import { addColumn, editColumn } from '../../redux/Columns/ColumnOperation';
 
+import { getBoardById } from '../../redux/Boards/boardsOperations';
+
 export const ColumnModalWindow = ({
   inputTitle,
   titleModalButton,
   modalTitle,
   onClick,
   boardId,
-  columnId
+  columnId,
 }) => {
   const dispatch = useDispatch();
   const [value, setValue] = useState('');
   const theme = useSelector(selectorTheme);
 
+const updateBoard = ()=>{
+  setTimeout(()=>{dispatch(getBoardById(boardId)),0 }) 
+}
+
   const handleSubmit = e => {
     e.preventDefault();
-    if (modalTitle === 'Edit column') {      
+    if (modalTitle === 'Edit column') {
       const editColumnTitle = {
         title: value,
         columnId,
-        boardId
+        boardId,
       };
       dispatch(editColumn(editColumnTitle));
     } else {
@@ -37,6 +43,7 @@ export const ColumnModalWindow = ({
     }
     setValue('');
     onClick();
+    updateBoard()
   };
 
   return (

src/components/MainBoard/MainBoard.jsx

@@ -4,15 +4,22 @@ import PropTypes from 'prop-types';
 import { HeaderDashBoard } from '../HeaderDashBoard/HeaderDashBoard';
 import { AddButton } from '../ButtonAddColumn/ButtonAddColumn';
 import { useParams } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-import { selectBoards } from 'redux/Boards/boardsSelectors';
+import { useDispatch, useSelector } from 'react-redux';
+import { currentBoard } from 'redux/Boards/boardsSelectors';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 // import clsx from 'clsx';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ColumnModalWindow } from '../ColumnModalWindow/ColumnModalWindow';
 import { TasksColumnHeader } from '../TasksColumnHeader/TasksColumnHeader';
+import { getBoardById } from '../../redux/Boards/boardsOperations';
 
 export const MainBoard = () => {
+  const dispatch = useDispatch();
+  const { boardName } = useParams();
+  useEffect(() => {
+    dispatch(getBoardById(boardName));
+  }, [boardName]);
+
   const theme = useSelector(selectorTheme);
   const [showModalWindow, setShowModalWindow] = useState(false);
   const handleModalWindowOpen = () => setShowModalWindow(true);
@@ -32,12 +39,9 @@ export const MainBoard = () => {
     default:
       curTheme = '#1F1F1F';
   }
-
-  const { boardName } = useParams();
-  const boards = useSelector(selectBoards);
-  if (boards.length === 0) return;
-  const getBoard = boards.find(board => board._id === boardName);
-  const imgid = getBoard.background;
+  const board = useSelector(currentBoard);
+  if (!board) return;
+  const imgid = board.background;
   const BASE_URL_IMG =
     'https://res.cloudinary.com/dblzpxfzb/image/upload/v1687449642/background/';
   return (
@@ -48,15 +52,15 @@ export const MainBoard = () => {
         imgid={imgid}
         colorbg={curTheme}
       >
-        <HeaderDashBoard title={getBoard.title} />
+        <HeaderDashBoard title={board.title} />
         <ContentBoard>
           <ColumnsList>
-            {getBoard.columns.map(item => (
+            {board?.columns.map(item => (
               <TasksColumnHeader
                 key={item.id}
                 title={item.title}
                 id={item.id}
-                boardId={getBoard._id}
+                boardId={board._id}
               />
             ))}
           </ColumnsList>
@@ -73,7 +77,7 @@ export const MainBoard = () => {
           titleModalButton="Add"
           modalTitle="Add column"
           onClick={handleModalWindowClose}
-          boardId={getBoard._id}
+          boardId={board._id}
         />
       )}
     </>

src/components/TasksColumnHeader/TasksColumnHeader.jsx

@@ -16,12 +16,14 @@ export const TasksColumnHeader = ({ title, id, boardId }) => {
   const theme = useSelector(selectorTheme);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalWindowOpen = () => setIsModalOpen(true);
-  const handleModalWindowClose = () => setIsModalOpen(false);
+  const handleModalWindowClose = () => {
+
+      setIsModalOpen(false);}
 
   const deleteColumn = () => {
     const delData = {
       columnId: id,
-      boardId,
+      boardId
     };
     dispatch(delColumn(delData));
   };

src/components/TasksColumnHeader/TasksColumnHeader.module.scss

@@ -6,7 +6,7 @@
   padding: 18px 20px;
   background-color: $white-color;
   border-radius: 8px;
-
+  margin-bottom: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -39,6 +39,6 @@
     margin-left: 8px;
   }
 }
-.columnsList{
+.columnsList {
   margin-right: 34px;
-}
+}

src/redux/Boards/boardsOperations.js

@@ -1,6 +1,6 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
-import { getListOfBoardsApi, addBoardApi } from '../../services/backendAPI';
+import { getListOfBoardsApi, addBoardApi, getBoardByIdApi} from '../../services/backendAPI';
 
 export const addNewBoard = createAsyncThunk(
   'boards/addboard',
@@ -16,24 +16,23 @@ export const addNewBoard = createAsyncThunk(
   },
 );
 
-// export const getBoardById = createAsyncThunk(
-//   'boards/getBoardById',
-//   async (id, { getState, rejectWithValue }) => {
-//     const { token } = getState().auth;
-//     console.log('id oper', id)
-//     try {
-//       const boardsList = await getBoardByIdApi(id, token);
-//       return boardsList;
-//     } catch (error) {
-//       rejectWithValue(error.message);
-//     }
-//   },
+export const getBoardById = createAsyncThunk(
+  'boards/getBoardById',
+  async (id, { getState, rejectWithValue }) => {
+    const { token } = getState().auth;
+    try {
+      const currentBoard = await getBoardByIdApi(id, token);
+      return currentBoard;
+    } catch (error) {
+      rejectWithValue(error.message);
+    }
+  },
 // {
 //   condition(_, { getState }) {
 //     return Boolean(getState().boards.length <= 0);
 //   },
 // },
-// );
+);
 
 export const getListOfBoards = createAsyncThunk(
   'boards/getListOfBoards',
@@ -46,9 +45,9 @@ export const getListOfBoards = createAsyncThunk(
       rejectWithValue(error.message);
     }
   },
-  {
-    condition(_, { getState }) {
-      return Boolean(getState().boards.length <= 0);
-    },
-  },
+  // {
+  //   condition(_, { getState }) {
+  //     return Boolean(getState().boards.length <= 0);
+  //   },
+  // },
 );

src/redux/Boards/boardsSelectors.js

@@ -1 +1,3 @@
-export const selectBoards = state => state.boards;
+export const selectBoards = state => state.boards.allboards;
+
+export const currentBoard = state => state.boards.currentboard;

src/redux/Boards/boardsSlice.js

@@ -1,21 +1,24 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { getListOfBoards, addNewBoard } from './boardsOperations';
+import { getListOfBoards, addNewBoard, getBoardById } from './boardsOperations';
 
 const boardsSlice = createSlice({
   name: 'boards',
-  initialState: [],
+  initialState: {
+    allboards:[],
+    currentboard:null
+  },
   extraReducers: builder => {
     builder
       .addCase(getListOfBoards.fulfilled, (state, { payload }) => {
-        state.push(...payload);
+        state.allboards.push(...payload);
+
       })
       .addCase(addNewBoard.fulfilled, (state, { payload }) => {
-        state.push(payload);
-      });
-    // .addCase(getBoardById.fulfilled, (state, { payload }) => {
-    //   console.log('slice', payload);
-
-    // });
+        state.allboards.push(payload);
+      })
+    .addCase(getBoardById.fulfilled, (state, { payload }) => {
+      state.currentboard=payload;
+    });
   },
 });
 

src/services/backendAPI.js

@@ -78,12 +78,12 @@ export const editColumnApi = async ({ title, boardId, columnId }) => {
   return data;
 };
 
-export const removeColumnApi = async ({ boardId, columnId }) => {
-  console.log(boardId, columnId);
-  await axios.delete(`/board/column/${columnId}`, boardId);
-};
-
+export const removeColumnApi = async (delData) => {
+  console.log(delData.boardId, delData.columnId);
+  const boardId = delData.boardId
+  await axios.delete(`/board/column/${delData.columnId}`,  {boardId}  )
 
+};
 
 //---------------------------------------------EMAIL---------------------//