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

fix max-length column, cirilica
001elijah · Jun 29, 2023 · 6b5a608 · 6b5a608
2 parents 15b73ba + b870398
commit 6b5a608
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 12 deletions.
diff --git a/src/components/BoardModalWindow/BoardModalWindow.jsx b/src/components/BoardModalWindow/BoardModalWindow.jsx
@@ -21,7 +21,7 @@ export const BoardModalWindow = ({
   const [background, setBackground] = useState();
   const [icon, setIcon] = useState('');
   const [isValid, setIsValid] = useState(false);
-  // const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false);
+  const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false);
   const [errorCirillicaTitle, setErrorCirillicaTitle] = useState(false);
 
   const handleSubmit = e => {
@@ -46,7 +46,7 @@ export const BoardModalWindow = ({
   };
 
   const handleChange = e => {
-    const cyrillicRegex = /^[a-zA-Z]+$/;
+    const cyrillicRegex = /^[^\u0400-\u04FF]+$/;
     setTitle(e.target.value);
 
     if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) {
@@ -55,6 +55,12 @@ export const BoardModalWindow = ({
     } else {
       setErrorCirillicaTitle(false);
     }
+
+    if (e.target.value.length === 64) {
+      setErrorTitleMaxLength(true);
+    } else {
+      setErrorTitleMaxLength(false);
+    }
   };
 
   return (
@@ -64,10 +70,16 @@ export const BoardModalWindow = ({
           className={`${s.inputModal} ${s[theme]}`}
           value={title}
           placeholder={'Title'}
+          maxLength="64"
           onChange={handleChange}
         />
         {isValid && <p className={s.errorTitle}>required field</p>}
-        {errorCirillicaTitle && (
+        {errorTitleMaxLength && (
+          <p className={s.errorTitleMaxLength}>
+            you have reached the symbols limit
+          </p>
+        )}
+        {errorCirillicaTitle && !errorTitleMaxLength && (
           <p className={s.errorCirillicaTitle}>
             invalid characters (latin alphabet only)
           </p>

diff --git a/src/components/BoardModalWindow/BoardModalWindow.module.scss b/src/components/BoardModalWindow/BoardModalWindow.module.scss
@@ -1,6 +1,7 @@
 @import '../../assets/styles/vars';
 @import '../../assets/styles/mixins';
 
+.errorTitleMaxLength,
 .errorCirillicaTitle,
 .errorTitle {
   position: absolute;

diff --git a/src/components/CardModalWindow/CardModalWindow.jsx b/src/components/CardModalWindow/CardModalWindow.jsx
@@ -60,7 +60,7 @@ export const CardModalWindow = ({
   };
 
   const handleChange = e => {
-    const cyrillicRegex = /^[a-zA-Z]+$/;
+    const cyrillicRegex = /^[^\u0400-\u04FF]+$/;
     setValue(e.target.value);
 
     if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) {
@@ -77,7 +77,7 @@ export const CardModalWindow = ({
   };
 
   const handleChangeDescription = e => {
-    const cyrillicRegex = /^[a-zA-Z]+$/;
+    const cyrillicRegex = /^[^\u0400-\u04FF]+$/;
     setComent(e.target.value);
 
     if (e.target.value.length > 0 && !cyrillicRegex.test(e.target.value)) {

diff --git a/src/components/ColumnModalWindow/ColumnModalWindow.jsx b/src/components/ColumnModalWindow/ColumnModalWindow.jsx
@@ -22,6 +22,7 @@ export const ColumnModalWindow = ({
   const theme = useSelector(selectorTheme);
   const [isValid, setIsValid] = useState(false);
   const [errorCirillicaTitle, setErrorCirillicaTitle] = useState(false);
+  const [errorTitleMaxLength, setErrorTitleMaxLength] = useState(false);
 
   // const updateBoard = ()=>{
   //   setTimeout(()=>{dispatch(getBoardById(boardId)),0 })
@@ -55,14 +56,21 @@ export const ColumnModalWindow = ({
   };
 
   const handleChange = e => {
-    const cyrillicRegex = /^[a-zA-Z]+$/;
+    const cyrillicRegex = /^[^\u0400-\u04FF]+$/;
 
     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);
+    }
+
     setValue(e.target.value);
   };
   return (
@@ -72,10 +80,16 @@ export const ColumnModalWindow = ({
           className={`${s.inputModal} ${s[theme]}`}
           value={value}
           placeholder="Title"
+          maxLength="64"
           onChange={handleChange}
         />
         {isValid && <p className={s.errorTitle}>required field</p>}
-        {errorCirillicaTitle && (
+        {errorTitleMaxLength && (
+          <p className={s.errorTitleMaxLength}>
+            you have reached the symbols limit
+          </p>
+        )}
+        {errorCirillicaTitle && !errorTitleMaxLength && (
           <p className={s.errorCirillicaTitle}>
             invalid characters (latin alphabet only)
           </p>

diff --git a/src/components/ColumnModalWindow/ColumnModalWindow.module.scss b/src/components/ColumnModalWindow/ColumnModalWindow.module.scss
@@ -85,6 +85,7 @@
   }
 }
 
+.errorTitleMaxLength,
 .errorCirillicaTitle,
 .errorTitle {
   position: absolute;

diff --git a/src/components/SchemaValidation/schemaValidation.jsx b/src/components/SchemaValidation/schemaValidation.jsx
@@ -24,10 +24,10 @@ export const validationSchemaRegister = yup.object().shape({
   userName: yup
     .string()
     .matches(
-    /^[a-zA-Z0-9]+([-_ ][a-zA-Z0-9]+)*$/,
-    // 'Only letters, numbers, underscores, spaces, hyphens, and dashes are allowed between words',
-      'Invalid name'
-  )
+      /^[a-zA-Z0-9]+([-_ ][a-zA-Z0-9]+)*$/,
+      // 'Only letters, numbers, underscores, spaces, hyphens, and dashes are allowed between words',
+      'Invalid name',
+    )
     .min(2, 'Minimum length 2 characters')
     .max(32, 'Maximum length 32 characters')
     .required('Name required'),
@@ -48,4 +48,4 @@ export const validationSchemaRegister = yup.object().shape({
     .min(8, 'Minimum length 8 characters')
     .max(64, 'Maximum length 64 characters')
     .required('Password required'),
-});
+});