showing time

Author: igachmovmelon

src/components/molecules/EventDisplay/EventDisplay.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { format } from "date-fns";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -9,7 +9,7 @@ import classNames from "classnames";
 
 import { AnyVenue, VenueEvent } from "types/venues";
 
-import { getCurrentTimeInUTCSeconds, formatHour } from "utils/time";
+import { getCurrentTimeInUTCSeconds, formatHour, getMinutes } from "utils/time";
 import { WithId } from "utils/id";
 
 import "./EventDisplay.scss";
@@ -32,18 +32,29 @@ export const EventDisplay: React.FC<EventDisplayProps> = ({ event, venue }) => {
   });
 
   const starHour = formatHour(event.start_utc_seconds);
+
   const oneHourBehind = format(
     new Date().setHours(new Date().getHours() - 1),
     "HH"
   );
   const duration = Math.floor(event.duration_minutes / 60);
   const beginnigToShow = Number(starHour) - Number(oneHourBehind);
 
+  const currentMinutes = getMinutes(getCurrentTimeInUTCSeconds());
+
+  const timeToShow = useMemo(() => {
+    const minutesShowing =
+      currentMinutes >= 1020 ? 1020 : (new Date().getHours() - 1) * 60;
+    const startTime = getMinutes(event.start_utc_seconds);
+
+    return startTime - minutesShowing;
+  }, [currentMinutes, event.start_utc_seconds]);
+
   return (
     <div
       className={containerClasses}
       style={{
-        marginLeft: `${beginnigToShow * 200 + 52}px`,
+        marginLeft: `${timeToShow * 3.33 + 90}px`,
         width: `${
           beginnigToShow * 200 + 100 + duration * 200 > 4800
             ? 4800 - (Number(beginnigToShow) * 200 + 100)

src/components/organisms/SchedulePageModal/SchedulePageModal.tsx

@@ -160,14 +160,25 @@ export const SchedulePageModal: FC<SchedulePageModalProps> = ({
   const descriptionText = hasParentVenue
     ? parentVenue?.config?.landingPageConfig.description
     : currentVenue?.config?.landingPageConfig.description;
-  const currentMinutes = getMinutes(getCurrentTimeInUTCSeconds()) - 60;
+
+  const currentMinutes = getMinutes(getCurrentTimeInUTCSeconds());
 
   const hours = hoursOfTheDay(
     eachHourOfInterval({
-      start: new Date().setHours(new Date().getHours() - 1),
+      start: new Date().setHours(
+        currentMinutes >= 1020 ? 17 : new Date().getHours() - 1
+      ),
       end: endOfDay(new Date()),
     })
   );
+
+  const timeToShow = useMemo(() => {
+    const minutesShowing =
+      currentMinutes >= 1020 ? 1020 : (new Date().getHours() - 1) * 60;
+
+    return currentMinutes - minutesShowing;
+  }, [currentMinutes]);
+
   const dailyHours = useMemo(() => {
     return hours.map((date, index) => (
       <EventTimeSchedule key={`${index}-${date}`} time={date} />
@@ -211,7 +222,7 @@ export const SchedulePageModal: FC<SchedulePageModalProps> = ({
                 <div
                   className="current-time-line"
                   style={{
-                    left: `${currentMinutes * 0.3 + 390}px`,
+                    left: `${timeToShow * 3.33 + 300}px`,
                     height: `${roomsWithEvents * 160 - 40}px`,
                   }}
                 ></div>