From 8604e4324f56bd5ff746a793b4cbbf23d8fdb637 Mon Sep 17 00:00:00 2001
From: huongthaoh <121412317+huongthaoh@users.noreply.github.com>
Date: Sun, 3 Mar 2024 16:36:08 -0600
Subject: [PATCH 1/4] create program and multiselect event

---
 components/Forms/CreateProgramPopupWindow.tsx | 118 ++++++++++++++----
 .../table/event-table/EventTableImpl.tsx      |  23 +++-
 components/table/event-table/TableHeader.tsx  |  30 +++--
 .../table/program-table/ProgramTableImpl.tsx  |   2 +-
 pages/api/program/index.ts                    |  17 ++-
 styles/components/createProgram.styles.tsx    |  90 +++++++++++++
 styles/components/event.styles.tsx            |  13 +-
 styles/table.styles.tsx                       |  17 ++-
 8 files changed, 261 insertions(+), 49 deletions(-)
 create mode 100644 styles/components/createProgram.styles.tsx

diff --git a/components/Forms/CreateProgramPopupWindow.tsx b/components/Forms/CreateProgramPopupWindow.tsx
index 10f29b5..6144509 100644
--- a/components/Forms/CreateProgramPopupWindow.tsx
+++ b/components/Forms/CreateProgramPopupWindow.tsx
@@ -1,52 +1,116 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PopupWindow from '@/components/PopupWindow';
 import {
-  CreateEventContainer,
   CreateEventForm,
   FormLabel,
   FormHeader,
   InputFlex,
   FormInput,
   LargeFormInput,
-} from '@/styles/components/event.styles';
-import { LongFormInput } from '@/styles/components/editEventPopupWindowForm.styles';
+  LongFormInput,
+  CreateProgramContainer,
+} from '@/styles/components/createProgram.styles';
 import {
   SubmitButton,
   ButtonCenter,
 } from '@/styles/components/windowFlow.styles';
 import { useForm } from 'react-hook-form';
+import { VolunteerProgramData } from 'bookem-shared/src/types/database';
+import { fetcher } from '@/utils/utils';
+import useSWR from 'swr';
+import { Modal, message } from 'antd';
 
 const CreateProgramPopupWindow = ({
   setShowPopup,
 }: {
   setShowPopup: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const { handleSubmit } = useForm({});
-  const onSubmit = (data: any) => {};
+  const {
+    data: allPrograms,
+    isLoading,
+    error,
+    mutate, // Used to refetch the data
+  } = useSWR<VolunteerProgramData[]>('/api/program/', fetcher, {
+    onSuccess: data => {
+      console.log(allPrograms);
+    },
+  });
+  // ANTD message
+  const [messageApi, contextHolder] = message.useMessage();
+  const [programName, setProgramName] = useState('');
+  const [programDescription, setProgramDescription] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // check if the program name already exists
+    if (allPrograms?.some(p => p.name === programName)) {
+      messageApi.open({
+        type: 'warning',
+        content: 'Program name already exists.',
+      });
+    } else {
+      const response = await fetch('/api/program/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: programName,
+          description: programDescription,
+        }),
+      });
+      if (response.ok) {
+        const resObj = await response.json();
+        console.log('OK');
+        messageApi.open({
+          type: 'success',
+          content: 'Program created successfully',
+        });
+        mutate();
+      } else {
+        messageApi.open({
+          type: 'error',
+          content: 'Failed to create program',
+        });
+      }
+    }
+  };
+
   return (
-    <PopupWindow hidePopup={() => setShowPopup(false)}>
-      <CreateEventContainer>
-        <CreateEventForm>
-          <FormHeader>Create Program</FormHeader>
-          <FormLabel>Program Name</FormLabel>
-          <InputFlex>
-            <LongFormInput
-              type="text"
-              placeholder="Program Name"
-              pattern="[A-Za-z]"
-              title="Input must be text"
-            />
-          </InputFlex>
+    <>
+      {contextHolder}
+      <PopupWindow hidePopup={() => setShowPopup(false)}>
+        <CreateProgramContainer>
+          <CreateEventForm onSubmit={handleSubmit}>
+            <FormHeader>Create Program</FormHeader>
+            <FormLabel>Program Name</FormLabel>
+            <InputFlex>
+              <LongFormInput
+                type="text"
+                placeholder="Program Name"
+                title="Input must be text"
+                value={programName}
+                onChange={e => setProgramName(e.target.value)}
+                maxLength={50}
+              />
+            </InputFlex>
 
-          <FormLabel>Program Description</FormLabel>
-          <LargeFormInput placeholder="Program Description" />
+            <FormLabel>Program Description</FormLabel>
+            <LargeFormInput
+              placeholder="Program Description"
+              value={programDescription}
+              onChange={e => setProgramDescription(e.target.value)}
+              maxLength={250}
+            />
 
-          <ButtonCenter>
-            <SubmitButton onClick={handleSubmit(onSubmit)}>Create</SubmitButton>
-          </ButtonCenter>
-        </CreateEventForm>
-      </CreateEventContainer>
-    </PopupWindow>
+            <ButtonCenter>
+              <SubmitButton type="submit">Create</SubmitButton>
+            </ButtonCenter>
+          </CreateEventForm>
+        </CreateProgramContainer>
+      </PopupWindow>
+    </>
   );
 };
 
diff --git a/components/table/event-table/EventTableImpl.tsx b/components/table/event-table/EventTableImpl.tsx
index e11494b..a78e509 100644
--- a/components/table/event-table/EventTableImpl.tsx
+++ b/components/table/event-table/EventTableImpl.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Table, TableProps, Tag, Input, Popover } from 'antd';
+import { Table, TableProps, Tag, Input, Popover, Button } from 'antd';
 import type {
   ColumnType,
   ColumnsType,
@@ -69,6 +69,19 @@ const EventTableImpl = ({
   useEffect(() => {
     setFilteredDataByTags(dataForTable);
   }, [dataForTable, setFilteredDataByTags]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+
+  const onSelectChange = newSelectedRowKeys => {
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+  // const hasSelected = selectedRowKeys.length > 0;
+  const handleAddEvent = () => {
+    console.log(selectedRowKeys);
+  };
 
   // check for errors and loading
   if (error) return <div>Failed to load event table</div>;
@@ -193,15 +206,21 @@ const EventTableImpl = ({
     <>
       {showPopup && <CreateEventPopupWindow setShowPopup={setShowPopup} />}
       {showPopupTag && <TagEventPopupWindow setShowPopup={setShowPopupTag} />}
+      {/* <Button type="primary" onClick={handleAddEvent} disabled={!hasSelected} /> */}
+      {/* {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''} */}
+
       <TableHeader
         setShowPopup={setShowPopup}
         showPopup={showPopup}
         setShowPopupTag={setShowPopupTag}
         showPopupTag={showPopup}
-      />
+        hasSelected={selectedRowKeys.length > 0}
+        numSelected={selectedRowKeys.length}></TableHeader>
+
       <TableContainer>
         <div id="table-container">
           <Table
+            rowSelection={rowSelection}
             dataSource={filteredDataByTags}
             onChange={handleChange}
             columns={columns}
diff --git a/components/table/event-table/TableHeader.tsx b/components/table/event-table/TableHeader.tsx
index 0d157bc..eba56f0 100644
--- a/components/table/event-table/TableHeader.tsx
+++ b/components/table/event-table/TableHeader.tsx
@@ -1,4 +1,8 @@
-import { SearchContainter, TableButton } from '@/styles/table.styles';
+import {
+  SearchContainter,
+  TableButton,
+  TableIcon,
+} from '@/styles/table.styles';
 import React from 'react';
 import Image from 'next/image';
 import { Button } from 'antd';
@@ -9,17 +13,21 @@ const TableHeader = ({
   showPopup,
   setShowPopupTag,
   showPopupTag,
+  hasSelected,
+  numSelected,
 }: {
   setShowPopup: (a: boolean) => void;
   showPopup: boolean;
   setShowPopupTag: (a: boolean) => void;
   showPopupTag: boolean;
+  hasSelected: boolean;
+  numSelected: number;
 }) => {
   return (
     <>
       <div>
         <SearchContainter>
-          <TableButton>
+          <TableIcon>
             <Image
               onClick={() => setShowPopup(!showPopup)}
               src="/table/addbutton.png"
@@ -28,8 +36,8 @@ const TableHeader = ({
               height={32}
               style={{ marginRight: 20 }}
             />
-          </TableButton>
-          <TableButton>
+          </TableIcon>
+          <TableIcon>
             <Image
               onClick={() => {
                 setShowPopup(false);
@@ -40,17 +48,13 @@ const TableHeader = ({
               width={32}
               height={32}
             />
+          </TableIcon>
+          <TableButton disabled={!hasSelected}>
+            {numSelected > 0 ? `Add ${numSelected} events` : 'Add event'}
           </TableButton>
-          <Button
-            onClick={() => handleExport('events')}
-            style={{
-              width: 250,
-              marginLeft: 90,
-              backgroundColor: 'darkgray',
-              color: 'whitesmoke',
-            }}>
+          <TableButton onClick={() => handleExport('events')}>
             Export
-          </Button>
+          </TableButton>
         </SearchContainter>
       </div>
     </>
diff --git a/components/table/program-table/ProgramTableImpl.tsx b/components/table/program-table/ProgramTableImpl.tsx
index 2d90d85..57c2236 100644
--- a/components/table/program-table/ProgramTableImpl.tsx
+++ b/components/table/program-table/ProgramTableImpl.tsx
@@ -5,7 +5,7 @@ import { TableContainer } from '@/styles/table.styles';
 import { Button } from 'antd';
 import { ProgramDataIndex, ProgramRowData } from '@/utils/table-types';
 import { ColumnType, ColumnsType } from 'antd/es/table';
-import { Table } from 'antd';
+import { Table, Divider, Radio } from 'antd';
 
 const ProgramTableImpl = ({
   getColumnSearchProps,
diff --git a/pages/api/program/index.ts b/pages/api/program/index.ts
index 9520672..ed20506 100644
--- a/pages/api/program/index.ts
+++ b/pages/api/program/index.ts
@@ -1,7 +1,6 @@
 import dbConnect from '@/lib/dbConnect';
 import Users from 'bookem-shared/src/models/Users';
 import VolunteerPrograms from 'bookem-shared/src/models/VolunteerPrograms';
-import Tags from 'bookem-shared/src/models/Tags';
 import {
   QueriedUserData,
   QueriedVolunteerProgramData,
@@ -34,6 +33,22 @@ export default async function handler(
       }
       break;
 
+    case 'POST':
+      try {
+        await dbConnect();
+        const { name, description } = req.body;
+        const program = new VolunteerPrograms({
+          name: name,
+          description: description,
+        });
+        await program.save();
+        return res.status(200).json(program);
+      } catch (error) {
+        console.error(error);
+        res.status(500).json({ message: 'Server error' });
+      }
+      break;
+
     // case 'PUT':
     // case 'DELETE':
     // default:
diff --git a/styles/components/createProgram.styles.tsx b/styles/components/createProgram.styles.tsx
new file mode 100644
index 0000000..2ced74b
--- /dev/null
+++ b/styles/components/createProgram.styles.tsx
@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+
+export const CreateEventContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  overflow-y: scroll;
+  height: 100%;
+`;
+
+export const CreateProgramContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+`;
+
+export const FormHeader = styled.legend`
+  font-weight: bold;
+  font-size: 2em;
+  text-align: center;
+  width: 400px;
+  margin: 20px 0;
+`;
+
+export const CreateEventForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin: 30px;
+  padding-bottom: 50px;
+`;
+
+export const FormLabel = styled.label`
+  margin-top: 25px;
+  font-weight: bold;
+`;
+
+export const FormInput = styled.input`
+  margin: 10px 10px 0 0;
+  border-radius: 10px;
+  height: 25px;
+  width: 200px;
+  padding: 10px;
+`;
+
+export const InputFlex = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const ShortFormInput = styled.input`
+  margin: 15px 10px 0 0;
+  border-radius: 10px;
+  height: 25px;
+  width: 35px;
+  text-align: center;
+  padding: 10px;
+`;
+
+export const LongFormInput = styled.input`
+  margin: 15px 10px 0 0;
+  border-radius: 10px;
+  height: 30px;
+  width: 410px;
+  padding: 15px 10px;
+  border: 1px solid black;
+`;
+
+export const LargeFormInput = styled.textarea`
+  margin-top: 20px;
+  border-radius: 10px;
+  width: 100%;
+  max-width: 410px;
+  height: 100px;
+  max-height: 300px;
+  font-family: 'Times New Roman', serif;
+  font-size: 1em;
+  resize: vertical;
+  padding: 10px;
+`;
+
+export const FormLogistics = styled.div`
+  margin: 17px 10px 0 0;
+  font-weight: normal;
+`;
+
+export const AboutEvent = styled.div`
+  width: 100%;
+`;
diff --git a/styles/components/event.styles.tsx b/styles/components/event.styles.tsx
index df46bfc..286620d 100644
--- a/styles/components/event.styles.tsx
+++ b/styles/components/event.styles.tsx
@@ -8,11 +8,19 @@ export const CreateEventContainer = styled.div`
   height: 100%;
 `;
 
+export const CreateProgramContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+`;
+
 export const FormHeader = styled.legend`
   font-weight: bold;
   font-size: 2em;
   text-align: center;
   width: 400px;
+  margin: 20px 0;
 `;
 
 export const CreateEventForm = styled.div`
@@ -53,9 +61,10 @@ export const ShortFormInput = styled.input`
 export const LongFormInput = styled.input`
   margin: 15px 10px 0 0;
   border-radius: 10px;
-  height: 25px;
+  height: 30px;
   width: 410px;
-  padding: 10px;
+  padding: 15px 10px;
+  border: 1px solid black;
 `;
 
 export const LargeFormInput = styled.textarea`
diff --git a/styles/table.styles.tsx b/styles/table.styles.tsx
index 27a946e..fb36f47 100644
--- a/styles/table.styles.tsx
+++ b/styles/table.styles.tsx
@@ -1,4 +1,4 @@
-import { Table, Typography } from 'antd';
+import { Button, Table, Typography } from 'antd';
 import styled from 'styled-components';
 
 export const PageLayout = styled.div`
@@ -14,7 +14,8 @@ export const PageTitle = styled.p`
 
 export const SearchContainter = styled.div`
   display: flex;
-  margin-left: 1000px;
+  justify-content: flex-end;
+  /* margin-left: 1000px; */
 `;
 
 export const TableContainer = styled.div`
@@ -40,8 +41,18 @@ export const BottomRow = styled.div`
   border-radius: 10px;
 `;
 
-export const TableButton = styled.div`
+export const TableIcon = styled.div`
   &:hover {
     cursor: pointer;
   }
+  /* margin: 0 5px; */
+`;
+
+export const TableButton = styled(Button)`
+  width: 150px;
+  padding: 10px;
+  margin: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;

From 7fe26c6b24afe188c06f97d2fb590bcd38c8a45b Mon Sep 17 00:00:00 2001
From: huongthaoh <121412317+huongthaoh@users.noreply.github.com>
Date: Sun, 3 Mar 2024 16:42:23 -0600
Subject: [PATCH 2/4] fix button formatting

---
 .../table/program-table/TableHeader.tsx       | 21 ++++++++-----------
 styles/table.styles.tsx                       |  1 +
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/components/table/program-table/TableHeader.tsx b/components/table/program-table/TableHeader.tsx
index d579576..08ee247 100644
--- a/components/table/program-table/TableHeader.tsx
+++ b/components/table/program-table/TableHeader.tsx
@@ -1,4 +1,8 @@
-import { SearchContainter, TableButton } from '@/styles/table.styles';
+import {
+  SearchContainter,
+  TableButton,
+  TableIcon,
+} from '@/styles/table.styles';
 import React from 'react';
 import Image from 'next/image';
 import { Button } from 'antd';
@@ -14,7 +18,7 @@ const TableHeader = ({
   return (
     <>
       <SearchContainter>
-        <TableButton onClick={() => setShowPopUp(!showPopUp)}>
+        <TableIcon onClick={() => setShowPopUp(!showPopUp)}>
           <Image
             src="/table/addbutton.png"
             alt=""
@@ -22,17 +26,10 @@ const TableHeader = ({
             height={32}
             style={{ marginLeft: 150 }}
           />
-        </TableButton>
-        <Button
-          onClick={() => handleExport('programs')}
-          style={{
-            width: 250,
-            marginLeft: 90,
-            backgroundColor: 'darkgray',
-            color: 'whitesmoke',
-          }}>
+        </TableIcon>
+        <TableButton onClick={() => handleExport('programs')}>
           Export
-        </Button>
+        </TableButton>
       </SearchContainter>
     </>
   );
diff --git a/styles/table.styles.tsx b/styles/table.styles.tsx
index fb36f47..c3b9de5 100644
--- a/styles/table.styles.tsx
+++ b/styles/table.styles.tsx
@@ -55,4 +55,5 @@ export const TableButton = styled(Button)`
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: ${props => props.theme.colors.BOOKEM_LIGHT_GRAY};
 `;

From c95490478026f2cd43aad2e22fdc1fc21d3baadd Mon Sep 17 00:00:00 2001
From: Harry Huang <jiashu.huang@vanderbilt.edu>
Date: Thu, 7 Mar 2024 19:53:37 -0600
Subject: [PATCH 3/4] Revert unused import

---
 components/table/program-table/ProgramTableImpl.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/table/program-table/ProgramTableImpl.tsx b/components/table/program-table/ProgramTableImpl.tsx
index 57c2236..2d90d85 100644
--- a/components/table/program-table/ProgramTableImpl.tsx
+++ b/components/table/program-table/ProgramTableImpl.tsx
@@ -5,7 +5,7 @@ import { TableContainer } from '@/styles/table.styles';
 import { Button } from 'antd';
 import { ProgramDataIndex, ProgramRowData } from '@/utils/table-types';
 import { ColumnType, ColumnsType } from 'antd/es/table';
-import { Table, Divider, Radio } from 'antd';
+import { Table } from 'antd';
 
 const ProgramTableImpl = ({
   getColumnSearchProps,

From ed3daee2220b6a644ff32e7d6cc26dbbf0eeb17e Mon Sep 17 00:00:00 2001
From: Harry Huang <jiashu.huang@vanderbilt.edu>
Date: Thu, 7 Mar 2024 20:05:51 -0600
Subject: [PATCH 4/4] Handle response message and move context one level above

---
 components/Forms/CreateProgramPopupWindow.tsx       |  9 +++++----
 components/table/program-table/ProgramTableImpl.tsx | 11 +++++++++--
 pages/api/program/index.ts                          |  7 +++----
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/components/Forms/CreateProgramPopupWindow.tsx b/components/Forms/CreateProgramPopupWindow.tsx
index 6144509..6bca7a3 100644
--- a/components/Forms/CreateProgramPopupWindow.tsx
+++ b/components/Forms/CreateProgramPopupWindow.tsx
@@ -22,8 +22,10 @@ import { Modal, message } from 'antd';
 
 const CreateProgramPopupWindow = ({
   setShowPopup,
+  messageApi,
 }: {
   setShowPopup: React.Dispatch<React.SetStateAction<boolean>>;
+  messageApi: any;
 }) => {
   const {
     data: allPrograms,
@@ -36,7 +38,6 @@ const CreateProgramPopupWindow = ({
     },
   });
   // ANTD message
-  const [messageApi, contextHolder] = message.useMessage();
   const [programName, setProgramName] = useState('');
   const [programDescription, setProgramDescription] = useState('');
 
@@ -62,12 +63,13 @@ const CreateProgramPopupWindow = ({
       });
       if (response.ok) {
         const resObj = await response.json();
-        console.log('OK');
+        console.log(resObj);
         messageApi.open({
           type: 'success',
-          content: 'Program created successfully',
+          content: resObj.message,
         });
         mutate();
+        setShowPopup(false);
       } else {
         messageApi.open({
           type: 'error',
@@ -79,7 +81,6 @@ const CreateProgramPopupWindow = ({
 
   return (
     <>
-      {contextHolder}
       <PopupWindow hidePopup={() => setShowPopup(false)}>
         <CreateProgramContainer>
           <CreateEventForm onSubmit={handleSubmit}>
diff --git a/components/table/program-table/ProgramTableImpl.tsx b/components/table/program-table/ProgramTableImpl.tsx
index 2d90d85..7275e85 100644
--- a/components/table/program-table/ProgramTableImpl.tsx
+++ b/components/table/program-table/ProgramTableImpl.tsx
@@ -2,7 +2,7 @@ import CreateProgramPopupWindow from '@/components/Forms/CreateProgramPopupWindo
 import React, { useState } from 'react';
 import TableHeader from './TableHeader';
 import { TableContainer } from '@/styles/table.styles';
-import { Button } from 'antd';
+import { Button, message } from 'antd';
 import { ProgramDataIndex, ProgramRowData } from '@/utils/table-types';
 import { ColumnType, ColumnsType } from 'antd/es/table';
 import { Table } from 'antd';
@@ -17,6 +17,7 @@ const ProgramTableImpl = ({
   dataForTable: ProgramRowData[];
 }) => {
   const [showPopUp, setShowPopUp] = useState(false);
+  const [messageApi, contextHolder] = message.useMessage();
 
   const columns: ColumnsType<ProgramRowData> = [
     {
@@ -39,7 +40,13 @@ const ProgramTableImpl = ({
   ];
   return (
     <>
-      {showPopUp && <CreateProgramPopupWindow setShowPopup={setShowPopUp} />}
+      {contextHolder}
+      {showPopUp && (
+        <CreateProgramPopupWindow
+          messageApi={messageApi}
+          setShowPopup={setShowPopUp}
+        />
+      )}
       <div>
         <TableHeader setShowPopUp={setShowPopUp} showPopUp={showPopUp} />
         <TableContainer>
diff --git a/pages/api/program/index.ts b/pages/api/program/index.ts
index ed20506..4040901 100644
--- a/pages/api/program/index.ts
+++ b/pages/api/program/index.ts
@@ -13,9 +13,6 @@ export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  // Get session user
-  const session = await getServerSession(req, res, authOptions);
-
   switch (req.method) {
     /**
      * @route GET /api/program/
@@ -42,7 +39,9 @@ export default async function handler(
           description: description,
         });
         await program.save();
-        return res.status(200).json(program);
+        return res
+          .status(200)
+          .json({ message: 'Program created successfully' });
       } catch (error) {
         console.error(error);
         res.status(500).json({ message: 'Server error' });