From f971174dd0ee6bcd0eb5c555bd7d72523d6b33d1 Mon Sep 17 00:00:00 2001 From: Divyansh Seth <59174836+sethdivyansh@users.noreply.github.com> Date: Sat, 2 Nov 2024 18:21:40 +0530 Subject: [PATCH] leftDrawerOrg: Fixed the `org not found error` on viewing admin profile. (#2386) * leftDrawerOrg:Fixed the org not found error on viewing admin profile. * created getIdfromPath utitily function * corrected test code * removed unwanted newId variable * added a comment for isProfilePage * removed unwanted check in getIdFromPath func * Revert "removed unwanted check in getIdFromPath func" This reverts commit e1e86e324193bf6c6b75269c5b34528fad742652. * Feat : Write Unittests for `src/components/UserPortal/OrganizationCard/OrganizationCard.tsx` (#2393) * improve testcase for org card * act function warning * Added no pathname condition on getIdFromPath * added useMemo hook * Revert "Feat : Write Unittests for `src/components/UserPortal/OrganizationCard/OrganizationCard.tsx` (#2393)" This reverts commit becd2d1a51360e1e96834afa25cf759e41aeb9a5. * Updated comment to accurately reflect array indexing. --------- Co-authored-by: Peter Harrison <16875803+palisadoes@users.noreply.github.com> Co-authored-by: Anshul Kahar Co-authored-by: Pranshu Gupta Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com> --- .../LeftDrawerOrg/LeftDrawerOrg.test.tsx | 44 ++++++++++++++++++- .../LeftDrawerOrg/LeftDrawerOrg.tsx | 38 +++++++++++++--- 2 files changed, 74 insertions(+), 8 deletions(-) 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 && ( - + ) ) : (