change modals

bobrov-site · May 21, 2024 · 9a29e23 · 9a29e23
1 parent c8b82c3
commit 9a29e23
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 14 deletions.
diff --git a/frontend/src/components/channels/Channels.jsx b/frontend/src/components/channels/Channels.jsx
@@ -10,12 +10,10 @@ import {
 } from '../../api/channels';
 import { setChannelModal, setUserData } from '../../store/slices/appSlice';
 import socket from '../../socket';
-import RenameChannel from '../modals/RenameChannel';
-import DeleteChannel from '../modals/DeleteChannel';
-import NewChannel from '../modals/NewChannel';
 import Item from './Item';
 import { appPaths } from '../../routes';
 import useAuth from '../../hooks';
+import ModalContainer from '../modals';
 
 const Channels = () => {
   const { t } = useTranslation();
@@ -26,6 +24,10 @@ const Channels = () => {
   const handleShowModal = (modalName, channel = { id: '', name: '' }) => {
     dispatch(setChannelModal({ id: channel.id, name: channel.name, modalName }));
   };
+  const renderModal = () => {
+    const Component = ModalContainer;
+    return <Component />;
+  };
 
   useEffect(() => {
     if (channelError) {
@@ -64,7 +66,7 @@ const Channels = () => {
     <Col xs="4" md="2" className="border-end px-0 bg-light flex-column h-100 d-flex">
       <div className="d-flex mt-1 justify-content-between mb-2 ps-4 pe-2 p-4">
         <b>{t('channels.title')}</b>
-        <Button size="sm" variant="outline-primary" onClick={() => handleShowModal('new-channel')}>
+        <Button size="sm" variant="outline-primary" onClick={() => handleShowModal('adding')}>
           +
         </Button>
       </div>
@@ -73,9 +75,7 @@ const Channels = () => {
           <Item key={channel.id} data={channel} />
         ))}
       </Nav>
-      <RenameChannel />
-      <DeleteChannel />
-      <NewChannel />
+      {renderModal()}
     </Col>
   );
 };

diff --git a/frontend/src/components/channels/Item.jsx b/frontend/src/components/channels/Item.jsx
@@ -30,8 +30,8 @@ const Item = ({ data }) => {
             <span className="visually-hidden">{t('dropdown.toggle')}</span>
           </Dropdown.Toggle>
           <Dropdown.Menu>
-            <Dropdown.Item onClick={() => handleShowModal('delete-channel', data)}>{t('channels.dropdown.delete')}</Dropdown.Item>
-            <Dropdown.Item onClick={() => handleShowModal('rename-channel', data)}>{t('channels.dropdown.rename')}</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleShowModal('removing', data)}>{t('channels.dropdown.delete')}</Dropdown.Item>
+            <Dropdown.Item onClick={() => handleShowModal('renaming', data)}>{t('channels.dropdown.rename')}</Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
       ) : (

diff --git a/frontend/src/components/modals/DeleteChannel.jsx b/frontend/src/components/modals/DeleteChannel.jsx
@@ -29,7 +29,7 @@ const DeleteChannel = () => {
     }
   };
   return (
-    <Modal show={showModal === 'delete-channel'} onHide={handleCloseModal}>
+    <Modal show={showModal === 'removing'} onHide={handleCloseModal}>
       <Modal.Header closeButton>
         <Modal.Title>{t('modals.titleDeleteChannel')}</Modal.Title>
       </Modal.Header>

diff --git a/frontend/src/components/modals/NewChannel.jsx b/frontend/src/components/modals/NewChannel.jsx
@@ -42,7 +42,7 @@ const NewChannel = () => {
     }
   };
   return (
-    <Modal show={showModal === 'new-channel'} onHide={handleCloseModal}>
+    <Modal show={showModal === 'adding'} onHide={handleCloseModal}>
       <Modal.Header closeButton>
         <Modal.Title>{t('modals.titleAddChannel')}</Modal.Title>
       </Modal.Header>

diff --git a/frontend/src/components/modals/RenameChannel.jsx b/frontend/src/components/modals/RenameChannel.jsx
@@ -50,7 +50,7 @@ const RenameChannel = () => {
     }
   }, []);
   return (
-    <Modal show={showModal === 'rename-channel'} onHide={handleCloseModal}>
+    <Modal show={showModal === 'renaming'} onHide={handleCloseModal}>
       <Modal.Header closeButton>
         <Modal.Title>{t('modals.titleRenameChannel')}</Modal.Title>
       </Modal.Header>

diff --git a/frontend/src/components/modals/index.js b/frontend/src/components/modals/index.js
@@ -1,3 +1,4 @@
+import { useSelector } from 'react-redux';
 import NewChannel from './NewChannel';
 import RenameChannel from './RenameChannel';
 import DeleteChannel from './DeleteChannel';
@@ -8,6 +9,13 @@ const modals = {
   removing: DeleteChannel,
 };
 
-const getModal = (modalName) => modals[modalName];
+const ModalContainer = () => {
+  const showModal = useSelector((state) => state.app.showModal);
+  if (!showModal) {
+    return null;
+  }
+  const ModalComponent = modals[showModal];
+  return <ModalComponent />;
+};
 
-export default getModal;
+export default ModalContainer;