select current board at modalWindow

001elijah · Jun 29, 2023 · 335b05a · 335b05a
1 parent edab95e
commit 335b05a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/src/components/BoardItem/BoardItem.jsx b/src/components/BoardItem/BoardItem.jsx
@@ -14,27 +14,28 @@ import { BoardModalWindow } from '../BoardModalWindow/BoardModalWindow';
 import { Modal } from '../Modal/Modal';
 
 export const BoardItem = ({
+  id,
   boardName,
   icon,
+  background = "default",
   theme,
   onClick,
   isCurrent,
-  id,
 }) => {
   const [isOpenEditModal, setIsOpenEditModal] = useState(false);
   const [isOpenRemoveModal, setIsOpenRemoveModal] = useState(false);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const editSubmit = dataBoard => {
-    dispatch(editBoard({ dataBoard, id }));
-    dispatch(getBoardById(id));
+  const editSubmit = async dataBoard => {
+        await dispatch(editBoard({ dataBoard, id }));
+        dispatch(getBoardById(id));
   };
 
   const handleOpenEditModal = e => {
     e.stopPropagation();
     setIsOpenEditModal(true);
-    // dispatch(getBoardById(id));
+
   };
   const handleCloseEditModal = () => {
     setIsOpenEditModal(false);
@@ -99,11 +100,12 @@ export const BoardItem = ({
       {isOpenEditModal && (
         <BoardModalWindow
           inputTitle={boardName}
+          activeIcon={icon.slice(icon.indexOf('#') + 1, icon.length)}
+          activeBackground={background}
           modalTitle={'Edit board'}
           titleModalButton={'Edit'}
           handleToggleModal={handleCloseEditModal}
           onSubmit={editSubmit}
-          activeIcon={icon.slice(icon.indexOf('#') + 1, icon.length)}
         />
       )}
       {isOpenRemoveModal && (
@@ -140,6 +142,7 @@ export const BoardItem = ({
 BoardItem.propTypes = {
   boardName: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
+  background: PropTypes.string.isRequired,
   theme: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   isCurrent: PropTypes.bool.isRequired,

diff --git a/src/components/BoardList/BoardList.jsx b/src/components/BoardList/BoardList.jsx
@@ -16,11 +16,12 @@ export const BoardList = ({ theme, boards, currentBoard }) => {
   }, [currentBoard?._id]);
   return (
     <ul className={s.list}>
-      {boards.map(({ title, icon, _id }) => (
+      {boards.map(({ title, icon, _id, background }) => (
         <BoardItem
           key={shortid.generate()}
           boardName={title}
           icon={`${sprite}#${icon}`}
+          background={background ? background : "default"}
           theme={theme}
           id={_id}
           onClick={onClick}

diff --git a/src/components/BoardModalWindow/BoardModalWindow.jsx b/src/components/BoardModalWindow/BoardModalWindow.jsx
@@ -10,15 +10,16 @@ import s from './BoardModalWindow.module.scss';
 
 export const BoardModalWindow = ({
   inputTitle = '',
+  activeIcon = 'icon-project',
+  activeBackground = "default",
   modalTitle,
   titleModalButton,
   onSubmit,
   handleToggleModal,
-  activeIcon = 'icon-project',
 }) => {
   const theme = useSelector(selectorTheme);
   const [title, setTitle] = useState(inputTitle);
-  const [background, setBackground] = useState();
+  const [background, setBackground] = useState(activeBackground);
   const [icon, setIcon] = useState('');
   const [isValid, setIsValid] = useState(false);
   const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false);
@@ -85,7 +86,7 @@ export const BoardModalWindow = ({
           </p>
         )}
         <BoxRadioIconGroup valueChange={setIcon} activeIcon={activeIcon} />
-        <BoxRadioBackgroundGroup valueChange={setBackground} />
+        <BoxRadioBackgroundGroup valueChange={setBackground} activeBackground={activeBackground}/>
         <button className={`${s.buttonModal} ${s[theme]}`} type="submit">
           <span className={`${s.iconButtonModalWrapper} ${s[theme]}`}>
             <svg
@@ -105,10 +106,10 @@ export const BoardModalWindow = ({
 
 BoardModalWindow.propTypes = {
   modalTitle: PropTypes.string.isRequired,
-  inputTitle: PropTypes.string,
+  inputTitle: PropTypes.string.isRequired,
+  activeIcon: PropTypes.string.isRequired,
+  activeBackground: PropTypes.string.isRequired,
   titleModalButton: PropTypes.string.isRequired,
-  onSubmit: PropTypes.func,
-  handleToggleModal: PropTypes.func,
-  id: PropTypes.func,
-  activeIcon: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  handleToggleModal: PropTypes.func.isRequired,
 };
diff --git a/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx b/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx
@@ -9,17 +9,15 @@ import { getListOfThumbnails } from '../../redux/Background/backgroundOperations
 import { selectorTheme } from '../../redux/Auth/authSelectors';
 import { Loader } from 'components/Loader/Loader';
 import s from './BoxRadioBackgroundGroup.module.scss';
-import { currentBoard } from 'redux/Boards/boardsSelectors';
 
-export const BoxRadioBackgroundGroup = ({ valueChange }) => {
+export const BoxRadioBackgroundGroup = ({ valueChange, activeBackground = "default" }) => {
   const dispatch = useDispatch();
 
   const thumbnails = useSelector(selectBackgroundThumbnails);
   const loading = useSelector(selectBackgroundLoading);
   const theme = useSelector(selectorTheme);
-  const board = useSelector(currentBoard);
 
-  const [background, setBackground] = useState(board?.background);
+  const [background, setBackground] = useState(activeBackground);
 
   const handleChange = e => {
     const selectedBackground = e.target.value;
@@ -94,4 +92,5 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
 
 BoxRadioBackgroundGroup.propTypes = {
   valueChange: PropTypes.func.isRequired,
+  activeBackground: PropTypes.string
 };