From 0429d59bd5eaa0829556ea4a2e032fbd068b42f9 Mon Sep 17 00:00:00 2001 From: Kanhaiya yadav <93936630+kanhaiya04@users.noreply.github.com> Date: Sat, 11 Nov 2023 06:19:35 +0530 Subject: [PATCH 1/3] update and delete buttons of event modal are now working (#1051) * update and delete buttons of event modal are now working * fixed the naming conventions and style of the modal --- .../EventListCard/EventListCard.module.css | 6 +- .../EventListCard/EventListCard.test.tsx | 41 +- .../EventListCard/EventListCard.tsx | 431 +++++++++--------- 3 files changed, 254 insertions(+), 224 deletions(-) diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css index 5b128d075d..c2a8e9eb0e 100644 --- a/src/components/EventListCard/EventListCard.module.css +++ b/src/components/EventListCard/EventListCard.module.css @@ -26,9 +26,7 @@ justify-content: flex-end; } .icon { - transform: scale(1); - cursor: pointer; - color: #31bb6b; + margin: 1px; } .cards { @@ -86,6 +84,8 @@ } .dispflex { display: flex; + margin-bottom: 5px; + margin-right: 5px; } .dispflex > input { width: 20%; diff --git a/src/components/EventListCard/EventListCard.test.tsx b/src/components/EventListCard/EventListCard.test.tsx index ee48e2f871..17edaf5050 100644 --- a/src/components/EventListCard/EventListCard.test.tsx +++ b/src/components/EventListCard/EventListCard.test.tsx @@ -149,6 +149,30 @@ describe('Testing Event List Card', () => { expect(screen.queryByText(props.eventName)).not.toBeInTheDocument(); }); + test('Testing for update modal', async () => { + render( + + + + + + + + + + ); + + await wait(); + + userEvent.click(screen.getByTestId('card')); + userEvent.click(screen.getByTestId('editEventModalBtn')); + + userEvent.click(screen.getByTestId('EventUpdateModalCloseBtn')); + userEvent.click(screen.getByTestId('createEventModalCloseBtn')); + + await wait(); + }); + test('Testing event update functionality', async () => { render( @@ -159,7 +183,8 @@ describe('Testing Event List Card', () => { ); await wait(); - + userEvent.click(screen.getByTestId('card')); + userEvent.click(screen.getByTestId('editEventModalBtn')); userEvent.type(screen.getByTestId('updateTitle'), props.eventName); userEvent.type( screen.getByTestId('updateDescription'), @@ -199,7 +224,8 @@ describe('Testing Event List Card', () => { ); await wait(); - + userEvent.click(screen.getByTestId('card')); + userEvent.click(screen.getByTestId('editEventModalBtn')); userEvent.type(screen.getByTestId('updateTitle'), props.eventName); userEvent.type( screen.getByTestId('updateDescription'), @@ -232,6 +258,11 @@ describe('Testing Event List Card', () => { ); + userEvent.click(screen.getByTestId('card')); + userEvent.click(screen.getByTestId('deleteEventModalBtn')); + + userEvent.click(screen.getByTestId('EventDeleteModalCloseBtn')); + userEvent.click(screen.getByTestId('createEventModalCloseBtn')); }); it('should call the delete event mutation when the "Yes" button is clicked', async () => { @@ -240,7 +271,8 @@ describe('Testing Event List Card', () => { ); - + userEvent.click(screen.getByTestId('card')); + userEvent.click(screen.getByTestId('deleteEventModalBtn')); const deleteBtn = screen.getByTestId('deleteEventBtn'); fireEvent.click(deleteBtn); }); @@ -263,7 +295,8 @@ describe('Testing Event List Card', () => { ); - + userEvent.click(screen.getByTestId('card')); + userEvent.click(screen.getByTestId('deleteEventModalBtn')); const deleteBtn = screen.getByTestId('deleteEventBtn'); fireEvent.click(deleteBtn); }); diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx index 7f817890de..f41c0e9c91 100644 --- a/src/components/EventListCard/EventListCard.tsx +++ b/src/components/EventListCard/EventListCard.tsx @@ -38,6 +38,8 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element { const [recurringchecked, setRecurringChecked] = useState(false); const [publicchecked, setPublicChecked] = useState(true); const [registrablechecked, setRegistrableChecked] = React.useState(false); + const [eventDeleteModalIsOpen, setEventDeleteModalIsOpen] = useState(false); + const [eventUpdateModalIsOpen, setEventUpdateModalIsOpen] = useState(false); const history = useHistory(); const [formState, setFormState] = useState({ title: '', @@ -53,6 +55,14 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element { setEventModalIsOpen(false); }; + const toggleDeleteModal = (): void => { + setEventDeleteModalIsOpen(!eventDeleteModalIsOpen); + }; + + const toggleUpdateModel = (): void => { + setEventUpdateModalIsOpen(!eventUpdateModalIsOpen); + }; + useEffect(() => { setFormState({ title: props.eventName, @@ -196,247 +206,234 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
- + {' '} - - +
{/* delete modal */} - + + + {t('deleteEvent')} + + + {t('deleteEventMsg')} + + + + + {/* Edit Modal */} - ) : ( - upcomingEvents.slice(0, 5).map((event) => { - return ( - - ); - }) + upcomingEvents.map( + (event: InterfaceQueryOrganizationEventListItem) => { + return ( + + ); + } + ) )} @@ -226,20 +221,27 @@ function organizationDashboard(): JSX.Element { [...Array(4)].map((_, index) => { return ; }) - ) : postData?.postsByOrganization?.length == 0 ? ( + ) : postData?.postsByOrganizationConnection.edges.length == + 0 ? ( + /* eslint-disable */
{t('noPostsPresent')}
) : ( - postData?.postsByOrganization.slice(0, 5).map((post) => { - return ( - - ); - }) + /* eslint-enable */ + postData?.postsByOrganizationConnection.edges + .slice(0, 5) + .map((post: any) => { + return ( + + ); + }) )} diff --git a/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts b/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts index f1672c03ca..dc1f158709 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts +++ b/src/screens/OrganizationDashboard/OrganizationDashboardMocks.ts @@ -1,7 +1,7 @@ import { ORGANIZATIONS_LIST, - ORGANIZATION_EVENT_LIST, - ORGANIZATION_POST_LIST, + ORGANIZATION_EVENT_CONNECTION_LIST, + ORGANIZATION_POST_CONNECTION_LIST, } from 'GraphQl/Queries/Queries'; import dayjs from 'dayjs'; @@ -26,7 +26,6 @@ export const MOCKS = [ lastName: '', email: '', }, - members: [ { _id: '123', @@ -68,59 +67,114 @@ export const MOCKS = [ }, { request: { - query: ORGANIZATION_POST_LIST, + query: ORGANIZATION_POST_CONNECTION_LIST, }, result: { data: { - postsByOrganization: [ - { - _id: 1, - title: 'Post 1', - text: 'Test Post', - imageUrl: '', - videoUrl: '', - creator: { - _id: '583', - firstName: 'John', - lastName: 'Doe', - email: 'johndoe@gmail.com', + postsByOrganizationConnection: { + edges: [ + { + _id: '6411e53835d7ba2344a78e21', + title: 'Post 15', + text: 'This is the first post that was made', + imageUrl: null, + videoUrl: null, + creator: { + _id: '640d98d9eb6a743d75341067', + firstName: 'Aditya', + lastName: 'Shelke', + email: 'adidacreator1@gmail.com', + }, + createdAt: dayjs(new Date()).add(1, 'day'), + likeCount: 0, + commentCount: 0, + comments: [], + likedBy: [], + pinned: false, }, - }, - ], + { + _id: '6411e54835d7ba2344a78e29', + title: 'Post 2', + text: 'Hey, anyone saw my watch that I left at the office?', + imageUrl: null, + videoUrl: null, + creator: { + _id: '640d98d9eb6a743d75341067', + firstName: 'Aditya', + lastName: 'Shelke', + email: 'adidacreator1@gmail.com', + }, + pinned: false, + createdAt: dayjs(new Date()).add(1, 'day'), + likeCount: 0, + commentCount: 2, + comments: [ + { + _id: '64eb13beca85de60ebe0ed0e', + creator: { + _id: '63d6064458fce20ee25c3bf7', + firstName: 'Noble', + lastName: 'Mittal', + email: 'test@gmail.com', + __typename: 'User', + }, + likeCount: 1, + likedBy: [ + { + _id: 1, + }, + ], + text: 'Yes, that is $50', + __typename: 'Comment', + }, + { + _id: '64eb483aca85de60ebe0ef99', + creator: { + _id: '63d6064458fce20ee25c3bf7', + firstName: 'Noble', + lastName: 'Mittal', + email: 'test@gmail.com', + __typename: 'User', + }, + likeCount: 0, + likedBy: [], + text: 'Great View', + __typename: 'Comment', + }, + ], + likedBy: [ + { + _id: '63d6064458fce20ee25c3bf7', + firstName: 'Comment', + lastName: 'Likkert', + }, + ], + }, + ], + }, }, }, }, { request: { - query: ORGANIZATION_EVENT_LIST, + query: ORGANIZATION_EVENT_CONNECTION_LIST, + variables: { + organization_id: '123', + }, }, result: { data: { - eventsByOrganization: [ - { - _id: 1, - title: 'Event 1', - description: 'Event Test', - startDate: dayjs(new Date()).add(1, 'day'), - endDate: dayjs(new Date()).add(3, 'day'), - location: 'New Delhi', - startTime: '', - endTime: '', - allDay: true, - recurring: false, - isPublic: true, - isRegisterable: true, - }, + eventsByOrganizationConnection: [ { - _id: 2, - title: 'Event 2', - description: 'Event Test', - startDate: dayjs(new Date()), - endDate: dayjs(new Date()).add(1, 'day'), - location: 'Jamaica', - startTime: '', - endTime: '', - allDay: true, + _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, @@ -184,21 +238,23 @@ export const EMPTY_MOCKS = [ }, { request: { - query: ORGANIZATION_POST_LIST, + query: ORGANIZATION_POST_CONNECTION_LIST, }, result: { data: { - postsByOrganization: [], + postsByOrganizationConnection: { + edges: [], + }, }, }, }, { request: { - query: ORGANIZATION_EVENT_LIST, + query: ORGANIZATION_EVENT_CONNECTION_LIST, }, result: { data: { - eventsByOrganization: [], + eventsByOrganizationConnection: [], }, }, }, @@ -213,13 +269,13 @@ export const ERROR_MOCKS = [ }, { request: { - query: ORGANIZATION_POST_LIST, + query: ORGANIZATION_POST_CONNECTION_LIST, }, error: new Error('Mock Graphql ORGANIZATION_POST_LIST Error'), }, { request: { - query: ORGANIZATION_EVENT_LIST, + query: ORGANIZATION_EVENT_CONNECTION_LIST, }, error: new Error('Mock Graphql ORGANIZATION_EVENT_LIST Error'), }, diff --git a/src/screens/UserPortal/Home/Home.test.tsx b/src/screens/UserPortal/Home/Home.test.tsx index f4ca4b64ba..105714cfc8 100644 --- a/src/screens/UserPortal/Home/Home.test.tsx +++ b/src/screens/UserPortal/Home/Home.test.tsx @@ -14,6 +14,7 @@ import userEvent from '@testing-library/user-event'; import * as getOrganizationId from 'utils/getOrganizationId'; import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations'; import { toast } from 'react-toastify'; +import dayjs from 'dayjs'; jest.mock('react-toastify', () => ({ toast: { @@ -47,12 +48,12 @@ const MOCKS = [ lastName: 'Shelke', email: 'adidacreator1@gmail.com', }, + createdAt: dayjs(new Date()).add(1, 'day'), likeCount: 0, commentCount: 0, comments: [], likedBy: [], pinned: false, - createdAt: '2023-02-18T09:22:27.969Z', }, { _id: '6411e54835d7ba2344a78e29', @@ -66,9 +67,9 @@ const MOCKS = [ lastName: 'Shelke', email: 'adidacreator1@gmail.com', }, + createdAt: dayjs(new Date()).add(1, 'day'), likeCount: 0, commentCount: 2, - createdAt: '2023-02-18T09:22:27.969Z', comments: [ { _id: '64eb13beca85de60ebe0ed0e', diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index 1a41e91dfb..e90711028f 100644 --- a/src/utils/interfaces.ts +++ b/src/utils/interfaces.ts @@ -82,6 +82,7 @@ export interface InterfaceQueryOrganizationPostListItem { text: string; imageUrl: null; videoUrl: null; + createdAt: string; creator: { _id: string; firstName: string; From 57baf75a26c2f8f3e9da35ac074a251e9705e473 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Bhagat Date: Sat, 11 Nov 2023 15:48:48 +0530 Subject: [PATCH 3/3] Fix dashboard items (#1007) * Dashboard items are working now. * added variables for links -fix dashboard items * Added variables for links -fix dashboard items. * made the changes as said * Removed : string from variable assignment. * remove repititive code and resolved falling tests * Fix repeating code and falling tests. * Resolved some more falling tests * write test for missed lines --- src/assets/css/app.css | 2 +- .../OrganizationDashboard.test.tsx | 15 ++++ .../OrganizationDashboard.tsx | 74 ++++++++++++++++--- 3 files changed, 78 insertions(+), 13 deletions(-) diff --git a/src/assets/css/app.css b/src/assets/css/app.css index c507b04f38..ae21cf9cb0 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -5560,7 +5560,7 @@ fieldset:disabled .btn { box-shadow: var(--bs-toast-box-shadow); border-radius: var(--bs-toast-border-radius); } -.toast.showing { +.showing { opacity: 0; } .toast:not(.show) { diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx index a54a5fd421..cb221f94ce 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx @@ -80,6 +80,21 @@ describe('Organisation Dashboard Page', () => { // Checking if membership requests are rendered expect(screen.getByText('Jane Doe')).toBeInTheDocument(); + + const peopleBtn = screen.getByText('Members'); + const adminBtn = screen.getByText('Admins'); + const postBtn = screen.getAllByText('Posts'); + const eventBtn = screen.getAllByText('Events'); + const blockUserBtn = screen.getByText('Blocked Users'); + const requestBtn = screen.getByText('Requests'); + userEvent.click(peopleBtn); + userEvent.click(adminBtn); + userEvent.click(postBtn[0]); + userEvent.click(eventBtn[0]); + userEvent.click(postBtn[1]); + userEvent.click(eventBtn[1]); + userEvent.click(blockUserBtn); + userEvent.click(requestBtn); }); test('Testing buttons and checking empty events, posts and membership requests', async () => { diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx index a6551fd84b..60e31396a5 100644 --- a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx +++ b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx @@ -33,6 +33,12 @@ function organizationDashboard(): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'dashboard' }); document.title = t('title'); const currentUrl = window.location.href.split('=')[1]; + const peopleLink = `/orgpeople/id=${currentUrl}`; + const postsLink = `/orgpost/id=${currentUrl}`; + const eventsLink = `/orgevents/id=${currentUrl}`; + const blockUserLink = `/blockuser/id=${currentUrl}`; + const requestLink = '/requests'; + const history = useHistory(); const [upcomingEvents, setUpcomingEvents] = useState< InterfaceQueryOrganizationEventListItem[] @@ -110,21 +116,45 @@ function organizationDashboard(): JSX.Element { ) : ( - + { + history.push(peopleLink); + }} + > } /> - + { + history.push(peopleLink); + }} + > } /> - + { + history.push(postsLink); + }} + > } /> - + { + history.push(eventsLink); + }} + > } /> - + { + history.push(blockUserLink); + }} + > } /> - + { + history.push(requestLink); + }} + > - history.push(`/orgevents/id=${currentUrl}`) - } + onClick={(): void => history.push(eventsLink)} > {t('viewAll')} @@ -209,9 +261,7 @@ function organizationDashboard(): JSX.Element { size="sm" variant="light" data-testid="viewAllPosts" - onClick={(): void => - history.push(`/orgpost/id=${currentUrl}`) - } + onClick={(): void => history.push(postsLink)} > {t('viewAll')}