refactor Event Schedule UI for new design + add personal schedule (#1302)

Implements New Event Schedule

Co-authored-by: Viktoryia <[email protected]>
Co-authored-by: mike-lvov <[email protected]>

Author: 3 people

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,50 @@ 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,
+      });
+
+      throw err;
+    });
+  });
+};

src/assets/icons/icon-loading.svg

@@ -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/EventDisplay/EventDisplay.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>

src/components/molecules/EventPaymentButton/EventPaymentButton.tsx

@@ -0,0 +1,33 @@
+@keyframes loadingspin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+$Loading__icon--size: 40px;
+$Loading__icon--margin-bottom: 1rem;
+$Loading__message--font-size: 0.9rem;
+$Loading__message--opacity: 0.6;
+
+.Loading {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-align: center;
+
+  &__icon {
+    margin: 0 auto;
+    width: $Loading__icon--size;
+    height: $Loading__icon--size;
+    margin-bottom: $Loading__icon--margin-bottom;
+    animation: loadingspin 0.6s infinite linear;
+  }
+
+  &__message {
+    font-size: $Loading__message--font-size;
+    opacity: $Loading__message--opacity;
+  }
+}

src/components/molecules/LiveSchedule/LiveSchedule.scss

@@ -0,0 +1,18 @@
+import React, { FC } from "react";
+
+import LoadingIcon from "assets/icons/icon-loading.svg";
+
+import "./Loading.scss";
+
+export interface LoadingProps {
+  message?: string;
+}
+
+export const Loading: FC<LoadingProps> = ({ message }) => {
+  return (
+    <div className="Loading">
+      <img className="Loading__icon" src={LoadingIcon} alt="loading" />
+      <span className="Loading__message">{message}</span>
+    </div>
+  );
+};

src/components/molecules/LiveSchedule/LiveSchedule.tsx

@@ -0,0 +1 @@
+export { Loading } from "./Loading";