stealth mode

paritytech · Mar 12, 2024 · 2c3a4e6 · 2c3a4e6
1 parent 5cab4e3
commit 2c3a4e6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx
@@ -33,12 +33,14 @@ const PointComponent: Record<
       disabled={!isAvailable}
       color={isSelected ? 'purple' : 'default'}
       className={cn(
+        pointCommonStyle,
         isSelected
           ? 'border-pink-600 bg-accents-pink'
           : 'bg-violet-300 border-violet-300',
-        'hover:bg-cta-purple hover:border-cta-hover-purpleNoOpacity hover:text-white',
-        'min-h-[32px] min-w-[32px]',
-        pointCommonStyle
+        isAvailable
+          ? 'hover:bg-cta-purple hover:border-cta-hover-purpleNoOpacity hover:text-white'
+          : 'hover:scale-100 hover:bg-violet-300',
+        'min-h-[32px] min-w-[32px]'
       )}
       onClick={onClick(item.id, VisitType.Visit)}
     >

diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
@@ -1,5 +1,11 @@
 import * as React from 'react'
-import { Avatar, Input, Select, WidgetWrapper } from '#client/components/ui'
+import {
+  Avatar,
+  Input,
+  Select,
+  StealthMode,
+  WidgetWrapper,
+} from '#client/components/ui'
 import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { useOffice } from '#client/utils/hooks'
@@ -11,6 +17,7 @@ import { ScheduledItemsList } from './ScheduledItemsList'
 import {
   useAvailableDesks,
   useOfficeVisitors,
+  useToggleStealthMode,
   useVisitsAreas,
 } from '#modules/visits/client/queries'
 import { propEq } from '#shared/utils'
@@ -51,6 +58,14 @@ export const _HubMap = () => {
     dayjs().toString()
   )
 
+  const { mutate: toggleStealthMode } = useToggleStealthMode(() => {
+    refetchVisits()
+    refetchVisitors()
+  })
+  const onToggleStealthMode = React.useCallback((value: boolean) => {
+    toggleStealthMode({ stealthMode: value })
+  }, [])
+
   React.useEffect(() => {
     setOfficeVisits(upcomingVisitsAll?.byDate[date.format(DATE_FORMAT)])
   }, [upcomingVisitsAll?.byDate, date])
@@ -74,7 +89,7 @@ export const _HubMap = () => {
     []
   )
 
-  const { data: visitors } = useOfficeVisitors(
+  const { data: visitors, refetch: refetchVisitors } = useOfficeVisitors(
     officeId,
     dayjs(date).format(DATE_FORMAT)
   )
@@ -226,6 +241,13 @@ export const _HubMap = () => {
                 }}
               />
             </div>
+            <div className="mt-10">
+              <StealthMode
+                originalValue={me?.stealthMode || false}
+                onToggle={onToggleStealthMode}
+                subtitle="Do not show me on this map"
+              />
+            </div>
           </div>
         )}
       </div>

diff --git a/src/modules/hub-map/server/router.ts b/src/modules/hub-map/server/router.ts
@@ -93,7 +93,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       let dailyEventsVisits = []
       const userIds = Array.from(new Set(visits.map(fp.prop('userId'))))
       const users = await fastify.db.User.findAll({
-        where: { id: { [Op.in]: userIds } },
+        where: { id: { [Op.in]: userIds }, stealthMode: false },
         raw: true,
       })
       const usersById = users.reduce(fp.by('id'), {})