add dynamic bg change feature

001elijah · Jun 29, 2023 · c8ec903 · c8ec903
1 parent 6e413a2
commit c8ec903
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/src/components/BoardModalWindow/BoardModalWindow.jsx b/src/components/BoardModalWindow/BoardModalWindow.jsx
@@ -18,7 +18,7 @@ export const BoardModalWindow = ({
 }) => {
   const theme = useSelector(selectorTheme);
   const [title, setTitle] = useState(inputTitle);
-  const [background, setBackground] = useState('null');
+  const [background, setBackground] = useState();
   const [icon, setIcon] = useState('');
   const [isValid, setIsValid] = useState(false);
 

diff --git a/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx b/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx
@@ -38,18 +38,18 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
         {/* Default Background */}
         <div
           className={`${s.radioContainer} ${s[theme]} ${
-            background === null ? s.selected : ''
+            background === "default" ? s.selected : ''
           }`}
         >
           <input
             className={`${s.radioInput} ${s[theme]}`}
             type="radio"
             onClick={handleChange}
             onChange={handleChange}
-            value="null"
+            value="default"
             name="background"
             id="radio-default"
-            checked={background === 'null'}
+            checked={background === 'default'}
           />
           <label
             htmlFor="radio-default"

diff --git a/src/components/HeaderDashBoard/HeaderDashBoard.jsx b/src/components/HeaderDashBoard/HeaderDashBoard.jsx
@@ -35,9 +35,17 @@ export const HeaderDashBoard = ({ title }) => {
   useEffect(() => {
     showModalWindow && dispatch(addFilters(color));
   }, [color]);
+
   useEffect(() => {
-    showModalWindow && icon && dispatch(updateBoard({ back: icon, board }));
-  }, [icon]);
+  const updateBoardAndFetch = async () => {
+    if (showModalWindow && icon) {
+      await dispatch(updateBoard({ back: icon, board }));
+      dispatch(getBoardById(board._id));
+    }
+  };
+
+  updateBoardAndFetch();
+}, [icon, showModalWindow]);
 
   return (
     <>

diff --git a/src/components/ModalFilter/ModalFilter.jsx b/src/components/ModalFilter/ModalFilter.jsx
@@ -11,7 +11,7 @@ import clsx from 'clsx';
 export const ModalFilter = ({ closeModal, colorNew, iconNew }) => {
   const [colorFilter, setColorFilter] = useState('');
   const theme = useSelector(selectorTheme);
-  const [icon, setIcon] = useState(null);
+  const [icon, setIcon] = useState();
 
   useEffect(() => {
     colorNew(colorFilter), iconNew(icon);