formatting, showing manual guest entries on the map, improved query f…

…or upcoming events

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}

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'

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)

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=""

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()
  }
  }
 

src/modules/hub-map/server/helpers/index.ts

@@ -62,14 +62,15 @@ export const formatGuestInvite = (
  description: `Desk ${v.deskName} - ${v.areaName}`,
  extraInformation: `Guest visit`,
  areaId: v.areaId,
+ deskId: v.deskId,
  objectId: v.deskId,
  status: g.status,
  }
 }
 
 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
  )}`,

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']],