showing guests on the map with miniidenticons

src/client/components/OfficeFloorMap.tsx

@@ -1,7 +1,6 @@
 import React, { MouseEventHandler } from 'react'
 import { Avatar, Button, P } from '#client/components/ui'
 import {
-  ScheduledItemType,
   OfficeArea,
   OfficeAreaDesk,
   OfficeRoom,
@@ -11,6 +10,7 @@ import { cn } from '#client/utils'
 import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { ImageWithPanZoom } from './ui/ImageWithPanZoom'
+import { ScheduledItemType } from '#modules/hub-map/types'
 
 type PointComponentFunctionProps = (
   item: OfficeAreaDesk | OfficeRoom,
@@ -139,12 +139,15 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
               transform: `scale(${1 / scale})`,
               transformOrigin: 'top left',
             }
-            console.log(user)
             if (!!user && !!me) {
+              const userLink = !user.id ? '' : `/profile/${user.id}`
               return (
                 <a
-                  href={`/profile/${user.id}`}
-                  className="absolute -translate-y-1/2 -translate-x-1/2"
+                  href={userLink}
+                  className={cn(
+                    `absolute -translate-y-1/2 -translate-x-1/2`,
+                    !userLink && 'hover:cursor-default'
+                  )}
                   style={style}
                   key={user.id + x.position.x + x.position.y}
                 >

src/client/components/ui/Avatar.tsx

@@ -42,7 +42,7 @@ const MinidenticonImg = ({
     [username, saturation, lightness]
   )
   return (
-    <div className="bg-fill-6 rounded-full">
+    <div className="bg-white border border-fill-6 shadow-sm rounded-full">
       <img src={svgURI} alt={username} {...props} />
     </div>
   )

src/modules/guest-invites/server/router.ts

@@ -1,5 +1,5 @@
 import { randomBytes } from 'crypto'
-import { Filterable, Op, QueryTypes, col, fn } from 'sequelize'
+import { Op, QueryTypes, col, fn } from 'sequelize'
 import dayjs from 'dayjs'
 import { FastifyPluginCallback, FastifyRequest } from 'fastify'
 import { appConfig } from '#server/app-config'

src/modules/hub-map/client/components/ScheduledItemsList.tsx

@@ -8,7 +8,6 @@ import * as stores from '#client/stores'
 import { useUpdateRoomReservationByUser } from '#modules/room-reservation/client/queries'
 import { useUpdateGuestInviteByUser } from '#modules/guest-invites/client/queries'
 import {
-  ScheduledItemType,
   GuestInviteStatus,
   RoomReservationStatus,
   VisitStatus,
@@ -17,6 +16,7 @@ import {
 import { FRIENDLY_DATE_FORMAT } from '#client/constants'
 import { ScheduledItem } from './ScheduledItem'
 import { useUpcoming } from '../queries'
+import { ScheduledItemType } from '#modules/hub-map/types'
 
 export const ScheduledItemsList: React.FC<{
   onChooseCard: (id: string | null, areaId: string | null, date: Dayjs) => void

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

@@ -66,7 +66,8 @@ export const formatGuestInvite = (
 export const formatVisit = (
   v: Visit,
   user?: User | null
-): ScheduledItemType & (User | { id: string; avatar: string | null }) => {
+): ScheduledItemType &
+  (User | { id: string; avatar: string | null }) & { guestInvite: boolean } => {
   return {
     id: v.id,
     value: `Desk ${v.deskName}`,
@@ -129,10 +130,6 @@ export const getVisits = async (
     status: {
       [Op.in]: ['confirmed', 'pending'],
     },
-    [Op.or]: {
-      metadata: { [Op.eq]: {} },
-      'metadata.guestInvite': { [Op.ne]: 'true' },
-    },
     date: {
       [Op.gte]: dayjs(date).toDate(),
     },

src/modules/hub-map/server/router.ts

@@ -1,10 +1,10 @@
-import { User } from '#modules/users/server/models'
 import { appConfig } from '#server/app-config'
 import {
-  ScheduledItemType,
   EntityVisibility,
   EventApplicationStatus,
   GenericVisit,
+  GuestInvite,
+  User,
   VisitType,
 } from '#shared/types'
 import dayjs from 'dayjs'
@@ -21,6 +21,7 @@ import {
 import { Op } from 'sequelize'
 import { Event } from '#modules/events/server/models'
 import * as fp from '#shared/utils/fp'
+import { ScheduledItemType } from '../types'
 
 const publicRouter: FastifyPluginCallback = async function (fastify, opts) {}
 
@@ -57,6 +58,10 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       const office = appConfig.getOfficeById(officeId)
 
       let visits = await getVisits(fastify, officeId, date, req.query.userId)
+      if (req.query.userId) {
+        // filter out the ones which we created as guest invites
+        visits = visits.filter((v) => !v.metadata || !v.metadata.guestInvite)
+      }
       let roomReservations = await getRoomReservations(
         fastify,
         officeId,
@@ -93,24 +98,58 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
 
       let dailyEventsVisits = []
       const userIds = Array.from(new Set(visits.map(fp.prop('userId'))))
+      const guestsInviteIds = visits
+        .filter((v) => v.metadata.guestInvite)
+        .map((v) => v.metadata.guestInviteId)
+
+      let userEmails: string[] = []
+      let guestInvites: Array<GuestInvite> = []
+
+      if (!!guestsInviteIds.length) {
+        guestInvites = await fastify.db.GuestInvite.findAll({
+          where: { id: { [Op.in]: guestsInviteIds } },
+        })
+        userEmails = Array.from(new Set(guestInvites.map(fp.prop('email'))))
+      }
+
       const users = await fastify.db.User.findAll({
-        where: { id: { [Op.in]: userIds }, stealthMode: false },
+        where: {
+          [Op.or]: [
+            { id: { [Op.in]: userIds } },
+            { email: { [Op.in]: userEmails } },
+          ],
+          stealthMode: false,
+        },
         raw: true,
       })
+
+      const usersByEmail = users.reduce(fp.by('email'), {})
       const usersById = users.reduce(fp.by('id'), {})
 
       for (const [idx, v] of visits.entries()) {
-        const item = formatVisit(v)
-        if (!idx) {
-          upcomingItems.push(item)
+        const isGuestVisit = v.metadata && v.metadata.guestInvite
+        let user: User | null = null
+        if (isGuestVisit && !!guestInvites.length) {
+          const inviteEmail = guestInvites.find(
+            (inv) => inv.id === v.metadata.guestInviteId
+          )?.email
+          user = usersByEmail[inviteEmail ?? ''] ?? null
+        } else {
+          user = usersById[v.userId]
+        }
+        if (!!user) {
+          const item = formatVisit(v)
+          if (!idx) {
+            upcomingItems.push(item)
+          }
+          addToUpcomingByDate(
+            upcomingByDate,
+            formatVisit(v, user),
+            v.date,
+            VisitType.Visit
+          )
+          dailyEventsVisits.push(item)
         }
-        addToUpcomingByDate(
-          upcomingByDate,
-          formatVisit(v, usersById[v.userId]),
-          v.date,
-          VisitType.Visit
-        )
-        dailyEventsVisits.push(item)
       }
 
       const eventApplications = await fastify.db.EventApplication.findAll({