diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx index 2a0ef3815d..71f3593499 100644 --- a/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx +++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx @@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import 'jest-localstorage-mock'; import { I18nextProvider } from 'react-i18next'; -import { BrowserRouter } from 'react-router-dom'; +import { BrowserRouter, MemoryRouter } from 'react-router-dom'; import i18nForTest from 'utils/i18nForTest'; import type { InterfaceLeftDrawerProps } from './LeftDrawerOrg'; @@ -21,6 +21,10 @@ const { setItem } = useLocalStorage(); const props: InterfaceLeftDrawerProps = { orgId: '123', targets: [ + { + name: 'Admin Profile', + url: '/member/123', + }, { name: 'Dashboard', url: '/orgdash/123', @@ -215,6 +219,20 @@ const MOCKS_EMPTY = [ }, ]; +const MOCKS_EMPTY_ORGID = [ + { + request: { + query: ORGANIZATIONS_LIST, + variables: { id: '' }, + }, + result: { + data: { + organizations: [], + }, + }, + }, +]; + const defaultScreens = [ 'Dashboard', 'People', @@ -264,6 +282,7 @@ afterEach(() => { const link = new StaticMockLink(MOCKS, true); const linkImage = new StaticMockLink(MOCKS_WITH_IMAGE, true); const linkEmpty = new StaticMockLink(MOCKS_EMPTY, true); +const linkEmptyOrgId = new StaticMockLink(MOCKS_EMPTY_ORGID, true); describe('Testing LeftDrawerOrg component for SUPERADMIN', () => { test('Component should be rendered properly', async () => { @@ -308,6 +327,29 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => { expect(screen.getByTestId(/orgBtn/i)).toBeInTheDocument(); }); + test('Should not show org not found error when viewing admin profile', async () => { + setItem('UserImage', ''); + setItem('SuperAdmin', true); + setItem('FirstName', 'John'); + setItem('LastName', 'Doe'); + setItem('id', '123'); + render( + + + + + + + + + , + ); + await wait(); + expect( + screen.queryByText(/Error occured while loading Organization data/i), + ).not.toBeInTheDocument(); + }); + test('Testing Menu Buttons', async () => { setItem('UserImage', ''); setItem('SuperAdmin', true); diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx index 3a3ba378cf..a71c44afba 100644 --- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx +++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx @@ -3,16 +3,17 @@ import { WarningAmberOutlined } from '@mui/icons-material'; import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries'; import CollapsibleDropdown from 'components/CollapsibleDropdown/CollapsibleDropdown'; import IconComponent from 'components/IconComponent/IconComponent'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import Button from 'react-bootstrap/Button'; import { useTranslation } from 'react-i18next'; -import { NavLink } from 'react-router-dom'; +import { NavLink, useLocation } from 'react-router-dom'; import type { TargetsType } from 'state/reducers/routesReducer'; import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces'; import AngleRightIcon from 'assets/svgs/angleRight.svg?react'; import TalawaLogo from 'assets/svgs/talawa.svg?react'; import styles from './LeftDrawerOrg.module.css'; import Avatar from 'components/Avatar/Avatar'; +import useLocalStorage from 'utils/useLocalstorage'; export interface InterfaceLeftDrawerProps { orgId: string; @@ -38,10 +39,20 @@ const leftDrawerOrg = ({ }: InterfaceLeftDrawerProps): JSX.Element => { const { t: tCommon } = useTranslation('common'); const { t: tErrors } = useTranslation('errors'); + const location = useLocation(); + const { getItem } = useLocalStorage(); + const userId = getItem('id'); + const getIdFromPath = (pathname: string): string => { + if (!pathname) return ''; + const segments = pathname.split('/'); + // Index 2 (third segment) represents the ID in paths like /member/{userId} + return segments.length > 2 ? segments[2] : ''; + }; + const [isProfilePage, setIsProfilePage] = useState(false); const [showDropdown, setShowDropdown] = useState(false); - - const [organization, setOrganization] = - useState(); + const [organization, setOrganization] = useState< + InterfaceQueryOrganizationsListObject | undefined + >(undefined); const { data, loading, @@ -54,11 +65,24 @@ const leftDrawerOrg = ({ variables: { id: orgId }, }); + // Get the ID from the current path + const pathId = useMemo( + () => getIdFromPath(location.pathname), + [location.pathname], + ); + // Check if the current page is admin profile page + useEffect(() => { + // if param id is equal to userId, then it is a profile page + setIsProfilePage(pathId === userId); + }, [location, userId]); + // Set organization data when query data is available useEffect(() => { let isMounted = true; if (data && isMounted) { setOrganization(data?.organizations[0]); + } else { + setOrganization(undefined); } return () => { isMounted = false; @@ -104,7 +128,7 @@ const leftDrawerOrg = ({ /> ) : organization == undefined ? ( - <> + !isProfilePage && ( - + ) ) : (