Merge pull request #69 from ChangePlusPlusVandy/customize-application

Customize application

components/Event/Event.tsx

@@ -1,5 +1,5 @@
 import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Image from 'next/image';
 import Header from './Header';
 import BookIcon from './BookIcon';
@@ -21,6 +21,14 @@ import {
 } from '@/styles/components/Event/event.styles';
 import EventPopupWindowForm from '../Forms/EventPopupWindowForm';
 import { useRouter } from 'next/router';
+import { Button, ConfigProvider, Flex, Modal, Tag, message } from 'antd';
+import { BOOKEM_THEME } from '@/utils/constants';
+import {
+  CheckCircleOutlined,
+  ExclamationCircleFilled,
+} from '@ant-design/icons';
+
+const { confirm } = Modal;
 
 /**
  * Event Detail
@@ -33,31 +41,70 @@ const Event = ({ pid }: { pid: string }) => {
   const [event, setEvent] = useState<QueriedVolunteerEventDTO>();
   const [error, setError] = useState<Error>();
   const router = useRouter();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const fetchEvent = useCallback(() => {
+    fetch('/api/event/' + pid)
+      .then(res => {
+        if (!res.ok) {
+          throw new Error(
+            'An error has occurred while fetching: ' + res.statusText
+          );
+        }
+        return res.json();
+      })
+      .then(data => setEvent(data))
+      .catch(err => setError(err));
+  }, [pid]);
 
   useEffect(() => {
-    const fetchEvent = () => {
-      fetch('/api/event/' + pid)
-        .then(res => {
-          if (!res.ok) {
-            throw new Error(
-              'An error has occurred while fetching: ' + res.statusText
-            );
-          }
-          return res.json();
-        })
-        .then(data => setEvent(data))
-        .catch(err => setError(err));
-    };
     if (!showPopup) {
       fetchEvent();
     }
-  }, [pid, showPopup]);
+  }, [showPopup, fetchEvent]);
+
+  const showDeleteConfirm = () => {
+    confirm({
+      title: 'Are you sure about publishing this event?',
+      icon: <ExclamationCircleFilled />,
+      content:
+        "After the event is published, you will no longer be able to modify the application questions, but you can still edit the event details using 'Edit Event' button",
+      okText: 'Yes',
+      cancelText: 'No',
+      onOk() {
+        publishEvent();
+      },
+    });
+  };
+
+  const publishEvent = () => {
+    fetch('/api/event/' + pid + '/publish', {
+      method: 'PUT',
+    })
+      .then(res => res.json())
+      .then(data => {
+        if (data.status === 'success') {
+          messageApi.open({
+            content: data.message,
+            type: 'success',
+          });
+          fetchEvent();
+        } else {
+          messageApi.open({
+            content: data.message,
+            type: 'error',
+          });
+        }
+      })
+      .catch(err => console.error(err));
+  };
 
   if (error) return <div>Event not found!</div>;
   if (!event) return <div>Loading...</div>;
 
   return (
     <EventBox>
+      {contextHolder}
       <CopyButton
         onClick={() => {
           navigator.clipboard.writeText(
@@ -95,25 +142,72 @@ const Event = ({ pid }: { pid: string }) => {
         <TextContainer>
           <EventName> {event.name}</EventName>
           <SpotsFilled>
-            {' '}
             {event.volunteers.length} / {event.maxSpot} spots filled
           </SpotsFilled>
+          <Flex style={{ margin: '0 0 10px 50px' }} gap="4px 0" wrap="wrap">
+            {event.published && (
+              <Tag icon={<CheckCircleOutlined />} color="success">
+                published
+              </Tag>
+            )}
+          </Flex>
           <ButtonContainer>
-            <EditButton onClick={() => setShowPopup(prev => !prev)}>
-              Edit
-            </EditButton>
-            <SeeSignUpButton
-              onClick={() => router.push('/volunteers/event/' + pid)}>
-              See sign-Ups
-            </SeeSignUpButton>
-            <Image src="/event/bookmarks.png" alt="" width={50} height={50} />
+            <ConfigProvider
+              theme={{
+                components: {
+                  Button: {
+                    defaultHoverColor: BOOKEM_THEME.colors.BOOKEM_BLACK,
+                    defaultHoverBorderColor: BOOKEM_THEME.colors.BOOKEM_BLACK,
+                  },
+                },
+              }}>
+              <Button size="large" onClick={() => setShowPopup(prev => !prev)}>
+                Edit event
+              </Button>
+              <Button
+                size="large"
+                style={{ marginLeft: '10px' }}
+                onClick={() => router.push('/volunteers/event/' + pid)}>
+                See sign-Ups
+              </Button>
+              {event.published ? (
+                <Button
+                  size="large"
+                  style={{ marginLeft: '10px' }}
+                  onClick={() => {}}>
+                  See Applications
+                </Button>
+              ) : (
+                <Button
+                  size="large"
+                  style={{ marginLeft: '10px' }}
+                  onClick={() =>
+                    router.push(router.basePath + pid + '/application')
+                  }>
+                  Add/Edit application
+                </Button>
+              )}
+
+              <Button
+                size="large"
+                style={{ marginLeft: '10px' }}
+                onClick={showDeleteConfirm}>
+                Publish
+              </Button>
+            </ConfigProvider>
+            {/* <Image src="/event/bookmarks.png" alt="" width={50} height={50} /> */}
           </ButtonContainer>
         </TextContainer>
       </MiddleBox>
 
       {/* edit button */}
       {showPopup && (
-        <EventPopupWindowForm event={event} setShowPopup={setShowPopup} />
+        <EventPopupWindowForm
+          event={event}
+          setShowPopup={setShowPopup}
+          mutate={fetchEvent}
+          messageApi={messageApi}
+        />
       )}
 
       {/* Time and Place of the event */}

components/Event/Header.tsx

@@ -13,7 +13,7 @@ const Header = () => {
   return (
     <HeaderBox>
       <Link href="#" onClick={() => window.history.back()}>
-        <Image src="/event/arrow-left.png" alt="" width={48} height={48} />
+        <Image src="/event/arrow-left.svg" alt="" width={48} height={48} />
       </Link>
       <EventDetailText>Event Details</EventDetailText>
     </HeaderBox>

components/Forms/EventPopupWindowForm.tsx

@@ -30,10 +30,14 @@ interface ModifiedVolunteerEventData
 
 const EventPopupWindowForm = ({
   setShowPopup,
+  mutate,
   event,
+  messageApi,
 }: {
   setShowPopup: React.Dispatch<React.SetStateAction<boolean>>;
+  mutate: () => void;
   event?: QueriedVolunteerEventDTO;
+  messageApi: any;
 }) => {
   const router = useRouter();
   const { pid } = router.query;
@@ -95,10 +99,23 @@ const EventPopupWindowForm = ({
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(data),
-    }).then(() => {
-      setLoading(false);
-      setShowPopup(false);
-    });
+    })
+      .then(() => {
+        setLoading(false);
+        setShowPopup(false);
+        mutate();
+        messageApi.open({
+          type: 'success',
+          content: 'Event has been updated',
+        });
+      })
+      .catch(err => {
+        console.error(err);
+        messageApi.open({
+          type: 'error',
+          content: 'Failed to update event',
+        });
+      });
   };
 
   const handleCreateEvent = (data: ModifiedVolunteerEventData) => {
@@ -108,10 +125,23 @@ const EventPopupWindowForm = ({
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(data),
-    }).then(() => {
-      setLoading(false);
-      setShowPopup(false);
-    });
+    })
+      .then(() => {
+        setLoading(false);
+        setShowPopup(false);
+        mutate();
+        messageApi.open({
+          type: 'success',
+          content: 'Event has been created',
+        });
+      })
+      .catch(err => {
+        console.error(err);
+        messageApi.open({
+          type: 'error',
+          content: 'Failed to create event',
+        });
+      });
   };
 
   const onSubmit = (data: any) => {
@@ -143,6 +173,7 @@ const EventPopupWindowForm = ({
       email: data.email,
       startDate: data.dateRange[0].format(),
       endDate: data.dateRange[1].format(),
+      published: false,
     };
     console.log(modifiedData);
 

components/Table/EventTable/EventTableImpl.tsx

@@ -238,7 +238,13 @@ const EventTableImpl = () => {
 
   return (
     <>
-      {showPopup && <EventPopupWindowForm setShowPopup={setShowPopup} />}
+      {showPopup && (
+        <EventPopupWindowForm
+          setShowPopup={setShowPopup}
+          mutate={mutate}
+          messageApi={messageApi}
+        />
+      )}
       {showPopupTag && <TagEventPopupWindow setShowPopup={setShowPopupTag} />}
       {showPopupAdd && <AddEventPopupWindow setShowPopup={setShowPopupAdd} />}
 
@@ -247,8 +253,6 @@ const EventTableImpl = () => {
         showPopup={showPopup}
         setShowPopupTag={setShowPopupTag}
         showPopupTag={showPopup}
-        setShowAddPopup={setShowPopupAdd}
-        showAddPopup={showPopupAdd}
         mutate={mutate}
       />
 

components/Table/EventTable/TableHeader.tsx

@@ -22,8 +22,6 @@ const TableHeader = ({
   showPopup,
   setShowPopupTag,
   showPopupTag,
-  setShowAddPopup,
-  showAddPopup,
   mutate,
 }: {
   setShowPopup: (a: boolean) => void;

components/Table/VolunteerTable/VolunteerTableImpl.tsx

@@ -77,7 +77,10 @@ const VolunteerTableImpl = () => {
   }, [mutate, data]);
 
   // check for errors and loading
-  if (error) return <div>Failed to load event table</div>;
+  if (error) {
+    console.error(error);
+    return <div>Failed to load volunteer table</div>;
+  }
   if (isLoading) return <div>Loading...</div>;
 
   return (