+
+
+
+
-
-
-
-
-
- {t('listOfUsers')}
-
- {memberLoading ? (
-
-
-
- ) : (
-
-
-
-
-
- | # |
- {t('name')} |
- {t('email')} |
-
- {t('block_unblock')}
- |
-
-
-
-
- {
- /* istanbul ignore next */
- (rowsPerPage > 0
- ? membersData.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage
- )
- : membersData
- ).map((user, index: number) => {
- return (
-
- | {page * 10 + (index + 1)} |
- {`${user.firstName} ${user.lastName}`} |
- {user.email} |
-
- {user.organizationsBlockedBy.some(
- (spam: any) => spam._id === currentUrl
- ) ? (
-
- ) : (
-
- )}
- |
-
- );
- })
- }
-
-
-
-
- )}
-
+
+
+
+
+
+
+ {showBlockedMembers ? t('blockedUsers') : t('allMembers')}
+
+
+ setShowBlockedMembers(false)}
+ >
+ {t('allMembers')}
+
+ setShowBlockedMembers(true)}
+ >
+ {t('blockedUsers')}
+
+
+
+
+
+
+ {searchByFirstName
+ ? t('searchByFirstName')
+ : t('searchByLastName')}
+
+
+ setSearchByFirstName(true)}
+ >
+ {t('searchByFirstName')}
+
+ setSearchByFirstName(false)}
+ >
+ {t('searchByLastName')}
+
+
+
-
-
+
+
+ {/* Table */}
+ {loadingMembers == false &&
+ membersData.length === 0 &&
+ searchByName.length > 0 ? (
+
+
+ {t('noResultsFoundFor')} "{searchByName}"
+
+
+ ) : loadingMembers == false && membersData.length === 0 ? (
+
+
{t('noSpammerFound')}
+
+ ) : (
+
+ {loadingMembers ? (
+
+ ) : (
+
+
+
+ {headerTitles.map((title: string, index: number) => {
+ return (
+ |
+ {title}
+ |
+ );
+ })}
+
+
+
+ {membersData.map((user, index: number) => {
+ return (
+
+ | {index + 1} |
+ {`${user.firstName} ${user.lastName}`} |
+ {user.email} |
+
+ {user.organizationsBlockedBy.some(
+ (spam: any) => spam._id === currentUrl
+ ) ? (
+
+ ) : (
+
+ )}
+ |
+
+ );
+ })}
+
+
+ )}
+
+ )}
);
diff --git a/src/screens/ForgotPassword/ForgotPassword.module.css b/src/screens/ForgotPassword/ForgotPassword.module.css
index bd59589a61..e69de29bb2 100644
--- a/src/screens/ForgotPassword/ForgotPassword.module.css
+++ b/src/screens/ForgotPassword/ForgotPassword.module.css
@@ -1,17 +0,0 @@
-.forgotPassword .border {
- border-color: #31bb6b !important;
-}
-.forgotPassword .heading h1 {
- color: #31bb6b;
-}
-
-.talawaBackgroundColor {
- background-color: #31bb6b;
-}
-
-@media only screen and (max-width: 600px) {
- .forgotPassword .border {
- position: relative;
- bottom: 50px;
- }
-}
diff --git a/src/screens/ForgotPassword/ForgotPassword.tsx b/src/screens/ForgotPassword/ForgotPassword.tsx
index eb75422385..eb96f70f26 100644
--- a/src/screens/ForgotPassword/ForgotPassword.tsx
+++ b/src/screens/ForgotPassword/ForgotPassword.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
import { errorHandler } from 'utils/errorHandler';
import Button from 'react-bootstrap/Button';
import { Form } from 'react-bootstrap';
+import Loader from 'components/Loader/Loader';
const ForgotPassword = (): JSX.Element => {
const { t } = useTranslation('translation', {
@@ -113,7 +114,7 @@ const ForgotPassword = (): JSX.Element => {
};
if (componentLoader || otpLoading || forgotPasswordLoading) {
- return
;
+ return
;
}
return (
diff --git a/src/screens/OrgSettings/OrgSettings.module.css b/src/screens/OrgSettings/OrgSettings.module.css
index 88e7ab719c..2b15a2ac0c 100644
--- a/src/screens/OrgSettings/OrgSettings.module.css
+++ b/src/screens/OrgSettings/OrgSettings.module.css
@@ -1,184 +1,25 @@
-.navbarbg {
- height: 60px;
- background-color: white;
- display: flex;
- margin-bottom: 30px;
- z-index: 1;
- position: relative;
- flex-direction: row;
- justify-content: space-between;
- box-shadow: 0px 0px 8px 2px #c8c8c8;
-}
-.titlemodal .logo {
- color: #707070;
- margin-left: 0;
- display: flex;
- align-items: center;
- text-decoration: none;
-}
-
-.logo img {
- margin-top: 0px;
- margin-left: 10px;
- height: 64px;
- width: 70px;
-}
-
-.logo > strong {
- line-height: 1.5rem;
- margin-left: -5px;
- font-family: sans-serif;
- font-size: 19px;
- color: #707070;
-}
-
-.mainpage {
- display: flex;
- flex-direction: row;
-}
-.sidebar {
- z-index: 0;
- padding-top: 5px;
- margin: 0;
- height: 100%;
-}
-.sidebar:after {
- content: '';
- background-color: #f7f7f7;
- position: absolute;
- width: 2px;
- height: 100%;
- top: 10px;
- left: 94%;
- display: block;
-}
-.sidebarsticky {
- padding-left: 45px;
- margin-top: 7px;
-}
-.sidebarsticky > p {
- margin-top: -10px;
+.settingsBody {
+ margin: 2.5rem 0;
}
-.navitem {
- padding-left: 27%;
- padding-top: 12px;
- padding-bottom: 12px;
- cursor: pointer;
-}
-
-.headerDiv {
+.cardHeader {
+ padding: 1.25rem 1rem 1rem 1rem;
+ border-bottom: 1px solid var(--bs-gray-200);
display: flex;
- flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
}
-.logintitle {
- color: #707070;
- font-weight: 600;
- font-size: 20px;
- /* margin-bottom: 30px; */
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- /* width: 15%; */
- margin-left: 20px;
-}
-.loginSubtitle {
- color: #707070;
- font-weight: 600;
- font-size: 19px;
- /* margin-bottom: 30px; */
- padding-bottom: 5px;
- /* border-bottom: 3px solid #31bb6b; */
- /* width: 15%; */
- margin-left: 20px;
-}
-.searchtitle {
- color: #707070;
+.cardHeader .cardTitle {
+ font-size: 1.2rem;
font-weight: 600;
- font-size: 18px;
- margin-bottom: 20px;
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- width: 60%;
-}
-.logintitleadmin {
- color: #707070;
- font-weight: 600;
- font-size: 18px;
- margin-top: 50px;
- margin-bottom: 40px;
- padding-bottom: 5px;
- border-bottom: 3px solid #31bb6b;
- width: 30%;
-}
-.greenregbtn {
- margin: 1rem 0 0;
- margin-top: 15px;
- border: 1px solid #e8e5e5;
- box-shadow: 0 2px 2px #e8e5e5;
- padding: 6px 8px;
- border-radius: 5px;
- background-color: #31bb6b;
- width: 70%;
- font-size: 14px;
- color: white;
- outline: none;
- font-weight: 600;
- cursor: pointer;
- transition: transform 0.2s, box-shadow 0.2s;
-}
-.sidebarsticky > input {
- text-decoration: none;
- margin-bottom: 50px;
- border-color: #e8e5e5;
- width: 80%;
- border-radius: 7px;
- padding-top: 5px;
- padding-bottom: 5px;
- padding-right: 10px;
- padding-left: 10px;
- box-shadow: none;
}
-.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;
+.cardBody {
+ min-height: 180px;
}
-@-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);
- }
+
+.cardBody .textBox {
+ margin: 0 0 3rem 0;
+ color: var(--bs-secondary);
}
diff --git a/src/screens/OrgSettings/OrgSettings.test.tsx b/src/screens/OrgSettings/OrgSettings.test.tsx
index 2fe1b816ef..e722dc4a8d 100644
--- a/src/screens/OrgSettings/OrgSettings.test.tsx
+++ b/src/screens/OrgSettings/OrgSettings.test.tsx
@@ -1,37 +1,76 @@
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
-import { act, render, screen } from '@testing-library/react';
-import { MEMBERSHIP_REQUEST } from 'GraphQl/Queries/Queries';
+import { 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 userEvent from '@testing-library/user-event';
-import { I18nextProvider } from 'react-i18next';
-import 'jest-location-mock';
+import { DELETE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
import { store } from 'state/store';
-import OrgSettings from './OrgSettings';
-import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
+import i18nForTest from 'utils/i18nForTest';
+import OrgSettings from './OrgSettings';
+import { ORGANIZATIONS_LIST } from 'GraphQl/Queries/Queries';
const MOCKS = [
{
request: {
- query: MEMBERSHIP_REQUEST,
+ query: ORGANIZATIONS_LIST,
},
result: {
data: {
organizations: [
{
- _id: 1,
- membershipRequests: {
- _id: 1,
- user: {
- _id: 1,
+ _id: '123',
+ image: null,
+ name: 'Palisadoes',
+ description: 'Equitable Access to STEM Education Jobs',
+ location: 'Jamaica',
+ isPublic: true,
+ visibleInSearch: false,
+ creator: {
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'johndoe@example.com',
+ },
+ members: {
+ _id: '123',
+ firstName: 'John',
+ lastName: 'Doe',
+ email: 'johndoe@gmail.com',
+ },
+ admins: [
+ {
+ _id: '123',
firstName: 'John',
lastName: 'Doe',
email: 'johndoe@gmail.com',
},
+ ],
+ membershipRequests: {
+ _id: '456',
+ user: {
+ firstName: 'Sam',
+ lastName: 'Smith',
+ email: 'samsmith@gmail.com',
+ },
},
+ blockedUsers: [],
+ },
+ ],
+ },
+ },
+ },
+ {
+ request: {
+ query: DELETE_ORGANIZATION_MUTATION,
+ },
+ result: {
+ data: {
+ removeOrganization: [
+ {
+ _id: 123,
},
],
},
@@ -41,36 +80,24 @@ const MOCKS = [
const link = new StaticMockLink(MOCKS, true);
-async function wait(ms = 100): Promise
{
- await act(() => {
- return new Promise((resolve) => {
- setTimeout(resolve, ms);
- });
- });
-}
+afterEach(() => {
+ localStorage.clear();
+});
describe('Organisation Settings Page', () => {
test('correct mock data should be queried', async () => {
- const dataQuery1 = MOCKS[0]?.result?.data?.organizations[0];
-
- expect(dataQuery1).toEqual({
- _id: 1,
- membershipRequests: {
- _id: 1,
- user: {
- _id: 1,
- email: 'johndoe@gmail.com',
- firstName: 'John',
- lastName: 'Doe',
- },
+ const dataQuery1 = MOCKS[1]?.result?.data?.removeOrganization;
+ expect(dataQuery1).toEqual([
+ {
+ _id: 123,
},
- });
+ ]);
});
test('should render props and text elements test for the screen', async () => {
- window.location.assign('/orglist');
-
- const { container } = render(
+ window.location.assign('/orgsetting/id=123');
+ localStorage.setItem('UserType', 'SUPERADMIN');
+ render(
@@ -81,131 +108,14 @@ describe('Organisation Settings Page', () => {
);
-
- await wait();
- expect(container.textContent).not.toBe('Loading data...');
-
- expect(container.textContent).toMatch('Settings');
- expect(container.textContent).toMatch('Update Your Details');
- expect(container.textContent).toMatch('Update Organization');
- expect(container.textContent).toMatch('Delete Organization');
- expect(container.textContent).toMatch('See Request');
-
- expect(window.location).toBeAt('/orglist');
- });
-
- test('should render User update form in clicking user update button', async () => {
- window.location.assign('/orglist');
-
- const { container } = render(
-
-
-
-
-
-
-
-
-
- );
-
- await wait();
- expect(container.textContent).not.toBe('Loading data...');
- await wait();
-
- userEvent.click(screen.getByTestId('userUpdateBtn'));
-
- await wait();
- const firstNameInput = screen.getByText(/first name/i);
- const lastNameInput = screen.getByText(/last name/i);
- const emailInput = screen.getByText(/email/i);
- const imageInput = screen.getByText(/display image:/i);
- const saveBtn = screen.getByRole('button', { name: /save changes/i });
- const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-
- await wait();
-
- expect(firstNameInput).toBeInTheDocument();
- expect(lastNameInput).toBeInTheDocument();
- expect(emailInput).toBeInTheDocument();
- expect(imageInput).toBeInTheDocument();
- expect(saveBtn).toBeInTheDocument();
- expect(cancelBtn).toBeInTheDocument();
- });
-
- test('should render password update form in clicking update your password button', async () => {
- window.location.assign('/orglist');
-
- const { container } = render(
-
-
-
-
-
-
-
-
-
- );
-
- expect(container.textContent).not.toBe('Loading data...');
- await wait();
-
- userEvent.click(screen.getByTestId('userPasswordUpdateBtn'));
-
- await wait();
- const previousPasswordInput = screen.getByText(/previous password/i);
- const confirmPasswordInput = screen.getByText(/confirm new password/i);
- const saveBtn = screen.getByRole('button', { name: /save changes/i });
- const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-
- await wait();
-
- expect(previousPasswordInput).toBeInTheDocument();
- expect(confirmPasswordInput).toBeInTheDocument();
- expect(saveBtn).toBeInTheDocument();
- expect(cancelBtn).toBeInTheDocument();
- });
-
- test('should render update orgnization form in clicking update orgnization button', async () => {
- window.location.assign('/orglist');
-
- const { container } = render(
-
-
-
-
-
-
-
-
-
- );
-
- expect(container.textContent).not.toBe('Loading data...');
- await wait();
-
- userEvent.click(screen.getByTestId('orgUpdateBtn'));
-
- await wait();
- const nameInput = screen.getByText(/name/i);
- const descriptionInput = screen.getByText(/description/i);
- const locationInput = screen.getByText(/location/i);
- const displayImageInput = screen.getByText(/display image:/i);
- const isPublicInput = screen.getByText(/is public:/i);
- const isRegistrableInput = screen.getByText(/is registrable:/i);
- const saveBtn = screen.getByRole('button', { name: /save changes/i });
- const cancelBtn = screen.getByRole('button', { name: /cancel/i });
-
- await wait();
-
- expect(nameInput).toBeInTheDocument();
- expect(descriptionInput).toBeInTheDocument();
- expect(locationInput).toBeInTheDocument();
- expect(displayImageInput).toBeInTheDocument();
- expect(isPublicInput).toBeInTheDocument();
- expect(isRegistrableInput).toBeInTheDocument();
- expect(saveBtn).toBeInTheDocument();
- expect(cancelBtn).toBeInTheDocument();
+ expect(screen.getAllByText(/Delete Organization/i)).toHaveLength(3);
+ expect(
+ screen.getByText(
+ /By clicking on Delete organization button you will the organization will be permanently deleted along with its events, tags and all related data/i
+ )
+ ).toBeInTheDocument();
+ expect(screen.getByText(/Other Settings/i)).toBeInTheDocument();
+ expect(screen.getByText(/Change Language/i)).toBeInTheDocument();
+ expect(window.location).toBeAt('/orgsetting/id=123');
});
});
diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx
index ef707bf91f..d0df92b2c6 100644
--- a/src/screens/OrgSettings/OrgSettings.tsx
+++ b/src/screens/OrgSettings/OrgSettings.tsx
@@ -1,15 +1,9 @@
-import { useQuery } from '@apollo/client';
-import { MEMBERSHIP_REQUEST } from 'GraphQl/Queries/Queries';
-import defaultImg from 'assets/images/blank.png';
-import Loader from 'components/Loader/Loader';
-import MemberRequestCard from 'components/MemberRequestCard/MemberRequestCard';
-import OrgDelete from 'components/OrgDelete/OrgDelete';
+import React from 'react';
+import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';
+import DeleteOrg from 'components/DeleteOrg/DeleteOrg';
import OrgUpdate from 'components/OrgUpdate/OrgUpdate';
import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen';
-import UserPasswordUpdate from 'components/UserPasswordUpdate/UserPasswordUpdate';
-import UserUpdate from 'components/UserUpdate/UserUpdate';
-import React from 'react';
-import Button from 'react-bootstrap/Button';
+import { Card, Form } from 'react-bootstrap';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import { useTranslation } from 'react-i18next';
@@ -21,171 +15,39 @@ function orgSettings(): JSX.Element {
});
document.title = t('title');
- const [screenVariable, setScreenVariable] = React.useState(0);
- const [screenDisplayVariable, setDisplayScreenVariable] = React.useState('');
-
- const handleClick = (number: any): void => {
- if (number === 1) {
- setDisplayScreenVariable('updateYourDetails');
- setScreenVariable(1);
- } else if (number === 2) {
- setDisplayScreenVariable('updateOrganization');
- setScreenVariable(2);
- } else if (number === 3) {
- setDisplayScreenVariable('deleteOrganization');
- setScreenVariable(3);
- } else if (number === 4) {
- setDisplayScreenVariable('seeRequest');
- setScreenVariable(4);
- } else {
- setDisplayScreenVariable('updateYourPassword');
- setScreenVariable(5);
- }
- };
-
const currentUrl = window.location.href.split('=')[1];
- const { data, loading, error } = useQuery(MEMBERSHIP_REQUEST, {
- variables: { id: currentUrl },
- });
-
- if (loading) {
- return ;
- }
-
- /* istanbul ignore next */
- if (error) {
- window.location.replace('/orglist');
- }
-
return (
<>
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ {t('updateOrganization')}
+
+ {currentUrl && }
+
+
-
-
-
-
-
{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
+