Merge pull request #50 from 001elijah/dashboard

add filter cards
001elijah · Jun 28, 2023 · 734dcb7 · 734dcb7
2 parents 059ff7b + 2354eac
commit 734dcb7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx b/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx
@@ -30,7 +30,7 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
             className={s.radioInput1}
             type="radio"
             onChange={handleCheked}
-            value=""
+            value="one"
             name="background"
             id="one"
             checked={background === 'one'}

diff --git a/src/components/HeaderDashBoard/HeaderDashBoard.jsx b/src/components/HeaderDashBoard/HeaderDashBoard.jsx
@@ -8,15 +8,16 @@ 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 board = useSelector(currentBoard);
   const [showModalWindow, setShowModalWindow] = useState(false);
   const handleModalWindowOpen = () => {
+    if (!board) return;
     setShowModalWindow(true);
   };
   const handleModalWindowClose = () => {
@@ -26,13 +27,12 @@ export const HeaderDashBoard = ({ title }) => {
 
   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])}>

diff --git a/src/components/MainBoard/MainBoard.jsx b/src/components/MainBoard/MainBoard.jsx
@@ -44,6 +44,7 @@ export const MainBoard = () => {
   const imgid = board.background;
   const BASE_URL_IMG =
     'https://res.cloudinary.com/dblzpxfzb/image/upload/v1687449642/background/';
+
   return (
     <>
       <Wrapper

diff --git a/src/components/TaskColumn/TaskColumn.jsx b/src/components/TaskColumn/TaskColumn.jsx
@@ -11,6 +11,7 @@ import { currentBoard } from 'redux/Boards/boardsSelectors';
 import s from './TaskColumn.module.scss';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 import clsx from 'clsx';
+import { selectorFilter } from '../../redux/Filter/filterSelection';
 
 export const TaskColumn = ({ columnId }) => {
   const dispatch = useDispatch();
@@ -19,7 +20,31 @@ export const TaskColumn = ({ columnId }) => {
   const [modalOpen, setModalOpen] = useState(false);
   const ModalWindowOpen = () => setModalOpen(true);
   const modalWindowClose = () => setModalOpen(false);
-  const cards = useSelector(selectCards);
+  const allCards = useSelector(selectCards);
+  const filter = useSelector(selectorFilter);
+
+  let cards = [];
+
+  if (!filter) {
+    cards = allCards;
+  } else {
+    switch (filter) {
+      case 'low':
+        cards = allCards.filter(item => item.label === 'low');
+        break;
+      case 'medium':
+        cards = allCards.filter(item => item.label === 'medium');
+        break;
+      case 'high':
+        cards = allCards.filter(item => item.label === 'high');
+        break;
+      case 'without':
+        cards = allCards.filter(item => item.label === 'without');
+        break;
+      default:
+        cards = allCards;
+    }
+  }
 
   const handleAddCard = dataForm => {
     const { value, coment, color, date } = dataForm;
@@ -34,7 +59,7 @@ export const TaskColumn = ({ columnId }) => {
       }),
     );
   };
-
+  if (cards?.length === 0) return;
   return (
     <>
       <ul