add channels

Tatyana-js · Feb 9, 2025 · c0a6917 · c0a6917
1 parent f542a93
commit c0a6917
Showing 1 changed file with 35 additions and 31 deletions.
diff --git a/frontend/src/components/Сhannels.jsx b/frontend/src/components/Сhannels.jsx
@@ -21,10 +21,38 @@ const Channels = () => {
 
   const variant = (channel) => channel.id === activeChannel.id ? "secondary" : "";
 
-  const hideModal = () =>  dispatch(closeModal());
+  const removableChannel = (channel) => (
+    <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>
+        {filter.clean(channel.name)}  
+      </Button>
+      <Dropdown.Toggle className="flex-grow-0 dropdown-toggle-split" variant={variant(channel)}>
+        <span className="visually-hidden">{t('channels.setupChannel')}</span>
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <Dropdown.Item role="button" onClick={() => showModal('removing', channel)}>{t('channels.dropdownButtonRemove')}</Dropdown.Item>
+        <Dropdown.Item role="button" onClick={() => showModal('renaming', channel)}>{t('channels.dropdownButtonRename')}</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+    );
+
+  const notRemovableChannel = (channel) => !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>
+  );
+
+  const hideModal = () => dispatch(closeModal());
   const showModal = (type, channel) => {
-        dispatch(openModal({ type, channel }));
-      };
+    dispatch(openModal({ type, channel }));
+  };
 
   useEffect(() => {
     if (activeChannel.id === defaultChannel.id) {
@@ -46,40 +74,16 @@ return (
       id="channels-box" 
       className="flex-column nav-pills nav-fill px-2 mb-3 overflow-auto h-100 d-block"
       ref={channelsRef}
-    >
-      {channels.map((channel) => {
+    >{channels.map((channel) => {
         return (
           <Nav.Item as="li" key={channel.id} className="w-100">
-            {!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 && 
-              <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>
-                  {filter.clean(channel.name)}  
-                </Button>
-                <Dropdown.Toggle className="flex-grow-0 dropdown-toggle-split" variant={variant(channel)}>
-                  <span className="visually-hidden">{t('channels.setupChannel')}</span>
-                </Dropdown.Toggle>
-                <Dropdown.Menu>
-                  <Dropdown.Item role="button" onClick={() => showModal('removing', channel)}>{t('channels.dropdownButtonRemove')}</Dropdown.Item>
-                  <Dropdown.Item role="button" onClick={() => showModal('renaming', channel)}>{t('channels.dropdownButtonRename')}</Dropdown.Item>
-                </Dropdown.Menu>
-              </Dropdown>}
+            {channel.removable ? removableChannel(channel) : notRemovableChannel(channel)}
           </Nav.Item> 
           );
         }
         )}
-        {modals.type === 'removing' && (<RemoveChannel onHide={hideModal} />)}
-        {modals.type === 'renaming' && (<RenameChannel onHide={hideModal} />)} 
+      {modals.type === 'removing' && (<RemoveChannel onHide={hideModal} />)}
+      {modals.type === 'renaming' && (<RenameChannel onHide={hideModal} />)} 
     </Nav>
   </>
   );