Refactor Schedule related components

Author: sunny-viktoryia

src/api/profile.ts

@@ -94,6 +94,8 @@ export const updatePersonalizedSchedule = async ({
         event,
         removeMode,
       });
+
+      throw err;
     });
   });
 };

src/components/molecules/ScheduleEvent/ScheduleEvent.scss

@@ -3,7 +3,7 @@
 $grey--regular: #3f3d42;
 $grey--hover: #4c494f;
 $grey--users: #4c494f;
-$grey--ligth: #ebebeb;
+$grey--light: #ebebeb;
 
 $purple--regular: #7c46fb;
 $purple--hover: #7c46fb;
@@ -41,7 +41,7 @@ $description--margin-top: 2px;
 
   &--users {
     color: $grey--hover;
-    background-color: $grey--ligth;
+    background-color: $grey--light;
 
     &:hover {
       background-color: $white;

src/components/molecules/ScheduleVenueDescription/ScheduleVenueDescription.tsx

@@ -8,7 +8,6 @@ import { useConnectRelatedVenues } from "hooks/useConnectRelatedVenues";
 
 import "./ScheduleVenueDescription.scss";
 
-const DEFAULT_VENUE_NAME = "Sparkle";
 export interface ScheduleVenueDescriptionProps {
   venueId: string;
 }
@@ -43,7 +42,7 @@ export const ScheduleVenueDescription: FC<ScheduleVenueDescriptionProps> = ({
         <div className={venuePictureClasses} />
         <div className="ScheduleVenueDescription__title">
           <h2 className="ScheduleVenueDescription__name">
-            {scheduleVenue?.name ?? DEFAULT_VENUE_NAME}
+            {scheduleVenue?.name ?? "Sparkle"}
           </h2>
           <h3 className="ScheduleVenueDescription__subtitle">
             {scheduleVenue?.config?.landingPageConfig?.subtitle}

src/components/organisms/NavBarSchedule/NavBarSchedule.tsx

@@ -12,7 +12,7 @@ import {
   getUnixTime,
   fromUnixTime,
 } from "date-fns";
-import { chain, range } from "lodash";
+import { groupBy, range } from "lodash";
 import classNames from "classnames";
 
 import { SCHEDULE_SHOW_DAYS_AHEAD } from "settings";
@@ -90,11 +90,11 @@ export const NavBarSchedule: FC<NavBarScheduleProps> = ({ isVisible }) => {
     });
   }, [selectedDayIndex]);
 
-  const getLocaion = useCallback(
+  const getEventLocation = useCallback(
     (locString: string): VenueLocation => {
       const [venueId, roomTitle = ""] = extractLocation(locString);
-      const venueTitle =
-        relatedVenues.find((venue) => venue.id === venueId)?.name || "";
+      const venueTitle = relatedVenues.find((venue) => venue.id === venueId)
+        ?.name;
       return { venueId, roomTitle, venueTitle };
     },
     [relatedVenues]
@@ -106,18 +106,20 @@ export const NavBarSchedule: FC<NavBarScheduleProps> = ({ isVisible }) => {
       .filter(isEventWithinDate(selectedDayIndex === 0 ? Date.now() : dayStart))
       .map(prepareForSchedule(dayStart, userEventIds));
 
-    const locatedEvents: LocatedEvents[] = chain(daysEvents)
-      .groupBy(buildLocationString)
-      .map((value, key) => ({ location: getLocaion(key), events: value }))
-      .value();
+    const locatedEvents: LocatedEvents[] = Object.entries(
+      groupBy(daysEvents, buildLocationString)
+    ).map(([group, events]) => ({
+      events,
+      location: getEventLocation(group),
+    }));
 
     return {
       locatedEvents,
       isToday: selectedDayIndex === 0,
       dayStartUtcSeconds: getUnixTime(dayStart),
       personalEvents: daysEvents.filter((event) => event.isSaved),
     };
-  }, [relatedVenueEvents, userEventIds, selectedDayIndex, getLocaion]);
+  }, [relatedVenueEvents, userEventIds, selectedDayIndex, getEventLocation]);
 
   // if .NavBarSchedule is changed, we need to update the class name in NavBar#hideEventSchedule event handler as well
   const containerClasses = classNames("NavBarSchedule", {

src/pages/Admin/VenueEventDetails.tsx

@@ -4,7 +4,7 @@ import { format, getUnixTime } from "date-fns";
 import { VenueEvent } from "types/venues";
 
 import { WithId } from "utils/id";
-import { formatHourAndMinute, getTimeBeforeParty } from "utils/time";
+import { formatHourAndMinute } from "utils/time";
 import { eventEndTime, eventStartTime } from "utils/event";
 
 export interface VenueEventDetailsProps {
@@ -25,7 +25,6 @@ const VenueEventDetails = ({
   const startTime = formatHourAndMinute(venueEvent.start_utc_seconds);
   const endTime = formatHourAndMinute(getUnixTime(eventEndTime(venueEvent)));
   const startDay = format(eventStartTime(venueEvent), "EEEE LLLL do");
-  console.log("here");
 
   return (
     <div className={className}>
@@ -43,8 +42,6 @@ const VenueEventDetails = ({
           </span>
         </div>
         {venueEvent.description}
-        <br />
-        {getTimeBeforeParty(venueEvent.start_utc_seconds)}
 
         {venueEvent.descriptions?.map((description, index) => (
           <p key={index}>{description}</p>

src/utils/event.ts

@@ -1,7 +1,7 @@
 import {
   addMinutes,
   areIntervalsOverlapping,
-  differenceInHours,
+  differenceInMinutes,
   endOfDay,
   fromUnixTime,
   isWithinInterval,
@@ -55,7 +55,7 @@ export const eventEndTime = (event: VenueEvent) =>
   addMinutes(eventStartTime(event), event.duration_minutes);
 
 export const isEventStartingSoon = (event: VenueEvent) =>
-  differenceInHours(eventStartTime(event), Date.now()) <= 0;
+  differenceInMinutes(eventStartTime(event), Date.now()) <= 60;
 
 export const getEventInterval = (event: VenueEvent) => ({
   start: eventStartTime(event),

src/utils/formatMeasurement.ts

@@ -1,7 +1,5 @@
 export const formatMeasurement = (value: number, measureUnit: string) => {
   const baseFormatted = `${value} ${measureUnit}`;
 
-  if (value === 0) return "";
-  if (value === 1) return baseFormatted;
-  if (value > 1) return `${baseFormatted}s`;
+  return value === 1 ? baseFormatted : `${baseFormatted}s`;
 };

src/utils/time.ts

@@ -14,18 +14,22 @@ import {
  * @deprecated in favor of using date-fns functions
  */
 export const ONE_SECOND_IN_MILLISECONDS = 1000;
+
 /**
  * @deprecated in favor of using date-fns functions
  */
 export const ONE_MINUTE_IN_SECONDS = 60;
+
 /**
  * @deprecated in favor of using date-fns functions
  */
 export const ONE_HOUR_IN_MINUTES = 60;
+
 /**
  * @deprecated in favor of using date-fns functions
  */
 export const ONE_HOUR_IN_SECONDS = ONE_MINUTE_IN_SECONDS * 60;
+
 /**
  * @deprecated in favor of using date-fns functions
  */
@@ -42,6 +46,7 @@ export const FIVE_MINUTES_MS =
  */
 export const ONE_HOUR_IN_MILLISECONDS =
   ONE_SECOND_IN_MILLISECONDS * ONE_HOUR_IN_SECONDS;
+
 /**
  * @deprecated in favor of using date-fns functions
  */
@@ -96,7 +101,7 @@ export const getTimeBeforeParty = (startUtcSeconds?: number) => {
 
   return formatDuration(
     intervalToDuration({
-      start: Date.now(),
+      start: now,
       end: eventStartDate,
     }),
     { format: ["days", "hours", "minutes"] }
@@ -187,14 +192,13 @@ export const getCurrentTimeInUTCSeconds = () => getUnixTime(Date.now());
  *
  * @see https://date-fns.org/docs/formatRelative
  */
-export const formatUtcSecondsRelativeToNow = (utcSeconds: number) => {
-  return formatRelative(fromUnixTime(utcSeconds), Date.now());
-};
+export const formatUtcSecondsRelativeToNow = (utcSeconds: number) =>
+  formatRelative(fromUnixTime(utcSeconds), Date.now());
 
-// @debt get rid of ONE_SECOND_IN_MILLISECONDS and use date-fns function
 export const normalizeTimestampToMilliseconds = (timestamp: number) => {
   const isTimestampInMilliSeconds = timestamp > SECONDS_TIMESTAMP_MAX_VALUE;
 
+  // @debt get rid of ONE_SECOND_IN_MILLISECONDS and use date-fns function
   return isTimestampInMilliSeconds
     ? timestamp
     : timestamp * ONE_SECOND_IN_MILLISECONDS;