leftDrawerOrg: Fixed the org not found error on viewing admin profi…

…le. (#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 e1e86e3.

* 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 becd2d1.

* Updated comment to accurately reflect array indexing.

---------

Co-authored-by: Peter Harrison <[email protected]>
Co-authored-by: Anshul Kahar <[email protected]>
Co-authored-by: Pranshu Gupta <[email protected]>
Co-authored-by: Vamshi Maskuri <[email protected]>

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(
+      <MockedProvider addTypename={false} link={linkEmptyOrgId}>
+        <MemoryRouter initialEntries={['/member/123']}>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} hideDrawer={null} />
+            </I18nextProvider>
+          </Provider>
+        </MemoryRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    expect(
+      screen.queryByText(/Error occured while loading Organization data/i),
+    ).not.toBeInTheDocument();
+  });
+
   test('Testing Menu Buttons', async () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);

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<InterfaceQueryOrganizationsListObject>();
+  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 && (
               <button
                 className={`${styles.profileContainer} bg-danger text-start text-white`}
                 disabled
@@ -114,7 +138,7 @@ const leftDrawerOrg = ({
                 </div>
                 {tErrors('errorLoading', { entity: 'Organization' })}
               </button>
-            </>
+            )
           ) : (
             <button className={styles.profileContainer} data-testid="OrgBtn">
               <div className={styles.imageContainer}>