From 56308aae693370a932733307f220af4b7551fe78 Mon Sep 17 00:00:00 2001
From: Georg Bremer <github@dschoordsch.de>
Date: Thu, 18 Apr 2024 09:33:04 +0200
Subject: [PATCH] fix: Refactor active meeting dropdown to get rid of some edge
 case bugs

---
 .../NewMeetingActionsCurrentMeetings.tsx      | 18 ++---
 .../components/SelectMeetingDropdown.tsx      | 44 +++--------
 .../components/SelectMeetingDropdownItem.tsx  | 76 +++++--------------
 3 files changed, 33 insertions(+), 105 deletions(-)

diff --git a/packages/client/components/NewMeetingActionsCurrentMeetings.tsx b/packages/client/components/NewMeetingActionsCurrentMeetings.tsx
index 59708912872..758acda8cbd 100644
--- a/packages/client/components/NewMeetingActionsCurrentMeetings.tsx
+++ b/packages/client/components/NewMeetingActionsCurrentMeetings.tsx
@@ -4,13 +4,12 @@ import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
 import {NewMeetingActionsCurrentMeetings_team$key} from '~/__generated__/NewMeetingActionsCurrentMeetings_team.graphql'
-import {MenuPosition} from '~/hooks/useCoords'
-import useMenu from '~/hooks/useMenu'
 import useSnacksForNewMeetings from '~/hooks/useSnacksForNewMeetings'
 import {PALETTE} from '~/styles/paletteV3'
 import plural from '~/utils/plural'
 import FlatButton from './FlatButton'
 import SelectMeetingDropdown from './SelectMeetingDropdown'
+import {Menu} from '../ui/Menu/Menu'
 
 const CurrentButton = styled(FlatButton)<{hasMeetings: boolean}>(({hasMeetings}) => ({
   color: PALETTE.ROSE_500,
@@ -43,30 +42,23 @@ const NewMeetingActionsCurrentMeetings = (props: Props) => {
     `,
     teamRef
   )
-  const {togglePortal, originRef, menuPortal, menuProps} = useMenu<HTMLButtonElement>(
-    MenuPosition.LOWER_RIGHT,
-    {
-      isDropdown: true
-    }
-  )
   const {activeMeetings} = team
   useSnacksForNewMeetings(activeMeetings as any)
   const meetingCount = activeMeetings.length
   const label = `${meetingCount} Active ${plural(meetingCount, 'Meeting')}`
   if (!meetingCount) return null
   return (
-    <>
+    <Menu trigger={
       <CurrentButton
-        onClick={togglePortal}
-        ref={originRef}
         hasMeetings={meetingCount > 0}
         size={'large'}
       >
         <ForumIcon />
         {label}
       </CurrentButton>
-      {menuPortal(<SelectMeetingDropdown menuProps={menuProps} meetings={activeMeetings!} />)}
-    </>
+      }>
+      <SelectMeetingDropdown meetings={activeMeetings!} />
+    </Menu>
   )
 }
 
diff --git a/packages/client/components/SelectMeetingDropdown.tsx b/packages/client/components/SelectMeetingDropdown.tsx
index c6179d9c990..64c1d3e85f2 100644
--- a/packages/client/components/SelectMeetingDropdown.tsx
+++ b/packages/client/components/SelectMeetingDropdown.tsx
@@ -1,32 +1,17 @@
-import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
 import {SelectMeetingDropdown_meetings$key} from '~/__generated__/SelectMeetingDropdown_meetings.graphql'
-import useRouter from '~/hooks/useRouter'
-import {PALETTE} from '~/styles/paletteV3'
 import plural from '~/utils/plural'
-import {MenuProps} from '../hooks/useMenu'
-import Menu from './Menu'
-import MenuItem from './MenuItem'
 import SelectMeetingDropdownItem from './SelectMeetingDropdownItem'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 interface Props {
-  menuProps: MenuProps
   meetings: SelectMeetingDropdown_meetings$key
 }
 
-const HeaderLabel = styled('div')({
-  color: PALETTE.SLATE_600,
-  fontSize: 12,
-  fontWeight: 600,
-  lineHeight: '16px',
-  padding: '2px 16px 8px',
-  userSelect: 'none'
-})
-
 const SelectMeetingDropdown = (props: Props) => {
-  const {meetings: meetingsRef, menuProps} = props
+  const {meetings: meetingsRef} = props
   const meetings = useFragment(
     graphql`
       fragment SelectMeetingDropdown_meetings on NewMeeting @relay(plural: true) {
@@ -36,25 +21,18 @@ const SelectMeetingDropdown = (props: Props) => {
     `,
     meetingsRef
   )
-  const {history} = useRouter()
   const meetingCount = meetings.length
   const label = `${meetingCount} Active ${plural(meetingCount, 'Meeting')}`
   return (
-    <Menu ariaLabel={'Select the Meeting to enter'} {...menuProps}>
-      <HeaderLabel>{label}</HeaderLabel>
-      {meetings.map((meeting) => {
-        const handleClick = () => {
-          history.push(`/meet/${meeting.id}`)
-        }
-        return (
-          <MenuItem
-            key={meeting.id}
-            label={<SelectMeetingDropdownItem meeting={meeting} />}
-            onClick={handleClick}
-          />
-        )
-      })}
-    </Menu>
+    <>
+      <DropdownMenu.Label className='text-xs text-slate-600 font-semibold px-4 py-2 select-none'>{label}</DropdownMenu.Label>
+      {meetings.map((meeting) => (
+        <SelectMeetingDropdownItem
+          key={meeting.id}
+          meeting={meeting}
+        />
+      ))}
+    </>
   )
 }
 
diff --git a/packages/client/components/SelectMeetingDropdownItem.tsx b/packages/client/components/SelectMeetingDropdownItem.tsx
index ba8e7114daf..533360a8fc2 100644
--- a/packages/client/components/SelectMeetingDropdownItem.tsx
+++ b/packages/client/components/SelectMeetingDropdownItem.tsx
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled'
 import {
   ArrowForward as ArrowForwardIcon,
   ChangeHistory,
@@ -11,53 +10,9 @@ import React from 'react'
 import {useFragment} from 'react-relay'
 import {SelectMeetingDropdownItem_meeting$key} from '~/__generated__/SelectMeetingDropdownItem_meeting.graphql'
 import useRouter from '~/hooks/useRouter'
-import {PALETTE} from '~/styles/paletteV3'
 import getMeetingPhase from '~/utils/getMeetingPhase'
 import {meetingTypeToIcon, phaseLabelLookup} from '~/utils/meetings/lookups'
-
-const Wrapper = styled('div')({
-  alignItems: 'center',
-  display: 'flex',
-  width: '100%'
-})
-
-const MeetingIcon = styled('div')({
-  color: PALETTE.SLATE_600,
-  height: 24,
-  width: 24,
-  margin: 16
-})
-
-const MeetingSVG = styled('div')({
-  padding: 16
-})
-
-const MeetingInfo = styled('div')({
-  display: 'flex',
-  flexDirection: 'column'
-})
-
-const Title = styled('div')({
-  color: PALETTE.SLATE_700,
-  fontSize: 16,
-  lineHeight: '24px',
-  fontWeight: 600
-})
-
-const Subtitle = styled('div')({
-  color: PALETTE.SLATE_600,
-  fontSize: 12
-})
-
-const Action = styled('div')({
-  flex: 1,
-  display: 'flex',
-  justifyContent: 'end',
-  alignItems: 'center',
-  height: 24,
-  marginRight: 16,
-  width: 24
-})
+import {MenuItem} from '../ui/Menu/MenuItem'
 
 interface Props {
   meeting: SelectMeetingDropdownItem_meeting$key
@@ -105,9 +60,10 @@ const SelectMeetingDropdownItem = (props: Props) => {
   const meetingPhaseLabel = (meetingPhase && phaseLabelLookup[meetingPhase.phaseType]) || 'Complete'
 
   return (
-    <Wrapper onClick={gotoMeeting}>
+    <MenuItem
+      onClick={gotoMeeting}>
       {typeof IconOrSVG === 'string' ? (
-        <MeetingIcon>
+        <div className='text-slate-600 size-6 m-2'>
           {
             {
               group_work: <GroupWork />,
@@ -115,22 +71,24 @@ const SelectMeetingDropdownItem = (props: Props) => {
               history: <History />
             }[IconOrSVG]
           }
-        </MeetingIcon>
+        </div>
       ) : (
-        <MeetingSVG>
+        <div className='p-2'>
           <IconOrSVG />
-        </MeetingSVG>
+        </div>
       )}
-      <MeetingInfo>
-        <Title>{name}</Title>
-        <Subtitle>
+      <div className='flex flex-col px-2'>
+        <div className='text-slate-700 text-base font-semibold'>
+          {name}
+        </div>
+        <div className='text-slate-600 text-xs'>
           {meetingPhaseLabel} • {teamName}
-        </Subtitle>
-      </MeetingInfo>
-      <Action>
+        </div>
+      </div>
+      <div className='flex flex-grow justify-end items-center size-6'>
         <ArrowForwardIcon />
-      </Action>
-    </Wrapper>
+      </div>
+    </MenuItem>
   )
 }