Merge pull request #40 from 001elijah/fixes

Fixes

src/components/BackdropMain/BackdropMain.jsx

@@ -1,31 +1,73 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import s from './BackdropMain.module.scss';
 
 const modalRoot = document.querySelector('#modal-root');
 
 export const BackdropModal = ({ children, closeModal }) => {
-  const handleClose = useCallback(
-    event => {
-      if (event.target === event.currentTarget || event.code === 'Escape') {
-        closeModal();
+  const backdropRef = useRef(null);
+  const modalRef = useRef(null);
+  const isMouseDownRef = useRef(false);
+
+  const handleClose = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+
+  const handleMouseDown = useCallback(() => {
+    isMouseDownRef.current = true;
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    if (isMouseDownRef.current) {
+      isMouseDownRef.current = false;
+    } else {
+      handleClose();
+    }
+  }, [handleClose]);
+
+  const handleModalClick = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        handleClose();
       }
-    },
-    [closeModal],
-  );
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleClose]);
 
   useEffect(() => {
-    window.addEventListener('keydown', handleClose);
+    const handleMouseUpOutsideModal = () => {
+      if (isMouseDownRef.current) {
+        isMouseDownRef.current = false;
+        handleClose();
+      }
+    };
 
+    document.addEventListener('mouseup', handleMouseUpOutsideModal);
     return () => {
-      window.removeEventListener('keydown', handleClose);
+      document.removeEventListener('mouseup', handleMouseUpOutsideModal);
     };
   }, [handleClose]);
 
   return createPortal(
-    <div className={s.backdrop} onClick={handleClose}>
-      {children}
+    <div className={s.backdrop} onMouseUp={handleMouseUp} ref={backdropRef}>
+      <div
+        className={s.modal}
+        onClick={handleModalClick}
+        onMouseDown={handleMouseDown}
+        ref={modalRef}
+      >
+        {children}
+      </div>
     </div>,
     modalRoot,
   );

src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx

@@ -1,230 +1,93 @@
 import { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { selectorTheme } from 'redux/Auth/authSelectors';
+import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import s from './BoxRadioBackgroundGroup.module.scss';
+import {
+  selectBackgroundThumbnails,
+  selectBackgroundLoading,
+} from '../../redux/Background/backgroundSelectors';
+import { getListOfThumbnails } from '../../redux/Background/backgroundOperations';
+import { selectorTheme } from '../../redux/Auth/authSelectors';
+import { Loader } from 'components/Loader/Loader';
 
-import { currentBoard } from '../../redux/Boards/boardsSelectors';
+import s from './BoxRadioBackgroundGroup.module.scss';
 
 export const BoxRadioBackgroundGroup = ({ valueChange }) => {
-  const board = useSelector(currentBoard);
-  const currentBackgroud = board?.background;
+  const thumbnails = useSelector(selectBackgroundThumbnails);
+  const loading = useSelector(selectBackgroundLoading);
   const theme = useSelector(selectorTheme);
 
-  const [background, setBackground] = useState(currentBackgroud || '');
+  const dispatch = useDispatch();
+  const [background, setBackground] = useState(null);
 
-  const handleCheked = e => {
-    setBackground(e.target.value);
+  const handleChange = e => {
+    const selectedBackground = e.target.value;
+    setBackground(selectedBackground);
+    valueChange(selectedBackground);
   };
 
   useEffect(() => {
-    valueChange(background);
-  }, [valueChange, background]);
+    dispatch(getListOfThumbnails());
+  }, [dispatch]);
+
+  useEffect(() => {
+    setBackground('default');
+  }, []);
 
   return (
     <div className={s.backgroundGroupWrapper}>
       <h1 className={`${s.label} ${s[theme]}`}>Background</h1>
       <div className={s.radioWrapper}>
-        <div className={s.radioContainer}>
+        {/* Default Background */}
+        <div
+          className={`${s.radioContainer} ${s[theme]} ${
+            background === 'default' ? s.selected : ''
+          }`}
+        >
           <input
-            className={s.radioInput1}
+            className={`${s.radioInput} ${s[theme]}`}
             type="radio"
-            onChange={handleCheked}
-            value="one"
+            onChange={handleChange}
+            value="null"
             name="background"
-            id="one"
-            checked={background === 'one'}
+            id="radio-default"
+            checked={background === 'default'}
           />
           <label
-            htmlFor="one"
-            className={`${s.radioLabel1} ${s[theme]}`}
+            htmlFor="radio-default"
+            className={`${s.radioLabelDefault} ${s[theme]}`}
           ></label>
         </div>
 
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput2}
-            type="radio"
-            onChange={handleCheked}
-            value="11.jpg"
-            name="background"
-            id="two"
-            checked={background === 'two'}
-          />
-          <label htmlFor="two" className={s.radioLabel2}></label>
-        </div>
-
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput3}
-            type="radio"
-            onChange={handleCheked}
-            value="12.jpg"
-            name="background"
-            id="three"
-            checked={background === 'three'}
-          />
-          <label htmlFor="three" className={s.radioLabel3}></label>
-        </div>
-
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput4}
-            type="radio"
-            onChange={handleCheked}
-            value="13.jpg"
-            name="background"
-            id="four"
-            checked={background === 'four'}
-          />
-          <label htmlFor="four" className={s.radioLabel4}></label>
-        </div>
-        {/* 4 */}
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput5}
-            type="radio"
-            onChange={handleCheked}
-            value="14.jpg"
-            name="background"
-            id="five"
-            checked={background === 'five'}
-          />
-          <label htmlFor="five" className={s.radioLabel5}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput6}
-            type="radio"
-            onChange={handleCheked}
-            value="15.jpg"
-            name="background"
-            id="six"
-            checked={background === 'six'}
-          />
-          <label htmlFor="six" className={s.radioLabel6}></label>
-        </div>
-
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput7}
-            type="radio"
-            onChange={handleCheked}
-            value="16.jpg"
-            name="background"
-            id="seven"
-            checked={background === 'seven'}
-          />
-          <label htmlFor="seven" className={s.radioLabel7}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput8}
-            type="radio"
-            onChange={handleCheked}
-            value="17.jpg"
-            name="background"
-            id="eight"
-            checked={background === 'eight'}
-          />
-          <label htmlFor="eight" className={s.radioLabel8}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput9}
-            type="radio"
-            onChange={handleCheked}
-            value="18.jpg"
-            name="background"
-            id="nine"
-            checked={background === 'nine'}
-          />
-          <label htmlFor="nine" className={s.radioLabel9}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput10}
-            type="radio"
-            onChange={handleCheked}
-            value="19.jpg"
-            name="background"
-            id="ten"
-            checked={background === 'ten'}
-          />
-          <label htmlFor="ten" className={s.radioLabel10}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput11}
-            type="radio"
-            onChange={handleCheked}
-            value="20.jpg"
-            name="background"
-            id="eleven"
-            checked={background === 'eleven'}
-          />
-          <label htmlFor="eleven" className={s.radioLabel11}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput12}
-            type="radio"
-            onChange={handleCheked}
-            value="21.jpg"
-            name="background"
-            id="twelve"
-            checked={background === 'twelve'}
-          />
-          <label htmlFor="twelve" className={s.radioLabel12}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput13}
-            type="radio"
-            onChange={handleCheked}
-            value="22.jpg"
-            name="background"
-            id="thirteen"
-            checked={background === 'thirteen'}
-          />
-          <label htmlFor="thirteen" className={s.radioLabel13}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput14}
-            type="radio"
-            onChange={handleCheked}
-            value="23.jpg"
-            name="background"
-            id="fourteen"
-            checked={background === 'fourteen'}
-          />
-          <label htmlFor="fourteen" className={s.radioLabel14}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput15}
-            type="radio"
-            onChange={handleCheked}
-            value="24.jpg"
-            name="background"
-            id="fifteen"
-            checked={background === 'fifteen'}
-          />
-          <label htmlFor="fifteen" className={s.radioLabel15}></label>
-        </div>
-        <div className={s.radioContainer}>
-          <input
-            className={s.radioInput16}
-            type="radio"
-            onChange={handleCheked}
-            value="25.jpg"
-            name="background"
-            id="sixteen"
-            checked={background === 'sixteen'}
-          />
-          <label htmlFor="sixteen" className={s.radioLabel16}></label>
-        </div>
+        {/* Backgrounds from Backend */}
+        {!loading &&
+          thumbnails.map((thumbnail, index) => (
+            <div
+              className={`${s.radioContainer} ${s[theme]} ${
+                background === thumbnail.id ? s.selected : ''
+              }`}
+              key={thumbnail.id}
+            >
+              <input
+                className={s.radioInput}
+                type="radio"
+                onChange={handleChange}
+                value={thumbnail.id}
+                name="background"
+                id={`radio-${index}`}
+                checked={background === thumbnail.id}
+              />
+              <label
+                htmlFor={`radio-${index}`}
+                className={`${s.radioLabel} ${s[`radioLabel${index + 1}`]}`}
+                style={{ backgroundImage: `url(${thumbnail.thumbnail})` }}
+              ></label>
+            </div>
+          ))}
+        {loading && (
+          <div className={s.loaderWrapper}>
+            <Loader />
+          </div>
+        )}
       </div>
     </div>
   );