Merge branch 'main' into andy/StoreItemPage

src/components/events/EventCard/index.tsx

@@ -11,9 +11,10 @@ interface EventCardProps {
   event: PublicEvent;
   attended: boolean;
   className?: string;
+  showYear?: boolean;
 }
 
-const EventCard = ({ event, attended, className }: EventCardProps) => {
+const EventCard = ({ event, attended, className, showYear }: EventCardProps) => {
   const { cover, title, start, end, location } = event;
   const [expanded, setExpanded] = useState(false);
 
@@ -57,7 +58,7 @@ const EventCard = ({ event, attended, className }: EventCardProps) => {
                 style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
                 suppressHydrationWarning
               >
-                {formatEventDate(start, end)}
+                {formatEventDate(start, end, showYear)}
               </Typography>
               <Typography
                 variant="body/small"

src/components/events/EventCard/style.module.scss

@@ -16,11 +16,11 @@
   }
 
   .image {
+    aspect-ratio: 1920 / 1080;
     flex-shrink: 0;
-    height: 11.25rem;
     overflow: none;
     position: relative;
-    width: 20rem;
+    width: 100%;
   }
 
   .info {

src/components/events/EventDisplay/index.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@/components/common';
 import EventCard from '@/components/events/EventCard';
 import { PublicAttendance, PublicEvent } from '@/lib/types/apiResponses';
 import styles from './style.module.scss';
@@ -8,14 +9,17 @@ interface EventDisplayProps {
 }
 
 const EventDisplay = ({ events, attendances }: EventDisplayProps) => {
-  const displayedEvents = events.slice(0, 20);
+  if (events.length === 0) {
+    return <Typography variant="title/small">No events found :(</Typography>;
+  }
   return (
     <div className={styles.container}>
-      {displayedEvents.map(event => (
+      {events.map(event => (
         <EventCard
           key={event.uuid}
           event={event}
           attended={attendances.some(a => a.event.uuid === event.uuid)}
+          showYear
         />
       ))}
     </div>

src/components/events/EventModal/index.tsx

@@ -68,7 +68,7 @@ const EventModal = ({ open, attended, event, onClose }: EventModalProps) => {
                   variant="title/medium"
                   suppressHydrationWarning
                 >
-                  {formatEventDate(start, end)}
+                  {formatEventDate(start, end, true)}
                 </Typography>
                 <Typography className={styles.eventInfo} variant="title/medium">
                   {location}

src/components/events/EventModal/style.module.scss

@@ -48,10 +48,11 @@
     transition: transform 0.2s;
 
     .image {
+      aspect-ratio: 1920 / 1080;
       flex-shrink: 0;
-      height: 11.5rem;
       overflow: hidden;
       position: relative;
+      width: 100%;
     }
 
     .contents {

src/components/events/index.tsx

@@ -0,0 +1,2 @@
+export { default as EventCarousel } from './EventCarousel';
+export { default as EventDisplay } from './EventDisplay';

src/components/store/OrderSummary/index.tsx

@@ -52,7 +52,7 @@ const OrderSummary = ({ order }: OrderSummaryProps) => {
         <div key={item.uuid} className={styles.itemInfo}>
           <div className={styles.image}>
             <Image
-              src={item.option.item.picture}
+              src={item.option.item.uploadedPhoto}
               style={{ objectFit: 'cover' }}
               sizes="9.375rem"
               alt="Store item picture"

src/lib/types/apiResponses.d.ts

@@ -1,4 +1,3 @@
-import { MerchItemPhoto } from '@/lib/types/apiRequests';
 import { MerchItemOptionMetadata, URL, UUID } from '.';
 import {
   ActivityScope,
@@ -169,12 +168,12 @@ export interface PublicMerchItem {
   uuid: UUID;
   itemName: string;
   collection?: PublicMerchCollection;
-  merchPhotos: MerchItemPhoto[];
   description: string;
   monthlyLimit: number;
   lifetimeLimit: number;
   hidden: boolean;
   hasVariantsEnabled: boolean;
+  merchPhotos: PublicMerchItemPhoto[];
   options: PublicMerchItemOption[];
 }
 
@@ -186,7 +185,7 @@ export interface PublicMerchItemWithPurchaseLimits extends PublicMerchItem {
 export interface PublicCartMerchItem {
   uuid: UUID;
   itemName: string;
-  picture: string;
+  uploadedPhoto: string;
   description: string;
 }
 
@@ -198,6 +197,13 @@ export interface PublicMerchItemOption {
   metadata: MerchItemOptionMetadata;
 }
 
+export interface PublicMerchItemPhoto {
+  uuid: Uuid;
+  uploadedPhoto: string;
+  position: number;
+  uploadedAt: Date;
+}
+
 export interface PublicOrderMerchItemOption {
   uuid: UUID;
   price: number;

src/lib/utils.ts

@@ -61,6 +61,14 @@ export const capitalize = (text: string): string => {
   return text.slice(0, 1).toUpperCase() + text.slice(1).toLowerCase();
 };
 
+/**
+ * Given text, removes all non alphanumeric characters.
+ * This makes search terms more lenient.
+ */
+export const formatSearch = (text: string): string => {
+  return text.toLowerCase().replace(/[^0-9a-zA-Z]/g, '');
+};
+
 /**
  * Helper function to map each user to a numeric value deterministically
  * TODO: Use the user's UUID to hash to a number since it will never change
@@ -133,6 +141,71 @@ export const formatURLEventTitle = (title: string): string => {
   return encodeURIComponent(title.toLowerCase().trim().replace(/ /g, '-'));
 };
 
+/** Year ACM was founded. */
+const START_YEAR = 2019;
+/** Number of seconds in a day. */
+const DAY_SECONDS = 86400;
+
+/**
+ * @returns The end of the current academic year.
+ */
+export const getEndYear = (): number => {
+  const today = new Date();
+  // Arbitrarily start the next academic year in August
+  return today.getMonth() < 7 ? today.getFullYear() : today.getFullYear() + 1;
+};
+
+/**
+ * @returns A list of all years that ACM has existed.
+ */
+export const getYears = () => {
+  const endYear = getEndYear();
+  const years = [];
+  for (let year = START_YEAR; year < endYear; year += 1) {
+    years.unshift({ value: String(year), label: `${year}–${year + 1}` });
+  }
+  return years;
+};
+
+/**
+ * Given a sort option, returns the range of times to filter events/attendances by.
+ * @param sort Either a year (2023, 2019, etc.) or a string option (past-week, all-time, etc.)
+ * @returns A range of times to filter results by.
+ */
+export const getDateRange = (sort: string | number) => {
+  const now = Date.now() / 1000;
+  let from;
+  let to;
+  switch (sort) {
+    case 'upcoming': {
+      from = now;
+      break;
+    }
+    case 'past-week': {
+      from = now - DAY_SECONDS * 7;
+      break;
+    }
+    case 'past-month': {
+      from = now - DAY_SECONDS * 28;
+      break;
+    }
+    case 'past-year': {
+      from = now - DAY_SECONDS * 365;
+      break;
+    }
+    case 'all-time': {
+      break;
+    }
+    default: {
+      const year = +sort;
+      // Arbitrarily academic years on August 1, which should be during the summer
+      from = new Date(year, 7, 1).getTime() / 1000;
+      to = new Date(year + 1, 7, 1).getTime() / 1000;
+    }
+  }
+  return { from, to };
+};
+
 /**
  * Returns the default (first) photo for a merchandise item.
  * If there are no photos for this item, returns the default 404 image.

src/pages/_app.tsx

@@ -48,7 +48,7 @@ export default function MyApp({ Component, pageProps }: AppProps<InitialPropInte
       <ThemeProvider>
         <ToastContainer />
         <PageLayout user={user}>
-          <Component {...pageProps} user={user} />
+          <Component user={user} {...pageProps} />
         </PageLayout>
       </ThemeProvider>
     </>