Added Pinning functionality in the create post modal.

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(
+        <MockedProvider addTypename={false} link={link}>
+          <BrowserRouter>
+            <Provider store={store}>
+              <I18nextProvider i18n={i18nForTest}>
+                <ToastContainer />
+                <OrgPost />
+              </I18nextProvider>
+            </Provider>
+          </BrowserRouter>
+        </MockedProvider>
+      );
+
+      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(
       <MockedProvider addTypename={false} link={link}>

src/screens/OrgPost/OrgPost.tsx

@@ -4,7 +4,7 @@
 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 { 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 @@
     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<void> => {
+    await toggle({
+      variables: {
+        id: _id,
+      },
+    });
+  };
 
   const showInviteModal = (): void => {
     setPostModalIsOpen(true);
@@ -61,6 +71,7 @@
       postinfo: '',
       postImage: '',
       postVideo: '',
+      pinned: false,
     });
   };
 
@@ -95,6 +106,7 @@
       postinfo: _postinfo,
       postImage,
       postVideo,
+      pinned,
     } = postformState;
 
     const posttitle = _posttitle.trim();
@@ -111,17 +123,24 @@
           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({
           posttitle: '',
           postinfo: '',
           postImage: '',
           postVideo: '',
+          pinned: false,
         });
         setPostModalIsOpen(false); // close the modal
       }
@@ -481,6 +500,23 @@
                 )}
               </>
             )}
+            <Row className="mb-3">
+              <Col>
+                <Form.Label htmlFor="ispinnedpost">Pinned Post</Form.Label>
+                <Form.Switch
+                  id="ispinnedpost"
+                  data-testid="ispinnedpost"
+                  type="checkbox"
+                  defaultChecked={postformState.pinned}
+                  onChange={(e): void => {
+                    setPostFormState({
+                      ...postformState,
+                      pinned: e.target.checked,
+                    });
+                  }}
+                />
+              </Col>
+            </Row>
           </Modal.Body>
           <Modal.Footer>
             <Button