add validate

README.md

@@ -2,4 +2,7 @@
 [![Actions Status](https://github.com/Tatyana-js/frontend-project-12/actions/workflows/hexlet-check.yml/badge.svg)](https://github.com/Tatyana-js/frontend-project-12/actions)
 
 ### link to the site:
-(https://github.com/Tatyana-js/frontend-project-12)
+(https://github.com/Tatyana-js/frontend-project-12)
+
+### demo
+(https://frontend-chat-ru.hexlet.app/)

frontend/src/components/AddModal.jsx

@@ -1,25 +1,27 @@
 import { useEffect, useRef } from 'react';
 import { useFormik } from 'formik';
 import { Modal, FormGroup, FormControl, Button, Form } from 'react-bootstrap';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import { channelSchema } from '../utils/validate.js';
 import { useAddChannelMutation } from '../api/chatApi';
 import { selectActiveTab } from '../slices/activeChannelSlice.js';
 
 const AddChannel = ({ onHide }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const [ addChannel ] = useAddChannelMutation();
-  const modals = useSelector((state) => state.modals);
   const formControlEl = useRef(null);
 
   const formik = useFormik({
     initialValues: {
-      channelName: '',
+      name: '',
     },
+    validationSchema: channelSchema(t),
+    validateOnChange: false,
     onSubmit: async (values) => {
       try {
-        const response = await addChannel({name: values.channelName});
+        const response = await addChannel({name: values.name});
         dispatch(selectActiveTab(response.data));
         onHide();
       } catch (error) {
@@ -29,10 +31,6 @@ const AddChannel = ({ onHide }) => {
     }
   });
 
-  useEffect(() => {
-    formControlEl.current.focus();
-  }, []);
-
 return (
   <>
   <div className='fade modal-backdrop show'></div>
@@ -45,14 +43,18 @@ return (
           <Form onSubmit={formik.handleSubmit}>
             <FormGroup>
               <FormControl
-                name="channelName"
+                name="name"
                 className='mb-2' 
-                value={formik.values.channelName}
+                value={formik.values.name}
                 onChange={formik.handleChange}
                 ref={formControlEl}
+                isInvalid={formik.errors.name}
+                autoFocus
               />
               <Form.Label className='visually-hidden' htmlFor='channelName'>{t('modal.name')}</Form.Label>
-              <Form.Control.Feedback type="invalid"></Form.Control.Feedback>
+              {formik.errors.name && 
+               <Form.Control.Feedback type="invalid">{formik.errors.name}</Form.Control.Feedback> 
+              }
               <div className='d-flex justify-content-end'>
                 <Button type="button" className='me-2' variant="secondary" onClick={onHide}>{t('modal.cancel')}</Button> 
                 <Button type="submit" variant="primary">{t('modal.send')}</Button> 

frontend/src/components/RemoveModel.jsx

@@ -1,22 +1,20 @@
 import { Modal, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useRemoveChannelMutation } from '../api/chatApi';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { selectActiveTab, defaultChannel } from '../slices/activeChannelSlice.js';
 
 const RemoveChannel = ({ onHide }) => {
   const { t } = useTranslation();
   const [ removeChannel ] = useRemoveChannelMutation();
+  const dispatch = useDispatch();
   const channel = useSelector((state) => state.modals.channel);
-  // const activeChannel = useSelector(activeChannelSelector);
 
   const handleRemove = async (id) => {
     try {
       await removeChannel(id);
-            onHide();
-      selectActiveTab(defaultChannel);
-      console.log(defaultChannel);
-
+      onHide();
+      dispatch(selectActiveTab(defaultChannel));
     } catch (err) {
       console.log(err);
     }

frontend/src/components/Сhannels.jsx

@@ -40,16 +40,17 @@ return (
       {channels.map((channel) => {
       return (
           <Nav.Item as="li" key={channel.id} className="w-100">
-            {!channel.removable && (<Button
+            {!channel.removable && 
+            <Button
               type="button" 
               className="w-100 rounded-0 text-start"
               variant={variant(channel)}
               onClick={() => dispatch(selectActiveTab(channel))}
             >
               <span className="me-1"># </span>
               {channel.name}
-            </Button>)}
-            {channel.removable && (
+            </Button>}
+            {channel.removable && 
               <Dropdown role="group" className='d-flex btn-group'>
                 <Button className='w-100 rounded-0 text-start text-truncate' variant={variant(channel)} onClick={() => dispatch(selectActiveTab(channel))}>
                   <span className="me-1"># </span>
@@ -62,7 +63,7 @@ return (
                   <Dropdown.Item role="button" onClick={() => showModal('removing', channel)}>{t('channels.dropdownButtonRemove')}</Dropdown.Item>
                   <Dropdown.Item role="button">{t('channels.dropdownButtonRename')}</Dropdown.Item>
                 </Dropdown.Menu>
-            </Dropdown>)}
+              </Dropdown>}
           </Nav.Item> 
           );
         }

frontend/src/init.jsx

@@ -56,12 +56,9 @@ const init = async () => {
   // })
 
   return (
-    <I18nextProvider i18n={i18n}>
       <Provider store={store}>
         <App />
       </Provider>
-    </I18nextProvider>
-
   );
 };
 

frontend/src/locales/ru.js

@@ -29,6 +29,10 @@ export default {
         removeChannel: 'Удалить канал',
         removeText: 'Уверены?',
         removeButton: 'Удалить',
+        schema: {
+          required: 'Обязательное поле',
+          minMax: 'От 3 до 20 символов',
+        }
       },
       countMessages: {
         messages_one: '{{count}} сообщение',

frontend/src/utils/validate.js

@@ -1,8 +1,17 @@
-import { object, string } from 'yup';
+import { object, string, ref } from 'yup';
 
 const userSchema = () => object().shape({
   username: string().min(3).required(),
   password: string().required(),
 });
 
+export const channelSchema = (t) => object({
+  name: string()
+       .trim()
+       .required(t('modal.schema.required'))
+       .min(3, t('modal.schema.minMax'))
+       .max(20, t('modal.schema.minMax'))
+});
+
+
 export default userSchema;