Release: 2.0.1

app/admin/rush/page.tsx

@@ -27,6 +27,7 @@ export interface EventFormData {
   eventDeadline: Date,
   eventCoverImage: string,
   eventCoverImageName: string,
+  eventCoverImageVersion: string,
   eventId?: string,
 }
 
@@ -38,6 +39,7 @@ const initialValues: EventFormData = {
   eventCoverImage: "",
   eventCoverImageName: "",
   eventDeadline: addTwoHours(new Date()),
+  eventCoverImageVersion: "v0",
 };
 
 export default function RushEvents() {
@@ -181,6 +183,7 @@ export default function RushEvents() {
                     eventDeadline: new Date(event.deadline),
                     eventCoverImage: event.eventCoverImage,
                     eventCoverImageName: event.eventCoverImageName,
+                    eventCoverImageVersion: event.eventCoverImageVersion,
                     eventId: event._id,
                   });
                   setOpenModifyEventModal(true);
@@ -237,6 +240,7 @@ export default function RushEvents() {
           deadline: eventFormData.eventDeadline.toISOString(),
           eventCoverImage : eventFormData.eventCoverImage,
           eventCoverImageName : eventFormData.eventCoverImageName,
+          eventCoverImageVersion: eventFormData.eventCoverImageVersion,
           ...(modifying && { _id: eventFormData.eventId })
         })
       })
@@ -363,7 +367,7 @@ export default function RushEvents() {
         setEventFormData={setEventFormData}
         onClose={onCloseModifyEventModal}
         onSubmit={() => handleRusheeEvent(true)}
-        modifyingEvent
+        modifyingEvent={openModifyEventModal}
       />
 
       {/* Custom Settings Component Modal */}

components/admin/rush/EventModal.tsx

@@ -6,6 +6,7 @@ import { AiOutlineLoading } from "react-icons/ai";
 import DatePicker from "react-datepicker";
 import CropImage from "./Image/CropImage";
 import { AdminTextStyles } from "@/styles/TextStyles";
+import { useEffect } from "react";
 
 interface EventModalProps {
 	showModal: boolean,
@@ -29,6 +30,21 @@ export default function EventModal({
 	onSubmit,
 	modifyingEvent,
 }: EventModalProps) {
+
+	// helper function (to increment eventCoverImageVersion)
+	const incrementVersion = (version: string) => {
+		const intVersion = parseInt(version.slice(1)) + 1
+		return`v${intVersion}`;
+	};
+
+	// if modifying, increment eventCoverImageVersion
+	useEffect(() => {
+		modifyingEvent && setEventFormData((prevEventFormData) => ({
+			...prevEventFormData, 
+			eventCoverImageVersion: incrementVersion(prevEventFormData.eventCoverImageVersion)
+		}));
+	}, [modifyingEvent])
+
 	return (
 		<Modal  show={showModal} size="2xl" onClose={onClose} popup>
 			<Modal.Header className="dark:bg-background-dark" />

components/admin/rush/Image/CropImage.tsx

@@ -11,6 +11,7 @@ import { CanvasPreview } from './CanvasPreview'
 import { useDebounceEffect } from '@/utils/useDebounceEffect'
 import 'react-image-crop/dist/ReactCrop.css'
 import { Button, FileInput } from 'flowbite-react'
+import ImagePlaceholder from '@/components/admin/rush/Image/ImagePlaceholder'
 
 // This is to demonstate how to make and center a % aspect crop
 // which is a bit trickier so we use some helper functions.
@@ -45,6 +46,7 @@ export default function CropImage({
   eventCoverImageName,
   onChange,
 }: CropyImageProps) {
+  const [loading, setLoading] = useState(true);
   const [imgSrc, setImgSrc] = useState("");
   const [imgName, setImgName] = useState("");
   const previewCanvasRef = useRef<HTMLCanvasElement>(null);
@@ -215,11 +217,16 @@ export default function CropImage({
       )}
       {/* edge case (first load --> display image) */}
       {isInitialModifyLoad && 
-        <img
-          className="mt-2 rounded"
-          src={eventCoverImage}
-          alt={eventCoverImageName}
-        />
+        <>
+          {loading && <ImagePlaceholder />}
+          <img
+            className={`mt-2 rounded ${loading ? 'hidden' : 'block'}`} // Hide image while loading
+            src={eventCoverImage}
+            alt={eventCoverImageName}
+            onLoad={() => setLoading(false)} // Set loading to false when the image is loaded
+            onError={() => setLoading(false)} // Handle error case
+          />
+        </>
       }
     </div>
   )

components/admin/rush/Image/ImagePlaceholder.tsx

@@ -0,0 +1,12 @@
+export default function ImagePlaceholder() {
+  return (
+    <div role="status" className="animate-pulse">
+      <div className="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700">
+        <svg className="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+          <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
+        </svg>
+      </div>
+    </div>
+  )
+}

types/admin/events.ts

@@ -32,6 +32,7 @@ export interface RushEvent {
   deadline: string;
   eventCoverImage: string;
   eventCoverImageName: string;
+  eventCoverImageVersion: string;
   attendees: readonly Attendee[];
   numAttendees: number;
 }

utils/getBaseURL.ts

@@ -1,13 +1,14 @@
 // getRushBaseUrl : returns base url of rush application (depending on current environment)
 export const getRushBaseUrl = (): string => {
-  switch(process.env.NEXT_PUBLIC_API_BASE_URL) {
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL?.trim();
+  switch(baseUrl) {
     // local environment
     case "http://127.0.0.1:8000":
-      return "http://localhost:3001/";
+      return "http://localhost:3001";
 
     // staging environment
     case "https://o74hteay05.execute-api.us-east-1.amazonaws.com/api":
-      return "https://staging--whyphi-rush.netlify.app/";
+      return "https://staging--whyphi-rush.netlify.app";
 
     // production environment
     case "https://api.why-phi.com":