Merge pull request #44 from 001elijah/dashboard

Dashboard

src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx

@@ -4,10 +4,14 @@ import { selectorTheme } from 'redux/Auth/authSelectors';
 import PropTypes from 'prop-types';
 import s from './BoxRadioBackgroundGroup.module.scss';
 
+import {currentBoard} from '../../redux/Boards/boardsSelectors'
+
 export const BoxRadioBackgroundGroup = ({ valueChange }) => {
+  const board = useSelector(currentBoard)
+  const currentBackgroud = board.background
   const theme = useSelector(selectorTheme);
 
-  const [background, setBackground] = useState('one');
+  const [background, setBackground] = useState(currentBackgroud);
   // const handleChange = e => {
   //   setColor(e.target.value);
   //   valueColor(color);
@@ -31,7 +35,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
             className={s.radioInput1}
             type="radio"
             onChange={handleCheked}
-            value="none"
+            value=''
             name="background"
             id="one"
             checked={background === 'one'}
@@ -130,7 +134,6 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
           />
           <label htmlFor="eight" className={s.radioLabel8}></label>
         </div>
-        {/* 8 */}
         <div className={s.radioContainer}>
           <input
             className={s.radioInput9}
@@ -179,7 +182,6 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
           />
           <label htmlFor="twelve" className={s.radioLabel12}></label>
         </div>
-        {/* 12 */}
         <div className={s.radioContainer}>
           <input
             className={s.radioInput13}
@@ -209,8 +211,8 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
             className={s.radioInput15}
             type="radio"
             onChange={handleCheked}
-            value="fifteen"
-            name="24.jpg"
+            value="24.jpg"
+            name="background"
             id="fifteen"
             checked={background === 'fifteen'}
           />
@@ -228,7 +230,6 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
           />
           <label htmlFor="sixteen" className={s.radioLabel16}></label>
         </div>
-        {/* 16 */}
       </div>
     </div>
   );

src/components/HeaderDashBoard/HeaderDashBoard.jsx

@@ -3,17 +3,36 @@ import svg from '../../assets/icons/sprite.svg';
 import { useState } from 'react';
 import { ModalFilter } from '../ModalFilter/ModalFilter';
 import { selectorTheme } from 'redux/Auth/authSelectors';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { BackdropModal } from '../BackdropMain/BackdropMain';
+import { addFilters } from '../../redux/Filter/filterOperation';
+
+import { updateBoard, getBoardById } from '../../redux/Boards/boardsOperations';
+import { currentBoard } from '../../redux/Boards/boardsSelectors';
 
 export const HeaderDashBoard = ({ title }) => {
+  const dispatch = useDispatch();
   const theme = useSelector(selectorTheme);
   const [showModalWindow, setShowModalWindow] = useState(false);
-  const handleModalWindowOpen = () => setShowModalWindow(true);
-  const handleModalWindowClose = () => setShowModalWindow(false);
-  // const [color, setColor] = useState('');
+  const handleModalWindowOpen = () => {
+    setShowModalWindow(true);
+  };
+  const handleModalWindowClose = () => {
+    setShowModalWindow(false);
+    change();
+  };
+
+  const [color, setColor] = useState('');
+  const [icon, setIcon] = useState('');
+  const board = useSelector(currentBoard);
+  const change = async () => {
+    await dispatch(addFilters(color));
+    await dispatch(updateBoard({ back: icon, board }));
+    await dispatch(getBoardById(board._id));
+  };
+
   return (
     <>
       <div className={clsx(s.HeaderDash, s[theme])}>
@@ -32,7 +51,11 @@ export const HeaderDashBoard = ({ title }) => {
         </button>
         {showModalWindow && (
           <BackdropModal closeModal={handleModalWindowClose}>
-            <ModalFilter closeModal={handleModalWindowClose} />
+            <ModalFilter
+              closeModal={handleModalWindowClose}
+              colorNew={setColor}
+              iconNew={setIcon}
+            />
           </BackdropModal>
         )}
       </div>

src/components/MainBoard/MainBoard.styled.jsx

@@ -11,14 +11,27 @@ 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 (min-device-pixel-ratio: 2),
+      (min-resolution: 192dpi),
+      (min-resolution: 2dppx) {
+      background-image: url(${props =>
+        props.BASE_URL + 'mobile/x2/' + props.imgid});
+    }
   }
   @media screen and (min-width: 768px) {
     padding-left: 32px;
     padding-right: 32px;
     height: calc(100vh - 68px);
     background-image: url(${props =>
       props.imgurl + 'tablet/x1/' + props.imgid});
+    @media (min-device-pixel-ratio: 2),
+      (min-resolution: 192dpi),
+      (min-resolution: 2dppx) {
+      background-image: url(${props =>
+        props.BASE_URL + 'mobile/x2/' + props.imgid});
+    }
   }
   @media screen and (min-width: 1280px) {
     width: calc(100vw - 260px);
@@ -28,19 +41,22 @@ export const Wrapper = styled.div`
 
     background-image: url(${props =>
       props.imgurl + 'desktop/x1/' + props.imgid});
+    @media (min-device-pixel-ratio: 2),
+      (min-resolution: 192dpi),
+      (min-resolution: 2dppx) {
+      background-image: url(${props =>
+        props.BASE_URL + 'mobile/x2/' + props.imgid});
+    }
   }
-  @media (min-device-pixel-ratio: 2),
-    (min-resolution: 192dpi),
-    (min-resolution: 2dppx) {
-    @content;
-  }
-`
+
+`;
 
 export const ColumnsList = styled.ul`
   display: flex;
 `;
 export const ContentBoard = styled.div`
-display:flex;
-flex-wrap:nowrap;
-overflow:auto;
-`
+  display: flex;
+  wrap: nowrap;
+  overflow: auto;
+`;
+

src/components/ModalFilter/LabelBlock.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import s from './Modal.module.scss';
 import PropTypes from 'prop-types';
 import { selectorTheme } from 'redux/Auth/authSelectors';
@@ -32,14 +32,16 @@ InputBlock.propTypes = {
 
 export const LabelBlock = ({ newField }) => {
   const theme = useSelector(selectorTheme);
-  const [field, setField] = useState(' ');
+  const [field, setField] = useState('');
   const handleOnClick = e => {
     setField(e.currentTarget.value);
   };
   const handleOnClickAll = () => {
-    setField('');
+    setField('none');
   };
-  console.log(newField, field);
+ useEffect(()=>{
+  newField(field)
+ }, [field, ])
 
   return (
     <>
@@ -72,5 +74,5 @@ export const LabelBlock = ({ newField }) => {
   );
 };
 LabelBlock.propTypes = {
-  newField: PropTypes.string,
+  newField: PropTypes.func.isRequired,
 };

src/components/ModalFilter/ModalFilter.jsx

@@ -3,17 +3,21 @@ import svg from '../../assets/icons/sprite.svg';
 import PropTypes from 'prop-types';
 import { LabelBlock } from './LabelBlock';
 // import { BackgroundBlock } from './BackgroundBlock';
-import { useState } from 'react';
+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, color }) => {
+export const ModalFilter = ({ closeModal, colorNew, iconNew}) => {
   const [colorFilter, setColorFilter] = useState('');
   const theme = useSelector(selectorTheme);
-  const [icon, setIcon] = useState('');
-  console.log(color, colorFilter, icon);
+  const [icon, setIcon] = useState('')
+
+  useEffect(()=>{
+    colorNew(colorFilter),
+    iconNew(icon)
+  }, [colorFilter, icon])
   return (
     <>
       <div className={clsx(s.Wrapper, s[theme])}>
@@ -33,5 +37,6 @@ export const ModalFilter = ({ closeModal, color }) => {
 };
 ModalFilter.propTypes = {
   closeModal: PropTypes.func,
-  color: PropTypes.string,
+  colorNew: PropTypes.func,
+  iconNew: PropTypes.func,
 };

src/redux/Boards/boardsOperations.js

@@ -1,11 +1,14 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
+
 import {
   getListOfBoardsApi,
   addBoardApi,
   getBoardByIdApi,
+  updateBoardApi
 } from '../../services/backendAPI';
-import { getListOfCards } from 'redux/Cards/cardsOperations';
+import { getListOfCards } from '../../redux/Cards/cardsOperations';
+
 
 export const addNewBoard = createAsyncThunk(
   'boards/addboard',
@@ -59,3 +62,17 @@ export const getListOfBoards = createAsyncThunk(
   //   },
   // },
 );
+
+export const updateBoard = createAsyncThunk(
+  'boards/updateBoard',
+  async (dataBoard, { getState, rejectWithValue }) => {
+    const { token } = getState().auth;
+    try {
+      const update = await updateBoardApi(dataBoard, token);
+      return update;
+    } catch (error) {
+      console.log('error', error);
+      rejectWithValue(error.message);
+    }
+  },
+);

src/redux/Boards/boardsSlice.js

@@ -1,5 +1,10 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { getListOfBoards, addNewBoard, getBoardById } from './boardsOperations';
+import {
+  getListOfBoards,
+  addNewBoard,
+  getBoardById,
+  updateBoard,
+} from './boardsOperations';
 
 const boardsSlice = createSlice({
   name: 'boards',
@@ -17,6 +22,10 @@ const boardsSlice = createSlice({
       })
       .addCase(getBoardById.fulfilled, (state, { payload }) => {
         state.currentboard = payload;
+      })
+      .addCase(updateBoard.fulfilled, (state, { payload }) => {
+        state = payload;
+
       });
   },
 });

src/redux/Filter/filterOperation.js

@@ -0,0 +1,13 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+export const addFilters = createAsyncThunk(
+    'filter/adfilter',
+    async (data, {  rejectWithValue }) => {
+
+      try {
+        return data;
+      } catch (error) {
+        rejectWithValue(error.message);
+      }
+    },
+  )

src/redux/Filter/filterSelection.js

@@ -0,0 +1 @@
+export const selectorFilter = state => state.filter;

src/redux/Filter/filterSlice.js

@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { addFilters } from './filterOperation';
+
+const filterSlice = createSlice({
+  name: 'filter',
+  initialState: '',
+  extraReducers: builder => {
+    builder
+      .addCase(addFilters.fulfilled, (state, { payload }) => {
+        return payload;
+      })
+      .addMatcher(
+        action =>
+          action.type.startsWith('card') && action.type.endsWith('/rejected'),
+        // (state, { payload }) => {
+        //   state.isLoading = false;
+        //   state.error = payload;
+        // },
+      )
+      .addMatcher(
+        action =>
+          action.type.startsWith('card') && action.type.endsWith('/pending'),
+        // state => {
+        //   state.isLoading = true;
+        // },
+      );
+  },
+});
+
+export default filterSlice.reducer;

src/redux/store.js

@@ -3,6 +3,7 @@ import authReducer from './Auth/authSlice';
 import loaderReducer from './Loader/loaderSlice';
 import boardsReducer from './Boards/boardsSlice';
 import cardsReducer from './Cards/cardsSlice';
+import filterSlice from './Filter/filterSlice'
 
 import {
   persistStore,
@@ -30,6 +31,7 @@ export const store = configureStore({
     boards: boardsReducer,
     cards: cardsReducer,
     isLoading: loaderReducer,
+    filter:filterSlice
   },
   middleware: getDefaultMiddleware =>
     getDefaultMiddleware({

src/services/backendAPI.js

@@ -57,7 +57,11 @@ export const getBoardByIdApi = async (boardName, userToken) => {
   const { data } = await axios.get(`/board/${boardName}`);
   return data;
 };
-
+export const updateBoardApi = async ({board, back},  userToken) => {
+  token.set(userToken);
+  const { data } = await axios.patch(`/board/${board._id}`, {background:back} );
+  return data;
+};
 export const getListOfBoardsApi = async userToken => {
   token.set(userToken);
   const { data } = await axios.get('/board/');