refactor Event Schedule UI for new design + add personal schedule

src/api/profile.ts

@@ -1,6 +1,10 @@
 import Bugsnag from "@bugsnag/js";
 import firebase from "firebase/app";
 
+import { VenueEvent } from "types/venues";
+
+import { WithVenueId } from "utils/id";
+
 export interface MakeUpdateUserGridLocationProps {
   venueId: string;
   userUid: string;
@@ -48,3 +52,48 @@ export const makeUpdateUserGridLocation = ({
       firestore.doc(doc).set(newData);
     });
 };
+
+export interface UpdatePersonalizedScheduleProps {
+  event: WithVenueId<VenueEvent>;
+  userId: string;
+  removeMode?: boolean;
+}
+
+export const addEventToPersonalizedSchedule = ({
+  event,
+  userId,
+}: Omit<UpdatePersonalizedScheduleProps, "removeMode">): Promise<void> =>
+  updatePersonalizedSchedule({ event, userId });
+
+export const removeEventFromPersonalizedSchedule = ({
+  event,
+  userId,
+}: Omit<UpdatePersonalizedScheduleProps, "removeMode">): Promise<void> =>
+  updatePersonalizedSchedule({ event, userId, removeMode: true });
+
+export const updatePersonalizedSchedule = async ({
+  event,
+  userId,
+  removeMode = false,
+}: UpdatePersonalizedScheduleProps): Promise<void> => {
+  const userProfileRef = firebase.firestore().collection("users").doc(userId);
+
+  const modify = removeMode
+    ? firebase.firestore.FieldValue.arrayRemove
+    : firebase.firestore.FieldValue.arrayUnion;
+
+  const newSavedEvents = {
+    [`myPersonalizedSchedule.${event.venueId}`]: modify(event.id),
+  };
+
+  return userProfileRef.update(newSavedEvents).catch((err) => {
+    Bugsnag.notify(err, (event) => {
+      event.addMetadata("context", {
+        location: "api/profile::saveEventToProfile",
+        userId,
+        event,
+        removeMode,
+      });
+    });
+  });
+};

src/components/molecules/EventDisplay/EventDisplay.tsx

@@ -16,6 +16,13 @@ export interface EventDisplayProps {
   venue?: WithId<AnyVenue>;
 }
 
+/**
+ * @dept the componnet is used in the OnlineStats and VenuePreview (Playa) which are to be removed as part of the Playa cleanup work.
+ *
+ * @see https://github.com/sparkletown/sparkle/pull/833
+ *
+ * @deprecated since https://github.com/sparkletown/sparkle/pull/1302 is merged; the component is replaced by ScheduleEvent
+ */
 export const EventDisplay: React.FC<EventDisplayProps> = ({ event, venue }) => {
   const eventRoomTitle = event.room;
 

src/components/molecules/EventPaymentButton/EventPaymentButton.tsx

@@ -1,23 +1,25 @@
 import React from "react";
 import "firebase/functions";
+import { Link } from "react-router-dom";
 
 import { VenueEvent } from "types/venues";
 
-import "./EventPaymentButton.scss";
-import useConnectUserPurchaseHistory from "hooks/useConnectUserPurchaseHistory";
-import { Link } from "react-router-dom";
 import { hasUserBoughtTicketForEvent } from "utils/hasUserBoughtTicket";
 import { isUserAMember } from "utils/isUserAMember";
-import { canUserJoinTheEvent } from "utils/time";
-import { useUser } from "hooks/useUser";
-import { useSelector } from "hooks/useSelector";
+import { isEventStartingSoon } from "utils/event";
 import { WithId } from "utils/id";
 import { venueEntranceUrl } from "utils/url";
 import {
   currentVenueSelectorData,
   userPurchaseHistorySelector,
 } from "utils/selectors";
 
+import { useUser } from "hooks/useUser";
+import { useSelector } from "hooks/useSelector";
+import useConnectUserPurchaseHistory from "hooks/useConnectUserPurchaseHistory";
+
+import "./EventPaymentButton.scss";
+
 interface PropsType {
   event: WithId<VenueEvent>;
   venueId: string;
@@ -57,7 +59,7 @@ const EventPaymentButton: React.FunctionComponent<PropsType> = ({
           <button
             role="link"
             className="btn btn-primary buy-tickets-button"
-            disabled={!canUserJoinTheEvent(event)}
+            disabled={!isEventStartingSoon(event)}
           >
             Join the event
           </button>