Merge pull request #41 from 001elijah/create-edit-forms

Create edit forms

src/components/BoardList/BoardList.jsx

@@ -5,7 +5,6 @@ import sprite from 'assets/icons/sprite.svg';
 import s from './BoardList.module.scss';
 
 export const BoardList = ({ theme, boards }) => {
-
   const [current, setCurrent] = useState(null);
 
   return (

src/components/CalendarColorful/CalendarColorful.module.scss

@@ -44,8 +44,8 @@
 
 .calendarConatiner {
   width: 201px;
-  height: 254px;
-  // height: 100%;
+  height: 222px;
+  overflow: hidden;
 
   padding-top: 0;
 
@@ -121,3 +121,16 @@
     background-color: $dark-color;
   }
 }
+
+:global .react-datepicker-popper {
+  z-index: 2;
+  // padding-top: 18px;
+}
+
+:global .react-datepicker__triangle {
+  display: none;
+}
+
+:global .react-datepicker-popper[data-placement^='bottom'] {
+  padding-top: 18px;
+}

src/components/CalendarDark/CalendarDark.module.scss

@@ -39,8 +39,8 @@
 
 .calendarConatiner {
   width: 201px;
-  height: 254px;
-  // height: 100%;
+  height: 222px;
+  overflow: hidden;
 
   padding-top: 0;
 
@@ -108,3 +108,16 @@
     background-color: $dark-color;
   }
 }
+
+:global .react-datepicker-popper {
+  z-index: 2;
+  // padding-top: 18px;
+}
+
+:global .react-datepicker__triangle {
+  display: none;
+}
+
+:global .react-datepicker-popper[data-placement^='bottom'] {
+  padding-top: 18px;
+}

src/components/CalendarLight/CalendarLight.module.scss

@@ -44,7 +44,8 @@
 
 .calendarConatiner {
   width: 201px;
-  height: 254px;
+  height: 222px;
+  overflow: hidden;
   // height: 100%;
 
   padding-top: 0;
@@ -118,3 +119,16 @@
     background-color: $dark-color;
   }
 }
+
+:global .react-datepicker-popper {
+  z-index: 2;
+  // padding-top: 18px;
+}
+
+:global .react-datepicker__triangle {
+  display: none;
+}
+
+:global .react-datepicker-popper[data-placement^='bottom'] {
+  padding-top: 18px;
+}

src/components/CardModalWindow/CardModalWindow.jsx

@@ -60,7 +60,6 @@ export const CardModalWindow = ({
     //   <CalendarDark onDate={setDate} />
     // </ReusableColumnModalWindow>
 
-
     <Modal title={modalTitle} onClose={handleToggleModal}>
       <form onSubmit={handleSubmit}>
         <input
@@ -95,7 +94,6 @@ export const CardModalWindow = ({
         </button>
       </form>
     </Modal>
-
   );
 };
 

src/components/ColumnModalWindow/ColumnModalWindow.jsx

@@ -21,11 +21,11 @@ export const ColumnModalWindow = ({
   const [value, setValue] = useState('');
   const theme = useSelector(selectorTheme);
 
-// const updateBoard = ()=>{
-//   setTimeout(()=>{dispatch(getBoardById(boardId)),0 }) 
-// }
+  // const updateBoard = ()=>{
+  //   setTimeout(()=>{dispatch(getBoardById(boardId)),0 })
+  // }
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async e => {
     e.preventDefault();
     if (modalTitle === 'Edit column') {
       const editColumnTitle = {
@@ -39,11 +39,11 @@ export const ColumnModalWindow = ({
         title: value,
         boardId,
       };
-     await  dispatch(addColumn(newColumn));
+      await dispatch(addColumn(newColumn));
     }
     setValue('');
     onClick();
-    dispatch(getBoardById(boardId))
+    dispatch(getBoardById(boardId));
     // updateBoard()
   };
 

src/components/MainBoard/MainBoard.jsx

@@ -52,7 +52,7 @@ export const MainBoard = () => {
         imgid={imgid}
         colorbg={curTheme}
       >
-        <HeaderDashBoard title={board.title} />
+        <HeaderDashBoard title={getBoard.title} />
         <ContentBoard>
           <ColumnsList>
             {board?.columns.map(item => (

src/components/MainBoard/MainBoard.styled.jsx

@@ -28,11 +28,10 @@ export const Wrapper = styled.div`
   }
 `;
 export const ColumnsList = styled.ul`
-display:flex;
-
-`
+  display: flex;
+`;
 export const ContentBoard = styled.div`
-display:flex;
-wrap:nowrap;
-overflow:auto;
-`
+  display: flex;
+  wrap: nowrap;
+  overflow: auto;
+`;

src/components/TaskColumn/TaskColumn.module.scss

@@ -1 +0,0 @@
-

src/components/TasksColumnHeader/TasksColumnHeader.jsx

@@ -28,7 +28,7 @@ export const TasksColumnHeader = ({ title, id, boardId }) => {
       boardId,
     };
     await dispatch(removeColumn(delData));
-    dispatch(getBoardById(boardId))
+    dispatch(getBoardById(boardId));
   };
 
   return (

src/redux/Boards/boardsOperations.js

@@ -1,6 +1,10 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
-import { getListOfBoardsApi, addBoardApi, getBoardByIdApi} from '../../services/backendAPI';
+import {
+  getListOfBoardsApi,
+  addBoardApi,
+  getBoardByIdApi,
+} from '../../services/backendAPI';
 
 export const addNewBoard = createAsyncThunk(
   'boards/addboard',
@@ -27,11 +31,11 @@ export const getBoardById = createAsyncThunk(
       rejectWithValue(error.message);
     }
   },
-// {
-//   condition(_, { getState }) {
-//     return Boolean(getState().boards.length <= 0);
-//   },
-// },
+  // {
+  //   condition(_, { getState }) {
+  //     return Boolean(getState().boards.length <= 0);
+  //   },
+  // },
 );
 
 export const getListOfBoards = createAsyncThunk(

src/redux/Boards/boardsSlice.js

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

src/redux/Columns/ColumnOperation.js

@@ -3,8 +3,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import {
   addColumnApi,
   removeColumnApi,
-  editColumnApi
-
+  editColumnApi,
 } from '../../services/backendAPI';
 
 export const addColumn = createAsyncThunk(
@@ -39,11 +38,8 @@ export const removeColumn = createAsyncThunk(
     try {
       const deleteColumn = await removeColumnApi(delData, token);
       return deleteColumn;
-
     } catch (error) {
       rejectWithValue(error.message);
     }
   },
 );
-
-

src/redux/Columns/ColumnSlice.js

@@ -16,19 +16,20 @@ const boardSlice = createSlice({
         console.log(payload);
       })
       .addCase(removeColumn.fulfilled, (state, { payload }) => {
-        console.log(payload)})
-      // .addCase(updateColumn.fulfilled, (state, { payload }) => {
-      //   return {
-      //     state: state.map(el =>
-      //       el.id !== payload.id ? el : { ...el, ...payload },
-      //     ),
-      //   };
-      // })
-      // .addCase(delColumn.fulfilled, (state, { payload }) => {
-      //   return {
-      //     state: state.items.filter(el => el.id !== payload),
-      //   };
-      // });
+        console.log(payload);
+      });
+    // .addCase(updateColumn.fulfilled, (state, { payload }) => {
+    //   return {
+    //     state: state.map(el =>
+    //       el.id !== payload.id ? el : { ...el, ...payload },
+    //     ),
+    //   };
+    // })
+    // .addCase(delColumn.fulfilled, (state, { payload }) => {
+    //   return {
+    //     state: state.items.filter(el => el.id !== payload),
+    //   };
+    // });
   },
 });
 

src/services/backendAPI.js

@@ -69,7 +69,10 @@ export const addColumnApi = async (dataColumn, userToken) => {
   const { data } = await axios.post('board/column', dataColumn);
   return data;
 };
-export const editColumnApi = async ({ title, boardId, columnId },userToken ) => {
+export const editColumnApi = async (
+  { title, boardId, columnId },
+  userToken,
+) => {
   token.set(userToken);
   const { data } = await axios.patch(`/board/column/${columnId}`, {
     title,
@@ -78,10 +81,9 @@ export const editColumnApi = async ({ title, boardId, columnId },userToken ) =>
   return data;
 };
 
-export const removeColumnApi = async ({columnId, boardId}, userToken) => {
+export const removeColumnApi = async ({ columnId, boardId }, userToken) => {
   token.set(userToken);
-   await axios.delete(`/board/column/${columnId}`, {data:{boardId}});
-
+  await axios.delete(`/board/column/${columnId}`, { data: { boardId } });
 };
 
 //---------------------------------------------EMAIL---------------------//