Fixed event check in management not updating automatically bug

src/GraphQl/Queries/Queries.ts

@@ -567,6 +567,7 @@ export const ORGANIZATION_POST_LIST = gql`
         lastName
         email
       }
+      createdAt
     }
   }
 `;
@@ -594,7 +595,7 @@ export const ORGANIZATION_POST_CONNECTION_LIST = gql`
           lastName
           email
         }
-        pinned
+        createdAt
         likeCount
         commentCount
         comments {
@@ -611,7 +612,6 @@ export const ORGANIZATION_POST_CONNECTION_LIST = gql`
           }
           text
         }
-        createdAt
         likedBy {
           _id
           firstName

src/assets/css/app.css

@@ -5560,7 +5560,7 @@ fieldset:disabled .btn {
   box-shadow: var(--bs-toast-box-shadow);
   border-radius: var(--bs-toast-border-radius);
 }
-.toast.showing {
+.showing {
   opacity: 0;
 }
 .toast:not(.show) {

src/components/CheckIn/CheckInModal.test.tsx

@@ -11,6 +11,9 @@ import { ToastContainer } from 'react-toastify';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { checkInQueryMock } from './mocks';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+const link = new StaticMockLink(checkInQueryMock, true);
 
 describe('Testing Check In Attendees Modal', () => {
   const props = {
@@ -21,7 +24,7 @@ describe('Testing Check In Attendees Modal', () => {
 
   test('The modal should be rendered, and all the fetched users should be shown properly and user filtering should work', async () => {
     const { queryByText, queryByLabelText } = render(
-      <MockedProvider addTypename={false} mocks={checkInQueryMock}>
+      <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
           <LocalizationProvider dateAdapter={AdapterDayjs}>
             <Provider store={store}>

src/components/CheckIn/CheckInModal.tsx

@@ -30,6 +30,7 @@ export const CheckInModal = (props: InterfaceModalProp): JSX.Element => {
   });
 
   useEffect(() => {
+    checkInRefetch();
     if (checkInLoading) setTableData([]);
     else
       setTableData(

src/components/CheckIn/TableRow.test.tsx

@@ -95,9 +95,9 @@ describe('Testing Table Row for CheckIn Table', () => {
     await waitFor(() =>
       expect(queryByText('Generating pdf...')).toBeInTheDocument()
     );
-    await waitFor(() =>
-      expect(queryByText('PDF generated successfully!')).toBeInTheDocument()
-    );
+    await waitFor(() => {
+      expect(queryByText('PDF generated successfully!')).toBeInTheDocument();
+    });
   });
 
   test('Upon failing of check in mutation, the appropiate error message should be shown', async () => {

src/components/CheckIn/TableRow.tsx

@@ -37,15 +37,17 @@ export const TableRow = ({
       });
   };
 
-  const generateTag = (): void => {
-    toast.warning('Generating pdf...');
-    const inputs = [{ name: data.name }];
-
-    generate({ template: tagTemplate, inputs }).then((pdf) => {
-      const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
-      window.open(URL.createObjectURL(blob));
-      toast.success('PDF generated successfully!');
+  const notify = (): Promise<void> =>
+    toast.promise(generateTag, {
+      pending: 'Generating pdf...',
+      success: 'PDF generated successfully!',
+      error: 'Error generating pdf!',
     });
+  const generateTag = async (): Promise<void> => {
+    const inputs = [{ name: data.name }];
+    const pdf = await generate({ template: tagTemplate, inputs });
+    const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
+    window.open(URL.createObjectURL(blob));
   };
 
   return (
@@ -55,7 +57,7 @@ export const TableRow = ({
           <Button variant="contained" disabled className="m-2 p-2">
             Checked In
           </Button>
-          <Button variant="contained" className="m-2 p-2" onClick={generateTag}>
+          <Button variant="contained" className="m-2 p-2" onClick={notify}>
             Download Tag
           </Button>
         </div>

src/components/EventListCard/EventListCard.module.css

@@ -17,18 +17,31 @@
 .cards a:hover {
   color: black;
 }
+.cards {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+}
 .dispflex {
   display: flex;
-  justify-content: space-between;
+  height: 50px;
+  transition: transform 0.3s ease;
+  cursor: pointer;
+}
+.cards:hover {
+  transform: scale(2.5);
+  z-index: 5;
+}
+.cards:hover h2 {
+  font-size: 0.4vmax;
+  margin-bottom: 0;
 }
 .iconContainer {
   display: flex;
   justify-content: flex-end;
 }
 .icon {
-  transform: scale(1);
-  cursor: pointer;
-  color: #31bb6b;
+  margin: 1px;
 }
 
 .cards {
@@ -86,6 +99,8 @@
 }
 .dispflex {
   display: flex;
+  margin-bottom: 5px;
+  margin-right: 5px;
 }
 .dispflex > input {
   width: 20%;

src/components/EventListCard/EventListCard.test.tsx

@@ -149,6 +149,30 @@ describe('Testing Event List Card', () => {
     expect(screen.queryByText(props.eventName)).not.toBeInTheDocument();
   });
 
+  test('Testing for update modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <EventListCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('card'));
+    userEvent.click(screen.getByTestId('editEventModalBtn'));
+
+    userEvent.click(screen.getByTestId('EventUpdateModalCloseBtn'));
+    userEvent.click(screen.getByTestId('createEventModalCloseBtn'));
+
+    await wait();
+  });
+
   test('Testing event update functionality', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -159,7 +183,8 @@ describe('Testing Event List Card', () => {
     );
 
     await wait();
-
+    userEvent.click(screen.getByTestId('card'));
+    userEvent.click(screen.getByTestId('editEventModalBtn'));
     userEvent.type(screen.getByTestId('updateTitle'), props.eventName);
     userEvent.type(
       screen.getByTestId('updateDescription'),
@@ -199,7 +224,8 @@ describe('Testing Event List Card', () => {
     );
 
     await wait();
-
+    userEvent.click(screen.getByTestId('card'));
+    userEvent.click(screen.getByTestId('editEventModalBtn'));
     userEvent.type(screen.getByTestId('updateTitle'), props.eventName);
     userEvent.type(
       screen.getByTestId('updateDescription'),
@@ -232,6 +258,11 @@ describe('Testing Event List Card', () => {
           <EventListCard {...props} />
         </MockedProvider>
       );
+      userEvent.click(screen.getByTestId('card'));
+      userEvent.click(screen.getByTestId('deleteEventModalBtn'));
+
+      userEvent.click(screen.getByTestId('EventDeleteModalCloseBtn'));
+      userEvent.click(screen.getByTestId('createEventModalCloseBtn'));
     });
 
     it('should call the delete event mutation when the "Yes" button is clicked', async () => {
@@ -240,7 +271,8 @@ describe('Testing Event List Card', () => {
           <EventListCard {...props} />
         </MockedProvider>
       );
-
+      userEvent.click(screen.getByTestId('card'));
+      userEvent.click(screen.getByTestId('deleteEventModalBtn'));
       const deleteBtn = screen.getByTestId('deleteEventBtn');
       fireEvent.click(deleteBtn);
     });
@@ -263,9 +295,50 @@ describe('Testing Event List Card', () => {
           <EventListCard {...props} />
         </MockedProvider>
       );
-
+      userEvent.click(screen.getByTestId('card'));
+      userEvent.click(screen.getByTestId('deleteEventModalBtn'));
       const deleteBtn = screen.getByTestId('deleteEventBtn');
       fireEvent.click(deleteBtn);
     });
   });
+
+  test('Should render truncated event details', async () => {
+    const longEventName =
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A very long event name that exceeds 150 characters and needs to be truncated';
+    const longDescription =
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A very long description that exceeds 150 characters and needs to be truncated';
+    const longEventNameLength = longEventName.length;
+    const longDescriptionLength = longDescription.length;
+    const truncatedEventName = longEventName.substring(0, 150) + '...';
+    const truncatedDescriptionName = longDescription.substring(0, 150) + '...';
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <EventListCard
+            key="123"
+            id="1"
+            eventName={longEventName}
+            eventLocation="location"
+            eventDescription={longDescription}
+            regDate="19/03/2022"
+            regEndDate="26/03/2022"
+            startTime="02:00"
+            endTime="06:00"
+            allDay={true}
+            recurring={false}
+            isPublic={true}
+            isRegisterable={false}
+          />
+        </I18nextProvider>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(longEventNameLength).toBeGreaterThan(100);
+    expect(longDescriptionLength).toBeGreaterThan(256);
+    expect(truncatedEventName).toContain('...');
+    expect(truncatedDescriptionName).toContain('...');
+    await wait();
+  });
 });