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, + }); + }} + /> + +