From d48c001ed1a8d5b4329680754f9d462f3632040d Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Sat, 30 Dec 2023 20:17:08 +0530 Subject: [PATCH 01/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted. --- src/components/OrganizationDashCards/CardItem.module.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css index 0330411b0c..05f3ee09f3 100644 --- a/src/components/OrganizationDashCards/CardItem.module.css +++ b/src/components/OrganizationDashCards/CardItem.module.css @@ -39,6 +39,12 @@ .cardItem .title { font-size: 1rem; flex: 1; + margin-right: 0.3rem; + word-wrap: break-word; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } .cardItem .time { From e2d895a22a0f8cba14ad597bf6bde26b561aee8f Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Wed, 3 Jan 2024 23:17:29 +0530 Subject: [PATCH 02/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- .../OrganizationDashCards/CardItem.module.css | 32 ++++++--- .../OrganizationDashCards/CardItem.tsx | 67 ++++++++----------- 2 files changed, 49 insertions(+), 50 deletions(-) diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css index 05f3ee09f3..c329ab3c1b 100644 --- a/src/components/OrganizationDashCards/CardItem.module.css +++ b/src/components/OrganizationDashCards/CardItem.module.css @@ -2,16 +2,20 @@ position: relative; display: flex; align-items: center; - padding: 0.75rem 0; + background-color: #f1f3f68f; + border-radius: 8px; + padding: 16px; + margin-top: 20px; } .cardItem .iconWrapper { position: relative; - height: 40px; - width: 40px; + height: 52px; + width: 52px; display: flex; justify-content: center; align-items: center; + margin-left: 18px; } .cardItem .iconWrapper .themeOverlay { @@ -22,7 +26,7 @@ bottom: 0; left: 0; opacity: 0.12; - border-radius: 50%; + border-radius: 4px; } .cardItem .iconWrapper .dangerOverlay { @@ -33,11 +37,12 @@ bottom: 0; left: 0; opacity: 0.12; - border-radius: 50%; + border-radius: 4px; } .cardItem .title { - font-size: 1rem; + font-size: 15px; + font-weight: 600; flex: 1; margin-right: 0.3rem; word-wrap: break-word; @@ -48,13 +53,14 @@ } .cardItem .time { - font-size: 0.9rem; - color: var(--bs-secondary); + font-size: 0.8rem; + font-weight: 300; + color: #808080; } .cardItem .creator { - font-size: 1rem; - color: rgb(33, 208, 21); + font-size: 0.8rem; + color: black; } .rightCard { @@ -64,3 +70,9 @@ justify-content: center; flex-direction: column; } + +.content { + display: flex; + flex-direction: column; + max-width: 60%; +} diff --git a/src/components/OrganizationDashCards/CardItem.tsx b/src/components/OrganizationDashCards/CardItem.tsx index bcaaea68c5..b9f9cb4e7b 100644 --- a/src/components/OrganizationDashCards/CardItem.tsx +++ b/src/components/OrganizationDashCards/CardItem.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg'; import { ReactComponent as PostsIcon } from 'assets/svgs/post.svg'; import { ReactComponent as MarkerIcon } from 'assets/svgs/location.svg'; -import { ReactComponent as DateIcon } from 'assets/svgs/date.svg'; -import { ReactComponent as UserIcon } from 'assets/svgs/user.svg'; import dayjs from 'dayjs'; import styles from './CardItem.module.css'; import { PersonAddAlt1Rounded } from '@mui/icons-material'; @@ -37,48 +35,37 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => { ) )} - {`${title}`} +
+ {`${title}`} -
- {creator && ( - - {' '} - {' '} - - {creator.firstName} {creator.lastName} - - - )} +
+ {time && ( + + Posted on: + {dayjs(time).format('D MMM YYYY')} + + )} + {creator && ( + + Author: + + {creator.firstName} {creator.lastName} + + + )} - {location && ( - - {' '} - {location} - - )} - {time && ( - - {type === 'Event' && ( - + - )}{' '} - {dayjs(time).format('MMM D, YYYY')} - - )} + />{' '} + {location} + + )} +
From d3642edfc55a5517e5e3dbe1e9f99b1cd71d3ad5 Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Wed, 3 Jan 2024 23:34:35 +0530 Subject: [PATCH 03/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- src/components/OrganizationDashCards/CardItem.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/OrganizationDashCards/CardItem.test.tsx b/src/components/OrganizationDashCards/CardItem.test.tsx index 3bfee8aa1c..004c13f4a9 100644 --- a/src/components/OrganizationDashCards/CardItem.test.tsx +++ b/src/components/OrganizationDashCards/CardItem.test.tsx @@ -17,7 +17,7 @@ describe('Testing the Organization Card', () => { expect(screen.getByText(/Event Title/i)).toBeInTheDocument(); expect( - screen.getByText(dayjs(props.time).format('MMM D, YYYY')) + screen.getByText(dayjs(props.time).format('D MMM YYYY')) ).toBeInTheDocument(); expect(screen.getByText(/Event Location/i)).toBeInTheDocument(); }); @@ -40,7 +40,7 @@ describe('Testing the Organization Card', () => { expect(screen.getByText(/Post Title/i)).toBeInTheDocument(); expect( - screen.getByText(dayjs(props.time).format('MMM D, YYYY')) + screen.getByText(dayjs(props.time).format('D MMM YYYY')) ).toBeInTheDocument(); expect(screen.getByText(/John Doe/i)).toBeInTheDocument(); }); From afdbb443c09e9461223e3acf400b927423f1ab10 Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Fri, 5 Jan 2024 16:47:32 +0530 Subject: [PATCH 04/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- .../OrganizationDashCards/CardItem.module.css | 9 +- .../OrganizationDashboard.module.css | 3 + .../OrganizationDashboard.tsx | 172 +++++++++--------- 3 files changed, 93 insertions(+), 91 deletions(-) diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css index c329ab3c1b..da5feddf3e 100644 --- a/src/components/OrganizationDashCards/CardItem.module.css +++ b/src/components/OrganizationDashCards/CardItem.module.css @@ -4,7 +4,7 @@ align-items: center; background-color: #f1f3f68f; border-radius: 8px; - padding: 16px; + padding: 15px; margin-top: 20px; } @@ -15,7 +15,7 @@ display: flex; justify-content: center; align-items: center; - margin-left: 18px; + /* margin-right: 18px; */ } .cardItem .iconWrapper .themeOverlay { @@ -27,6 +27,7 @@ left: 0; opacity: 0.12; border-radius: 4px; + /* margin-right: 18px; */ } .cardItem .iconWrapper .dangerOverlay { @@ -48,7 +49,7 @@ word-wrap: break-word; overflow: hidden; display: -webkit-box; - -webkit-line-clamp: 2; + -webkit-line-clamp: 1; -webkit-box-orient: vertical; } @@ -74,5 +75,5 @@ .content { display: flex; flex-direction: column; - max-width: 60%; + max-width: 85%; } diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css index 485200b1ae..b65b822c49 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css @@ -22,3 +22,6 @@ justify-content: center; align-items: center; } +.BottomRow { + margin-top: 45px; +} diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx index 5205cae25b..dc3e0489a1 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx @@ -210,93 +210,6 @@ function organizationDashboard(): JSX.Element { )} - - - -
-
- {t('upcomingEvents')} -
- -
- - {loadingEvent ? ( - [...Array(4)].map((_, index) => { - return ; - }) - ) : upcomingEvents.length == 0 ? ( -
-
{t('noUpcomingEvents')}
-
- ) : ( - upcomingEvents.map( - (event: InterfaceQueryOrganizationEventListItem) => { - return ( - - ); - } - ) - )} - - - - - -
-
{t('latestPosts')}
- -
- - {loadingPost ? ( - [...Array(4)].map((_, index) => { - return ; - }) - ) : postData?.postsByOrganizationConnection.edges.length == - 0 ? ( - /* eslint-disable */ -
-
{t('noPostsPresent')}
-
- ) : ( - /* eslint-enable */ - postData?.postsByOrganizationConnection.edges - .slice(0, 5) - .map((post: any) => { - return ( - - ); - }) - )} - - - - @@ -341,6 +254,91 @@ function organizationDashboard(): JSX.Element { + + + +
+
{t('upcomingEvents')}
+ +
+ + {loadingEvent ? ( + [...Array(4)].map((_, index) => { + return ; + }) + ) : upcomingEvents.length == 0 ? ( +
+
{t('noUpcomingEvents')}
+
+ ) : ( + upcomingEvents.map( + (event: InterfaceQueryOrganizationEventListItem) => { + return ( + + ); + } + ) + )} + + + + + +
+
{t('latestPosts')}
+ +
+ + {loadingPost ? ( + [...Array(4)].map((_, index) => { + return ; + }) + ) : postData?.postsByOrganizationConnection.edges.length == + 0 ? ( + /* eslint-disable */ +
+
{t('noPostsPresent')}
+
+ ) : ( + /* eslint-enable */ + postData?.postsByOrganizationConnection.edges + .slice(0, 5) + .map((post: any) => { + return ( + + ); + }) + )} + + + + ); From 1f2553af3009e86d53e991bd80dbb16911e66a60 Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Fri, 5 Jan 2024 18:35:43 +0530 Subject: [PATCH 05/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- src/components/OrganizationDashCards/CardItem.module.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css index da5feddf3e..2bb8e4d07e 100644 --- a/src/components/OrganizationDashCards/CardItem.module.css +++ b/src/components/OrganizationDashCards/CardItem.module.css @@ -15,7 +15,6 @@ display: flex; justify-content: center; align-items: center; - /* margin-right: 18px; */ } .cardItem .iconWrapper .themeOverlay { @@ -27,7 +26,6 @@ left: 0; opacity: 0.12; border-radius: 4px; - /* margin-right: 18px; */ } .cardItem .iconWrapper .dangerOverlay { From 59453927e76ada5b8bf897d2eaf44dcd687a96c2 Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Fri, 5 Jan 2024 20:06:36 +0530 Subject: [PATCH 06/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- .../OrganizationDashboard.module.css | 7 +++++- .../OrganizationDashboard.test.tsx | 23 ++++++++++++++++++- .../OrganizationDashboard.tsx | 2 +- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css index b65b822c49..f2445c67e9 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css @@ -22,6 +22,11 @@ justify-content: center; align-items: center; } + .BottomRow { - margin-top: 45px; + margin-top: 30px; +} + +.memeberShipCard { + height: 150px; } diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx index cb221f94ce..568d5e6bc9 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx @@ -78,7 +78,6 @@ describe('Organisation Dashboard Page', () => { // Checking if posts are rendered expect(screen.getByText('Post 15')).toBeInTheDocument(); - // Checking if membership requests are rendered expect(screen.getByText('Jane Doe')).toBeInTheDocument(); const peopleBtn = screen.getByText('Members'); @@ -147,4 +146,26 @@ describe('Organisation Dashboard Page', () => { await wait(); expect(window.location).toBeAt('/orglist'); }); + + test('rendering of upcoming events', async () => { + render( + + + + + + + + + + ); + + await wait(); + + const upcomingEventsTitle = screen.getByText('Upcoming Events'); + expect(upcomingEventsTitle).toBeInTheDocument(); + + const upcomingEvents = screen.queryAllByTestId('upcomingEventItem'); + expect(upcomingEvents.length).toBeGreaterThanOrEqual(0); + }); }); diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx index dc3e0489a1..59e5c0e339 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx @@ -228,7 +228,7 @@ function organizationDashboard(): JSX.Element { {t('viewAll')} - + {loadingOrgData ? ( [...Array(4)].map((_, index) => { return ; From 702cbe067610b5883f56590e2c7f693343f00d60 Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Fri, 5 Jan 2024 21:43:17 +0530 Subject: [PATCH 07/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- .../OrganizationDashboard.test.tsx | 59 ++++++++++++++----- 1 file changed, 43 insertions(+), 16 deletions(-) diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx index 568d5e6bc9..f1bde5c5a5 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx @@ -147,25 +147,52 @@ describe('Organisation Dashboard Page', () => { expect(window.location).toBeAt('/orglist'); }); - test('rendering of upcoming events', async () => { - render( - - - - - - - - - - ); + test('Testing empty membership requests and upcoming events with populated posts', async () => { + await act(async () => { + render( + + + + + + + + + + ); + }); await wait(); - const upcomingEventsTitle = screen.getByText('Upcoming Events'); - expect(upcomingEventsTitle).toBeInTheDocument(); + const viewMSBtn = screen.getByTestId('viewAllMembershipRequests'); + + fireEvent.click(viewMSBtn); + expect(toast.success).toBeCalledWith('Coming soon!'); + + expect( + screen.getByText(/No Membership requests present/i) + ).toBeInTheDocument(); + expect(screen.getByText(/No Upcoming Events/i)).toBeInTheDocument(); + expect(screen.queryByText(/No Posts Present/i)).toBeInTheDocument(); + }); + + test('Testing error scenario redirects to orglist page', async () => { + await act(async () => { + render( + + + + + + + + + + ); + }); + + await wait(); - const upcomingEvents = screen.queryAllByTestId('upcomingEventItem'); - expect(upcomingEvents.length).toBeGreaterThanOrEqual(0); + expect(window.location.pathname).toBe('/orglist'); }); }); From dd36013417beb2cc08ee371111f8077ec97156b1 Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Sun, 7 Jan 2024 05:57:08 +0530 Subject: [PATCH 08/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- .../OrganizationDashboard.test.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx index f1bde5c5a5..a7a7fe2fd1 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx @@ -195,4 +195,28 @@ describe('Organisation Dashboard Page', () => { expect(window.location.pathname).toBe('/orglist'); }); + + test('Clicking viewAllMembershipRequests triggers toast.success', async () => { + await act(async () => { + render( + + + + + + + + + + ); + }); + + await wait(); + + const viewMSBtn = screen.getByTestId('viewAllMembershipRequests'); + fireEvent.click(viewMSBtn); + + // Ensure that toast.success is called with 'Coming soon!' + expect(toast.success).toBeCalledWith('Coming soon!'); + }); }); From e9f9b12f11dd25647714bba35320838a9ea0c9dd Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Mon, 8 Jan 2024 10:21:58 +0530 Subject: [PATCH 09/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- .../OrganizationDashCards/CardItem.module.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css index 2bb8e4d07e..3b595b4464 100644 --- a/src/components/OrganizationDashCards/CardItem.module.css +++ b/src/components/OrganizationDashCards/CardItem.module.css @@ -52,14 +52,14 @@ } .cardItem .time { - font-size: 0.8rem; - font-weight: 300; - color: #808080; + font-size: var(--bs-font-size-sm); + font-weight: var(--bs-font-weight-light); + color: var(--bs-gray-600); } .cardItem .creator { - font-size: 0.8rem; - color: black; + font-size: var(--bs-font-size-sm); + color: var(--bs-body-color); } .rightCard { From c470cfb711213008f2064486a7da578cb799846d Mon Sep 17 00:00:00 2001 From: gauravsingh94 Date: Wed, 10 Jan 2024 11:24:07 +0530 Subject: [PATCH 10/10] Fixed-Issue-#1266 Bug Report When a new post is added, the latest post section in the organization's dashboard becomes distorted Updated --- .../OrganizationDashboard.test.tsx | 27 +++++++++++++++- .../OrganizationDashboardMocks.ts | 31 +++++++++++++++++++ 2 files changed, 57 insertions(+), 1 deletion(-) diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx index a7a7fe2fd1..8e61b552ed 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx @@ -9,7 +9,12 @@ import { BrowserRouter } from 'react-router-dom'; import { store } from 'state/store'; import { StaticMockLink } from 'utils/StaticMockLink'; import OrganizationDashboard from './OrganizationDashboard'; -import { EMPTY_MOCKS, ERROR_MOCKS, MOCKS } from './OrganizationDashboardMocks'; +import { + EMPTY_MOCKS, + ERROR_MOCKS, + MOCKS, + EVENT_MOCK, +} from './OrganizationDashboardMocks'; import i18nForTest from 'utils/i18nForTest'; import { toast } from 'react-toastify'; import userEvent from '@testing-library/user-event'; @@ -24,6 +29,7 @@ async function wait(ms = 100): Promise { const link1 = new StaticMockLink(MOCKS, true); const link2 = new StaticMockLink(EMPTY_MOCKS, true); const link3 = new StaticMockLink(ERROR_MOCKS, true); +const link4 = new StaticMockLink(EVENT_MOCK, true); jest.mock('react-toastify', () => ({ toast: { @@ -219,4 +225,23 @@ describe('Organisation Dashboard Page', () => { // Ensure that toast.success is called with 'Coming soon!' expect(toast.success).toBeCalledWith('Coming soon!'); }); + + test('Checking for Upcoming Event is getting rendered or not.', async () => { + await act(async () => { + render( + + + + + + + + + + ); + }); + + await wait(); + expect(screen.getByText('Sample Event')).toBeInTheDocument(); + }); }); diff --git a/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts b/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts index dc1f158709..1ab2b298b8 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts +++ b/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts @@ -260,6 +260,37 @@ export const EMPTY_MOCKS = [ }, ]; +export const EVENT_MOCK = [ + { + request: { + query: ORGANIZATION_EVENT_CONNECTION_LIST, + variables: { + organization_id: '6437904485008f171cf29924', + }, + }, + result: { + data: { + eventsByOrganizationConnection: [ + { + _id: '1', + title: 'Sample Event', + description: 'Sample Description', + startDate: '2023-10-29T00:00:00.000Z', + endDate: '2023-10-29T23:59:59.000Z', + location: 'Sample Location', + startTime: '08:00:00', + endTime: '17:00:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + ], + }, + }, + }, +]; + export const ERROR_MOCKS = [ { request: {