renamed vars and type changes

src/client/components/OfficeFloorMap.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { Avatar, Button, P } from '#client/components/ui'
 import {
- DailyEventType,
+ ScheduledItemType,
  OfficeArea,
  OfficeAreaDesk,
  OfficeRoom,
@@ -14,32 +14,18 @@ import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { ImageWithPanZoom } from './ui/ImageWithPanZoom'
 
-type OfficeFloorMapProps = {
- area: OfficeArea
- mappablePoints?: any
- clickablePoints?: string[]
- selectedPointId: string | null
- onToggle: (id: string, kind: string) => void
- showUsers?: boolean
- officeVisits?: Record<string, Array<DailyEventType>>
- panZoom?: boolean
-}
+type PointComponentFunctionProps = (
+ item: OfficeAreaDesk | OfficeRoom,
+ isSelected: boolean,
+ isAvailable: boolean,
+ onClick: (id: string, kind: string) => MouseEventHandler<HTMLAnchorElement>
+) => Element | JSX.Element
 
 const PointComponent: Record<
- VisitType,
- (
- item: OfficeAreaDesk,
- isSelected: boolean,
- isAvailable: boolean,
- onClick: (id: string, kind: string) => void
- ) => Element | JSX.Element
+ VisitType.Visit | VisitType.RoomReservation,
+ PointComponentFunctionProps
 > = {
- [VisitType.Visit]: (
- item: OfficeAreaDesk,
- isSelected: boolean,
- isAvailable: boolean,
- onClick: (id: string, kind: string) => void
- ) => (
+ [VisitType.Visit]: (item, isSelected, isAvailable, onClick) => (
  <Button
  size="small"
  kind={isSelected ? 'primary' : 'secondary'}
@@ -56,12 +42,7 @@ const PointComponent: Record<
  {item?.name}
  </Button>
  ),
- [VisitType.RoomReservation]: (
- item: any,
- isSelected: boolean,
- isAvailable: boolean,
- onClick: (id: string, kind: string) => void
- ) => (
+ [VisitType.RoomReservation]: (item, isSelected, isAvailable, onClick) => (
  <Button
  size="small"
  kind={isSelected ? 'primary' : 'secondary'}
@@ -70,23 +51,14 @@ const PointComponent: Record<
  'absolute -translate-y-2/4 -translate-x-2/4 whitespace-nowrap',
  isSelected && 'border-pink-600 border-2',
  'bg-gray-100 text-black',
- 'rounded-sm border-2 p-4',
+ 'rounded-sm border-2 sm:p-4',
  'hover:scale-105 transition-all delay-100'
  )}
  onClick={onClick(item.id, VisitType.RoomReservation)}
  >
- <P textType="additional" className={cn('my-0')}>
- Meeting Room
- </P>
  <p className="font-bold">{item.name}</p>
  </Button>
  ),
- [VisitType.Guest]: (
- item: OfficeRoom,
- isSelected: boolean,
- isAvailable: boolean,
- onClick: (id: string, kind: string) => void
- ) => {},
 }
 
 const UserPoint = ({
@@ -114,16 +86,23 @@ const UserPoint = ({
  </div>
 )
 
-const PointMapping: React.FC<{
- me?: UserMe | null
- objects: Array<OfficeAreaDesk>
- areaId: string
- officeVisits?: Record<string, Array<DailyEventType>>
- showUsers: boolean
+type PointMappingProps = {
+ officeVisits?: Record<string, Array<ScheduledItemType>>
+ showUsers?: boolean
  selectedPointId: string | null
  clickablePoints?: string[]
  onToggle: (id: string, kind: string) => void
-}> = ({
+}
+
+const PointMapping: React.FC<
+ PointMappingProps & {
+ me?: UserMe | null
+ objects: Array<
+ OfficeAreaDesk & { kind: VisitType.Visit | VisitType.RoomReservation }
+ >
+ areaId: string
+ }
+> = ({
  me,
  objects,
  areaId,
@@ -149,7 +128,7 @@ const PointMapping: React.FC<{
  let user = null
 
  if (!!officeVisits && me && showUsers) {
- const bookedVisit: DailyEventType | undefined =
+ const bookedVisit: ScheduledItemType | undefined =
  officeVisits.visit?.find(
  (v) => v.areaId === areaId && v.objectId === x.id
  )
@@ -175,7 +154,7 @@ const PointMapping: React.FC<{
  top: `${x.position?.y}%`,
  }}
  >
- {/* // @todo fix this */}
+ {/* @ts-ignore */}
  {PointComponent[x.kind](x, isSelected, isAvailable, onClick)}
  </div>
  )}
@@ -184,6 +163,12 @@ const PointMapping: React.FC<{
  })
 }
 
+type OfficeFloorMapProps = {
+ area: OfficeArea
+ mappablePoints?: any
+ panZoom?: boolean
+} & PointMappingProps
+
 export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
  area,
  mappablePoints,

src/client/components/ui/ImageWithPanZoom.tsx

@@ -42,7 +42,7 @@ export const ImageWithPanZoom = ({
  onTouchMove={handleTouchMove}
  onTouchEnd={handleTouchEnd}
  className={cn(
- 'overflow-hidden relative w-full h-full',
+ 'overflow-hidden relative w-full h-full sm:h-auto',
  containerClassName
  )}
  >

src/client/utils/hooks.ts

@@ -154,10 +154,10 @@ export function usePanZoom(
 ): {
  position: { x: number; y: number }
  scale: number
- handleTouchStart: (e: TouchEvent) => void
- handleTouchMove: (e: TouchEvent) => void
- handleTouchEnd: (e: TouchEvent) => void
- handleWheel: (e: WheelEvent) => void
+ handleTouchStart: React.TouchEventHandler<HTMLDivElement>
+ handleTouchMove: React.TouchEventHandler<HTMLDivElement>
+ handleTouchEnd: React.TouchEventHandler<HTMLDivElement>
+ handleWheel: React.WheelEventHandler<HTMLDivElement>
 } {
  const [isPanning, setIsPanning] = useState(false)
  const [touchStart, setTouchStart] = useState({ x: 0, y: 0 })
@@ -186,16 +186,20 @@ export function usePanZoom(
  }
  }, [containerRef, imageRef, scale])
 
- const handleTouchStart = useCallback((event: TouchEvent) => {
- if (event.touches.length === 1) {
- const touch = event.touches[0]
- setTouchStart({
- x: touch.clientX,
- y: touch.clientY,
- })
- setIsPanning(true)
- }
- }, [])
+ const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = useCallback(
+ (event) => {
+ console.log(event)
+ if (event.touches.length === 1) {
+ const touch = event.touches[0]
+ setTouchStart({
+ x: touch.clientX,
+ y: touch.clientY,
+ })
+ setIsPanning(true)
+ }
+ },
+ []
+ )
 
  const updatePositionWithinBounds = (newX: number, newY: number) => {
  const boundary = 100
@@ -208,14 +212,15 @@ export function usePanZoom(
  // a little crotch for now :)
  const indx = scale > 1.5 ? 200 : 50
  const yBoundaryTop = -imageDimensions.height + indx * scale
+ console.log(newX, ', ', newY)
  return {
  x: newX > 0 ? Math.min(newX, xBoundary) : Math.max(newX, -xBoundary),
  y: newY > 0 ? Math.min(newY, yBoundary) : Math.max(newY, yBoundaryTop),
  }
  }
 
- const handleTouchMove = useCallback(
- (event: TouchEvent) => {
+ const handleTouchMove: React.TouchEventHandler<HTMLDivElement> = useCallback(
+ (event) => {
  if (isPanning && event.touches.length === 1) {
  const touch = event.touches[0]
  const deltaX = touch.clientX - touchStart.x
@@ -240,14 +245,17 @@ export function usePanZoom(
  setIsPanning(false)
  }, [])
 
- const handleWheel = useCallback((event: WheelEvent) => {
- event.preventDefault()
- const scaleAdjustment = event.deltaY > 0 ? 0.9 : 1.1
- setScale((prevScale) => {
- const newScale = prevScale * scaleAdjustment
- return Math.max(1, newScale < MAX_ZOOM ? newScale : MAX_ZOOM)
- })
- }, [])
+ const handleWheel: React.WheelEventHandler<HTMLDivElement> = useCallback(
+ (event) => {
+ event.preventDefault()
+ const scaleAdjustment = event.deltaY > 0 ? 0.9 : 1.1
+ setScale((prevScale) => {
+ const newScale = prevScale * scaleAdjustment
+ return Math.max(1, newScale < MAX_ZOOM ? newScale : MAX_ZOOM)
+ })
+ },
+ []
+ )
 
  return {
  position,

src/modules/events/client/components/EventsPage.tsx

@@ -70,7 +70,7 @@ export const EventsPage = () => {
  return null
  }
 
- if (!events || !Object.keys(events).length) {
+ if (!events || !(Sections.past in events && Sections.upcoming in events)) {
  return (
  <div className="text-gray-400 text-center">No upcoming events yet</div>
  )
@@ -84,22 +84,20 @@ export const EventsPage = () => {
  {!!myEvents && (
  <div>
  {Object.values(Sections).map((title) => {
+ // @ts-ignore
  const evs = myEvents[TitleStatus[title] as EventApplicationStatus]
  if (!!evs?.length) {
  return <EventsList title={title} events={evs} />
  }
  })}
  </div>
  )}
- {Sections.past in events &&
- Sections.upcoming in events &&
- [Sections.upcoming, Sections.past].map((timeTitle) => {
- console.log(timeTitle)
- const evs = events[timeTitle]
- if (evs?.length) {
- return <EventsList title={timeTitle} events={evs} />
- }
- })}
+ {[Sections.upcoming, Sections.past].map((timeTitle) => {
+ const evs = events[timeTitle]
+ if (evs?.length) {
+ return <EventsList title={timeTitle} events={evs} />
+ }
+ })}
  </ComponentWrapper>
  </Background>
  )

src/modules/events/server/models/event-application.ts

@@ -32,6 +32,7 @@ export class EventApplication
  declare creatorUserId: string
  declare formId: string | null
  declare formSubmissionId: string | null
+ declare event: Event
 
  static async countByEventId(): Promise<Record<string, number>> {
  const entries = (await this.findAll({

src/modules/events/server/models/event.ts

@@ -63,6 +63,7 @@ export class Event
  declare notificationRule: EventModel['notificationRule']
  declare metadata: EventModel['metadata']
  declare responsibleUserIds: EventModel['responsibleUserIds']
+ declare applications?: EventModel['applications']
 
  usePublicView(
  application: EventApplication | null,

src/modules/events/server/router.ts

@@ -485,7 +485,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
  }
 
  return events.map((e) => {
- const application = !!e.applications.length ? e.applications[0] : null
+ const application = !!e?.applications?.length ? e.applications[0] : null
  return e.usePublicView(application, [], null)
  })
  }
@@ -542,7 +542,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
  if (!!req.query.byStatus) {
  const result: Record<
  EventApplicationStatus,
- Array<EventApplication>
+ Array<Event & { applicationId: string }>
  > = {
  [EventApplicationStatus.Confirmed]: [],
  [EventApplicationStatus.Pending]: [],

src/modules/events/types.ts

@@ -29,6 +29,7 @@ export interface Event {
  notificationRule: EventNotificationRule
  metadata: Record<string, any>
  responsibleUserIds: string[]
+ applications?: EventApplication[]
 }
 
 export type EventMetadata = {
@@ -73,6 +74,7 @@ export interface EventApplication {
  creatorUserId: string
  formId: string | null
  formSubmissionId: string | null
+ event?: Event
 }
 
 export enum EventApplicationStatus {