From 343071a28044e2b9f0d38dadf0d5f89f52174d5f Mon Sep 17 00:00:00 2001
From: helenailic <helenailic278@gmail.com>
Date: Mon, 8 Dec 2025 18:02:03 -0600
Subject: [PATCH 1/2] able to delete events now

---
 .eslintrc.json                                |  22 +-
 .github/workflows/node.js.yml                 |  47 ++-
 .prettierrc                                   |   2 +-
 404.html                                      |  49 ++--
 index.html                                    |  12 +-
 src/App.tsx                                   |   4 +-
 src/api.ts                                    |   4 +-
 src/pages/Events/ConfirmationModal/index.tsx  |  73 +++++
 src/pages/Events/ConfirmationModal/types.d.ts |   9 +
 src/pages/Events/EventModal/index.tsx         | 277 ++++++++++--------
 src/pages/Events/QRCodeModal/index.tsx        |   4 +-
 vercel.json                                   |   2 +-
 12 files changed, 309 insertions(+), 196 deletions(-)
 create mode 100644 src/pages/Events/ConfirmationModal/index.tsx
 create mode 100644 src/pages/Events/ConfirmationModal/types.d.ts
diff --git a/.eslintrc.json b/.eslintrc.json
index 6ddc340..4025368 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -8,19 +8,10 @@
     "standard-with-typescript",
     "prettier"
   ],
-  "plugins": [
-    "react",
-    "prettier"
-  ],
+  "plugins": ["react", "prettier"],
   "rules": {
-    "semi": [
-      1,
-      "always"
-    ],
-    "quotes": [
-      2,
-      "single"
-    ],
+    "semi": [1, "always"],
+    "quotes": [2, "single"],
     "max-len": ["error", { "code": 80 }],
     "no-unused-vars": 1,
     "multiline-ternary": 0,
@@ -45,14 +36,11 @@
   },
   "overrides": [
     {
-      "files": [
-        "vite.config.ts",
-        ".eslintrc.cjs"
-      ],
+      "files": ["vite.config.ts", ".eslintrc.cjs"],
       "parserOptions": {
         "parser": "@typescript-eslint/parser",
         "project": "./tsconfig.json"
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 16c6e96..1d8d5dc 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
 
 permissions: write-all
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,25 +19,25 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v4
-
-    - name: Setup Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Install dependencies
-      run: npm install
-
-    - name: Build
-      run: npm run build
-
-    - name: Upload artifact
-      uses: actions/upload-pages-artifact@v3
-      with:
-        # Upload dist folder
-        path: './dist'
-  
-    - name: Deploy to GitHub Pages
-      id: deployment
-      uses: actions/deploy-pages@v4
\ No newline at end of file
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: './dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.prettierrc b/.prettierrc
index a1bd96f..aa458dd 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,4 +3,4 @@
   "trailingComma": "none",
   "singleQuote": true,
   "printWidth": 80
-}
\ No newline at end of file
+}
diff --git a/404.html b/404.html
index d92ab20..cf8dd7f 100644
--- a/404.html
+++ b/404.html
@@ -1,25 +1,28 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>WCS Points</title>
-  <script type="text/javascript">
-    // handles redirects for single page apps on GitHub Pages
-    var segmentCount = 0;
-    var location = window.location;
-    
-    // redirect to the index.html with a special query parameter containing the path
-    location.replace(
-      location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') +
-      '/' +
-      '?path=' + 
-      location.pathname.slice(1).split('/').slice(segmentCount).join('/') +
-      (location.search || '') +
-      (location.hash || '')
-    );
-  </script>
-</head>
-<body>
-  Redirecting...
-</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="utf-8" />
+    <title>WCS Points</title>
+    <script type="text/javascript">
+      // handles redirects for single page apps on GitHub Pages
+      var segmentCount = 0;
+      var location = window.location;
+
+      // redirect to the index.html with a special query parameter containing the path
+      location.replace(
+        location.protocol +
+          '//' +
+          location.hostname +
+          (location.port ? ':' + location.port : '') +
+          '/' +
+          '?path=' +
+          location.pathname.slice(1).split('/').slice(segmentCount).join('/') +
+          (location.search || '') +
+          (location.hash || '')
+      );
+    </script>
+  </head>
+  <body>
+    Redirecting...
+  </body>
+</html>
diff --git a/index.html b/index.html
index 7f2bd28..1fc3a16 100644
--- a/index.html
+++ b/index.html
@@ -7,17 +7,17 @@
     <title>WCS Points</title>
     <script type="text/javascript">
       // Thandles the redirect from 404.html
-      (function() {
+      (function () {
         var path = window.location.search.match(/path=([^&]*)/);
         if (path) {
           var originalPath = path[1];
           var search = window.location.search.replace(/path=[^&]*(&|$)/, '');
           search = search === '?' ? '' : search;
-          
-          window.history.replaceState(null, null, 
-            '/' + originalPath + 
-            (search || '') + 
-            (window.location.hash || '')
+
+          window.history.replaceState(
+            null,
+            null,
+            '/' + originalPath + (search || '') + (window.location.hash || '')
           );
         }
       })();
diff --git a/src/App.tsx b/src/App.tsx
index 34b3c9f..5aee75c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,7 +31,9 @@ const App = (): React.ReactElement => {
       window.location.href = `${newUrl}#/loading/${eventKey}`;
 
       // Force a reload to ensure the component loads fresh
-      setTimeout(() => { window.location.reload(); }, 100);
+      setTimeout(() => {
+        window.location.reload();
+      }, 100);
     }
   }, []);
 
diff --git a/src/api.ts b/src/api.ts
index e7db920..4b09065 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -3,8 +3,8 @@ import axios from 'axios';
 const instance = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL
     ? import.meta.env.VITE_BASE_URL
-    : // : 'http://127.0.0.1:3000',
-      'https://points-api.illinoiswcs.org',
+    : 'http://127.0.0.1:3000',
+  // 'https://points-api.illinoiswcs.org',
   withCredentials: true
 });
 
diff --git a/src/pages/Events/ConfirmationModal/index.tsx b/src/pages/Events/ConfirmationModal/index.tsx
new file mode 100644
index 0000000..e1fc288
--- /dev/null
+++ b/src/pages/Events/ConfirmationModal/index.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import {
+  Modal,
+  ModalCloseButton,
+  ModalHeader,
+  ModalOverlay,
+  ModalBody,
+  ModalContent,
+  Box,
+  Button,
+  FormLabel,
+  ModalFooter
+} from '@chakra-ui/react';
+import { ConfirmationModalProps } from './types';
+import { useMutation } from 'react-query';
+import axiosInstance from '../../../api';
+import { Event } from '../../../types/event';
+
+const ConfirmationModal = (
+  props: ConfirmationModalProps
+): React.ReactElement => {
+  const [hasDeleted, setHasDeleted] = useState(false);
+  const { open, event, toggleConfirmationModal } = props;
+
+  const deleteEvent = useMutation({
+    mutationFn: async (event: Event): Promise<void> => {
+      await axiosInstance.delete(`/events/${event._id}`);
+    }
+  });
+
+  const handleEventDeletion = async (): Promise<void> => {
+    if (!event) return;
+
+    await deleteEvent.mutateAsync(event);
+    if (!hasDeleted) {
+      setHasDeleted(true);
+    }
+
+    window.location.reload();
+  };
+
+  const clearAndToggleOnNo = (): void => {
+    toggleConfirmationModal();
+  };
+
+  return (
+    <Modal isOpen={open} onClose={clearAndToggleOnNo} isCentered>
+      <ModalOverlay />
+      <ModalContent p="10">
+        <ModalCloseButton />
+        <ModalHeader>
+          <Box>{event?.name} Event Deletion</Box>
+        </ModalHeader>
+        <ModalBody>
+          <FormLabel>Do you really want to delete this event?</FormLabel>
+          <ModalFooter>
+            <Button
+              onClick={() => {
+                handleEventDeletion().catch(console.error);
+              }}
+              style={{ marginRight: '10px' }}
+            >
+              Yes
+            </Button>
+            <Button onClick={clearAndToggleOnNo}>No</Button>
+          </ModalFooter>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/src/pages/Events/ConfirmationModal/types.d.ts b/src/pages/Events/ConfirmationModal/types.d.ts
new file mode 100644
index 0000000..2a95a65
--- /dev/null
+++ b/src/pages/Events/ConfirmationModal/types.d.ts
@@ -0,0 +1,9 @@
+import { Event } from '../../../types/event';
+
+export interface ConfirmationModalProps {
+  open: boolean;
+  event?: Event;
+  toggleConfirmationModal: () => void;
+  toggleEventModal: () => void;
+  reloadOnClose: () => void;
+}
diff --git a/src/pages/Events/EventModal/index.tsx b/src/pages/Events/EventModal/index.tsx
index 781e56d..8981dae 100644
--- a/src/pages/Events/EventModal/index.tsx
+++ b/src/pages/Events/EventModal/index.tsx
@@ -28,6 +28,7 @@ import EventQRCode from '../EventQRCode';
 import axiosInstance from '../../../api';
 import { EventCategoryType, NewEvent, Event } from '../../../types/event';
 import { EventModalProps, StringFieldProps, SameDayFieldProps } from './types';
+import ConfirmationModal from '../ConfirmationModal';
 
 const EventModal = (props: EventModalProps): React.ReactElement => {
   const { open, event, toggleModal, reloadOnClose } = props;
@@ -55,6 +56,9 @@ const EventModal = (props: EventModalProps): React.ReactElement => {
   const [eventKey, setEventKey] = useState<string | null>(null);
 
   const [hasSubmitted, setHasSubmitted] = useState(false);
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+  const [confirmationModalReloadOnClose, setConfirmationModalReloadOnClose] =
+    useState(false);
 
   const handleNameChange = (props: StringFieldProps): void => {
     setName(props.target.value);
@@ -163,6 +167,17 @@ const EventModal = (props: EventModalProps): React.ReactElement => {
     toggleModal();
   };
 
+  const handleToggleConfirmationModal = (): void => {
+    setShowConfirmationModal(!showConfirmationModal);
+    if (confirmationModalReloadOnClose) {
+      window.location.reload();
+    }
+  };
+
+  const handleReloadOnClose = (): void => {
+    setConfirmationModalReloadOnClose(!confirmationModalReloadOnClose);
+  };
+
   useEffect(() => {
     if (event) {
       const eventStart = new Date(event.start);
@@ -268,6 +283,11 @@ const EventModal = (props: EventModalProps): React.ReactElement => {
     }
   });
 
+  const handleEventDeletion = (): void => {
+    if (!event) return;
+    setShowConfirmationModal(true);
+  };
+
   const validateEvent = (): void => {
     if (validateFields()) {
       const start = new Date(`${startDate} ${startTime}`);
@@ -315,133 +335,150 @@ const EventModal = (props: EventModalProps): React.ReactElement => {
   ];
 
   return (
-    <Modal isOpen={open} onClose={clearAndToggle} isCentered>
-      <ModalOverlay />
-      <ModalContent p="10" minW="50%">
-        <ModalHeader>
-          {' '}
-          {!event?._id ? 'Create a New Event' : 'Edit Event'}{' '}
-          <ModalCloseButton />
-        </ModalHeader>
-        <ModalBody>
-          <Stack spacing="3">
-            <FormControl isRequired width="100%">
-              <FormLabel>Name</FormLabel>
-              <Input
-                placeholder="i.e. October General Meeting"
-                onChange={handleNameChange}
-                value={name}
-              />
-            </FormControl>
-            <HStack>
-              <FormControl isRequired>
-                <FormLabel>Category</FormLabel>
-                <Select onChange={handleCategoryChange} value={category}>
-                  {categories.map((category, id) => (
-                    <option value={category.value} key={id}>
-                      {category.label}
-                    </option>
-                  ))}
-                </Select>
-              </FormControl>
-              <FormControl isRequired>
-                <FormLabel>Visibility</FormLabel>
-                <Select onChange={handleVisibilityChange} value={visibility}>
-                  <option value="public">Public</option>
-                  <option value="private">Private</option>
-                </Select>
-              </FormControl>
-            </HStack>
-            <FormControl isInvalid={pointsErr} isRequired>
-              <FormLabel>Points</FormLabel>
-              <NumberInput min={0.5} max={4} onChange={handlePointsChange}>
-                <NumberInputField />
-              </NumberInput>
-            </FormControl>
-            <HStack>
-              <FormControl isRequired isInvalid={startDateErr}>
-                <FormLabel>Start Date</FormLabel>
-                <Input
-                  onChange={handleStartDateChange}
-                  value={startDate}
-                  type="date"
-                />
-              </FormControl>
-              <FormControl isRequired isInvalid={startTimeErr}>
-                <FormLabel>Start Time</FormLabel>
+    <>
+      <Modal isOpen={open} onClose={clearAndToggle} isCentered>
+        <ModalOverlay />
+        <ModalContent p="10" minW="50%">
+          <ModalHeader>
+            {' '}
+            {!event?._id ? 'Create a New Event' : 'Edit Event'}{' '}
+            <ModalCloseButton />
+          </ModalHeader>
+          <ModalBody>
+            <Stack spacing="3">
+              <FormControl isRequired width="100%">
+                <FormLabel>Name</FormLabel>
                 <Input
-                  onChange={handleStartTimeChange}
-                  value={startTime}
-                  type="time"
+                  placeholder="i.e. October General Meeting"
+                  onChange={handleNameChange}
+                  value={name}
                 />
               </FormControl>
-            </HStack>
-            <HStack>
-              <FormControl isRequired={!sameDay} isInvalid={endDateErr}>
-                <FormLabel>End Date</FormLabel>
-                <Input
-                  type="date"
-                  onChange={handleEndDateChange}
-                  value={sameDay ? startDate : endDate}
-                  disabled={sameDay}
-                />
-              </FormControl>
-              <FormControl isRequired isInvalid={endTimeErr}>
-                <FormLabel>End Time</FormLabel>
-                <Input
-                  type="time"
-                  onChange={handleEndTimeChange}
-                  value={endTime}
-                />
+              <HStack>
+                <FormControl isRequired>
+                  <FormLabel>Category</FormLabel>
+                  <Select onChange={handleCategoryChange} value={category}>
+                    {categories.map((category, id) => (
+                      <option value={category.value} key={id}>
+                        {category.label}
+                      </option>
+                    ))}
+                  </Select>
+                </FormControl>
+                <FormControl isRequired>
+                  <FormLabel>Visibility</FormLabel>
+                  <Select onChange={handleVisibilityChange} value={visibility}>
+                    <option value="public">Public</option>
+                    <option value="private">Private</option>
+                  </Select>
+                </FormControl>
+              </HStack>
+              <FormControl isInvalid={pointsErr} isRequired>
+                <FormLabel>Points</FormLabel>
+                <NumberInput min={0.5} max={4} onChange={handlePointsChange}>
+                  <NumberInputField />
+                </NumberInput>
               </FormControl>
-            </HStack>
-            <FormControl>
               <HStack>
-                <Checkbox
-                  onChange={handleSameDayChange}
-                  isChecked={sameDay}
-                  iconColor="pink"
-                />
-                <FormLabel>Same day</FormLabel>
+                <FormControl isRequired isInvalid={startDateErr}>
+                  <FormLabel>Start Date</FormLabel>
+                  <Input
+                    onChange={handleStartDateChange}
+                    value={startDate}
+                    type="date"
+                  />
+                </FormControl>
+                <FormControl isRequired isInvalid={startTimeErr}>
+                  <FormLabel>Start Time</FormLabel>
+                  <Input
+                    onChange={handleStartTimeChange}
+                    value={startTime}
+                    type="time"
+                  />
+                </FormControl>
               </HStack>
-            </FormControl>
-            {success && (
-              <Alert status="success" variant="left-accent">
-                <HStack w="100%" alignItems="center" spacing={4}>
-                  <AlertIcon />
-                  <Box>{msg}</Box>
-                  {eventKey && (
-                    <Box ml="auto">
-                      <EventQRCode
-                        eventKey={eventKey}
-                        size={84}
-                        color={'#d4696a'}
-                        inNotification={true}
-                      />
-                    </Box>
-                  )}
+              <HStack>
+                <FormControl isRequired={!sameDay} isInvalid={endDateErr}>
+                  <FormLabel>End Date</FormLabel>
+                  <Input
+                    type="date"
+                    onChange={handleEndDateChange}
+                    value={sameDay ? startDate : endDate}
+                    disabled={sameDay}
+                  />
+                </FormControl>
+                <FormControl isRequired isInvalid={endTimeErr}>
+                  <FormLabel>End Time</FormLabel>
+                  <Input
+                    type="time"
+                    onChange={handleEndTimeChange}
+                    value={endTime}
+                  />
+                </FormControl>
+              </HStack>
+              <FormControl>
+                <HStack>
+                  <Checkbox
+                    onChange={handleSameDayChange}
+                    isChecked={sameDay}
+                    iconColor="pink"
+                  />
+                  <FormLabel>Same day</FormLabel>
                 </HStack>
-              </Alert>
-            )}
-            {error && (
-              <Alert status="error" variant="left-accent">
-                <AlertIcon />
-                {msg}
-              </Alert>
-            )}
-          </Stack>
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            type="submit"
-            onClick={validateEvent}
-            isDisabled={!event?._id && hasSubmitted}
-          >
-            Submit
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+              </FormControl>
+              {success && (
+                <Alert status="success" variant="left-accent">
+                  <HStack w="100%" alignItems="center" spacing={4}>
+                    <AlertIcon />
+                    <Box>{msg}</Box>
+                    {eventKey && (
+                      <Box ml="auto">
+                        <EventQRCode
+                          eventKey={eventKey}
+                          size={84}
+                          color={'#d4696a'}
+                          inNotification={true}
+                        />
+                      </Box>
+                    )}
+                  </HStack>
+                </Alert>
+              )}
+              {error && (
+                <Alert status="error" variant="left-accent">
+                  <AlertIcon />
+                  {msg}
+                </Alert>
+              )}
+            </Stack>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              type="delete"
+              onClick={handleEventDeletion}
+              isDisabled={!event?._id}
+              style={{ marginRight: '10px' }}
+            >
+              Delete
+            </Button>
+            <Button
+              type="submit"
+              onClick={validateEvent}
+              isDisabled={!event?._id && hasSubmitted}
+            >
+              Submit
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      <ConfirmationModal
+        open={showConfirmationModal}
+        event={event}
+        toggleConfirmationModal={handleToggleConfirmationModal}
+        toggleEventModal={toggleModal}
+        reloadOnClose={handleReloadOnClose}
+      />
+    </>
   );
 };
 
diff --git a/src/pages/Events/QRCodeModal/index.tsx b/src/pages/Events/QRCodeModal/index.tsx
index d1da86c..9e2761c 100644
--- a/src/pages/Events/QRCodeModal/index.tsx
+++ b/src/pages/Events/QRCodeModal/index.tsx
@@ -38,7 +38,9 @@ const QRCodeModal = (props: QRCodeModalProps): React.ReactElement => {
         });
       };
       window.addEventListener('resize', handleResize);
-      return () => { window.removeEventListener('resize', handleResize); };
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
     }, []);
 
     return dimensions;
diff --git a/vercel.json b/vercel.json
index 41be2e9..9a45c90 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1 +1 @@
-{ "rewrites": [{ "source": "/(.*)", "destination": "/" }] }
\ No newline at end of file
+{ "rewrites": [{ "source": "/(.*)", "destination": "/" }] }

From e964e182574e4690719b45a6589abcc1583c05cd Mon Sep 17 00:00:00 2001
From: Helena Ilic <70663784+helenailic@users.noreply.github.com>
Date: Mon, 8 Dec 2025 18:03:29 -0600
Subject: [PATCH 2/2] Update axios base URL configuration

---
 src/api.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index 4b09065..a75ff94 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -3,8 +3,8 @@ import axios from 'axios';
 const instance = axios.create({
   baseURL: import.meta.env.VITE_BASE_URL
     ? import.meta.env.VITE_BASE_URL
-    : 'http://127.0.0.1:3000',
-  // 'https://points-api.illinoiswcs.org',
+  //  : 'http://127.0.0.1:3000',
+  : 'https://points-api.illinoiswcs.org',
   withCredentials: true
 });
 
