fixed Organization not found error in left drawer

PalisadoesFoundation · Jan 6, 2024 · 2ffa132 · 2ffa132
1 parent 6ba8db0
commit 2ffa132
Show file tree

Hide file tree

Showing 6 changed files with 368 additions and 262 deletions.
diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -66,14 +66,14 @@
   width: 100%;
   height: 52px;
   border-radius: 8px;
-  background-color: var(--bs-white);
   display: flex;
   align-items: center;
+  padding: 2.5rem 1rem 2.5rem 1rem;
 }
 
 .leftDrawer .profileContainer:focus {
   outline: none;
-  background-color: var(--bs-gray-100);
+  background-color: #5ac989;
 }
 
 .leftDrawer .imageContainer {
@@ -96,6 +96,10 @@
   font-weight: 600;
 }
 
+.leftDrawer .profileContainer .profileText .primaryText .primaryTextWhite {
+  color: white;
+}
+
 .leftDrawer .profileContainer .profileText .secondaryText {
   font-size: 0.8rem;
   font-weight: 400;
@@ -104,6 +108,14 @@
   text-transform: capitalize;
 }
 
+.leftDrawer .profileContainer .profileText .secondaryTextBlack {
+  color: var(--bs-secondary);
+}
+
+.leftDrawer .profileContainer .profileText .secondaryTextWhite {
+  color: rgb(230, 230, 230);
+}
+
 .logout {
   margin-bottom: 50px;
 }

diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
 import { ReactComponent as LogoutIcon } from 'assets/svgs/logout.svg';
 import { ReactComponent as OrganizationsIcon } from 'assets/svgs/organizations.svg';
@@ -137,33 +137,51 @@ const leftDrawer = ({
           )}
         </div>
         <div style={{ marginTop: 'auto' }}>
-          <button
-            className={styles.profileContainer}
-            data-testid="profileBtn"
-            onClick={(): void => {
-              history.push(`/member/id=${userId}`);
+          <Link
+            to={{
+              pathname: `/member/id=${userId}`,
+              state: { from: 'orglist' },
             }}
           >
-            <div className={styles.imageContainer}>
-              {userImage && userImage !== 'null' ? (
-                <img src={userImage} alt={`profile picture`} />
-              ) : (
-                <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
-                  alt={`dummy picture`}
-                />
-              )}
-            </div>
-            <div className={styles.profileText}>
-              <span className={styles.primaryText}>
-                {firstName} {lastName}
-              </span>
-              <span className={styles.secondaryText}>
-                {`${userType}`.toLowerCase()}
-              </span>
-            </div>
-            <AngleRightIcon fill={'var(--bs-secondary)'} />
-          </button>
+            <Button
+              key={'orglistBtn'}
+              data-testid="profileBtn"
+              variant={screenName === 'orglist' ? 'success' : 'light'}
+              className={styles.profileContainer}
+            >
+              <div className={styles.imageContainer}>
+                {userImage && userImage !== 'null' ? (
+                  <img src={userImage} alt={`profile picture`} />
+                ) : (
+                  <img
+                    src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                    alt={`dummy picture`}
+                  />
+                )}
+              </div>
+              <div className={styles.profileText}>
+                <span
+                  className={`${styles.primaryText} 
+                  ${screenName === 'orglist' ? styles.primaryTextWhite : ''}`}
+                >
+                  {firstName} {lastName}
+                </span>
+                <span
+                  className={`${styles.secondaryText} 
+                  ${screenName === 'orglist' ? styles.secondaryTextWhite : ''}`}
+                >
+                  {`${userType}`.toLowerCase()}
+                </span>
+              </div>
+              <AngleRightIcon
+                fill={
+                  screenName === 'orglist'
+                    ? 'var(--bs-white)'
+                    : 'var(--bs-secondary)'
+                }
+              />
+            </Button>
+          </Link>
 
           <Button
             variant="light"

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -110,9 +110,13 @@
   margin-top: 5rem;
   height: 52px;
   border-radius: 8px;
-  background-color: var(--bs-white);
   display: flex;
   align-items: center;
+  padding: 2.5rem 1rem 2.5rem 1rem;
+}
+
+.leftDrawer .profileContainer:focus {
+  background-color: #5ac989 !important;
 }
 
 .leftDrawer .profileContainer:focus {
@@ -139,6 +143,9 @@
   font-size: 1.1rem;
   font-weight: 600;
 }
+.leftDrawer .profileContainer .profileText .primaryText .primaryTextWhite {
+  color: white;
+}
 
 .leftDrawer .profileContainer .profileText .secondaryText {
   font-size: 0.8rem;
@@ -148,6 +155,14 @@
   text-transform: capitalize;
 }
 
+.leftDrawer .profileContainer .profileText .secondaryTextBlack {
+  color: var(--bs-secondary);
+}
+
+.leftDrawer .profileContainer .profileText .secondaryTextWhite {
+  color: rgb(230, 230, 230);
+}
+
 .logout {
   margin-bottom: 50px;
 }

diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -6,7 +6,7 @@ import IconComponent from 'components/IconComponent/IconComponent';
 import React, { useEffect, useState } from 'react';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import type { TargetsType } from 'state/reducers/routesReducer';
 import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
 import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
@@ -183,33 +183,55 @@ const leftDrawerOrg = ({
 
         {/* Profile Section & Logout Btn */}
         <div style={{ marginTop: 'auto' }}>
-          <button
-            className={styles.profileContainer}
-            data-testid="profileBtn"
-            onClick={(): void => {
-              history.push(`/member/id=${userId}`);
+          <Link
+            to={{
+              pathname: `/member/id=${userId}`,
+              state: { from: 'orgdash' },
             }}
           >
-            <div className={styles.imageContainer}>
-              {userImage && userImage !== 'null' ? (
-                <img src={userImage} alt={`profile picture`} />
-              ) : (
-                <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
-                  alt={`dummy picture`}
-                />
-              )}
-            </div>
-            <div className={styles.profileText}>
-              <span className={styles.primaryText}>
-                {firstName} {lastName}
-              </span>
-              <span className={styles.secondaryText}>
-                {`${userType}`.toLowerCase()}
-              </span>
-            </div>
-            <AngleRightIcon fill={'var(--bs-secondary)'} />
-          </button>
+            <Button
+              key={'orgdashBtn'}
+              variant={screenName === 'orgdash' ? 'success' : 'light'}
+              className={styles.profileContainer}
+              data-testid="profileBtn"
+            >
+              <div className={styles.imageContainer}>
+                {userImage && userImage !== 'null' ? (
+                  <img src={userImage} alt={`profile picture`} />
+                ) : (
+                  <img
+                    src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
+                    alt={`dummy picture`}
+                  />
+                )}
+              </div>
+              <div className={styles.profileText}>
+                <span
+                  className={`${styles.primaryText} 
+                  ${screenName === 'orgdash' ? styles.primaryTextWhite : ''}`}
+                >
+                  {firstName} {lastName}
+                </span>
+                <span
+                  className={`${styles.secondaryText} 
+                  ${
+                    screenName === 'orgdash'
+                      ? styles.secondaryTextWhite
+                      : styles.secondaryTextBlack
+                  }`}
+                >
+                  {`${userType}`.toLowerCase()}
+                </span>
+              </div>
+              <AngleRightIcon
+                fill={
+                  screenName === 'orgdash'
+                    ? 'var(--bs-white)'
+                    : 'var(--bs-secondary)'
+                }
+              />
+            </Button>
+          </Link>
           <Button
             variant="light"
             className={`mt-4 d-flex justify-content-start px-0 w-100 ${styles.logout}`}

diff --git a/src/screens/MemberDetail/MemberDetail.test.tsx b/src/screens/MemberDetail/MemberDetail.test.tsx
@@ -175,6 +175,32 @@ describe('MemberDetail', () => {
     userEvent.click(screen.getByTestId('stateBtn'));
   });
 
+  test('should render OrganizationScreen if from is from is orgdash', async () => {
+    const props = {
+      id: 'rishav-jha-mech',
+      from: 'orgdash',
+    };
+
+    render(
+      <MockedProvider addTypename={false} link={link1}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <MemberDetail {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    expect(screen.queryByText('Loading data...')).not.toBeInTheDocument();
+    await wait();
+    expect(screen.getAllByText(/People/i)).toBeTruthy();
+    expect(screen.getAllByText(/Events/i)).toBeTruthy();
+    expect(screen.getAllByText(/Posts/i)).toBeTruthy();
+    expect(screen.getAllByText(/Advertisement/i)).toBeTruthy();
+  });
+
   test('prettyDate function should work properly', () => {
     // If the date is provided
     const datePretty = jest.fn(prettyDate);