-
-
-
{t('settings')}
- {screenDisplayVariable != '' && (
-
- {t(screenDisplayVariable)}
-
- )}
- {/*
{t("abc")}
*/}
-
{t('settings')}
*/}
-
-
{screenVariable == 1 ? : null}
-
- {screenVariable == 5 ?
: null}
+
+
+
+
-
- {screenVariable == 2 ? (
-
- ) : null}
-
- {screenVariable == 3 ? : null}
-
- {screenVariable == 4 ? (
- data?.organizations?.membershipRequests ? (
- /* istanbul ignore next */
- data.organizations.map(
- /* istanbul ignore next */
- (datas: {
- _id: string;
- membershipRequests: {
- _id: string;
- user: {
- _id: string;
- firstName: string;
- lastName: string;
- email: string;
- };
- };
- }) => {
- /* istanbul ignore next */
- return (
-
- );
- }
- )
- ) : (
-
{t('noData')}
- )
- ) : null}
-
+
+
+
+ {t('changeLanguage')}
+
+
+
+
+
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css
index af35265ae8..485200b1ae 100644
--- a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css
+++ b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css
@@ -1,197 +1,24 @@
-.mainpage {
+.cardHeader {
+ padding: 1.25rem 1rem 1rem 1rem;
+ border-bottom: 1px solid var(--bs-gray-200);
display: flex;
- flex-direction: row;
-}
-
-.toporgloc {
- padding-top: 8px;
- font-size: 16px;
-}
-.sidebar {
- z-index: 0;
- padding-top: 5px;
- margin: 0;
- height: 100%;
-}
-.sidebar:after {
- content: '';
- background-color: #f7f7f7;
- position: absolute;
- width: 2px;
- height: 600px;
- top: 10px;
- left: 94%;
- display: block;
-}
-.sidebarsticky {
- padding-left: 30px;
-}
-.sidebarsticky > p {
- margin-top: -10px;
- width: 90%;
-}
-
-.description {
- word-wrap: break-word;
-}
-
-.titlename {
- color: #707070;
- font-weight: 600;
- font-size: 20px;
- margin-bottom: 30px;
- padding-bottom: 5px;
- width: 26%;
-}
-.tagdetailsGreen > button {
- background-color: #31bb6b;
- color: white;
- outline: none;
- cursor: pointer;
- transition: transform 0.2s, box-shadow 0.2s;
- border: none;
- border-radius: 5px;
- margin-top: -12px;
- margin-bottom: 10px;
- margin-right: 30px;
- padding-right: 20px;
- padding-left: 20px;
- padding-top: 5px;
- padding-bottom: 5px;
-}
-.mainpageright > hr {
- margin-top: 20px;
- width: 100%;
- margin-left: -15px;
- margin-right: -15px;
- margin-bottom: 20px;
-}
-.justifysp {
- display: flex;
- justify-content: space-between;
-}
-.org_about_img {
- margin-top: 0px;
- margin-bottom: 30px;
- border-radius: 5px;
- max-width: 100%;
- height: auto;
- width: 90%;
-}
-.invitebtn {
- border: 1px solid #e8e5e5;
- box-shadow: 0 2px 2px #e8e5e5;
- border-radius: 5px;
- background-color: #31bb6b;
- width: 20%;
- height: 40px;
- font-size: 16px;
- color: white;
- outline: none;
- font-weight: 600;
- cursor: pointer;
- transition: transform 0.2s, box-shadow 0.2s;
-}
-.flexdir {
- display: flex;
- flex-direction: row;
justify-content: space-between;
- border: none;
+ align-items: center;
}
-.logintitleinvite {
- color: #707070;
+.cardHeader .cardTitle {
+ font-size: 1.2rem;
font-weight: 600;
- font-size: 20px;
- margin-bottom: 20px;
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- width: 40%;
-}
-
-.cancel > i {
- margin-top: 5px;
- transform: scale(1.2);
- cursor: pointer;
- color: #707070;
-}
-
-.greenregbtn {
- margin: 1rem 0 0;
- margin-top: 10px;
- border: 1px solid #e8e5e5;
- box-shadow: 0 2px 2px #e8e5e5;
- padding: 10px 10px;
- border-radius: 5px;
- background-color: #31bb6b;
- width: 100%;
- font-size: 16px;
- color: white;
- outline: none;
- font-weight: 600;
- cursor: pointer;
- transition: transform 0.2s, box-shadow 0.2s;
- width: 100%;
-}
-
-.loader,
-.loader:after {
- border-radius: 50%;
- width: 10em;
- height: 10em;
-}
-.loader {
- margin: 60px auto;
- margin-top: 35vh !important;
- font-size: 10px;
- position: relative;
- text-indent: -9999em;
- border-top: 1.1em solid rgba(255, 255, 255, 0.2);
- border-right: 1.1em solid rgba(255, 255, 255, 0.2);
- border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
- border-left: 1.1em solid #febc59;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation: load8 1.1s infinite linear;
- animation: load8 1.1s infinite linear;
-}
-@-webkit-keyframes load8 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes load8 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
}
-.cardContainer {
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
+.cardBody {
+ min-height: 180px;
+ padding-top: 0;
}
-.dashboardIcon {
- font-size: 50px;
- color: #31bb6b;
-}
-
-.counterNumber {
- font-size: 24px;
- margin-bottom: 0rem !important;
-}
-
-.counterHead {
- color: #99abb4;
- margin-bottom: 0rem !important;
+.cardBody .emptyContainer {
+ display: flex;
+ height: 180px;
+ justify-content: center;
+ align-items: center;
}
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
index 612bbd30de..61d3eebc60 100644
--- a/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
+++ b/src/screens/OrganizationDashboard/OrganizationDashboard.test.tsx
@@ -1,27 +1,19 @@
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import type { RenderResult } from '@testing-library/react';
-import {
- act,
- render,
- screen,
- fireEvent,
- waitFor,
-} from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
+import { act, fireEvent, render, screen } from '@testing-library/react';
import 'jest-location-mock';
import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
-import OrganizationDashboard from './OrganizationDashboard';
-import {
- MOCKS_WITHOUT_IMAGE,
- MOCKS_WITH_IMAGE,
-} from './OrganizationDashboardMocks';
import { store } from 'state/store';
-import i18nForTest from 'utils/i18nForTest';
-import { USER_ORGANIZATION_LIST } from 'GraphQl/Queries/Queries';
import { StaticMockLink } from 'utils/StaticMockLink';
+import OrganizationDashboard from './OrganizationDashboard';
+import { EMPTY_MOCKS, ERROR_MOCKS, MOCKS } from './OrganizationDashboardMocks';
+import i18nForTest from 'utils/i18nForTest';
+import dayjs from 'dayjs';
+import { toast } from 'react-toastify';
+import userEvent from '@testing-library/user-event';
async function wait(ms = 100): Promise
{
await act(() => {
@@ -30,125 +22,124 @@ async function wait(ms = 100): Promise {
});
});
}
-const link2 = new StaticMockLink(MOCKS_WITH_IMAGE, true);
-const link3 = new StaticMockLink(MOCKS_WITHOUT_IMAGE, true);
-const customRender = (userType: any): RenderResult => {
- const mockedUser = {
- request: {
- query: USER_ORGANIZATION_LIST,
- variables: { id: localStorage.getItem('id') },
- },
- result: {
- data: {
- user: {
- userType,
- firstName: 'John',
- lastName: 'Doe',
- image: '',
- email: 'John_Does_Palasidoes@gmail.com',
- adminFor: {
- _id: 1,
- name: 'Akatsuki',
- image: '',
- },
- },
- },
- },
- };
-
- const mocks = [mockedUser, ...MOCKS_WITHOUT_IMAGE];
-
- const link1 = new StaticMockLink(mocks, true);
-
- return render(
-
-
-
-
-
-
-
-
-
+const link1 = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(EMPTY_MOCKS, true);
+const link3 = new StaticMockLink(ERROR_MOCKS, true);
+
+jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ warn: jest.fn(),
+ error: jest.fn(),
+ },
+}));
+
+beforeEach(() => {
+ localStorage.setItem('FirstName', 'John');
+ localStorage.setItem('LastName', 'Doe');
+ localStorage.setItem('UserType', 'SUPERADMIN');
+ localStorage.setItem(
+ 'UserImage',
+ 'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe'
);
-};
+});
+
+afterEach(() => {
+ jest.clearAllMocks();
+ localStorage.clear();
+});
describe('Organisation Dashboard Page', () => {
- test('should render props and text elements test for the screen', async () => {
- window.location.replace('/orglist');
-
- const { container } = render(
-
-
-
-
-
-
-
-
-
- );
-
- expect(container.textContent).not.toBe('Loading data...');
+ test('Should render props and text elements test for the screen', async () => {
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+
+
+ );
+ });
+
await wait();
- expect(container.textContent).toMatch('Location');
- expect(container.textContent).toMatch('About');
- expect(container.textContent).toMatch('Statistics');
- expect(window.location).toBeAt('/orglist');
- });
+ expect(screen.getByText('Members')).toBeInTheDocument();
+ expect(screen.getByText('Admins')).toBeInTheDocument();
+ expect(screen.getAllByText('Posts')).toHaveLength(2);
+ expect(screen.getAllByText('Events')).toHaveLength(2);
+ expect(screen.getByText('Blocked Users')).toBeInTheDocument();
+ expect(screen.getByText('Requests')).toBeInTheDocument();
+ expect(screen.getByText('Upcoming events')).toBeInTheDocument();
+ expect(screen.getByText('Latest posts')).toBeInTheDocument();
+ expect(screen.getByText('Membership requests')).toBeInTheDocument();
+ expect(screen.getAllByText('View all')).toHaveLength(3);
- test('should display delete button for SUPERADMIN', async () => {
- const { getByTestId, queryByTestId } = customRender('SUPERADMIN');
- await waitFor(() =>
- expect(queryByTestId('deleteClick')).toBeInTheDocument()
- );
+ // Checking if events are rendered
+ expect(screen.getByText('Event 1')).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ `${dayjs(new Date()).add(1, 'day').format('DD-MM-YYYY')}`
+ )
+ ).toBeInTheDocument();
- fireEvent.click(getByTestId('deleteClick'));
- fireEvent.click(getByTestId(/deleteOrganizationBtn/i));
- expect(window.location).not.toBeNull();
- });
+ // Checking if posts are rendered
+ expect(screen.getByText('Post 1')).toBeInTheDocument();
- test('should not display delete button for non-SUPERADMIN', async () => {
- const { queryByTestId } = customRender('ADMIN');
- await waitFor(() =>
- expect(queryByTestId('deleteClick')).not.toBeInTheDocument()
- );
+ // Checking if membership requests are rendered
+ expect(screen.getByText('Jane Doe')).toBeInTheDocument();
});
- test('Should check if organisation image is present', async () => {
- const { container } = render(
-
-
-
-
-
-
-
-
-
- );
-
- expect(container.textContent).not.toBe('Loading data...');
+ test('Testing buttons and checking empty events, posts and membership requests', async () => {
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+
+
+ );
+ });
+
await wait();
- const image = screen.getByTestId(/orgDashImgPresent/i);
- expect(image).toBeInTheDocument();
+ const viewEventsBtn = screen.getByTestId('viewAllEvents');
+ const viewPostsBtn = screen.getByTestId('viewAllPosts');
+ const viewMSBtn = screen.getByTestId('viewAllMembershipRequests');
+
+ userEvent.click(viewEventsBtn);
+ userEvent.click(viewPostsBtn);
+ fireEvent.click(viewMSBtn);
+ expect(toast.success).toBeCalledWith('Coming soon!');
+
+ expect(
+ screen.getByText('No membership requests present')
+ ).toBeInTheDocument();
+ expect(screen.getByText('No upcoming events')).toBeInTheDocument();
+ expect(screen.getByText('No posts present')).toBeInTheDocument();
});
- test('Should check if organisation image is not present', async () => {
- const { container } = render(
-
-
-
-
-
-
-
-
-
- );
-
- expect(container.textContent).not.toBe('Loading data...');
+
+ test('Testing error scenario', async () => {
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+
+
+ );
+ });
+
await wait();
- const image = screen.getByTestId(/orgDashImgAbsent/i);
- expect(image).toBeInTheDocument();
+ expect(window.location).toBeAt('/orglist');
});
});
diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
index 9d31a5c535..87e538a538 100644
--- a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
+++ b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -1,37 +1,55 @@
-import React, { useState } from 'react';
-import Row from 'react-bootstrap/Row';
+import React, { useEffect, useState } from 'react';
+import { useQuery } from '@apollo/client';
+import { Button, Card } from 'react-bootstrap';
import Col from 'react-bootstrap/Col';
-import { useMutation, useQuery } from '@apollo/client';
-import { useSelector } from 'react-redux';
-import type { RootState } from 'state/reducers';
-import { Container, Modal } from 'react-bootstrap';
+import Row from 'react-bootstrap/Row';
import { useTranslation } from 'react-i18next';
-import Button from 'react-bootstrap/Button';
-import { Link } from 'react-router-dom';
-import styles from './OrganizationDashboard.module.css';
-import AboutImg from 'assets/images/defaultImg.png';
import {
ORGANIZATIONS_LIST,
ORGANIZATION_EVENT_LIST,
ORGANIZATION_POST_LIST,
- USER_ORGANIZATION_LIST,
} from 'GraphQl/Queries/Queries';
-import { DELETE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
-import { errorHandler } from 'utils/errorHandler';
-import Loader from 'components/Loader/Loader';
+import { ReactComponent as AdminsIcon } from 'assets/svgs/admin.svg';
+import { ReactComponent as BlockedUsersIcon } from 'assets/svgs/blockedUser.svg';
+import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg';
+import { ReactComponent as PostsIcon } from 'assets/svgs/post.svg';
+import { ReactComponent as UsersIcon } from 'assets/svgs/users.svg';
+import DashBoardCard from 'components/OrganizationDashCards/DashboardCard';
import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen';
+import styles from './OrganizationDashboard.module.css';
+import CardItem from 'components/OrganizationDashCards/CardItem';
+import type { ApolloError } from '@apollo/client';
+import type {
+ InterfaceQueryOrganizationEventListItem,
+ InterfaceQueryOrganizationPostListItem,
+ InterfaceQueryOrganizationsListObject,
+} from 'utils/interfaces';
+import { toast } from 'react-toastify';
+import { useHistory } from 'react-router-dom';
+import CardItemLoading from 'components/OrganizationDashCards/CardItemLoading';
+import DashboardCardLoading from 'components/OrganizationDashCards/DashboardCardLoading';
function organizationDashboard(): JSX.Element {
const { t } = useTranslation('translation', { keyPrefix: 'dashboard' });
- const [showDeleteModal, setShowDeleteModal] = useState(false);
document.title = t('title');
const currentUrl = window.location.href.split('=')[1];
+ const history = useHistory();
+ const [upcomingEvents, setUpcomingEvents] = useState<
+ InterfaceQueryOrganizationEventListItem[]
+ >([]);
- const appRoutes = useSelector((state: RootState) => state.appRoutes);
- const { targets } = appRoutes;
-
- const { data, loading, error } = useQuery(ORGANIZATIONS_LIST, {
+ const {
+ data,
+ loading: loadingOrgData,
+ error: errorOrg,
+ }: {
+ data?: {
+ organizations: InterfaceQueryOrganizationsListObject[];
+ };
+ loading: boolean;
+ error?: ApolloError;
+ } = useQuery(ORGANIZATIONS_LIST, {
variables: { id: currentUrl },
});
@@ -39,6 +57,14 @@ function organizationDashboard(): JSX.Element {
data: postData,
loading: loadingPost,
error: errorPost,
+ }: {
+ data:
+ | {
+ postsByOrganization: InterfaceQueryOrganizationPostListItem[];
+ }
+ | undefined;
+ loading: boolean;
+ error?: ApolloError;
} = useQuery(ORGANIZATION_POST_LIST, {
variables: { id: currentUrl },
});
@@ -47,274 +73,218 @@ function organizationDashboard(): JSX.Element {
data: eventData,
loading: loadingEvent,
error: errorEvent,
+ }: {
+ data:
+ | {
+ eventsByOrganization: InterfaceQueryOrganizationEventListItem[];
+ }
+ | undefined;
+ loading: boolean;
+ error?: ApolloError;
} = useQuery(ORGANIZATION_EVENT_LIST, {
variables: { id: currentUrl },
});
- const { data: data2 } = useQuery(USER_ORGANIZATION_LIST, {
- variables: { id: localStorage.getItem('id') },
- });
-
- const canDelete = data2?.user.userType === 'SUPERADMIN';
- const toggleDeleteModal = (): void => setShowDeleteModal(!showDeleteModal);
- const [del] = useMutation(DELETE_ORGANIZATION_MUTATION);
-
- const deleteOrg = async (): Promise => {
- try {
- const { data } = await del({
- variables: {
- id: currentUrl,
- },
+ // UseEffect to update upcomingEvents array
+ useEffect(() => {
+ if (eventData && eventData?.eventsByOrganization.length > 0) {
+ const tempUpcomingEvents: InterfaceQueryOrganizationEventListItem[] = [];
+ eventData?.eventsByOrganization.map((event) => {
+ const startDate = new Date(event.startDate);
+ const now = new Date();
+ if (startDate > now) {
+ tempUpcomingEvents.push(event);
+ }
});
-
- /* istanbul ignore next */
- if (data) {
- window.location.replace('/orglist');
- }
- } catch (error: any) {
- /* istanbul ignore next */
- errorHandler(t, error);
+ setUpcomingEvents(tempUpcomingEvents);
}
- };
+ }, [eventData?.eventsByOrganization]);
- if (loading || loadingPost || loadingEvent) {
- return ;
- }
-
- /* istanbul ignore next */
- if (error || errorPost || errorEvent) {
+ if (errorOrg || errorPost || errorEvent) {
window.location.replace('/orglist');
}
-
return (
<>
-
-
-
-
-
{t('about')}
-
- {data?.organizations[0].description}
-
-
- {t('location')} : {data?.organizations[0].location}
-
-
-
- {canDelete && (
+
+
+ {loadingOrgData ? (
+
+ {[...Array(6)].map((_, index) => {
+ return (
+
+
+
+ );
+ })}
+
+ ) : (
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ )}
+
+
+
+
+
Upcoming events
- )}
-
-
-
-
-
-
-
- {t('statistics')}
-
-
-
- {
- const { name } = target;
- return name == 'People';
- })
- .map((target: any) => {
- return target.url;
- })}`}
- >
-
-
-
-
-
-
- {data?.organizations[0].members.length}
-
-
{t('members')}
-
-
-
-
-
-
-
-
- {data?.organizations[0].admins.length}
-
-
{t('admins')}
-
-
-
-
-
-
-
-
- {postData?.postsByOrganization.length}
-
-
{t('posts')}
-
+
+
No upcoming events
-
-
-
- {
- const { name } = target;
- return name == 'Events';
- })
- .map((target: any) => {
- return target.url;
- })}`}
- >
-
-
-
-
-
-
- {eventData?.eventsByOrganization.length}
-
-
{t('events')}
-
-
+
Latest posts
+