-
-
- );
-}
-export {};
-export default landingPage;
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index b5244b2df7..57eacce0a7 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -139,7 +139,7 @@ const leftDrawer = ({
}}
>
- 
-
- -
{t('fromPalisadoes')}
- -
- {userImage && userImage ? (
+ {userImage && userImage !== 'null' ? (
) : (
![]()
- {userImage && userImage ? (
+ {userImage && userImage !== 'null' ? (
) : (
![]()
h3 {
font-size: 17px;
}
+.card {
+ width: 100%;
+ height: 20rem;
+ margin-bottom: 2rem;
+}
.postimage {
- border-radius: 6px;
+ border-radius: 0px;
+ width: 100%;
+ height: 12rem;
+ max-width: 100%;
+ max-height: 12rem;
+ object-fit: cover;
+ position: relative;
+ color: black;
+}
+.preview {
+ display: flex;
+ position: relative;
+ width: 100%;
+ margin-top: 10px;
+ justify-content: center;
+}
+.preview img {
+ width: 400px;
+ height: auto;
+}
+.preview video {
+ width: 400px;
+ height: auto;
+}
+.nopostimage {
+ border-radius: 0px;
+ width: 100%;
+ height: 12rem;
+ max-height: 12rem;
+ object-fit: cover;
+ position: relative;
+}
+.cards:hover {
+ filter: brightness(0.8);
+}
+.cards:hover::before {
+ opacity: 0.5;
+}
+.knowMoreText {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+ color: white;
+ padding: 10px;
+ font-weight: bold;
+ font-size: 1.5rem;
+ transition: opacity 0.3s ease-in-out;
+}
+
+.cards:hover .knowMoreText {
+ opacity: 1;
+}
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
width: 100%;
- max-width: 240px;
- height: 150px;
- max-height: 250px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(
+ 0,
+ 0,
+ 0,
+ 0.9
+ ); /* Dark grey modal background with transparency */
+ z-index: 9999;
+}
+
+.modalContent {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ padding: 20px;
+ max-width: 800px;
+ max-height: 600px;
+ overflow: auto;
+}
+
+.modalImage {
+ flex: 1;
+ margin-right: 20px;
+ width: 25rem;
+ height: 15rem;
+}
+.nomodalImage {
+ flex: 1;
+ margin-right: 20px;
+ width: 100%;
+ height: 15rem;
+}
+
+.modalImage img,
+.modalImage video {
+ border-radius: 0px;
+ width: 100%;
+ height: 25rem;
+ max-width: 25rem;
+ max-height: 15rem;
+ object-fit: cover;
+ position: relative;
+}
+.modalInfo {
+ flex: 1;
+}
+.title {
+ font-size: 16px;
+ color: #000;
+ font-weight: 600;
+}
+.text {
+ font-size: 13px;
+ color: #000;
+ font-weight: 300;
+}
+.author {
+ color: #737373;
+ font-weight: 100;
+ font-size: 13px;
+}
+.closeButton {
+ position: relative;
+ bottom: 5rem;
+ right: 10px;
+ padding: 4px;
+ background-color: red; /* Red close button color */
+ color: #fff;
+ border: none;
+ cursor: pointer;
+}
+.closeButtonP {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ background: transparent;
+ transform: scale(1.2);
+ cursor: pointer;
+ border: none;
+ color: #707070;
+ font-weight: 600;
+ font-size: 16px;
+ cursor: pointer;
+}
+.cards:hover::after {
+ opacity: 1;
+ mix-blend-mode: normal;
}
.cards > p {
font-size: 14px;
@@ -25,6 +175,9 @@
}
.infodiv {
margin-bottom: 7px;
+ width: 15rem;
+ text-align: justify;
+ word-wrap: break-word;
}
.infodiv > p {
margin: 0;
@@ -40,8 +193,7 @@
transform: scale(0.75);
cursor: pointer;
}
-
-.cards {
+/* .cards {
width: 75%;
background: #fcfcfc;
margin: 10px 40px;
@@ -52,16 +204,14 @@
margin-right: 30px;
color: #737373;
box-sizing: border-box;
-}
+} */
.cards:last-child:nth-last-child(odd) {
grid-column: auto / span 2;
}
-
.cards:first-child:nth-last-child(even),
.cards:first-child:nth-last-child(even) ~ .box {
grid-column: auto / span 1;
}
-
.toggleClickBtn {
color: #31bb6b;
cursor: pointer;
@@ -69,7 +219,60 @@
font-size: 12px;
background-color: white;
}
-
.toggleClickBtnNone {
display: none;
}
+/* Menu Modal Styles */
+.menuModal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(0, 0, 0, 0.7); /* Dark grey modal background */
+ z-index: 9999;
+}
+
+.menuContent {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ padding-top: 20px;
+ max-width: 700px;
+ max-height: 500px;
+ overflow: hidden;
+ position: relative;
+}
+
+.menuOptions {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+.menuOptions li {
+ padding: 10px;
+ border-bottom: 1px solid #ccc;
+ padding-left: 100px;
+ padding-right: 100px;
+ cursor: pointer;
+}
+
+.moreOptionsButton {
+ position: relative;
+ bottom: 5rem;
+ right: 10px;
+ padding: 2px;
+ background-color: transparent;
+ color: #000;
+ border: none;
+ cursor: pointer;
+}
+.list {
+ color: red;
+ cursor: pointer;
+}
diff --git a/src/components/OrgPostCard/OrgPostCard.test.tsx b/src/components/OrgPostCard/OrgPostCard.test.tsx
index dc8a7e5fd4..e2a209c00f 100644
--- a/src/components/OrgPostCard/OrgPostCard.test.tsx
+++ b/src/components/OrgPostCard/OrgPostCard.test.tsx
@@ -1,19 +1,25 @@
import React from 'react';
-import { act, render, screen, fireEvent } from '@testing-library/react';
+import {
+ act,
+ render,
+ screen,
+ fireEvent,
+ waitFor,
+} from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
-import userEvent from '@testing-library/user-event';
-import { I18nextProvider } from 'react-i18next';
-
import OrgPostCard from './OrgPostCard';
+import { I18nextProvider } from 'react-i18next';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
import {
DELETE_POST_MUTATION,
UPDATE_POST_MUTATION,
+ TOGGLE_PINNED_POST,
} from 'GraphQl/Mutations/mutations';
import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
-
-import mockedStyles from './OrgPostCard.module.css';
-
+import convertToBase64 from 'utils/convertToBase64';
+import { BrowserRouter } from 'react-router-dom';
const MOCKS = [
{
request: {
@@ -23,7 +29,7 @@ const MOCKS = [
result: {
data: {
removePost: {
- _id: '1',
+ _id: '123',
},
},
},
@@ -45,7 +51,29 @@ const MOCKS = [
},
},
},
+ {
+ request: {
+ query: TOGGLE_PINNED_POST,
+ variables: {
+ id: '32',
+ },
+ },
+ result: {
+ data: {
+ togglePostPin: {
+ _id: '32',
+ },
+ },
+ },
+ },
];
+jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ warn: jest.fn(),
+ error: jest.fn(),
+ },
+}));
const link = new StaticMockLink(MOCKS, true);
async function wait(ms = 100): Promise {
await act(() => {
@@ -54,7 +82,6 @@ async function wait(ms = 100): Promise {
});
});
}
-
describe('Testing Organization Post Card', () => {
const props = {
key: '123',
@@ -62,37 +89,73 @@ describe('Testing Organization Post Card', () => {
postTitle: 'Event Info',
postInfo: 'Time change',
postAuthor: 'John Doe',
- postPhoto: 'photoLink',
- postVideo: 'videoLink',
+ postPhoto: 'test.png',
+ postVideo: 'test.mp4',
+ pinned: false,
};
-
+ jest.mock('react-toastify', () => ({
+ toast: {
+ success: jest.fn(),
+ warn: jest.fn(),
+ error: jest.fn(),
+ },
+ }));
+ jest.mock('react', () => ({
+ ...jest.requireActual('react'),
+ useRef: jest.fn(),
+ }));
global.alert = jest.fn();
- test('should render props and text elements test for the page component', async () => {
- global.confirm = (): boolean => true;
+ test('renders with default props', () => {
+ const { getByAltText, getByTestId } = render(
+
+
+
+
+ );
+ expect(getByTestId('card-text')).toBeInTheDocument();
+ expect(getByTestId('card-title')).toBeInTheDocument();
+ expect(getByAltText('image')).toBeInTheDocument();
+ });
- render(
+ test('toggles "Read more" button', () => {
+ const { getByTestId } = render(
);
+ userEvent.click(screen.getByAltText('image'));
+ const toggleButton = getByTestId('toggleBtn');
+ fireEvent.click(toggleButton);
+ expect(toggleButton).toHaveTextContent('hide');
+ fireEvent.click(toggleButton);
+ expect(toggleButton).toHaveTextContent('Read more');
+ });
+ test('opens and closes edit modal', async () => {
+ localStorage.setItem('id', '123');
+ render(
+
+
+
+
+ );
await wait();
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
- expect(screen.getByText(/Author:/i)).toBeInTheDocument();
- expect(screen.getByText(/Video URL:/i)).toBeInTheDocument();
- expect(screen.getByText(props.postTitle)).toBeInTheDocument();
- expect(screen.getByText(props.postInfo)).toBeInTheDocument();
- expect(screen.getByText(props.postAuthor)).toBeInTheDocument();
- expect(screen.getByAltText(/image not found/i)).toBeInTheDocument();
- expect(screen.getByText(props.postVideo)).toBeInTheDocument();
+ const createOrgBtn = screen.getByTestId('modalOrganizationHeader');
+ expect(createOrgBtn).toBeInTheDocument();
+ userEvent.click(createOrgBtn);
+ userEvent.click(screen.getByTestId('closeOrganizationModal'));
});
-
test('Should render text elements when props value is not passed', async () => {
global.confirm = (): boolean => false;
-
render(
@@ -100,19 +163,11 @@ describe('Testing Organization Post Card', () => {
);
-
await wait();
-
- expect(screen.getByText(/Author:/i)).toBeInTheDocument();
- expect(screen.getByText(/Video URL:/i)).toBeInTheDocument();
- expect(screen.getByText(props.postTitle)).toBeInTheDocument();
- expect(screen.getByText(props.postInfo)).toBeInTheDocument();
- expect(screen.getByText(props.postAuthor)).toBeInTheDocument();
- expect(screen.getByAltText(/image not found/i)).toBeInTheDocument();
- expect(screen.getByText(props.postVideo)).toBeInTheDocument();
+ userEvent.click(screen.getByAltText('image'));
+ expect(screen.getByAltText('Post Image')).toBeInTheDocument();
});
-
- test('Testing post update functionality', async () => {
+ test('Testing post updating after post is updated', async () => {
render(
@@ -123,14 +178,15 @@ describe('Testing Organization Post Card', () => {
await wait();
- userEvent.click(screen.getByTestId('editPostModalBtn'));
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
userEvent.type(screen.getByTestId('updateTitle'), 'updated title');
userEvent.type(screen.getByTestId('updateText'), 'This is a updated text');
userEvent.click(screen.getByTestId('updatePostBtn'));
});
-
- test('Testing delete post funcationality', async () => {
+ test('Testing pin post functionality', async () => {
render(
@@ -141,11 +197,31 @@ describe('Testing Organization Post Card', () => {
await wait();
- userEvent.click(screen.getByTestId('deletePostModalBtn'));
- userEvent.click(screen.getByTestId(/deletePostBtn/i));
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+
+ userEvent.click(screen.getByTestId('pinpostBtn'));
});
+ test('Testing post delete functionality', async () => {
+ render(
+
+
+
+
+
+
+ );
- test('should toggle post visibility when button is clicked', () => {
+ await wait();
+
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+
+ userEvent.click(screen.getByTestId('deletePostModalBtn'));
+ fireEvent.click(screen.getByTestId('deletePostBtn'));
+ });
+ test('Testing close functionality of primary modal', async () => {
render(
@@ -154,30 +230,37 @@ describe('Testing Organization Post Card', () => {
);
- const toggleButton = screen.getByTestId('toggleBtn');
-
- expect(screen.getByText('Read more')).toBeInTheDocument();
-
- fireEvent.click(toggleButton);
+ await wait();
- expect(screen.getByText('hide')).toBeInTheDocument();
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('closeiconbtn'));
+ });
+ test('Testing close functionality of secondary modal', async () => {
+ render(
+
+
+
+
+ );
- fireEvent.click(toggleButton);
+ await wait();
- expect(screen.getByText('Read more')).toBeInTheDocument();
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+ userEvent.click(screen.getByTestId('closebtn'));
});
-
- test('should toggle post content', () => {
+ test('renders without "Read more" button when postInfo length is less than or equal to 43', () => {
const props = {
key: '123',
id: '12',
postTitle: 'Event Info',
- postInfo: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ postInfo: 'Lorem ipsum dolor sit amet',
postAuthor: 'John Doe',
postPhoto: 'photoLink',
postVideo: 'videoLink',
+ pinned: false,
};
-
render(
@@ -185,34 +268,100 @@ describe('Testing Organization Post Card', () => {
);
+ });
+ test('updates state variables correctly when handleEditModal is called', () => {
+ const link2 = new StaticMockLink(MOCKS, true);
+ render(
+
+
+ );
+ userEvent.click(screen.getByAltText('image'));
+
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+
+ expect(screen.queryByTestId('editPostModalBtn')).toBeInTheDocument();
+
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
+
+ // expect(screen.queryByTestId('editPostModalBtn')).toBeInTheDocument();
+ // expect(screen.queryByTestId('deletePostModalBtn')).not.toBeInTheDocument();
+ // expect(screen.queryByTestId('closeiconbtn')).not.toBeInTheDocument();
- const toggleBtn = screen.getByRole('toggleBtn');
+ // expect(screen.getByTestId('editPostModal')).toHaveClass('show');
+ // expect(screen.getByTestId('deletePostModal')).not.toHaveClass('show');
- expect(
- screen.getByText('Lorem ipsum dolor sit amet, consectetur ...')
- ).toBeInTheDocument();
- expect(toggleBtn).toHaveTextContent('Read more');
- expect(toggleBtn).toHaveClass(mockedStyles.toggleClickBtn);
+ // expect(screen.getByTestId('modalVisible')).toBe('false');
+ // expect(screen.getByTestId('menuVisible')).toBe('false');
+ // expect(screen.getByTestId('showEditModal')).toBe('true');
+ // expect(screen.getByTestId('showDeleteModal')).toBe('false');
+ });
+ test('clears postvideo state and resets file input value', async () => {
+ const { getByTestId } = render(
+
+
+
+
+ );
- fireEvent.click(toggleBtn);
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
- expect(screen.getByTestId('toggleContent').innerHTML).toEqual(
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
+ userEvent.click(screen.getByTestId('closePreview'));
+
+ fireEvent.change(getByTestId('postVideoUrl'), {
+ target: { value: '' },
+ });
+ userEvent.click(screen.getByPlaceholderText(/video/i));
+ const input = getByTestId('postVideoUrl');
+ const file = new File(['test-video'], 'test.mp4', { type: 'video/mp4' });
+ Object.defineProperty(input, 'files', {
+ value: [file],
+ });
+ fireEvent.change(input);
+ await waitFor(() => {
+ convertToBase64(file);
+ });
+ });
+ test('clears postimage state and resets file input value', async () => {
+ const { getByTestId } = render(
+
+
+
+
);
- expect(toggleBtn).toHaveTextContent('hide');
- expect(toggleBtn).toHaveClass(mockedStyles.toggleClickBtn);
+
+ userEvent.click(screen.getByAltText('image'));
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
+ userEvent.click(screen.getByTestId('closePreview'));
+
+ fireEvent.change(getByTestId('postImageUrl'), {
+ target: { value: '' },
+ });
+ userEvent.click(screen.getByPlaceholderText(/image/i));
+ const input = getByTestId('postImageUrl');
+ const file = new File(['test-image'], 'test.jpg', { type: 'image/jpeg' });
+ Object.defineProperty(input, 'files', {
+ value: [file],
+ });
+ fireEvent.change(input);
+
+ // Simulate the asynchronous base64 conversion function
+ await waitFor(() => {
+ convertToBase64(file); // Replace with the expected base64-encoded image
+ });
+ document.getElementById = jest.fn(() => input);
+ const clearImageButton = getByTestId('closeimage');
+ fireEvent.click(clearImageButton);
});
+ test('Testing create organization modal', async () => {
+ localStorage.setItem('id', '123');
- test('renders without "Read more" button when postInfo length is less than or equal to 43', () => {
- const props = {
- key: '123',
- id: '12',
- postTitle: 'Event Info',
- postInfo: 'Lorem ipsum dolor sit amet',
- postAuthor: 'John Doe',
- postPhoto: 'photoLink',
- postVideo: 'videoLink',
- };
render(
@@ -220,5 +369,35 @@ describe('Testing Organization Post Card', () => {
);
+
+ await wait();
+ userEvent.click(screen.getByAltText('image'));
+
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+
+ userEvent.click(screen.getByTestId('editPostModalBtn'));
+ const createOrgBtn = screen.getByTestId('modalOrganizationHeader');
+ expect(createOrgBtn).toBeInTheDocument();
+ userEvent.click(createOrgBtn);
+ userEvent.click(screen.getByTestId('closeOrganizationModal'));
+ });
+ test('should toggle post pin when pin button is clicked', async () => {
+ const { getByTestId } = render(
+
+
+
+
+ );
+ userEvent.click(screen.getByAltText('image'));
+
+ userEvent.click(screen.getByTestId('moreiconbtn'));
+ const pinButton = getByTestId('pinpostBtn');
+ fireEvent.click(pinButton);
+ await waitFor(() => {
+ expect(MOCKS[2].request.variables).toEqual({
+ id: '32',
+ });
+ });
});
});
diff --git a/src/components/OrgPostCard/OrgPostCard.tsx b/src/components/OrgPostCard/OrgPostCard.tsx
index 3eb2d675f2..5845ef90ba 100644
--- a/src/components/OrgPostCard/OrgPostCard.tsx
+++ b/src/components/OrgPostCard/OrgPostCard.tsx
@@ -1,19 +1,24 @@
import type { ChangeEvent } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
import { useMutation } from '@apollo/client';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
+import Card from 'react-bootstrap/Card';
import { toast } from 'react-toastify';
-
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import CloseIcon from '@mui/icons-material/Close';
+import PushPinIcon from '@mui/icons-material/PushPin';
+import AboutImg from 'assets/images/defaultImg.png';
import {
DELETE_POST_MUTATION,
UPDATE_POST_MUTATION,
+ TOGGLE_PINNED_POST,
} from 'GraphQl/Mutations/mutations';
-import defaultImg from 'assets/images/blank.png';
import { useTranslation } from 'react-i18next';
import { errorHandler } from 'utils/errorHandler';
import styles from './OrgPostCard.module.css';
import { Form } from 'react-bootstrap';
+import convertToBase64 from 'utils/convertToBase64';
interface InterfaceOrgPostCardProps {
key: string;
@@ -23,22 +28,103 @@ interface InterfaceOrgPostCardProps {
postAuthor: string;
postPhoto: string;
postVideo: string;
+ pinned: boolean;
}
-function orgPostCard(props: InterfaceOrgPostCardProps): JSX.Element {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function OrgPostCard(
+ props: InterfaceOrgPostCardProps
+): JSX.Element {
const [postformState, setPostFormState] = useState({
posttitle: '',
postinfo: '',
+ postphoto: '',
+ postvideo: '',
+ pinned: false,
});
const [togglePost, setPostToggle] = useState('Read more');
const [showEditModal, setShowEditModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
+ const [modalVisible, setModalVisible] = useState(false);
+ const [menuVisible, setMenuVisible] = useState(false);
+ const [playing, setPlaying] = useState(false);
+ const videoRef = useRef(null);
+ const [toggle] = useMutation(TOGGLE_PINNED_POST);
+ const togglePostPin = async (id: string, pinned: boolean): Promise => {
+ try {
+ const { data } = await toggle({
+ variables: {
+ id,
+ },
+ });
+ if (data) {
+ setModalVisible(false);
+ setMenuVisible(false);
+ toast.success(`${pinned ? 'Post unpinned' : 'Post pinned'}`);
+ setTimeout(() => {
+ window.location.reload();
+ }, 2000);
+ }
+ } catch (error: any) {
+ console.log(error);
+ /* istanbul ignore next */
+ errorHandler(t, error);
+ }
+ };
+ const toggleShowEditModal = (): void => {
+ setPostFormState({
+ posttitle: props.postTitle,
+ postinfo: props.postInfo,
+ postphoto: props.postPhoto,
+ postvideo: props.postVideo,
+ pinned: props.pinned,
+ });
+ setShowEditModal((prev) => !prev);
+ };
+ const toggleShowDeleteModal = (): void => setShowDeleteModal((prev) => !prev);
+
+ const handleVideoPlay = (): void => {
+ setPlaying(true);
+ videoRef.current?.play();
+ };
+
+ const handleVideoPause = (): void => {
+ setPlaying(false);
+ videoRef.current?.pause();
+ };
+ const handleCardClick = (): void => {
+ setModalVisible(true);
+ };
- const toggleShowEditModal = (): void => setShowEditModal(!showEditModal);
- const toggleShowDeleteModal = (): void =>
- setShowDeleteModal(!showDeleteModal);
+ const handleMoreOptionsClick = (): void => {
+ setMenuVisible(true);
+ };
+ const clearImageInput = (): void => {
+ setPostFormState({
+ ...postformState,
+ postphoto: '',
+ });
+ const fileInput = document.getElementById(
+ 'postImageUrl'
+ ) as HTMLInputElement;
+ if (fileInput) {
+ fileInput.value = '';
+ }
+ };
+ const clearVideoInput = (): void => {
+ setPostFormState({
+ ...postformState,
+ postvideo: '',
+ });
+ const fileInput = document.getElementById(
+ 'postVideoUrl'
+ ) as HTMLInputElement;
+ if (fileInput) {
+ fileInput.value = '';
+ }
+ };
function handletoggleClick(): void {
if (togglePost === 'Read more') {
setPostToggle('hide');
@@ -47,10 +133,30 @@ function orgPostCard(props: InterfaceOrgPostCardProps): JSX.Element {
}
}
+ function handleEditModal(): void {
+ setModalVisible(false);
+ setMenuVisible(false);
+ setShowEditModal(true);
+ setPostFormState({
+ ...postformState,
+ postphoto: props.postPhoto,
+ postvideo: props.postVideo,
+ });
+ }
+
+ function handleDeleteModal(): void {
+ setModalVisible(false);
+ setMenuVisible(false);
+ setShowDeleteModal(true);
+ }
+
useEffect(() => {
setPostFormState({
posttitle: props.postTitle,
postinfo: props.postInfo,
+ postphoto: props.postPhoto,
+ postvideo: props.postVideo,
+ pinned: props.pinned,
});
}, []);
@@ -58,36 +164,35 @@ function orgPostCard(props: InterfaceOrgPostCardProps): JSX.Element {
keyPrefix: 'orgPostCard',
});
- const [create] = useMutation(DELETE_POST_MUTATION);
- const [updatePost] = useMutation(UPDATE_POST_MUTATION);
+ const [deletePostMutation] = useMutation(DELETE_POST_MUTATION);
+ const [updatePostMutation] = useMutation(UPDATE_POST_MUTATION);
const deletePost = async (): Promise => {
try {
- const { data } = await create({
+ const { data } = await deletePostMutation({
variables: {
id: props.id,
},
});
- /* istanbul ignore next */
if (data) {
toast.success(t('postDeleted'));
setTimeout(() => {
window.location.reload();
- }, 2000);
+ });
}
} catch (error: any) {
- /* istanbul ignore next */
errorHandler(t, error);
}
};
-
const handleInputEvent = (
e: ChangeEvent
): void => {
const { name, value } = e.target;
-
- setPostFormState({ ...postformState, [name]: value });
+ setPostFormState((prevPostFormState) => ({
+ ...prevPostFormState,
+ [name]: value,
+ }));
};
const updatePostHandler = async (
@@ -96,15 +201,27 @@ function orgPostCard(props: InterfaceOrgPostCardProps): JSX.Element {
e.preventDefault();
try {
- const { data } = await updatePost({
+ let imageUrl = null;
+ let videoUrl = null;
+
+ if (e.target?.postphoto && e.target?.postphoto.files.length > 0) {
+ imageUrl = postformState.postphoto;
+ }
+
+ if (e.target?.postvideo && e.target?.postvideo.files.length > 0) {
+ videoUrl = postformState.postvideo;
+ }
+
+ const { data } = await updatePostMutation({
variables: {
id: props.id,
title: postformState.posttitle,
text: postformState.postinfo,
+ imageUrl,
+ videoUrl,
},
});
- /* istanbul ignore next */
if (data) {
toast.success(t('postUpdated'));
setTimeout(() => {
@@ -112,90 +229,221 @@ function orgPostCard(props: InterfaceOrgPostCardProps): JSX.Element {
}, 2000);
}
} catch (error: any) {
- /* istanbul ignore next */
toast.error(error.message);
}
};
return (
<>
-
-
-
-
+ {props.postTitle}
-
+
-
-
+
+ {t('editPost')}
-
+
);
}
-export default orgPostCard;
diff --git a/src/components/TableLoader/TableLoader.test.tsx b/src/components/TableLoader/TableLoader.test.tsx
index d3e6d88d4d..b6526a65c7 100644
--- a/src/components/TableLoader/TableLoader.test.tsx
+++ b/src/components/TableLoader/TableLoader.test.tsx
@@ -2,22 +2,27 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
+import type { InterfaceTableLoader } from './TableLoader';
import TableLoader from './TableLoader';
-const props = {
- noOfRows: 10,
- headerTitles: ['header1', 'header2', 'header3'],
-};
+beforeAll(() => {
+ console.error = jest.fn();
+});
describe('Testing Loader component', () => {
- test('Component should be rendered properly', () => {
+ test('Component should be rendered properly only headerTitles is provided', () => {
+ const props: InterfaceTableLoader = {
+ noOfRows: 10,
+ headerTitles: ['header1', 'header2', 'header3'],
+ };
render(
);
// Check if header titles are rendered properly
- props.headerTitles.forEach((title) => {
+ const data = props.headerTitles as string[];
+ data.forEach((title) => {
expect(screen.getByText(title)).toBeInTheDocument();
});
@@ -26,11 +31,48 @@ describe('Testing Loader component', () => {
expect(
screen.getByTestId(`row-${rowIndex}-tableLoading`)
).toBeInTheDocument();
- for (let colIndex = 0; colIndex < props.headerTitles.length; colIndex++) {
+ for (let colIndex = 0; colIndex < data.length; colIndex++) {
+ expect(
+ screen.getByTestId(`row-${rowIndex}-col-${colIndex}-tableLoading`)
+ ).toBeInTheDocument();
+ }
+ }
+ });
+ test('Component should be rendered properly only noCols is provided', () => {
+ const props: InterfaceTableLoader = {
+ noOfRows: 10,
+ noOfCols: 3,
+ };
+ render(
+
+
+ );
+ // Check if header titles are rendered properly
+ const data = [...Array(props.noOfCols)];
+
+ // Check if elements are rendered properly
+ for (let rowIndex = 0; rowIndex < props.noOfRows; rowIndex++) {
+ expect(
+ screen.getByTestId(`row-${rowIndex}-tableLoading`)
+ ).toBeInTheDocument();
+ for (let colIndex = 0; colIndex < data.length; colIndex++) {
expect(
screen.getByTestId(`row-${rowIndex}-col-${colIndex}-tableLoading`)
).toBeInTheDocument();
}
}
});
+ test('Component should be throw error when noOfCols and headerTitles are undefined', () => {
+ const props = {
+ noOfRows: 10,
+ };
+ expect(() => {
+ render(
+
+
+ );
+ }).toThrowError();
+ });
});
diff --git a/src/components/TableLoader/TableLoader.tsx b/src/components/TableLoader/TableLoader.tsx
index 49d317b292..2da4b1d172 100644
--- a/src/components/TableLoader/TableLoader.tsx
+++ b/src/components/TableLoader/TableLoader.tsx
@@ -1,25 +1,40 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import styles from './TableLoader.module.css';
import { Table } from 'react-bootstrap';
-interface InterfaceTableLoader {
+export interface InterfaceTableLoader {
noOfRows: number;
- headerTitles: string[];
+ headerTitles?: string[];
+ noOfCols?: number;
}
const tableLoader = (props: InterfaceTableLoader): JSX.Element => {
- const { noOfRows, headerTitles } = props;
+ const { noOfRows, headerTitles, noOfCols } = props;
+
+ useEffect(() => {
+ if (headerTitles == undefined && noOfCols == undefined) {
+ throw new Error(
+ 'TableLoader error Either headerTitles or noOfCols is required !'
+ );
+ }
+ }, []);
return (
<>
-
+
+ {props.postVideo && (
+
+
+
+ {props.pinned && (
+
+ {props.postTitle}
+
+
+ {props.postInfo}
+
+
+ {props.postAuthor}
+
+
+
+ )}
{props.postPhoto ? (
-
+ {props.pinned && (
+
+ {props.postTitle}
+
+
+ {props.postInfo && props.postInfo.length > 20
+ ? props.postInfo.substring(0, 20) + '...'
+ : props.postInfo}
+ {' '}
+
+ {props.postAuthor}
+
+
+
+
) : (
- 
+ ''
)}
-
{/* Delete Modal */}
@@ -223,89 +471,159 @@ function orgPostCard(props: InterfaceOrgPostCardProps): JSX.Element {
{/* Edit Modal */}
-
-
- {' '}
-
+
- {t('author')}: {props.postAuthor} -
-
- {togglePost === 'Read more' ? (
-
+ {modalVisible && (
+ - {props.postInfo.length > 43 - ? props.postInfo.substring(0, 40) + '...' - : props.postInfo} -
- ) : ( -{props.postInfo}
- )} - +
+
-
+ {props.postPhoto && (
+
+ 
+
+ )}
+ {props.postVideo && (
+
+
+
+ )}
+ {!props.postPhoto && !props.postVideo && (
+
+ {' '}
+ 
+
+ )}
+
+
+
+
+
+ + {t('author')}: {props.postAuthor} +
+
+ {togglePost === 'Read more' ? (
+
+ + {props.postInfo.length > 43 + ? props.postInfo.substring(0, 40) + '...' + : props.postInfo} +
+ ) : ( +{props.postInfo}
+ )} + +- {t('videoURL')}: - - {' '} - {props.postVideo} - -
+ )} -
-
-
+ {menuVisible && (
+
+ )}
+
-
+
-
+
- + {t('edit')} + +
- + {t('deletePost')} + +
- => + togglePostPin(props.id, props.pinned) + } + > + {!props.pinned ? 'Pin post' : 'Unpin post'} + +
- setMenuVisible(false)} + data-testid="closebtn" + > + {t('close')} + +
{t('editPost')}
- +| {title} | ; - })} + {headerTitles + ? headerTitles.map((title, index) => { + return{title} | ; + }) + : noOfCols && + [...Array(noOfCols)].map((_, index) => { + return; + })} | - - | - ); - })} + {[...Array(headerTitles ? headerTitles?.length : noOfCols)].map( + (_, colIndex) => { + return ( ++ + | + ); + } + )} ); })} diff --git a/src/components/UsersTableItem/UserTableItem.test.tsx b/src/components/UsersTableItem/UserTableItem.test.tsx new file mode 100644 index 0000000000..0e67a02022 --- /dev/null +++ b/src/components/UsersTableItem/UserTableItem.test.tsx @@ -0,0 +1,1054 @@ +import React from 'react'; +import { MockedProvider } from '@apollo/react-testing'; +import { act, fireEvent, render, screen } from '@testing-library/react'; +import { I18nextProvider } from 'react-i18next'; +import { toast } from 'react-toastify'; +import { StaticMockLink } from 'utils/StaticMockLink'; +import i18nForTest from 'utils/i18nForTest'; +import type { InterfaceQueryUserListItem } from 'utils/interfaces'; +import { MOCKS } from './UserTableItemMocks'; +import UsersTableItem from './UsersTableItem'; + +const link = new StaticMockLink(MOCKS, true); + +async function wait(ms = 100): Promise||
|---|---|---|---|---|---|---|
| {index + 1} | +{`${user.firstName} ${user.lastName}`} | +{user.email} | +
+ |
+ + + | + ++ + | +
| Name | +Location | +Created on | +Created By | +Users Role | +Change Role | +Action | +
|---|---|---|---|---|---|---|
| + + | +{org.location} | +{dayjs(org.createdAt).format('DD-MM-YYYY')} | ++ + | +{isAdmin ? 'ADMIN' : 'USER'} | +
+ |
+ + + | +
+
+ )}
+
+
+ ) : orgsBlockedBy.length == 0 ? (
+ <>
+ + {user.firstName} {user.lastName} {t('isNotBlockedByAnyOrg')} +
+
+
+
+ ) : (
+ + {t('noResultsFoundFor')} "{searchByNameOrgsBlockedBy} + " +
+| Name | +Location | +Created on | +Created By | +Users Role | +Change Role | +Action | +
|---|---|---|---|---|---|---|
| + + | +{org.location} | +{dayjs(org.createdAt).format('DD-MM-YYYY')} | ++ + | +{isAdmin ? 'ADMIN' : 'USER'} | +
+ |
+ + + | +
+ Are you sure you want to remove{' '} + + “{user.firstName} {user.lastName}” + {' '} + from organization{' '} + + “ + {removeUserProps.orgName}” + {' '} + ? +
+
-
-
-
-
- {t('forgotPassword')}
-
-