Save events to the database; refactor the code

Author: sunny-viktoryia

src/api/profile.ts

@@ -48,3 +48,39 @@ export const makeUpdateUserGridLocation = ({
       firestore.doc(doc).set(newData);
     });
 };
+
+export interface SaveEventToProfileProps {
+  venueId: string;
+  userId: string;
+  eventId: string;
+  removeMode?: boolean;
+}
+
+export const saveEventToProfile = async ({
+  venueId,
+  userId,
+  eventId,
+  removeMode = false,
+}: SaveEventToProfileProps): Promise<void> => {
+  const userProfileRef = firebase.firestore().collection("users").doc(userId);
+
+  const modify = removeMode
+    ? firebase.firestore.FieldValue.arrayRemove
+    : firebase.firestore.FieldValue.arrayUnion;
+
+  const newSavedEvents = {
+    [`myPersonalizedSchedule.${venueId}`]: modify(eventId),
+  };
+
+  return userProfileRef.update(newSavedEvents).catch((err) => {
+    Bugsnag.notify(err, (event) => {
+      event.addMetadata("context", {
+        location: "api/profile::saveEventToProfile",
+        venueId,
+        userId,
+        eventId,
+        removeMode,
+      });
+    });
+  });
+};

src/components/molecules/Schedule/Schedule.tsx

@@ -1,98 +1,83 @@
-import React, { useState } from "react";
+import React, { useCallback, useMemo } from "react";
 import classNames from "classnames";
 import { format } from "date-fns";
 import { range } from "lodash";
 import { useCss } from "react-use";
 
-import { Room } from "types/rooms";
-import { VenueEvent } from "types/venues";
+import { ONE_SECOND_IN_MILLISECONDS } from "utils/time";
 
-import {
-  ONE_SECOND_IN_MILLISECONDS,
-  ONE_HOUR_IN_SECONDS,
-  getSecondsFromStartOfDay,
-} from "utils/time";
+import { RoomWithEvents, ScheduleProps } from "./Schedule.types";
+
+import { calcStartPosition } from "./Schedule.utils";
 
 import { ScheduleRoomEvents } from "../ScheduleRoomEvents";
 
 import "./Schedule.scss";
 
-export type RoomWithEvents = Room & { events: VenueEvent[] };
-
-export interface ScheduleDay {
-  isToday: boolean;
-  weekday: string;
-  dayStartUtcSeconds: number;
-  rooms: RoomWithEvents[];
-}
-
-export interface ScheduleProps {
-  scheduleDay: ScheduleDay;
-}
-
 const MAX_SCHEDULE_START_HOUR = 16;
-const HOUR_WIDTH = 200; // px
+const MAX_HOUR = 24;
+const MIDDAY_HOUR = 12;
 
 export const Schedule: React.FC<ScheduleProps> = ({ scheduleDay }) => {
-  const getStartHour = (utcSeconds: number) => {
-    return utcSeconds >= scheduleDay.dayStartUtcSeconds
-      ? Number(format(utcSeconds * ONE_SECOND_IN_MILLISECONDS, "H"))
-      : 0;
-  };
-
-  const roomStartHour = (room: RoomWithEvents) =>
-    room.events?.reduce(
-      (acc, event) => Math.min(acc, getStartHour(event.start_utc_seconds)),
-      MAX_SCHEDULE_START_HOUR
-    ) ?? MAX_SCHEDULE_START_HOUR;
-
-  const scheduleStartHour = Math.min(
-    ...scheduleDay.rooms.map((room) => roomStartHour(room)),
-    MAX_SCHEDULE_START_HOUR
+  const getStartHour = useCallback(
+    (utcSeconds: number) => {
+      return utcSeconds >= scheduleDay.dayStartUtcSeconds
+        ? Number(format(utcSeconds * ONE_SECOND_IN_MILLISECONDS, "H"))
+        : 0;
+    },
+    [scheduleDay]
   );
 
-  const hours = range(scheduleStartHour, 24).map(
-    (hour: number) => `${hour % 12 || 12} ${hour >= 12 ? "PM" : "AM"}`
+  const roomStartHour = useCallback(
+    (room: RoomWithEvents) =>
+      room.events?.reduce(
+        (acc, event) => Math.min(acc, getStartHour(event.start_utc_seconds)),
+        MAX_SCHEDULE_START_HOUR
+      ) ?? MAX_SCHEDULE_START_HOUR,
+    [getStartHour]
   );
 
-  const calcStartPosition = (startTimeUtcSeconds: number) => {
-    const startTimeTodaySeconds = getSecondsFromStartOfDay(startTimeUtcSeconds);
+  const scheduleStartHour = useMemo(
+    () =>
+      Math.min(
+        ...scheduleDay.rooms.map((room) => roomStartHour(room)),
+        MAX_SCHEDULE_START_HOUR
+      ),
+    [scheduleDay, roomStartHour]
+  );
 
-    return Math.floor(
-      HOUR_WIDTH / 2 +
-        (startTimeTodaySeconds / ONE_HOUR_IN_SECONDS - scheduleStartHour) *
-          HOUR_WIDTH
-    );
-  };
+  const hours = useMemo(
+    () =>
+      range(scheduleStartHour, MAX_HOUR).map(
+        (hour: number) =>
+          `${hour % MIDDAY_HOUR || MIDDAY_HOUR} ${
+            hour >= MIDDAY_HOUR ? "PM" : "AM"
+          }`
+      ),
+    [scheduleStartHour]
+  );
 
   const containerVars = useCss({
     "--room-count": scheduleDay.rooms.length + 1,
     "--current-time--position": calcStartPosition(
-      Math.floor(Date.now() / ONE_SECOND_IN_MILLISECONDS)
+      Math.floor(Date.now() / ONE_SECOND_IN_MILLISECONDS),
+      scheduleStartHour
     ),
     "--hours-count": hours.length,
   });
 
-  const containerClasses = classNames("ScheduledEvents", containerVars);
-
-  const [usersEvents, setUsersEvents] = useState<VenueEvent[]>([]);
-
-  const onEventBookmarked = (isBookmarked: boolean, event: VenueEvent) => {
-    console.log("is bookmarked", isBookmarked);
-    if (isBookmarked) {
-      setUsersEvents([...usersEvents, event]);
-    } else {
-      setUsersEvents(usersEvents.filter((e) => e.name !== event.name));
-    }
-  };
+  const containerClasses = useMemo(
+    () => classNames("ScheduledEvents", containerVars),
+    [containerVars]
+  );
 
   return (
     <div className={containerClasses}>
       <div className="ScheduledEvents__rooms">
         <div className="ScheduledEvents__room">
           <p className="ScheduledEvents__room-title">My Daily Schedule</p>
           <span className="ScheduledEvents__events-count">
-            {usersEvents.length} events
+            {scheduleDay.personalEvents.length} events
           </span>
         </div>
         {scheduleDay.rooms.map((room) => (
@@ -120,18 +105,16 @@ export const Schedule: React.FC<ScheduleProps> = ({ scheduleDay }) => {
 
         <div className="ScheduledEvents__user-schedule">
           <ScheduleRoomEvents
-            isUsers={true}
-            events={usersEvents}
+            isUsers
+            events={scheduleDay.personalEvents}
             scheduleStartHour={scheduleStartHour}
-            onEventBookmarked={onEventBookmarked}
           />
         </div>
         {scheduleDay.rooms.map((room) => (
           <ScheduleRoomEvents
             key={room.title}
             events={room.events}
             scheduleStartHour={scheduleStartHour}
-            onEventBookmarked={onEventBookmarked}
           />
         ))}
       </div>

src/components/molecules/Schedule/Schedule.types.ts

@@ -0,0 +1,19 @@
+import { Room } from "types/rooms";
+import { PersonalizedVenueEvent } from "types/venues";
+import { WithVenueId } from "utils/id";
+
+export type RoomWithEvents = Room & {
+  events: WithVenueId<PersonalizedVenueEvent>[];
+};
+
+export interface ScheduleDay {
+  isToday: boolean;
+  weekday: string;
+  dayStartUtcSeconds: number;
+  rooms: RoomWithEvents[];
+  personalEvents: WithVenueId<PersonalizedVenueEvent>[];
+}
+
+export interface ScheduleProps {
+  scheduleDay: ScheduleDay;
+}

src/components/molecules/Schedule/Schedule.utils.ts

@@ -0,0 +1,16 @@
+import { getSecondsFromStartOfDay, ONE_HOUR_IN_SECONDS } from "utils/time";
+
+export const HOUR_WIDTH = 200; // px
+
+export const calcStartPosition = (
+  startTimeUtcSeconds: number,
+  scheduleStartHour: number
+) => {
+  const startTimeTodaySeconds = getSecondsFromStartOfDay(startTimeUtcSeconds);
+
+  return Math.floor(
+    HOUR_WIDTH / 2 +
+      (startTimeTodaySeconds / ONE_HOUR_IN_SECONDS - scheduleStartHour) *
+        HOUR_WIDTH
+  );
+};

src/components/molecules/ScheduleEvent/ScheduleEvent.tsx

@@ -1,71 +1,97 @@
-import React, { useState } from "react";
+import React, {
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import classNames from "classnames";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBookmark as solidBookmark } from "@fortawesome/free-solid-svg-icons";
 import { faBookmark as regularBookmark } from "@fortawesome/free-regular-svg-icons";
 
-import { VenueEvent } from "types/venues";
+import { PersonalizedVenueEvent } from "types/venues";
+
+import { WithVenueId } from "utils/id";
 import { isTruthy } from "utils/types";
 
-import {
-  getSecondsFromStartOfDay,
-  ONE_HOUR_IN_SECONDS,
-  isLiveEvent,
-} from "utils/time";
+import { isLiveEvent, ONE_HOUR_IN_MINUTES } from "utils/time";
+
+import { saveEventToProfile } from "api/profile";
+import { useUser } from "hooks/useUser";
+
+import { calcStartPosition, HOUR_WIDTH } from "../Schedule/Schedule.utils";
 
 import "./ScheduleEvent.scss";
 
 export interface ScheduleEventProps {
-  event: VenueEvent;
+  event: WithVenueId<PersonalizedVenueEvent>;
   scheduleStartHour: number;
-  onEventBookmarked: Function;
   isUsers?: boolean;
 }
 
-const HOUR_WIDTH = 200; // px
-
 export const ScheduleEvent: React.FC<ScheduleEventProps> = ({
   event,
   scheduleStartHour,
-  onEventBookmarked,
   isUsers,
 }) => {
-  const [isBookmarked, setBookmark] = useState(isTruthy(isUsers));
-
-  const containerClasses = classNames(
-    "ScheduleEvent",
-    {
-      "ScheduleEvent--live": isLiveEvent(
-        event.start_utc_seconds,
-        event.duration_minutes
+  const [isBookmarked, setBookmark] = useState(event.isSaved);
+
+  useEffect(() => {
+    setBookmark(event.isSaved);
+  }, [event.isSaved]);
+
+  const { userId } = useUser();
+
+  const containerClasses = useMemo(
+    () =>
+      classNames(
+        "ScheduleEvent",
+        {
+          "ScheduleEvent--live": isLiveEvent(
+            event.start_utc_seconds,
+            event.duration_minutes
+          ),
+        },
+        { "ScheduleEvent--users": isTruthy(isUsers) }
       ),
-    },
-    { "ScheduleEvent--users": isTruthy(isUsers) }
+    [event, isUsers]
   );
 
-  const calcStartPosition = (startTimeUtcSeconds: number) => {
-    const startTimeTodaySeconds = getSecondsFromStartOfDay(startTimeUtcSeconds);
-
-    return (
-      HOUR_WIDTH / 2 +
-      (startTimeTodaySeconds / ONE_HOUR_IN_SECONDS - scheduleStartHour) *
-        HOUR_WIDTH
-    );
-  };
+  const eventWidth = useMemo(
+    () => (event.duration_minutes * HOUR_WIDTH) / ONE_HOUR_IN_MINUTES,
+    [event]
+  );
+  const bookmarkEvent = useCallback(() => {
+    event.isSaved = !event.isSaved;
 
-  const eventWidth = (event.duration_minutes * 200) / 60;
+    if (userId && event.id) {
+      saveEventToProfile({
+        venueId: event.venueId,
+        userId: userId,
+        removeMode: !event.isSaved,
+        eventId: event.id,
+      });
+    }
+  }, [userId, event]);
 
-  const bookmarkEvent = () => {
-    setBookmark(!isBookmarked);
-    onEventBookmarked(!isBookmarked, event);
-  };
+  const onBookmark: MouseEventHandler<HTMLDivElement> = useCallback(
+    (e) => {
+      e.stopPropagation();
+      bookmarkEvent();
+    },
+    [bookmarkEvent]
+  );
 
   return (
     <div
       className={containerClasses}
       style={{
-        marginLeft: `${calcStartPosition(event.start_utc_seconds)}px`,
+        marginLeft: `${calcStartPosition(
+          event.start_utc_seconds,
+          scheduleStartHour
+        )}px`,
         width: `${eventWidth}px`,
       }}
     >
@@ -74,16 +100,9 @@ export const ScheduleEvent: React.FC<ScheduleEventProps> = ({
         <div className="ScheduleEvent__description">by {event.host}</div>
       </div>
 
-      <div
-        className="ScheduleEvent__bookmark"
-        onClick={(e) => {
-          e.stopPropagation();
-          bookmarkEvent();
-        }}
-      >
+      <div className="ScheduleEvent__bookmark" onClick={onBookmark}>
         <FontAwesomeIcon
           icon={isBookmarked ? solidBookmark : regularBookmark}
-          style={{ cursor: "pointer", width: "15px", height: "20px" }}
         />
       </div>
     </div>