Merge pull request #56 from 001elijah/create-edit-modal

add validation on title card/board
001elijah · Jun 29, 2023 · bc14551 · bc14551
2 parents c8ec903 + 1d89c75
commit bc14551
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 25 deletions.
diff --git a/src/components/BoardItem/BoardItem.module.scss b/src/components/BoardItem/BoardItem.module.scss
@@ -52,6 +52,10 @@
   letter-spacing: -0.02em;
   color: #ffffff80;
 
+  width: 135px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   &.light {
     color: #16161680;
   }

diff --git a/src/components/BoardModalWindow/BoardModalWindow.jsx b/src/components/BoardModalWindow/BoardModalWindow.jsx
@@ -21,10 +21,16 @@ export const BoardModalWindow = ({
   const [background, setBackground] = useState();
   const [icon, setIcon] = useState('');
   const [isValid, setIsValid] = useState(false);
+  // const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false);
+  const [errorCirillicaTitle, setErrorCirillicaTitle] = useState(false);
 
   const handleSubmit = e => {
     e.preventDefault();
 
+    if (errorCirillicaTitle) {
+      return;
+    }
+
     if (title === '') {
       setIsValid(true);
       setTimeout(() => setIsValid(false), 2500);
@@ -39,17 +45,33 @@ export const BoardModalWindow = ({
     }
   };
 
+  const handleChange = e => {
+    const cyrillicRegex = /^[a-zA-Z]+$/;
+    setTitle(e.target.value);
+
+    if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) {
+      setErrorCirillicaTitle(true);
+      e.preventDefault();
+    } else {
+      setErrorCirillicaTitle(false);
+    }
+  };
+
   return (
     <Modal title={modalTitle} onClose={handleToggleModal}>
       <form onSubmit={handleSubmit}>
         <input
           className={`${s.inputModal} ${s[theme]}`}
           value={title}
           placeholder={'Title'}
-          onChange={e => setTitle(e.target.value)}
+          onChange={handleChange}
         />
         {isValid && <p className={s.errorTitle}>required field</p>}
-
+        {errorCirillicaTitle && (
+          <p className={s.errorCirillicaTitle}>
+            invalid characters (latin alphabet only)
+          </p>
+        )}
         <BoxRadioIconGroup valueChange={setIcon} activeIcon={activeIcon} />
         <BoxRadioBackgroundGroup valueChange={setBackground} />
         <button className={`${s.buttonModal} ${s[theme]}`} type="submit">

diff --git a/src/components/BoardModalWindow/BoardModalWindow.module.scss b/src/components/BoardModalWindow/BoardModalWindow.module.scss
@@ -1,9 +1,10 @@
 @import '../../assets/styles/vars';
 @import '../../assets/styles/mixins';
 
+.errorCirillicaTitle,
 .errorTitle {
   position: absolute;
-  top: 150px;
+  top: 128px;
   left: 30px;
   font-size: 10px;
   font-family: Poppins-Regular;

diff --git a/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx b/src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx
@@ -30,15 +30,15 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
   useEffect(() => {
     dispatch(getListOfThumbnails());
   }, [dispatch]);
-  
+
   return (
     <div className={s.backgroundGroupWrapper}>
       <h1 className={`${s.label} ${s[theme]}`}>Background</h1>
       <div className={s.radioWrapper}>
         {/* Default Background */}
         <div
           className={`${s.radioContainer} ${s[theme]} ${
-            background === "default" ? s.selected : ''
+            background === 'default' ? s.selected : ''
           }`}
         >
           <input

diff --git a/src/components/CardModalWindow/CardModalWindow.jsx b/src/components/CardModalWindow/CardModalWindow.jsx
@@ -23,6 +23,12 @@ export const CardModalWindow = ({
   const theme = useSelector(selectorTheme);
 
   const [isValid, setIsValid] = useState(false);
+  const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false);
+  const [errorCirillicaTitle, setErrorCirillicaTitle] = useState(false);
+  const [errorMaxLengthDescription, setErrorMaxLengthDescription] =
+    useState(false);
+  const [errorCirillicaDescription, setErrorCirillicaDescription] =
+    useState(false);
   const [value, setValue] = useState(inputTitle);
   const [coment, setComent] = useState(description);
   const [priorityColor, setPriorityColorColor] = useState(color);
@@ -34,9 +40,13 @@ export const CardModalWindow = ({
 
   const handleSubmit = e => {
     e.preventDefault();
+
+    if (errorCirillicaDescription || errorCirillicaTitle) {
+      return;
+    }
     if (value === '') {
       setIsValid(true);
-      setTimeout(() => setIsValid(false), 2500);
+      setTimeout(() => setIsValid(false), 3500);
     } else {
       const newCard = {
         value,
@@ -49,24 +59,85 @@ export const CardModalWindow = ({
     }
   };
 
+  const handleChange = e => {
+    const cyrillicRegex = /^[a-zA-Z]+$/;
+    setValue(e.target.value);
+
+    if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) {
+      setErrorCirillicaTitle(true);
+      e.preventDefault();
+    } else {
+      setErrorCirillicaTitle(false);
+    }
+    if (e.target.value.length === 64) {
+      setErrorTitleMaxLength(true);
+    } else {
+      setErrorTitleMaxLength(false);
+    }
+  };
+
+  const handleChangeDescription = e => {
+    const cyrillicRegex = /^[a-zA-Z]+$/;
+    setComent(e.target.value);
+
+    if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) {
+      setErrorCirillicaDescription(true);
+      e.preventDefault();
+    } else {
+      setErrorCirillicaDescription(false);
+    }
+
+    if (e.target.value.length === 200) {
+      setErrorMaxLengthDescription(true);
+    } else {
+      setErrorMaxLengthDescription(false);
+    }
+  };
+
   return (
     <Modal title={modalTitle} onClose={handleToggleModal}>
       <form onSubmit={handleSubmit}>
         <input
           className={`${s.inputModal} ${s[theme]}`}
           value={value}
           placeholder={'Title'}
-          onChange={e => setValue(e.target.value)}
+          maxLength="64"
+          onChange={handleChange}
         />
         {isValid && <p className={s.errorTitle}>required field</p>}
+        {errorTitleMaxLength && (
+          <p className={s.errorTitleMaxLength}>
+            you have reached the symbols limit
+          </p>
+        )}
+        {errorCirillicaTitle && !errorTitleMaxLength && (
+          <p className={s.errorCirillicaTitle}>
+            invalid characters (latin alphabet only)
+          </p>
+        )}
         <textarea
-          onChange={e => setComent(e.target.value)}
+          onChange={handleChangeDescription}
           className={`${s.textAreaStyle} ${s[theme]}`}
           name="coments"
           id="coments"
           placeholder="Description"
           value={coment}
+          maxLength="200"
         ></textarea>
+        {errorMaxLengthDescription && (
+          <p className={s.errortextAreaMaxLength}>
+            you have reached the symbols limit
+          </p>
+        )}
+        {errorCirillicaDescription && !errorMaxLengthDescription && (
+          <p className={s.errortextAreaCirillica}>
+            invalid characters (latin alphabet only)
+          </p>
+        )}
+        <BoxRadioColorGroup
+          valueChange={handleChangeColor}
+          deadline={priorityColor}
+        />
         {theme === 'dark' && (
           <CalendarDark onDate={setDeadline} deadline={deadline} />
         )}
@@ -76,10 +147,6 @@ export const CardModalWindow = ({
         {theme === 'colorful' && (
           <CalendarColorful onDate={setDeadline} deadline={deadline} />
         )}
-        <BoxRadioColorGroup
-          valueChange={handleChangeColor}
-          deadline={priorityColor}
-        />
         <button className={`${s.buttonModal} ${s[theme]}`} type="submit">
           <span className={`${s.iconButtonModalWrapper} ${s[theme]}`}>
             <svg

diff --git a/src/components/CardModalWindow/CardModalWindow.module.scss b/src/components/CardModalWindow/CardModalWindow.module.scss
@@ -9,6 +9,7 @@
   height: 154px;
   margin-bottom: 24px;
   padding: 14px 18px;
+  position: relative;
 
   resize: none;
 
@@ -91,6 +92,18 @@
 .textAreaStyle:focus {
   opacity: initial;
 }
+.errortextAreaCirillica,
+.errortextAreaMaxLength {
+  position: absolute;
+  top: 305px;
+  left: 30px;
+  font-size: 10px;
+  font-family: Poppins-Regular;
+  font-weight: 400;
+  letter-spacing: -0.24px;
+
+  color: red;
+}
 
 .inputModal {
   width: 287px;
@@ -100,7 +113,7 @@
   border: 1px solid #bedbb0;
   border-radius: 8px;
   margin-bottom: 24px;
-
+  position: relative;
   font-family: 'Poppins-Regular';
   font-style: normal;
   font-weight: 400;
@@ -176,7 +189,20 @@
 
 .errorTitle {
   position: absolute;
-  top: 150px;
+  top: 128px;
+  left: 30px;
+  font-size: 10px;
+  font-family: Poppins-Regular;
+  font-weight: 400;
+  letter-spacing: -0.24px;
+
+  color: red;
+}
+
+.errorTitleMaxLength,
+.errorCirillicaTitle {
+  position: absolute;
+  top: 128px;
   left: 30px;
   font-size: 10px;
   font-family: Poppins-Regular;

diff --git a/src/components/ColumnModalWindow/ColumnModalWindow.jsx b/src/components/ColumnModalWindow/ColumnModalWindow.jsx
@@ -21,14 +21,15 @@ export const ColumnModalWindow = ({
   const [value, setValue] = useState(inputTitle);
   const theme = useSelector(selectorTheme);
   const [isValid, setIsValid] = useState(false);
+  const [errorCirillicaTitle, setErrorCirillicaTitle] = useState(false);
 
   // const updateBoard = ()=>{
   //   setTimeout(()=>{dispatch(getBoardById(boardId)),0 })
   // }
 
   const handleSubmit = async e => {
     e.preventDefault();
-
+    if (errorCirillicaTitle) return;
     if (value === '') {
       setIsValid(true);
       setTimeout(() => setIsValid(false), 2500);
@@ -53,16 +54,32 @@ export const ColumnModalWindow = ({
     }
   };
 
+  const handleChange = e => {
+    const cyrillicRegex = /^[a-zA-Z]+$/;
+
+    if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) {
+      setErrorCirillicaTitle(true);
+      e.preventDefault();
+    } else {
+      setErrorCirillicaTitle(false);
+    }
+    setValue(e.target.value);
+  };
   return (
     <Modal title={modalTitle} onClose={onClick}>
       <form onSubmit={handleSubmit}>
         <input
           className={`${s.inputModal} ${s[theme]}`}
           value={value}
           placeholder="Title"
-          onChange={e => setValue(e.target.value)}
+          onChange={handleChange}
         />
         {isValid && <p className={s.errorTitle}>required field</p>}
+        {errorCirillicaTitle && (
+          <p className={s.errorCirillicaTitle}>
+            invalid characters (latin alphabet only)
+          </p>
+        )}
         <button className={`${s.buttonModal} ${s[theme]}`} type="submit">
           <span className={`${s.iconButtonModalWrapper} ${s[theme]}`}>
             <svg

diff --git a/src/components/ColumnModalWindow/ColumnModalWindow.module.scss b/src/components/ColumnModalWindow/ColumnModalWindow.module.scss
@@ -85,9 +85,10 @@
   }
 }
 
+.errorCirillicaTitle,
 .errorTitle {
   position: absolute;
-  top: 150px;
+  top: 128px;
   left: 30px;
   font-size: 10px;
   font-family: Poppins-Regular;

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

diff --git a/src/components/TaskCard/TaskCard.module.scss b/src/components/TaskCard/TaskCard.module.scss
@@ -43,6 +43,9 @@
   line-height: 1.5;
   color: $black-text-color;
 
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   &.dark {
     color: $white-text-color;
   }