fix: replace header, title to modal components

frontend/src/components/modals/AddChannelModal/AddChannelModal.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import {
-  Form, FormGroup, FormControl, FormLabel, Button,
+  Modal as BootstrapModal, Form, FormGroup, FormControl, FormLabel, Button,
 } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import { useDispatch } from 'react-redux';
@@ -50,49 +50,58 @@ const AddChannelModal = ({ handleClose }) => {
   });
 
   return (
-    <Form onSubmit={formik.handleSubmit}>
-      <FormGroup>
-        <FormControl
-          id="name"
-          name="name"
-          className="mb-2"
-          ref={inputRef}
-          onChange={formik.handleChange}
-          value={formik.values.name}
-          isInvalid={formik.touched.name && formik.errors.name}
-          disabled={formik.isSubmitting}
-        />
-        <FormLabel visuallyHidden htmlFor="name">{t('modals.channelName')}</FormLabel>
-        <Form.Control.Feedback type="invalid">
-          {formik.errors.name}
-        </Form.Control.Feedback>
-      </FormGroup>
-      <div className="d-flex justify-content-end">
-        <Button
-          type="button"
-          variant="secondary"
-          className="me-2"
-          onClick={handleClose}
-          disabled={formik.isSubmitting}
-        >
-          {t('modals.cancel')}
-        </Button>
-        <Button
-          type="submit"
-          variant="primary"
-          disabled={!formik.dirty || formik.isSubmitting}
-        >
-          {isLoading ? (
-            <>
-              <LoadingSpinner />
-              <span>{t('modals.send')}</span>
-            </>
-          ) : (
-            t('modals.send')
-          )}
-        </Button>
-      </div>
-    </Form>
+    <>
+      <BootstrapModal.Header closeButton>
+        <BootstrapModal.Title>
+          {t('modals.addTitle')}
+        </BootstrapModal.Title>
+      </BootstrapModal.Header>
+      <BootstrapModal.Body>
+        <Form onSubmit={formik.handleSubmit}>
+          <FormGroup>
+            <FormControl
+              id="name"
+              name="name"
+              className="mb-2"
+              ref={inputRef}
+              onChange={formik.handleChange}
+              value={formik.values.name}
+              isInvalid={formik.touched.name && formik.errors.name}
+              disabled={formik.isSubmitting}
+            />
+            <FormLabel visuallyHidden htmlFor="name">{t('modals.channelName')}</FormLabel>
+            <Form.Control.Feedback type="invalid">
+              {formik.errors.name}
+            </Form.Control.Feedback>
+          </FormGroup>
+          <div className="d-flex justify-content-end">
+            <Button
+              type="button"
+              variant="secondary"
+              className="me-2"
+              onClick={handleClose}
+              disabled={formik.isSubmitting}
+            >
+              {t('modals.cancel')}
+            </Button>
+            <Button
+              type="submit"
+              variant="primary"
+              disabled={!formik.dirty || formik.isSubmitting}
+            >
+              {isLoading ? (
+                <>
+                  <LoadingSpinner />
+                  <span>{t('modals.send')}</span>
+                </>
+              ) : (
+                t('modals.send')
+              )}
+            </Button>
+          </div>
+        </Form>
+      </BootstrapModal.Body>
+    </>
   );
 };
 

frontend/src/components/modals/ModalComponent.jsx

@@ -1,33 +1,24 @@
 import { useSelector, useDispatch } from 'react-redux';
 import { Modal as BootstrapModal } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
 import { selectIsOpen, closeModal, selectType } from '../../store/slices/modalsSlice';
 import { MODALS } from './constants';
 
-const Modal = () => {
+const ModalComponent = () => {
   const dispatch = useDispatch();
   const isOpen = useSelector(selectIsOpen);
   const type = useSelector(selectType);
-  const { t } = useTranslation();
 
   const handleClose = () => {
     dispatch(closeModal());
   };
 
-  const Component = MODALS[type];
+  const ModalContent = MODALS[type];
 
   return (
     <BootstrapModal show={isOpen} onHide={handleClose} centered>
-      <BootstrapModal.Header closeButton>
-        <BootstrapModal.Title>
-          {t(`modals.${type}ChannelTitle`)}
-        </BootstrapModal.Title>
-      </BootstrapModal.Header>
-      <BootstrapModal.Body>
-        {Component && <Component handleClose={handleClose} />}
-      </BootstrapModal.Body>
+      {ModalContent && <ModalContent handleClose={handleClose} />}
     </BootstrapModal>
   );
 };
 
-export default Modal;
+export default ModalComponent;

frontend/src/components/modals/RemoveChannelModal.jsx

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Button } from 'react-bootstrap';
+import { Modal as BootstrapModal, Button } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import { useRemoveChannelMutation } from '../../api/channelsApi';
 import { setDefaultChannel, selectCurrentChannelId } from '../../store/slices/channelsSlice';
@@ -29,32 +29,39 @@ const RemoveChannelModal = ({ handleClose }) => {
 
   return (
     <>
-      <p className="lead">{t('modals.text')}</p>
-      <div className="d-flex justify-content-end">
-        <Button
-          type="button"
-          variant="secondary"
-          className="me-2"
-          onClick={handleClose}
-        >
-          {t('modals.cancel')}
-        </Button>
-        <Button
-          type="submit"
-          variant="danger"
-          onClick={() => handleRemoveChannel(channelId)}
-          disabled={isLoading}
-        >
-          {isLoading ? (
-            <>
-              <LoadingSpinner />
-              <span>{t('modals.remove')}</span>
-            </>
-          ) : (
-            t('modals.remove')
-          )}
-        </Button>
-      </div>
+      <BootstrapModal.Header closeButton>
+        <BootstrapModal.Title>
+          {t('modals.removeTitle')}
+        </BootstrapModal.Title>
+      </BootstrapModal.Header>
+      <BootstrapModal.Body>
+        <p className="lead">{t('modals.text')}</p>
+        <div className="d-flex justify-content-end">
+          <Button
+            type="button"
+            variant="secondary"
+            className="me-2"
+            onClick={handleClose}
+          >
+            {t('modals.cancel')}
+          </Button>
+          <Button
+            type="submit"
+            variant="danger"
+            onClick={() => handleRemoveChannel(channelId)}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <>
+                <LoadingSpinner />
+                <span>{t('modals.remove')}</span>
+              </>
+            ) : (
+              t('modals.remove')
+            )}
+          </Button>
+        </div>
+      </BootstrapModal.Body>
     </>
   );
 };

frontend/src/components/modals/RenameChannelModal/RenameChannelModal.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useFormik } from 'formik';
 import {
-  Form, FormGroup, FormControl, FormLabel, Button,
+  Modal as BootstrapModal, Form, FormGroup, FormControl, FormLabel, Button,
 } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import filter from 'leo-profanity';
@@ -59,50 +59,59 @@ const RenameChannelModal = ({ handleClose }) => {
   });
 
   return (
-    <Form onSubmit={formik.handleSubmit}>
-      <FormGroup>
-        <FormControl
-          id="name"
-          name="name"
-          ref={inputRef}
-          onChange={formik.handleChange}
-          onBlur={formik.handleBlur}
-          value={formik.values.name}
-          disabled={formik.isSubmitting}
-          isInvalid={formik.touched.name && formik.errors.name}
-          className="mb-2"
-        />
-        <FormLabel visuallyHidden htmlFor="name">{t('modals.channelName')}</FormLabel>
-        <Form.Control.Feedback type="invalid">
-          {formik.errors.name}
-        </Form.Control.Feedback>
-      </FormGroup>
-      <div className="d-flex justify-content-end">
-        <Button
-          type="button"
-          variant="secondary"
-          className="me-2"
-          onClick={handleClose}
-          disabled={formik.isSubmitting}
-        >
-          {t('modals.cancel')}
-        </Button>
-        <Button
-          type="submit"
-          variant="primary"
-          disabled={!formik.dirty || formik.isSubmitting}
-        >
-          {isLoading ? (
-            <>
-              <LoadingSpinner />
-              <span>{t('modals.send')}</span>
-            </>
-          ) : (
-            t('modals.send')
-          )}
-        </Button>
-      </div>
-    </Form>
+    <>
+      <BootstrapModal.Header closeButton>
+        <BootstrapModal.Title>
+          {t('modals.renameTitle')}
+        </BootstrapModal.Title>
+      </BootstrapModal.Header>
+      <BootstrapModal.Body>
+        <Form onSubmit={formik.handleSubmit}>
+          <FormGroup>
+            <FormControl
+              id="name"
+              name="name"
+              ref={inputRef}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              value={formik.values.name}
+              disabled={formik.isSubmitting}
+              isInvalid={formik.touched.name && formik.errors.name}
+              className="mb-2"
+            />
+            <FormLabel visuallyHidden htmlFor="name">{t('modals.channelName')}</FormLabel>
+            <Form.Control.Feedback type="invalid">
+              {formik.errors.name}
+            </Form.Control.Feedback>
+          </FormGroup>
+          <div className="d-flex justify-content-end">
+            <Button
+              type="button"
+              variant="secondary"
+              className="me-2"
+              onClick={handleClose}
+              disabled={formik.isSubmitting}
+            >
+              {t('modals.cancel')}
+            </Button>
+            <Button
+              type="submit"
+              variant="primary"
+              disabled={!formik.dirty || formik.isSubmitting}
+            >
+              {isLoading ? (
+                <>
+                  <LoadingSpinner />
+                  <span>{t('modals.send')}</span>
+                </>
+              ) : (
+                t('modals.send')
+              )}
+            </Button>
+          </div>
+        </Form>
+      </BootstrapModal.Body>
+    </>
   );
 };
 

frontend/src/locales/ru.js

@@ -50,9 +50,9 @@ const translation = {
       connectionError: 'Ошибка соединения',
     },
     modals: {
-      addingChannelTitle: 'Добавить канал',
-      removingChannelTitle: 'Удалить канал',
-      renamingChannelTitle: 'Переименовать канал',
+      addTitle: 'Добавить канал',
+      removeTitle: 'Удалить канал',
+      renameTitle: 'Переименовать канал',
       channelName: 'Имя канала',
       cancel: 'Отменить',
       send: 'Отправить',