diff --git a/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.module.css b/src/components/LeftDrawerEvent/LeftDrawerEventWrapper.module.css
index e9e970f3e4..0e1cb9035a 100644
--- 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
index bf04c4af7c..4e126bf216 100644
--- 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
index faea66e99c..32fa2efe4a 100644
--- 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
(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 ? (
{props.children}
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
index 635592653d..3b9a5e0d34 100644
--- 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;
}
}
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
index 101f4133e2..8190e7bd19 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx
@@ -358,23 +358,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
);
});
- test('Testing Drawer open close functionality', () => {
- localStorage.setItem('UserType', 'SUPERADMIN');
- render(
-
diff --git a/src/components/OrganizationScreen/OrganizationScreen.module.css b/src/components/OrganizationScreen/OrganizationScreen.module.css
index 9b921098ab..0e1cb9035a 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.module.css
+++ b/src/components/OrganizationScreen/OrganizationScreen.module.css
@@ -34,6 +34,9 @@
}
.opendrawer {
position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
top: 0;
left: 0;
width: 40px;
@@ -46,9 +49,6 @@
color: black;
}
-.mobileopenBtn {
- display: none;
-}
@media (max-width: 1120px) {
.contract {
padding-left: calc(250px + 2rem + 1.5rem);
@@ -61,7 +61,11 @@
/* For tablets */
@media (max-width: 820px) {
.pageContainer {
- padding-left: 1.5rem;
+ padding-left: 2.5rem;
+ }
+
+ .opendrawer {
+ width: 25px;
}
.contract,
@@ -70,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/OrganizationScreen/OrganizationScreen.test.tsx b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
index 5d03d1f7c4..4f0e3178e2 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.test.tsx
+++ b/src/components/OrganizationScreen/OrganizationScreen.test.tsx
@@ -1,42 +1,62 @@
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
+import 'jest-location-mock';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { store } from 'state/store';
import i18nForTest from 'utils/i18nForTest';
import type { InterfaceOrganizationScreenProps } from './OrganizationScreen';
import OrganizationScreen from './OrganizationScreen';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
+import { StaticMockLink } from 'utils/StaticMockLink';
const props: InterfaceOrganizationScreenProps = {
title: 'Dashboard',
screenName: 'Dashboard',
children:
Testing ...
,
};
-
-type SetScreenSize = () => void;
+const MOCKS = [
+ {
+ request: {
+ query: ORGANIZATIONS_LIST,
+ variables: { id: '123' },
+ },
+ result: {
+ data: {
+ organizations: [
+ {
+ _id: '123',
+ image: null,
+ creator: {
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'JohnDoe@example.com',
+ },
+ name: 'Test Organization',
+ description: 'Testing this organization',
+ location: 'Lucknow, India',
+ isPublic: true,
+ visibleInSearch: true,
+ members: [],
+ admins: [],
+ membershipRequests: [],
+ blockedUsers: [],
+ },
+ ],
+ },
+ },
+ },
+];
+const link = new StaticMockLink(MOCKS, true);
describe('Testing LeftDrawer in OrganizationScreen', () => {
- const setTabletScreenSize: SetScreenSize = () => {
- Object.defineProperty(window, 'innerWidth', {
- writable: true,
- configurable: true,
- value: 768, // Example: setting tablet width
- });
- Object.defineProperty(window, 'innerHeight', {
- writable: true,
- configurable: true,
- value: 1024, // Example: setting tablet height
- });
- window.dispatchEvent(new Event('resize'));
- };
test('Testing LeftDrawer in page functionality', async () => {
localStorage.setItem('UserType', 'SUPERADMIN');
render(
-
+
@@ -46,34 +66,31 @@ describe('Testing LeftDrawer in OrganizationScreen', () => {
);
- // sets hideDrawer to true
- userEvent.click(screen.getByTestId('menuBtn'));
- // sets hideDrawer to false
- userEvent.click(screen.getByTestId('openMenu'));
- });
+ // Resize window to trigger handleResize
+ window.innerWidth = 800; // Set a width less than or equal to 820
+ fireEvent(window, new Event('resize'));
- test('Testing expanding and closing on a tablet-sized screen', async () => {
- localStorage.setItem('UserType', 'SUPERADMIN');
+ await waitFor(() => {
+ fireEvent.click(screen.getByTestId('openMenu') as HTMLElement);
+ });
- // Render the component with tablet-sized screen
- render(
-
-
-
-
-
-
-
-
-
- );
+ // sets hideDrawer to true
+ await waitFor(() => {
+ fireEvent.click(screen.getByTestId('menuBtn') as HTMLElement);
+ });
- // Set the screen size to simulate a tablet
- setTabletScreenSize();
+ // Resize window back to a larger width
+ window.innerWidth = 1000; // Set a larger width
+ fireEvent(window, new Event('resize'));
- // sets hideDrawer to true
- userEvent.click(screen.getByTestId('menuBtnmobile'));
// sets hideDrawer to false
- userEvent.click(screen.getByTestId('closeModalBtn'));
+ await waitFor(() => {
+ fireEvent.click(screen.getByTestId('openMenu') as HTMLElement);
+ });
+
+ // sets hideDrawer to true
+ await waitFor(() => {
+ fireEvent.click(screen.getByTestId('menuBtn') as HTMLElement);
+ });
});
});
diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx
index d99547292d..086d6f8924 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.tsx
+++ b/src/components/OrganizationScreen/OrganizationScreen.tsx
@@ -1,6 +1,5 @@
-import MenuIcon from '@mui/icons-material/Menu';
import LeftDrawerOrg from 'components/LeftDrawerOrg/LeftDrawerOrg';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import Button from 'react-bootstrap/Button';
import styles from './OrganizationScreen.module.css';
import { useSelector } from 'react-redux';
@@ -25,15 +24,27 @@ const organizationScreen = ({
} = useSelector((state: RootState) => state.appRoutes);
const { targets, configUrl } = appRoutes;
- 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 ? (
{children}
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.module.css b/src/components/SuperAdminScreen/SuperAdminScreen.module.css
index 2d50abe807..9496ef95fa 100644
--- a/src/components/SuperAdminScreen/SuperAdminScreen.module.css
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.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,21 +74,9 @@
}
.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/SuperAdminScreen/SuperAdminScreen.test.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx
index e3bce81dc6..40ecacc100 100644
--- a/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.test.tsx
@@ -1,8 +1,6 @@
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import 'jest-localstorage-mock';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
@@ -18,22 +16,7 @@ const props: InterfaceSuperAdminScreenProps = {
children: Testing ...
,
};
-type SetScreenSize = () => void;
-
describe('Testing LeftDrawer in SuperAdminScreen', () => {
- const setTabletScreenSize: SetScreenSize = () => {
- Object.defineProperty(window, 'innerWidth', {
- writable: true,
- configurable: true,
- value: 768, // Example: setting tablet width
- });
- Object.defineProperty(window, 'innerHeight', {
- writable: true,
- configurable: true,
- value: 1024, // Example: setting tablet height
- });
- window.dispatchEvent(new Event('resize'));
- };
test('Testing LeftDrawer in page functionality', async () => {
localStorage.setItem('UserType', 'SUPERADMIN');
@@ -49,33 +32,31 @@ describe('Testing LeftDrawer in SuperAdminScreen', () => {
);
- // Expand LeftDrawer
- userEvent.click(screen.getByTestId('menuBtn'));
- // Contract LeftDrawer
- userEvent.click(screen.getByTestId('openMenu'));
- });
- test('Testing expanding and closing on a tablet-sized screen', async () => {
- localStorage.setItem('UserType', 'SUPERADMIN');
+ // Resize window to trigger handleResize
+ window.innerWidth = 800; // Set a width less than or equal to 820
+ fireEvent(window, new Event('resize'));
- // Render the component with tablet-sized screen
- render(
-