Merge branch 'PalisadoesFoundation:develop' into refreshToken

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,9 +17,24 @@
 .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;

src/components/EventListCard/EventListCard.test.tsx

@@ -301,4 +301,44 @@ describe('Testing Event List Card', () => {
       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();
+  });
 });

src/components/EventListCard/EventListCard.tsx

@@ -150,7 +150,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
         >
           <div className={styles.dispflex}>
             <h2>
-              {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}{' '}
+              {props.eventName ? (
+                <>
+                  {props.eventName.length > 150 ? (
+                    <>{props.eventName.substring(0, 150)}...</>
+                  ) : (
+                    <>{props.eventName}</>
+                  )}
+                </>
+              ) : (
+                <>Dogs Care</>
+              )}
             </h2>
           </div>
         </div>
@@ -172,7 +182,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               <p className={styles.preview}>
                 {t('eventTitle')}:{' '}
                 <span className={styles.view}>
-                  {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}{' '}
+                  {props.eventName ? (
+                    <>
+                      {props.eventName.length > 100 ? (
+                        <>{props.eventName.substring(0, 100)}...</>
+                      ) : (
+                        <>{props.eventName}</>
+                      )}
+                    </>
+                  ) : (
+                    <>Dogs Care</>
+                  )}
                 </span>
               </p>
               <p className={styles.preview}>
@@ -187,7 +207,11 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               </p>
               <p className={styles.preview}>
                 {t('description')}:{' '}
-                <span className={styles.view}>{props.eventDescription}</span>
+                <span className={styles.view}>
+                  {props.eventDescription && props.eventDescription.length > 256
+                    ? props.eventDescription.substring(0, 256) + '...'
+                    : props.eventDescription}
+                </span>
               </p>
               <p className={styles.preview}>
                 {t('on')}: <span className={styles.view}>{props.regDate}</span>

src/components/EventProjectModals/AddEventProjectModal.tsx

@@ -22,10 +22,17 @@ export const AddEventProjectModal = ({
 
   const [addMutation] = useMutation(ADD_EVENT_PROJECT_MUTATION);
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+  const notify = (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
-    let toSubmit = true;
+    return toast.promise(handleSubmit, {
+      pending: 'Adding the project...',
+      success: 'Added the project successfully!',
+      error: 'There was an error in adding the project!',
+    });
+  };
 
+  const handleSubmit = async (): Promise<void> => {
+    let toSubmit = true;
     if (title.trim().length == 0) {
       toast.error('Title cannot be empty!');
       toSubmit = false;
@@ -34,28 +41,18 @@ export const AddEventProjectModal = ({
       toast.error('Description cannot be empty!');
       toSubmit = false;
     }
-
-    if (toSubmit) {
-      toast.warn('Adding the project...');
-      addMutation({
-        variables: {
-          title,
-          description,
-          eventId,
-        },
-      })
-        .then(() => {
-          toast.success('Added the project successfully!');
-          refetchData();
-          setTitle('');
-          setDescription('');
-          handleClose();
-        })
-        .catch((err) => {
-          toast.error('There was an error in adding the project!');
-          toast.error(err.message);
-        });
-    }
+    if (!toSubmit) return Promise.reject();
+    await addMutation({
+      variables: {
+        title,
+        description,
+        eventId,
+      },
+    });
+    refetchData();
+    setTitle('');
+    setDescription('');
+    handleClose();
   };
 
   return (
@@ -64,7 +61,7 @@ export const AddEventProjectModal = ({
         <Modal.Header closeButton className="bg-primary">
           <Modal.Title className="text-white">Add an Event Project</Modal.Title>
         </Modal.Header>
-        <Form onSubmit={handleSubmit}>
+        <Form onSubmit={notify}>
           <Modal.Body>
             <Form.Group controlId="formBasicTitle">
               <Form.Label>Title</Form.Label>

src/components/EventProjectModals/DeleteEventProjectModal.test.tsx

@@ -104,6 +104,5 @@ describe('Testing Delete Event Project Modal', () => {
         queryByText('There was an error in deleting the project details!')
       ).toBeInTheDocument()
     );
-    await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument());
   });
 });

src/components/EventProjectModals/DeleteEventProjectModal.tsx

@@ -18,22 +18,22 @@ type ModalPropType = {
 export const DeleteEventProjectModal = (props: ModalPropType): JSX.Element => {
   const [deleteMutation] = useMutation(DELETE_EVENT_PROJECT_MUTATION);
 
-  const deleteProject = (): void => {
-    toast.warn('Deleting the project...');
-    deleteMutation({
+  const notify = (): Promise<void> => {
+    return toast.promise(deleteProject, {
+      pending: 'Deleting the project...',
+      success: 'Deleted the project successfully!',
+      error: 'There was an error in deleting the project details!',
+    });
+  };
+  const deleteProject = async (): Promise<void> => {
+    await deleteMutation({
       variables: {
         id: props.project._id,
       },
-    })
-      .then(() => {
-        toast.success('Deleted the project successfully!');
-        props.refetchData();
-        props.handleClose();
-      })
-      .catch((err) => {
-        toast.error('There was an error in deleting the project details!');
-        toast.error(err.message);
-      });
+    });
+
+    props.refetchData();
+    props.handleClose();
   };
 
   return (
@@ -60,7 +60,7 @@ export const DeleteEventProjectModal = (props: ModalPropType): JSX.Element => {
           >
             Cancel
           </Button>
-          <Button variant="danger" onClick={deleteProject} className="m-1">
+          <Button variant="danger" onClick={notify} className="m-1">
             Delete
           </Button>
         </Modal.Footer>

src/components/EventProjectModals/UpdateEventProjectModal.tsx

@@ -25,9 +25,15 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => {
   }, [props.project]);
 
   const [updateMutation] = useMutation(UPDATE_EVENT_PROJECT_MUTATION);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+  const notify = (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
+    return toast.promise(handleSubmit, {
+      pending: 'Updating the project...',
+      success: 'Updated the project successfully!',
+      error: 'There was an error in updating the project details!',
+    });
+  };
+  const handleSubmit = async (): Promise<void> => {
     let toSubmit = true;
 
     if (title.trim().length == 0) {
@@ -38,26 +44,16 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => {
       toast.error('Description cannot be empty!');
       toSubmit = false;
     }
-
-    if (toSubmit) {
-      toast.warn('Updating the project...');
-      updateMutation({
-        variables: {
-          id: props.project._id,
-          title,
-          description,
-        },
-      })
-        .then(() => {
-          toast.success('Updated the project successfully!');
-          props.refetchData();
-          props.handleClose();
-        })
-        .catch((err) => {
-          toast.error('There was an error in updating the project details!');
-          toast.error(err.message);
-        });
-    }
+    if (!toSubmit) return Promise.reject();
+    await updateMutation({
+      variables: {
+        id: props.project._id,
+        title,
+        description,
+      },
+    });
+    props.refetchData();
+    props.handleClose();
   };
 
   return (
@@ -71,7 +67,7 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => {
         <Modal.Header closeButton className="bg-primary">
           <Modal.Title className="text-white">Update Event Project</Modal.Title>
         </Modal.Header>
-        <Form onSubmit={handleSubmit}>
+        <Form onSubmit={notify}>
           <Modal.Body>
             <Form.Group controlId="formBasicTitle">
               <Form.Label>Title</Form.Label>