Merge pull request #63 from ChangePlusPlusVandy/create-program

Add events to program/tags
ChangePlusPlusVandy · Apr 15, 2024 · 28b9a7c · 28b9a7c
2 parents 960ae4c + 964794b
commit 28b9a7c
Show file tree

Hide file tree

Showing 10 changed files with 437 additions and 146 deletions.
diff --git a/components/Forms/AddEventPopupWindow.tsx b/components/Forms/AddEventPopupWindow.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+import PopupWindow from '@/components/PopupWindow';
+import Image from 'next/image';
+import { ExclamationCircleFilled } from '@ant-design/icons';
+import { QueriedTagData } from 'bookem-shared/src/types/database';
+import useSWR from 'swr';
+import { ObjectId } from 'mongodb';
+import { Modal, message } from 'antd';
+import { fetcher } from '@/utils/utils';
+
+const AddEventPopupWindow = ({
+  setShowPopup,
+}: {
+  setShowPopup: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  return (
+    <>
+      {/* ANTD message context holder */}
+
+      <PopupWindow hidePopup={() => setShowPopup(false)}>
+        <></>
+      </PopupWindow>
+    </>
+  );
+};
+
+export default AddEventPopupWindow;
diff --git a/components/Table/EventTable/EventTable.tsx b/components/Table/EventTable/EventTable.tsx
@@ -1,13 +1,13 @@
 import { EventDataIndex, EventRowData } from '@/utils/table-types';
-import { Button, Input, InputRef, Space, TableProps } from 'antd';
+import { Button, Input, InputRef, Space, TableProps, message } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
 import {
   ColumnType,
   FilterConfirmProps,
   SorterResult,
 } from 'antd/es/table/interface';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { createContext, useEffect, useRef, useState } from 'react';
 import Highlighter from 'react-highlight-words';
 import EventTableImpl from './EventTableImpl';
 import useSWR from 'swr';
@@ -17,21 +17,53 @@ import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
 import { useActiveRoute } from '@/lib/useActiveRoute';
 import ProgramEventTableImpl from './ProgramEventTableImpl';
 
+export const EventTableContext = createContext<{
+  getColumnSearchProps: (dataIndex: EventDataIndex) => ColumnType<EventRowData>;
+  sortedInfo: SorterResult<EventRowData>;
+  handleChange: TableProps<EventRowData>['onChange'];
+  filteredDataByTags: EventRowData[];
+  setFilteredDataByTags: (data: EventRowData[]) => void;
+  handleFilterByTags: (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    dataForTable: EventRowData[]
+  ) => void;
+  messageApi: any;
+  rowSelection: any;
+  setSelectedRowKeys;
+}>({
+  getColumnSearchProps: () => ({}),
+  sortedInfo: {},
+  handleChange: () => {},
+  filteredDataByTags: [],
+  setFilteredDataByTags: () => {},
+  handleFilterByTags: () => {},
+  messageApi: {},
+  rowSelection: {},
+  setSelectedRowKeys: () => {},
+});
+
 /**
  * Contains the "Functionality" part of Event Table including data fetching, search, filter and sort
  * @returns
  */
-const EventTable = ({
-  programId,
-  programname,
-}: {
-  programId?: string;
-  programname?: string;
-}) => {
+const EventTable = ({ programId }: { programId?: string }) => {
   const [sortedInfo, setSortedInfo] = useState<SorterResult<EventRowData>>({});
   const [searchText, setSearchText] = useState('');
   const [searchedColumn, setSearchedColumn] = useState('');
   const searchInput = useRef<InputRef>(null);
+  const [messageApi, contextHolder] = message.useMessage();
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const onSelectChange = newSelectedRowKeys => {
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+  // const hasSelected = selectedRowKeys.length > 0;
+  const handleAddEvent = () => {
+    console.log(selectedRowKeys);
+  };
 
   // Get current route string
   const route = useActiveRoute();
@@ -194,25 +226,24 @@ const EventTable = ({
   });
   return (
     <>
-      {route === '/event' && (
-        <EventTableImpl
-          getColumnSearchProps={getColumnSearchProps}
-          sortedInfo={sortedInfo}
-          handleChange={handleChange}
-          filteredDataByTags={filteredDataByTags}
-          setFilteredDataByTags={setFilteredDataByTags}
-          handleFilterByTags={handleFilterByTags}
-        />
-      )}
-      {route.startsWith('/events/program') && (
-        <ProgramEventTableImpl
-          programID={programId as string}
-          programName={programname as string}
-          getColumnSearchProps={getColumnSearchProps}
-          sortedInfo={sortedInfo}
-          handleChange={handleChange}
-        />
-      )}
+      {contextHolder}
+      <EventTableContext.Provider
+        value={{
+          getColumnSearchProps,
+          sortedInfo,
+          handleChange,
+          filteredDataByTags,
+          setFilteredDataByTags,
+          handleFilterByTags,
+          messageApi,
+          rowSelection,
+          setSelectedRowKeys,
+        }}>
+        {route === '/event' && <EventTableImpl />}
+        {route.startsWith('/events/program') && (
+          <ProgramEventTableImpl programID={programId as string} />
+        )}
+      </EventTableContext.Provider>
     </>
   );
 };

diff --git a/components/Table/EventTable/EventTableImpl.tsx b/components/Table/EventTable/EventTableImpl.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import {
   Table,
   TableProps,
@@ -32,34 +32,30 @@ import {
   FilterIcon,
   TagTitle,
 } from '@/styles/components/Table/EventTable.styles';
+import AddEventPopupWindow from '@/components/Forms/AddEventPopupWindow';
 import mongoose from 'mongoose';
 import { LOCALE_DATE_FORMAT } from '@/utils/constants';
+import { EventTableContext } from './EventTable';
 
 /**
  * Contains the "UI" part of Event Table
  * @returns
  */
-const EventTableImpl = ({
-  getColumnSearchProps,
-  sortedInfo,
-  handleChange,
-  filteredDataByTags,
-  setFilteredDataByTags,
-  handleFilterByTags,
-}: {
-  getColumnSearchProps: (dataIndex: EventDataIndex) => ColumnType<EventRowData>;
-  sortedInfo: SorterResult<EventRowData>;
-  handleChange: TableProps<EventRowData>['onChange'];
-  filteredDataByTags: EventRowData[];
-  setFilteredDataByTags: (data: EventRowData[]) => void;
-  handleFilterByTags: (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    dataForTable: EventRowData[]
-  ) => void;
-}) => {
+const EventTableImpl = () => {
+  const {
+    getColumnSearchProps,
+    sortedInfo,
+    handleChange,
+    filteredDataByTags,
+    setFilteredDataByTags,
+    handleFilterByTags,
+    messageApi,
+    rowSelection,
+  } = useContext(EventTableContext);
+
   const [showPopup, setShowPopup] = useState(false);
   const [showPopupTag, setShowPopupTag] = useState(false);
-  const [messageApi, contextHolder] = message.useMessage();
+  const [showPopupAdd, setShowPopupAdd] = useState(false);
 
   const [dataForTable, setDataForTable] = useState<EventRowData[]>([]);
   const { data, error, isLoading, mutate } = useSWR<QueriedVolunteerEventDTO[]>(
@@ -84,19 +80,6 @@ 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);
-  };
 
   const handleDeleteEvent = async (_id: mongoose.Types.ObjectId) => {
     const res = await fetch(`/api/event/${_id}`, {
@@ -252,19 +235,19 @@ const EventTableImpl = ({
 
   return (
     <>
-      {contextHolder}
       {showPopup && <EventPopupWindowForm setShowPopup={setShowPopup} />}
       {showPopupTag && <TagEventPopupWindow setShowPopup={setShowPopupTag} />}
-      {/* <Button type="primary" onClick={handleAddEvent} disabled={!hasSelected} /> */}
-      {/* {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''} */}
+      {showPopupAdd && <AddEventPopupWindow setShowPopup={setShowPopupAdd} />}
 
       <TableHeader
         setShowPopup={setShowPopup}
         showPopup={showPopup}
         setShowPopupTag={setShowPopupTag}
         showPopupTag={showPopup}
-        hasSelected={selectedRowKeys.length > 0}
-        numSelected={selectedRowKeys.length}></TableHeader>
+        setShowAddPopup={setShowPopupAdd}
+        showAddPopup={showPopupAdd}
+        mutate={mutate}
+      />
 
       <TableContainer>
         <div id="table-container">

diff --git a/components/Table/EventTable/ProgramEventTableImpl.tsx b/components/Table/EventTable/ProgramEventTableImpl.tsx
@@ -1,40 +1,26 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { Table, TableProps, Tag } from 'antd';
-import type {
-  ColumnType,
-  ColumnsType,
-  SorterResult,
-} from 'antd/es/table/interface';
-import { TableContainer, PageLayout } from '@/styles/table.styles';
+import type { ColumnsType } from 'antd/es/table/interface';
+import { TableContainer } from '@/styles/table.styles';
 import Link from 'next/link';
-import CreateEventPopupWindow from '@/components/Forms/EventPopupWindowForm';
-import TagEventPopupWindow from '@/components/Forms/TagEventPopupWindow';
-import { EventDataIndex, EventRowData } from '@/utils/table-types';
-import { fetcher, handleExport } from '@/utils/utils';
-import TableHeader from '@/components/Table/EventTable/TableHeader';
+import { EventRowData } from '@/utils/table-types';
+import { fetcher } from '@/utils/utils';
 import { convertEventDataToRowData } from '@/utils/table-utils';
 import useSWR from 'swr';
 import { QueriedVolunteerEventDTO } from 'bookem-shared/src/types/database';
 import { LOCALE_DATE_FORMAT } from '@/utils/constants';
+import { EventTableContext } from './EventTable';
 
 /**
  * Contains the "UI" part of Program Event Table
  * @returns
  */
-const ProgramEventTableImpl = ({
-  getColumnSearchProps,
-  sortedInfo,
-  handleChange,
-  programID,
-}: {
-  getColumnSearchProps: (dataIndex: EventDataIndex) => ColumnType<EventRowData>;
-  sortedInfo: SorterResult<EventRowData>;
-  handleChange: TableProps<EventRowData>['onChange'];
-  programID: string;
-  programName: string;
-}) => {
-  const [showPopup, setShowPopup] = useState(false);
-  const [showPopupTag, setShowPopupTag] = useState(false);
+const ProgramEventTableImpl = ({ programID }: { programID: string }) => {
+  const { sortedInfo, handleChange, getColumnSearchProps, rowSelection } =
+    useContext(EventTableContext);
+
+  // const [showPopup, setShowPopup] = useState(false);
+  // const [showPopupTag, setShowPopupTag] = useState(false);
 
   const [dataForTable, setDataForTable] = useState<EventRowData[]>([]);
   const { data, error, isLoading, mutate } = useSWR<QueriedVolunteerEventDTO[]>(
@@ -48,15 +34,6 @@ const ProgramEventTableImpl = ({
       revalidateOnReconnect: true,
     }
   );
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-
-  const onSelectChange = newSelectedRowKeys => {
-    setSelectedRowKeys(newSelectedRowKeys);
-  };
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: onSelectChange,
-  };
 
   // Extra defense to refetch data if needed
   useEffect(() => {
@@ -142,16 +119,15 @@ const ProgramEventTableImpl = ({
 
   return (
     <>
-      {showPopup && <CreateEventPopupWindow setShowPopup={setShowPopup} />}
-      {showPopupTag && <TagEventPopupWindow setShowPopup={setShowPopupTag} />}
-      <TableHeader
+      {/* {showPopup && <CreateEventPopupWindow setShowPopup={setShowPopup} />} */}
+      {/* {showPopupTag && <TagEventPopupWindow setShowPopup={setShowPopupTag} />} */}
+      {/* <TableHeader
         setShowPopup={setShowPopup}
         showPopup={showPopup}
         setShowPopupTag={setShowPopupTag}
         showPopupTag={showPopup}
-        hasSelected={selectedRowKeys.length > 0}
-        numSelected={selectedRowKeys.length}
-      />
+        mutate={mutate}
+      /> */}
       <TableContainer>
         <div id="table-container">
           <Table