From 56118870f330cd7c08e459138aa0062f0b838c14 Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Tue, 26 Mar 2024 20:20:02 +1300
Subject: [PATCH] formatting, showing manual guest entries on the map, improved
 query for upcoming events

---
 src/client/components/OfficeFloorMap.tsx      |  7 ++-
 src/client/constants.ts                       |  2 +
 .../events/client/components/EventsPage.tsx   |  4 +-
 .../hub-map/client/components/HubMap.tsx      | 21 ++++++-
 .../client/components/ScheduledItemsList.tsx  |  5 +-
 src/modules/hub-map/server/helpers/index.ts   |  5 +-
 src/modules/hub-map/server/router.ts          | 63 +++++++++++++++----
 7 files changed, 83 insertions(+), 24 deletions(-)

diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx
index a5562bfa..97a15622 100644
--- a/src/client/components/OfficeFloorMap.tsx
+++ b/src/client/components/OfficeFloorMap.tsx
@@ -11,6 +11,7 @@ import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { ImageWithPanZoom } from './ui/ImageWithPanZoom'
 import { ScheduledItemType } from '#modules/hub-map/types'
+import { ROBOT_USER_ID } from '#client/constants'
 
 type PointComponentFunctionProps = (
   item: OfficeAreaDesk | OfficeRoom,
@@ -106,7 +107,6 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
     [onToggle]
   )
 
-  // @todo fix types here
   const mapObjects = (scale: number) =>
     !mappablePoints
       ? []
@@ -140,7 +140,10 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
               transformOrigin: 'top left',
             }
             if (!!user && !!me) {
-              const userLink = !user.id ? '' : `/profile/${user.id}`
+              const userLink =
+                !user.id || user.id === ROBOT_USER_ID
+                  ? ''
+                  : `/profile/${user.id}`
               return (
                 <a
                   href={userLink}
diff --git a/src/client/constants.ts b/src/client/constants.ts
index 6138cfa0..8c816ca7 100644
--- a/src/client/constants.ts
+++ b/src/client/constants.ts
@@ -28,3 +28,5 @@ export const ADMIN_ACCESS_PERMISSION_POSTFIX = '__admin'
 export const ADMIN_ACCESS_PERMISSION_RE = new RegExp(
   `^.*\.${ADMIN_ACCESS_PERMISSION_POSTFIX}`
 )
+
+export const ROBOT_USER_ID = '00000000-0000-0000-0000-000000000000'
diff --git a/src/modules/events/client/components/EventsPage.tsx b/src/modules/events/client/components/EventsPage.tsx
index 8edef3e5..5b82246d 100644
--- a/src/modules/events/client/components/EventsPage.tsx
+++ b/src/modules/events/client/components/EventsPage.tsx
@@ -68,9 +68,7 @@ export const EventsPage = () => {
   const [uniqueUpcoming, setUniqueUpcoming] = React.useState<Event[]>([])
 
   React.useEffect(() => {
-    if (!!events && !!myEvents && !myEvents.pending.length) {
-      return
-    } else if (!!events && !!myEvents) {
+    if (!!events && !!myEvents) {
       const upcomingEventIds = new Set(myEvents.pending.map((e) => e.id))
       const uniqueEvents = events[EventTimeCategory.upcoming].filter(
         (e) => !upcomingEventIds.has(e.id)
diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
index daa8d15e..13e56df7 100644
--- a/src/modules/hub-map/client/components/HubMap.tsx
+++ b/src/modules/hub-map/client/components/HubMap.tsx
@@ -137,6 +137,24 @@ export const _HubMap = () => {
 
   const isMobile = width <= 480
 
+  const inOfficeMessage = React.useMemo(() => {
+    if (!visitorsNumber) {
+      return `No one in the ${office?.name} hub`
+    }
+
+    if (userIsInOffce) {
+      if (visitorsNumber === 1) {
+        return `Only you in the ${office?.name} hub`
+      } else {
+        return `You and ${visitorsNumber - 1} others are in the ${
+          office?.name
+        } hub`
+      }
+    } else {
+      return `${visitorsNumber} people in the ${office?.name} hub`
+    }
+  }, [office, visitorsNumber])
+
   if (!office?.allowDeskReservation) {
     return <></>
   }
@@ -207,8 +225,7 @@ export const _HubMap = () => {
               </div>
             </div>
             <div className="mt-2 text-text-tertiary mb-4 sm:mb-0">
-              {userIsInOffce ? `You and ${visitorsNumber - 1}` : visitorsNumber}{' '}
-              people in the {office?.name} hub
+              {inOfficeMessage}
             </div>
             <Select
               label=""
diff --git a/src/modules/hub-map/client/components/ScheduledItemsList.tsx b/src/modules/hub-map/client/components/ScheduledItemsList.tsx
index a108b610..4b8f12f7 100644
--- a/src/modules/hub-map/client/components/ScheduledItemsList.tsx
+++ b/src/modules/hub-map/client/components/ScheduledItemsList.tsx
@@ -30,7 +30,7 @@ export const ScheduledItemsList: React.FC<{
 
   const cancellationCallback = () => {
     showNotification(`Successfully cancelled.`, 'success')
-    refetchUpcoming()
+    setTimeout(() => refetchUpcoming(), 1000)
   }
 
   const me = useStore(stores.me)
@@ -63,7 +63,7 @@ export const ScheduledItemsList: React.FC<{
         setScheduledItems(myUpcomingScheduledItems?.byType[selected?.type])
       }
     }
-  }, [myUpcomingScheduledItems?.byType, date])
+  }, [myUpcomingScheduledItems, date])
 
   const resetView = () => {
     setSelected(null)
@@ -120,7 +120,6 @@ export const ScheduledItemsList: React.FC<{
       }
       updateFns[type](data)
       setSelected(null)
-      refetchUpcoming()
     }
   }
 
diff --git a/src/modules/hub-map/server/helpers/index.ts b/src/modules/hub-map/server/helpers/index.ts
index c928473b..80aec0fb 100644
--- a/src/modules/hub-map/server/helpers/index.ts
+++ b/src/modules/hub-map/server/helpers/index.ts
@@ -62,6 +62,7 @@ export const formatGuestInvite = (
     description: `Desk ${v.deskName} - ${v.areaName}`,
     extraInformation: `Guest visit`,
     areaId: v.areaId,
+    deskId: v.deskId,
     objectId: v.deskId,
     status: g.status,
   }
@@ -69,7 +70,7 @@ export const formatGuestInvite = (
 
 export const formatVisit = (
   v: Visit,
-  user?: User | null
+  user?: User | null | { id: string }
 ): ScheduledItemType &
   (User | { id: string; avatar: string | null }) & { guestInvite: boolean } => {
   return {
@@ -116,7 +117,7 @@ export const formatEvent = (
     description: isToday
       ? 'Today'
       : isSingleDay
-      ? event.startDate
+      ? start.format('MMM D HH:mm')
       : `${start.format(FRIENDLY_DATE_FORMAT_SHORT)} - ${end.format(
           FRIENDLY_DATE_FORMAT_SHORT
         )}`,
diff --git a/src/modules/hub-map/server/router.ts b/src/modules/hub-map/server/router.ts
index cacc59cd..8e768078 100644
--- a/src/modules/hub-map/server/router.ts
+++ b/src/modules/hub-map/server/router.ts
@@ -22,12 +22,13 @@ import { Op } from 'sequelize'
 import { Event } from '#modules/events/server/models'
 import * as fp from '#shared/utils/fp'
 import { ScheduledItemType } from '../types'
+import { ROBOT_USER_ID } from '#server/constants'
 
 const publicRouter: FastifyPluginCallback = async function (fastify, opts) {}
 
 const addToUpcomingByDate = (
   upcomingByDate: Record<string, any>,
-  value: GenericVisit,
+  value: ScheduledItemType,
   date: string,
   type: string
 ) => {
@@ -128,7 +129,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
 
       for (const [idx, v] of visits.entries()) {
         const isGuestVisit = v.metadata && v.metadata.guestInvite
-        let user: User | null = null
+        let user: User | null | { id: string } = null
         if (isGuestVisit && !!guestInvites.length) {
           const inviteEmail = guestInvites.find(
             (inv) => inv.id === v.metadata.guestInviteId
@@ -137,6 +138,10 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
         } else {
           user = usersById[v.userId]
         }
+        if (!user && isGuestVisit) {
+          user = { id: ROBOT_USER_ID }
+        }
+
         if (!!user) {
           const item = formatVisit(v)
           if (!idx) {
@@ -157,17 +162,51 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
           model: Event,
           as: 'event',
           where: {
-            startDate: {
-              [Op.between]: [
-                dayjs().startOf('day').toDate(),
-                dayjs().startOf('day').add(14, 'days').toDate(),
-              ],
-            },
-
-            visibility: {
-              [Op.in]: [EntityVisibility.Visible, EntityVisibility.Url],
-            },
+            [Op.and]: [
+              {
+                visibility: {
+                  [Op.in]: [EntityVisibility.Visible, EntityVisibility.Url],
+                },
+              },
+              {
+                [Op.or]: [
+                  {
+                    // Events that start within the date range
+                    startDate: {
+                      [Op.between]: [
+                        dayjs().startOf('day').toDate(),
+                        dayjs().startOf('day').add(14, 'days').toDate(),
+                      ],
+                    },
+                  },
+                  {
+                    // Events that end within the date range
+                    endDate: {
+                      [Op.between]: [
+                        dayjs().startOf('day').toDate(),
+                        dayjs().startOf('day').add(14, 'days').toDate(),
+                      ],
+                    },
+                  },
+                  {
+                    // Events that span the entire date range
+                    startDate: {
+                      [Op.lte]: dayjs().startOf('day').toDate(),
+                    },
+                    endDate: {
+                      [Op.gte]: dayjs().startOf('day').add(14, 'days').toDate(),
+                    },
+                  },
+                ],
+              },
+              {
+                visibility: {
+                  [Op.in]: [EntityVisibility.Visible, EntityVisibility.Url],
+                },
+              },
+            ],
           },
+
           attributes: ['id', 'title', 'startDate', 'endDate', 'checklist'],
           required: true,
           order: [['startDate', 'ASC']],