From e50da8ac9f4db5f857b5fdcea6ebb9d5bc692c90 Mon Sep 17 00:00:00 2001 From: Akhilender Bongirwar <112749383+akhilender-bongirwar@users.noreply.github.com> Date: Sun, 14 Apr 2024 20:46:47 +0530 Subject: [PATCH] fix: Fixed inconsistent left drawer expansion/collapse behavior (#1903) - Adjusted the left drawer component to function properly on screens with a width of 820px or less. - Ensured smooth expansion and collapse of the left drawer when clicked. - Ensured the overflow-y of content is handled in smaller screens. - Modified the changes for organization dashboard screens to match the superadmin screens when the left drawer is collapsed. - Covered the changes with tests. - Ensured no other functionality got affected. Signed-off-by: Akhilender --- src/components/LeftDrawer/LeftDrawer.test.tsx | 29 +++++++++++- src/components/LeftDrawer/LeftDrawer.tsx | 17 +++++-- .../LeftDrawerOrg/LeftDrawerOrg.module.css | 1 + .../LeftDrawerOrg/LeftDrawerOrg.test.tsx | 32 ++++++++++++- .../LeftDrawerOrg/LeftDrawerOrg.tsx | 9 +++- .../OrganizationScreen.module.css | 5 +- .../OrganizationScreen.test.tsx | 11 ++--- .../OrganizationScreen/OrganizationScreen.tsx | 46 ++++++++++--------- .../SuperAdminScreen.test.tsx | 11 ++--- .../SuperAdminScreen/SuperAdminScreen.tsx | 45 +++++++++--------- 10 files changed, 139 insertions(+), 67 deletions(-) diff --git a/src/components/LeftDrawer/LeftDrawer.test.tsx b/src/components/LeftDrawer/LeftDrawer.test.tsx index 8e519ae6de..3fee4bd40c 100644 --- a/src/components/LeftDrawer/LeftDrawer.test.tsx +++ b/src/components/LeftDrawer/LeftDrawer.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import 'jest-localstorage-mock'; import { I18nextProvider } from 'react-i18next'; @@ -20,6 +20,11 @@ const props = { setHideDrawer: jest.fn(), }; +const resizeWindow = (width: number): void => { + window.innerWidth = width; + fireEvent(window, new Event('resize')); +}; + const propsOrg: InterfaceLeftDrawerProps = { ...props, }; @@ -128,6 +133,28 @@ describe('Testing Left Drawer component for SUPERADMIN', () => { , ); }); + + test('Testing Drawer when the screen size is less than or equal to 820px', () => { + resizeWindow(800); + render( + + + + + + + , + ); + expect(screen.getByText('My Organizations')).toBeInTheDocument(); + expect(screen.getByText('Talawa Admin Portal')).toBeInTheDocument(); + + const orgsBtn = screen.getByTestId(/orgsBtn/i); + + orgsBtn.click(); + expect( + orgsBtn.className.includes('text-white btn btn-success'), + ).toBeTruthy(); + }); }); describe('Testing Left Drawer component for ADMIN', () => { diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx index a96929bcbb..94d4974d0f 100644 --- a/src/components/LeftDrawer/LeftDrawer.tsx +++ b/src/components/LeftDrawer/LeftDrawer.tsx @@ -14,12 +14,21 @@ export interface InterfaceLeftDrawerProps { setHideDrawer: React.Dispatch>; } -const leftDrawer = ({ hideDrawer }: InterfaceLeftDrawerProps): JSX.Element => { +const leftDrawer = ({ + hideDrawer, + setHideDrawer, +}: InterfaceLeftDrawerProps): JSX.Element => { const { t } = useTranslation('translation', { keyPrefix: 'leftDrawer' }); const { getItem } = useLocalStorage(); const superAdmin = getItem('SuperAdmin'); + const handleLinkClick = (): void => { + if (window.innerWidth <= 820) { + setHideDrawer(true); + } + }; + return ( <>
{

{t('talawaAdminPortal')}

{t('menu')}
- + {({ isActive }) => ( )} - + {({ isActive }) => ( + {hideDrawer ? ( + + ) : ( + + )}
{ window.innerWidth = width; @@ -35,20 +32,20 @@ describe('Testing LeftDrawer in SuperAdminScreen', () => { , ); - const toggleButton = screen.getByTestId('toggleMenuBtn') as HTMLElement; + const toggleButton = screen.getByTestId('closeMenu') as HTMLElement; const icon = toggleButton.querySelector('i'); // Resize window to a smaller width resizeWindow(800); clickToggleMenuBtn(toggleButton); - expect(icon).toHaveClass('fa fa-angle-double-right'); + expect(icon).toHaveClass('fa fa-angle-double-left'); // Resize window back to a larger width resizeWindow(1000); clickToggleMenuBtn(toggleButton); - expect(icon).toHaveClass('fa fa-angle-double-left'); + expect(icon).toHaveClass('fa fa-angle-double-right'); clickToggleMenuBtn(toggleButton); - expect(icon).toHaveClass('fa fa-angle-double-right'); + expect(icon).toHaveClass('fa fa-angle-double-left'); }); }); diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.tsx index 93e012e2a1..f7191289eb 100644 --- a/src/components/SuperAdminScreen/SuperAdminScreen.tsx +++ b/src/components/SuperAdminScreen/SuperAdminScreen.tsx @@ -13,39 +13,42 @@ const superAdminScreen = (): JSX.Element => { const [hideDrawer, setHideDrawer] = useState(null); const handleResize = (): void => { - if (window.innerWidth <= 820 && !hideDrawer) { - setHideDrawer(true); + if (window.innerWidth <= 820) { + setHideDrawer(!hideDrawer); } }; - const toggleDrawer = (): void => { - setHideDrawer(!hideDrawer); - }; - useEffect(() => { handleResize(); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; - }, [hideDrawer]); + }, []); return ( <> - + {hideDrawer ? ( + + ) : ( + + )}