refactor: standardized left drawer expansion/collapse methodology (#1420

) - Previously, screens with a width of <= 820px utilized the hamburger icon for left drawer handling. - With this change, all screens, regardless of width, will now have a consistent left drawer handling method, which was previously exclusive to screens with a width > 820px. - The superadmin screen, organization screen, and event dashboard screen are all affected by this change. - All changes have been verified and covered by tests. - This modification aims to establish consistency throughout the entire application. Signed-off-by: Akhilender <[email protected]>
PalisadoesFoundation · Jan 12, 2024 · 2bfee78 · 2bfee78
1 parent 59dae2c
commit 2bfee78
Show file tree

Hide file tree

Showing 19 changed files with 196 additions and 329 deletions.
diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -28,10 +28,6 @@
   animation: goToLeftBigScreen 0.5s ease-in-out;
 }
 
-.leftDrawer .closeModalBtn {
-  display: none;
-}
-
 .leftDrawer .talawaLogo {
   width: 100%;
   height: 65px;
@@ -127,31 +123,21 @@
     right: 0;
   }
 
-  .leftDrawer .closeModalBtn {
-    display: block;
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    z-index: 10;
-  }
-
-  /* For smaller devices .activeDrawer in real behaves like inactive */
-  .activeDrawer {
+  .inactiveDrawer {
     opacity: 0;
     left: 0;
     z-index: -1;
     animation: closeDrawer 0.4s ease-in-out;
   }
 
-  /* For smaller devices .inactiveDrawer in real behaves like active */
-  .inactiveDrawer {
+  .activeDrawer {
     display: flex;
     z-index: 100;
     animation: openDrawer 0.6s ease-in-out;
   }
 
   .logout {
-    margin-bottom: 1.5rem !important;
+    margin-bottom: 2.5rem !important;
   }
 }
 

diff --git a/src/components/LeftDrawer/LeftDrawer.test.tsx b/src/components/LeftDrawer/LeftDrawer.test.tsx
@@ -123,21 +123,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
     ).toBeTruthy();
   });
 
-  test('Testing Drawer open close functionality', () => {
-    localStorage.setItem('UserType', 'SUPERADMIN');
-    render(
-      <MockedProvider addTypename={false} link={link}>
-        <BrowserRouter>
-          <I18nextProvider i18n={i18nForTest}>
-            <LeftDrawer {...propsOrg} />
-          </I18nextProvider>
-        </BrowserRouter>
-      </MockedProvider>
-    );
-    const closeModalBtn = screen.getByTestId(/closeModalBtn/i);
-    userEvent.click(closeModalBtn);
-  });
-
   test('Testing Drawer when hideDrawer is null', () => {
     localStorage.setItem('UserType', 'SUPERADMIN');
     render(

diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -20,7 +20,6 @@ export interface InterfaceLeftDrawerProps {
 const leftDrawer = ({
   screenName,
   hideDrawer,
-  setHideDrawer,
 }: InterfaceLeftDrawerProps): JSX.Element => {
   const { t } = useTranslation('translation', { keyPrefix: 'leftDrawer' });
 
@@ -51,16 +50,6 @@ const leftDrawer = ({
         }`}
         data-testid="leftDrawerContainer"
       >
-        <Button
-          variant="danger"
-          className={styles.closeModalBtn}
-          onClick={(): void => {
-            setHideDrawer(false);
-          }}
-          data-testid="closeModalBtn"
-        >
-          <i className="fa fa-times"></i>
-        </Button>
         <TalawaLogo className={styles.talawaLogo} />
         <p className={styles.talawaText}>{t('talawaAdminPortal')}</p>
         <h5 className={styles.titleHeader}>{t('menu')}</h5>

diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.module.css b/src/components/LeftDrawerEvent/LeftDrawerEvent.module.css
@@ -45,10 +45,6 @@
   animation: goToLeftBigScreen 0.5s ease-in-out;
 }
 
-.leftDrawer .closeModalBtn {
-  display: none;
-}
-
 .leftDrawer .brandingContainer {
   display: flex;
   justify-content: flex-start;
@@ -172,31 +168,21 @@
     right: 0;
   }
 
-  .leftDrawer .closeModalBtn {
-    display: block;
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    z-index: 10;
-  }
-
-  /* For smaller devices .activeDrawer in real behaves like inactive */
-  .activeDrawer {
+  .inactiveDrawer {
     opacity: 0;
     left: 0;
     z-index: -1;
     animation: closeDrawer 0.4s ease-in-out;
   }
 
-  /* For smaller devices .inactiveDrawer in real behaves like active */
-  .inactiveDrawer {
+  .activeDrawer {
     display: flex;
     z-index: 100;
     animation: openDrawer 0.6s ease-in-out;
   }
 
   .logout {
-    margin-bottom: 1.5rem !important;
+    margin-bottom: 2.5rem !important;
   }
 }
 

diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx
@@ -172,21 +172,6 @@ describe('Testing Left Drawer component for the Event Dashboard', () => {
     );
   });
 
-  test('Testing Drawer open close functionality', () => {
-    localStorage.setItem('UserType', 'SUPERADMIN');
-    render(
-      <MockedProvider mocks={mocks}>
-        <BrowserRouter>
-          <I18nextProvider i18n={i18nForTest}>
-            <LeftDrawerEvent {...props} />
-          </I18nextProvider>
-        </BrowserRouter>
-      </MockedProvider>
-    );
-    const closeModalBtn = screen.getByTestId(/closeModalBtn/i);
-    userEvent.click(closeModalBtn);
-  });
-
   test('Testing logout functionality', async () => {
     localStorage.setItem('UserType', 'SUPERADMIN');
     render(

diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
@@ -29,7 +29,6 @@ export interface InterfaceLeftDrawerProps {
 const leftDrawerEvent = ({
   event,
   hideDrawer,
-  setHideDrawer,
   setShowAddEventProjectModal,
 }: InterfaceLeftDrawerProps): JSX.Element => {
   const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);
@@ -58,18 +57,6 @@ const leftDrawerEvent = ({
         }`}
         data-testid="leftDrawerContainer"
       >
-        {/* Close Drawer Button for small devices */}
-        <Button
-          variant="danger"
-          className={styles.closeModalBtn}
-          onClick={(): void => {
-            setHideDrawer(false);
-          }}
-          data-testid="closeModalBtn"
-        >
-          <i className="fa fa-times"></i>
-        </Button>
-
         {/* Branding Section */}
         <div className={styles.brandingContainer}>
           <TalawaLogo className={styles.talawaLogo} />

diff --git a/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.module.css b/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.module.css
@@ -34,6 +34,9 @@
 }
 .opendrawer {
   position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   top: 0;
   left: 0;
   width: 40px;
@@ -46,10 +49,6 @@
   color: black;
 }
 
-.mobileopenBtn {
-  display: none;
-}
-
 @media (max-width: 1120px) {
   .contract {
     padding-left: calc(250px + 2rem + 1.5rem);
@@ -62,7 +61,11 @@
 /* For tablets */
 @media (max-width: 820px) {
   .pageContainer {
-    padding-left: 1.5rem;
+    padding-left: 2.5rem;
+  }
+
+  .opendrawer {
+    width: 25px;
   }
 
   .contract,
@@ -71,19 +74,8 @@
   }
 
   .collapseSidebarButton {
-    display: none;
-  }
-}
-
-@media (max-width: 820px) {
-  .pageContainer {
-    padding: 1rem;
-  }
-  .mobileopenBtn {
-    display: block;
-  }
-  .opendrawer,
-  .collapseSidebarButton {
-    display: none;
+    width: 100%;
+    left: 0;
+    right: 0;
   }
 }
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.test.tsx
@@ -88,17 +88,34 @@ describe('Testing Left Drawer Wrapper component for the Event Dashboard', () =>
 
     const pageContainer = getByTestId('mainpageright');
     expect(pageContainer.className).toMatch(/pageContainer/i);
-    fireEvent.click(getByTestId('closeLeftDrawerBtn') as HTMLElement);
-    expect(pageContainer.className).toMatch(/expand/i);
-    fireEvent.click(getByTestId('closeLeftDrawerBtn') as HTMLElement);
-    expect(pageContainer.className).toMatch(/contract/i);
-
     await waitFor(() =>
       expect(queryByText('Event Management')).toBeInTheDocument()
     );
+    // Resize window to trigger handleResize
+    window.innerWidth = 800; // Set a width less than or equal to 820
+    fireEvent(window, new Event('resize'));
+
+    await waitFor(() => {
+      fireEvent.click(getByTestId('openMenu') as HTMLElement);
+    });
+
     // sets hideDrawer to true
-    fireEvent.click(getByTestId('menuBtn') as HTMLElement);
+    await waitFor(() => {
+      fireEvent.click(getByTestId('menuBtn') as HTMLElement);
+    });
+
+    // Resize window back to a larger width
+    window.innerWidth = 1000; // Set a larger width
+    fireEvent(window, new Event('resize'));
+
     // sets hideDrawer to false
-    fireEvent.click(getByTestId('openMenu') as HTMLElement);
+    await waitFor(() => {
+      fireEvent.click(getByTestId('openMenu') as HTMLElement);
+    });
+
+    // sets hideDrawer to true
+    await waitFor(() => {
+      fireEvent.click(getByTestId('menuBtn') as HTMLElement);
+    });
   });
 });
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx b/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.tsx
@@ -1,6 +1,5 @@
-import MenuIcon from '@mui/icons-material/Menu';
 import LeftDrawerEvent from './LeftDrawerEvent';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import styles from './LeftDrawerEventWrapper.module.css';
 
@@ -21,16 +20,27 @@ export const LeftDrawerEventWrapper = (
   props: InterfacePropType
 ): JSX.Element => {
   const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
-  const toggleDrawerVisibility = (): void => {
-    setHideDrawer(!hideDrawer);
+  const handleResize = (): void => {
+    if (window.innerWidth <= 820) {
+      setHideDrawer(!hideDrawer);
+    }
   };
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
   return (
     <>
       {hideDrawer ? (
         <Button
           className={styles.opendrawer}
-          onClick={toggleDrawerVisibility}
+          onClick={(): void => {
+            setHideDrawer(!hideDrawer);
+          }}
           data-testid="openMenu"
         >
           <i className="fa fa-angle-double-right" aria-hidden="true"></i>
@@ -69,15 +79,6 @@ export const LeftDrawerEventWrapper = (
           <div style={{ flex: 1 }}>
             <h2>Event Management</h2>
           </div>
-          <Button
-            className={styles.mobileopenBtn}
-            onClick={(): void => {
-              setHideDrawer(!hideDrawer);
-            }}
-            data-testid="closeLeftDrawerBtn"
-          >
-            <MenuIcon fontSize="medium" />
-          </Button>
         </div>
         {props.children}
       </div>

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -45,10 +45,6 @@
   animation: goToLeftBigScreen 0.5s ease-in-out;
 }
 
-.leftDrawer .closeModalBtn {
-  display: none;
-}
-
 .leftDrawer .brandingContainer {
   display: flex;
   justify-content: flex-start;
@@ -171,31 +167,21 @@
     right: 0;
   }
 
-  .leftDrawer .closeModalBtn {
-    display: block;
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    z-index: 10;
-  }
-
-  /* For smaller devices .activeDrawer in real behaves like inactive */
-  .activeDrawer {
+  .inactiveDrawer {
     opacity: 0;
     left: 0;
     z-index: -1;
-    animation: closeDrawer 0.4s ease-in-out;
+    animation: closeDrawer 0.2s ease-in-out;
   }
 
-  /* For smaller devices .inactiveDrawer in real behaves like active */
-  .inactiveDrawer {
+  .activeDrawer {
     display: flex;
     z-index: 100;
-    animation: openDrawer 0.6s ease-in-out;
+    animation: openDrawer 0.4s ease-in-out;
   }
 
   .logout {
-    margin-bottom: 1.5rem;
+    margin-bottom: 2.5rem;
   }
 }