leftDrawerOrg: Fixed the org not found error on viewing admin profile.

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

@@ -6,13 +6,14 @@ import IconComponent from 'components/IconComponent/IconComponent';
 import React, { useEffect, 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,8 +39,19 @@ const leftDrawerOrg = ({
 }: InterfaceLeftDrawerProps): JSX.Element => {
   const { t: tCommon } = useTranslation('common');
   const { t: tErrors } = useTranslation('errors');
-  const [showDropdown, setShowDropdown] = useState(false);
+  const location = useLocation();
+  const { getItem } = useLocalStorage();
+  const userId = getItem('id');
+  const getIdFromPath = (pathname: string): string => {
+    const segments = pathname.split('/');
+    // Index 2 represents the ID in paths like /member/{userId}
+    return segments.length > 2 ? segments[2] : '';
+  };
 
+  const id = getIdFromPath(location.pathname);
+  // if param id is equal to userId, then it is a profile page
+  const [isProfilePage, setIsProfilePage] = useState(id === userId);
+  const [showDropdown, setShowDropdown] = useState(false);
   const [organization, setOrganization] =
     useState<InterfaceQueryOrganizationsListObject>();
   const {
@@ -54,16 +66,24 @@ const leftDrawerOrg = ({
     variables: { id: orgId },
   });
 
+  // Check if the current page is admin profile page
+  useEffect(() => {
+    const newId = getIdFromPath(location.pathname);
+    setIsProfilePage(newId === 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;
     };
-  }, [data]);
+  }, [data, location]);
 
   /**
    * Handles link click to hide the drawer on smaller screens.
@@ -104,7 +124,7 @@ const leftDrawerOrg = ({
               />
             </>
           ) : organization == undefined ? (
-            <>
+            !isProfilePage && (
               <button
                 className={`${styles.profileContainer} bg-danger text-start text-white`}
                 disabled
@@ -114,7 +134,7 @@ const leftDrawerOrg = ({
                 </div>
                 {tErrors('errorLoading', { entity: 'Organization' })}
               </button>
-            </>
+            )
           ) : (
             <button className={styles.profileContainer} data-testid="OrgBtn">
               <div className={styles.imageContainer}>