diff --git a/src/screens/OrgPost/OrgPost.test.tsx b/src/screens/OrgPost/OrgPost.test.tsx
index 992e53212a..0682733c41 100644
--- a/src/screens/OrgPost/OrgPost.test.tsx
+++ b/src/screens/OrgPost/OrgPost.test.tsx
@@ -1,7 +1,13 @@
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
import { BrowserRouter } from 'react-router-dom';
-import { act, render, screen, fireEvent } from '@testing-library/react';
+import {
+ act,
+ render,
+ screen,
+ fireEvent,
+ waitFor,
+} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Provider } from 'react-redux';
import 'jest-location-mock';
@@ -10,7 +16,10 @@ import { I18nextProvider } from 'react-i18next';
import OrgPost from './OrgPost';
import { store } from 'state/store';
import { ORGANIZATION_POST_CONNECTION_LIST } from 'GraphQl/Queries/Queries';
-import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations';
+import {
+ CREATE_POST_MUTATION,
+ TOGGLE_PINNED_POST,
+} from 'GraphQl/Mutations/mutations';
import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
import { ToastContainer } from 'react-toastify';
@@ -119,28 +128,26 @@ const MOCKS = [
text: 'This is dummy text',
organizationId: '123',
},
- result: {
- data: {
- createPost: {
- _id: '453',
- },
+ },
+ result: {
+ data: {
+ createPost: {
+ _id: '6411e53835d7ba2344a78e21',
},
},
},
},
{
request: {
- query: CREATE_POST_MUTATION,
+ query: TOGGLE_PINNED_POST,
variables: {
- title: 'Dummy Post',
- text: 'This is dummy text',
- organizationId: '123',
+ id: '6411e53835d7ba2344a78e21',
},
- result: {
- data: {
- createPost: {
- _id: '453',
- },
+ },
+ result: {
+ data: {
+ togglePostPin: {
+ _id: '6411e53835d7ba2344a78e21',
},
},
},
@@ -166,7 +173,7 @@ describe('Organisation Post Page', () => {
test('correct mock data should be queried', async () => {
const dataQuery1 =
- MOCKS[0]?.result?.data?.postsByOrganizationConnection.edges[0];
+ MOCKS[0]?.result?.data?.postsByOrganizationConnection?.edges[0];
expect(dataQuery1).toEqual({
_id: '6411e53835d7ba2344a78e21',
@@ -376,6 +383,36 @@ describe('Organisation Post Page', () => {
fireEvent.click(createPostBtn);
}, 15000);
+ test('setPostFormState updates the pinned state correctly and toggles the pin when post is created', async () => {
+ await act(async () => {
+ render(
+
+
+
+
+
+
+
+
+
+
+ );
+
+ await wait(500);
+ userEvent.click(screen.getByTestId('createPostModalBtn'));
+ userEvent.click(screen.getByTestId('ispinnedpost'));
+ await wait(500);
+ });
+ expect(screen.getByTestId(/ispinnedpost/i)).toBeChecked();
+ userEvent.click(screen.getByTestId('createPostBtn'));
+ await wait(500);
+ await waitFor(() => {
+ expect(MOCKS[2]?.result?.data?.togglePostPin).toEqual({
+ _id: '6411e53835d7ba2344a78e21',
+ });
+ });
+ });
+
test('Create post and preview', async () => {
render(
diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx
index 9f098c291b..8763e64e84 100644
--- a/src/screens/OrgPost/OrgPost.tsx
+++ b/src/screens/OrgPost/OrgPost.tsx
@@ -4,7 +4,7 @@ import { Search } from '@mui/icons-material';
import SortIcon from '@mui/icons-material/Sort';
import Row from 'react-bootstrap/Row';
import Modal from 'react-bootstrap/Modal';
-import { Form } from 'react-bootstrap';
+import { Col, Form } from 'react-bootstrap';
import { useMutation, useQuery } from '@apollo/client';
import Button from 'react-bootstrap/Button';
import { toast } from 'react-toastify';
@@ -20,6 +20,7 @@ import NotFound from 'components/NotFound/NotFound';
import { errorHandler } from 'utils/errorHandler';
import Loader from 'components/Loader/Loader';
import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen';
+import { TOGGLE_PINNED_POST } from 'GraphQl/Mutations/mutations';
interface InterfaceOrgPost {
_id: string;
@@ -45,11 +46,20 @@ function orgPost(): JSX.Element {
postinfo: '',
postImage: '',
postVideo: '',
+ pinned: false,
});
const [sortingOption, setSortingOption] = useState('latest');
const [showTitle, setShowTitle] = useState(true);
const currentUrl = window.location.href.split('=')[1];
+ const [toggle] = useMutation(TOGGLE_PINNED_POST);
+ const togglePostPin = async (_id: string): Promise => {
+ await toggle({
+ variables: {
+ id: _id,
+ },
+ });
+ };
const showInviteModal = (): void => {
setPostModalIsOpen(true);
@@ -61,6 +71,7 @@ function orgPost(): JSX.Element {
postinfo: '',
postImage: '',
postVideo: '',
+ pinned: false,
});
};
@@ -95,6 +106,7 @@ function orgPost(): JSX.Element {
postinfo: _postinfo,
postImage,
postVideo,
+ pinned,
} = postformState;
const posttitle = _posttitle.trim();
@@ -111,10 +123,16 @@ function orgPost(): JSX.Element {
text: postinfo,
organizationId: currentUrl,
file: postImage || postVideo,
+ pinned: pinned,
},
});
/* istanbul ignore next */
if (data) {
+ if (pinned) {
+ // Call togglePostPin to update the pinning information in the backend
+ await togglePostPin(data.createPost._id);
+ toast.success('Post Pinned Successfully');
+ }
toast.success('Congratulations! You have Posted Something.');
refetch();
setPostFormState({
@@ -122,6 +140,7 @@ function orgPost(): JSX.Element {
postinfo: '',
postImage: '',
postVideo: '',
+ pinned: false,
});
setPostModalIsOpen(false); // close the modal
}
@@ -481,6 +500,23 @@ function orgPost(): JSX.Element {
)}
>
)}
+
+
+ Pinned Post
+ {
+ setPostFormState({
+ ...postformState,
+ pinned: e.target.checked,
+ });
+ }}
+ />
+
+