From 458ac3aea6ad04598472b27018fea4e4fe57e954 Mon Sep 17 00:00:00 2001
From: nickoferrall <nickoferrall@gmail.com>
Date: Wed, 3 Mar 2021 17:31:46 -0500
Subject: [PATCH 1/2] prevent poker drawer from bumping up when control bar
 slides

---
 .../client/components/DiscussionThread.tsx    | 20 ++++++----------
 .../EstimatePhaseDiscussionDrawer.tsx         | 22 +++++-------------
 .../client/components/PokerEstimatePhase.tsx  | 23 +++++++++++++------
 packages/client/hooks/useControlBarCovers.ts  |  1 +
 .../mutations/NavigateMeetingMutation.ts      |  1 +
 5 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/packages/client/components/DiscussionThread.tsx b/packages/client/components/DiscussionThread.tsx
index 088ed4f6006..469d1f99260 100644
--- a/packages/client/components/DiscussionThread.tsx
+++ b/packages/client/components/DiscussionThread.tsx
@@ -1,6 +1,6 @@
 import graphql from 'babel-plugin-relay/macro'
-import React, {useRef, RefObject, useMemo, } from 'react'
-import { createFragmentContainer} from 'react-relay'
+import React, {useRef, RefObject, useMemo} from 'react'
+import {createFragmentContainer} from 'react-relay'
 import {DiscussionThread_viewer} from '~/__generated__/DiscussionThread_viewer.graphql'
 import {useCoverable} from '~/hooks/useControlBarCovers'
 import {Breakpoint, DiscussionThreadEnum, MeetingControlBarEnum} from '~/types/constEnums'
@@ -23,8 +23,7 @@ const Wrapper = styled('div')<{isExpanded: boolean; isPokerMeeting?: boolean}>(
     overflow: 'hidden',
     width: isPokerMeeting ? '100%' : 'calc(100% - 16px)',
     [makeMinWidthMediaQuery(Breakpoint.SIDEBAR_LEFT)]: {
-      height:
-        isExpanded || isPokerMeeting ? '100%' : `calc(100% - ${MeetingControlBarEnum.HEIGHT}px)`,
+      height: isExpanded ? '100%' : `calc(100% - ${MeetingControlBarEnum.HEIGHT}px)`,
       width: DiscussionThreadEnum.WIDTH
     }
   })
@@ -39,12 +38,7 @@ interface Props {
 const DiscussionThread = (props: Props) => {
   const {meetingContentRef, threadSourceId, viewer} = props
   const meeting = viewer.meeting!
-  const {
-    endedAt,
-    meetingType,
-    replyingToCommentId,
-    threadSource,
-  } = meeting
+  const {endedAt, meetingType, replyingToCommentId, threadSource} = meeting
   const thread = threadSource?.thread
   const commentors = threadSource?.commentors
   const isPokerMeeting = meetingType === MeetingTypeEnum.poker
@@ -61,9 +55,9 @@ const DiscussionThread = (props: Props) => {
   const listRef = useRef<HTMLDivElement>(null)
   const editorRef = useRef<HTMLTextAreaElement>(null)
   const ref = useRef<HTMLDivElement>(null)
-  // don't resize in a poker meeting as we do this in the parent
-  const coverableHeight = isPokerMeeting ? 0 : MeetingControlBarEnum.HEIGHT
-  const isExpanded = useCoverable('threads', ref, coverableHeight, meetingContentRef) || !!endedAt
+  const isExpanded =
+    useCoverable(`${meetingType}-thread`, ref, MeetingControlBarEnum.HEIGHT, meetingContentRef) ||
+    !!endedAt
   return (
     <Wrapper isExpanded={isExpanded} isPokerMeeting={isPokerMeeting} ref={ref}>
       <DiscussionThreadList
diff --git a/packages/client/components/EstimatePhaseDiscussionDrawer.tsx b/packages/client/components/EstimatePhaseDiscussionDrawer.tsx
index af2ac5f71b7..6ff9876e168 100644
--- a/packages/client/components/EstimatePhaseDiscussionDrawer.tsx
+++ b/packages/client/components/EstimatePhaseDiscussionDrawer.tsx
@@ -1,11 +1,10 @@
 import styled from '@emotion/styled'
-import React, {RefObject, useRef} from 'react'
+import React from 'react'
 import graphql from 'babel-plugin-relay/macro'
 import {createFragmentContainer} from 'react-relay'
-import {useCoverable} from '~/hooks/useControlBarCovers'
 import {desktopSidebarShadow} from '~/styles/elevation'
 import {EstimatePhaseDiscussionDrawer_meeting} from '~/__generated__/EstimatePhaseDiscussionDrawer_meeting.graphql'
-import {BezierCurve, DiscussionThreadEnum, MeetingControlBarEnum, ZIndex} from '../types/constEnums'
+import {BezierCurve, DiscussionThreadEnum, ZIndex} from '../types/constEnums'
 import DiscussionThreadRoot from './DiscussionThreadRoot'
 import {PALETTE} from '~/styles/paletteV2'
 import LabelHeading from './LabelHeading/LabelHeading'
@@ -77,20 +76,15 @@ interface Props {
   isOpen: boolean
   meeting: EstimatePhaseDiscussionDrawer_meeting
   onToggle: () => void
-  meetingContentRef: RefObject<HTMLDivElement>
 }
 
 const EstimatePhaseDiscussionDrawer = (props: Props) => {
-  const {isDesktop, isOpen, meeting, meetingContentRef, onToggle} = props
-  const {id: meetingId, endedAt, localStage} = meeting
+  const {isDesktop, isOpen, meeting, onToggle} = props
+  const {id: meetingId, localStage} = meeting
   const {serviceTaskId} = localStage
-  const ref = useRef<HTMLDivElement>(null)
-  const meetingControlBarBottom = 16
-  const coverableHeight = isDesktop ? MeetingControlBarEnum.HEIGHT + meetingControlBarBottom : 0
-  useCoverable('drawer', ref, coverableHeight, meetingContentRef) || !!endedAt
 
   return (
-    <Drawer isDesktop={isDesktop} isOpen={isOpen} ref={ref}>
+    <Drawer isDesktop={isDesktop} isOpen={isOpen}>
       <Header>
         <HeaderLabel>{'Discussion'}</HeaderLabel>
         <StyledCloseButton onClick={onToggle}>
@@ -98,11 +92,7 @@ const EstimatePhaseDiscussionDrawer = (props: Props) => {
         </StyledCloseButton>
       </Header>
       <ThreadColumn>
-        <DiscussionThreadRoot
-          meetingId={meetingId}
-          threadSourceId={serviceTaskId!}
-          meetingContentRef={ref}
-        />
+        <DiscussionThreadRoot meetingId={meetingId} threadSourceId={serviceTaskId!} />
       </ThreadColumn>
     </Drawer>
   )
diff --git a/packages/client/components/PokerEstimatePhase.tsx b/packages/client/components/PokerEstimatePhase.tsx
index aaca00eaf74..90a58ec5780 100644
--- a/packages/client/components/PokerEstimatePhase.tsx
+++ b/packages/client/components/PokerEstimatePhase.tsx
@@ -1,5 +1,5 @@
 import graphql from 'babel-plugin-relay/macro'
-import React, {useRef} from 'react'
+import React from 'react'
 import {createFragmentContainer} from 'react-relay'
 import {phaseLabelLookup} from '../utils/meetings/lookups'
 import {PokerEstimatePhase_meeting} from '../__generated__/PokerEstimatePhase_meeting.graphql'
@@ -35,14 +35,20 @@ interface Props extends PokerMeetingPhaseProps {
 
 const PokerEstimatePhase = (props: Props) => {
   const {avatarGroup, meeting, toggleSidebar, gotoStageId} = props
-  const {id: meetingId, localStage, endedAt, isCommentUnread, isRightDrawerOpen, showSidebar} = meeting
+  const {
+    id: meetingId,
+    localStage,
+    endedAt,
+    isCommentUnread,
+    isRightDrawerOpen,
+    showSidebar
+  } = meeting
   const isDesktop = useBreakpoint(Breakpoint.SIDEBAR_LEFT)
   const toggleDrawer = useRightDrawer(meetingId)
-  const meetingContentRef = useRef<HTMLDivElement>(null)
   if (!localStage) return null
   const {service} = localStage
   return (
-    <MeetingContent ref={meetingContentRef}>
+    <MeetingContent>
       <StyledMeetingHeaderAndPhase isOpen={isRightDrawerOpen} hideBottomBar={!!endedAt}>
         <MeetingTopBar
           avatarGroup={avatarGroup}
@@ -55,8 +61,12 @@ const PokerEstimatePhase = (props: Props) => {
           <PhaseHeaderTitle>{phaseLabelLookup.ESTIMATE}</PhaseHeaderTitle>
           <PhaseHeaderDescription>{'Estimate each story as a team'}</PhaseHeaderDescription>
         </MeetingTopBar>
-        {service === TaskServiceEnum.jira && <PokerEstimateHeaderCardJira stage={localStage as any} />}
-        {service === TaskServiceEnum.PARABOL && <PokerEstimateHeaderCardParabol stage={localStage as any} />}
+        {service === TaskServiceEnum.jira && (
+          <PokerEstimateHeaderCardJira stage={localStage as any} />
+        )}
+        {service === TaskServiceEnum.PARABOL && (
+          <PokerEstimateHeaderCardParabol stage={localStage as any} />
+        )}
         <PhaseWrapper>
           <EstimatePhaseArea gotoStageId={gotoStageId} meeting={meeting} />
         </PhaseWrapper>
@@ -66,7 +76,6 @@ const PokerEstimatePhase = (props: Props) => {
           isDesktop={isDesktop}
           isOpen={isRightDrawerOpen}
           meeting={meeting}
-          meetingContentRef={meetingContentRef}
           onToggle={toggleDrawer}
         />
       </ResponsiveDashSidebar>
diff --git a/packages/client/hooks/useControlBarCovers.ts b/packages/client/hooks/useControlBarCovers.ts
index 282cc8f3308..b5e34936349 100644
--- a/packages/client/hooks/useControlBarCovers.ts
+++ b/packages/client/hooks/useControlBarCovers.ts
@@ -42,6 +42,7 @@ export const useCoverable = (
   parentRef?: RefObject<HTMLDivElement>,
   columnsRef?: RefObject<HTMLDivElement>
 ) => {
+  if (id === 'poker-thread') return true
   const updateCoverables = () => {
     const el = ref.current
     if (!el) return
diff --git a/packages/client/mutations/NavigateMeetingMutation.ts b/packages/client/mutations/NavigateMeetingMutation.ts
index fc3ffded960..4162dcded04 100644
--- a/packages/client/mutations/NavigateMeetingMutation.ts
+++ b/packages/client/mutations/NavigateMeetingMutation.ts
@@ -147,6 +147,7 @@ export const navigateMeetingTeamUpdater: SharedUpdater<NavigateMeetingMutation_t
   }
 
   const reflectionGroups = meeting.getLinkedRecords('reflectionGroups')
+  if (!reflectionGroups) return
   const sortedReflectionGroups = reflectionGroups
     .slice()
     .sort((a, b) => (a.getValue('sortOrder') < b.getValue('sortOrder') ? -1 : 1))

From ea943e73e1f95cad4e953a2d9619239c25eaf860 Mon Sep 17 00:00:00 2001
From: nickoferrall <nickoferrall@gmail.com>
Date: Mon, 15 Mar 2021 14:17:49 -0500
Subject: [PATCH 2/2] use meetingType enum in useCoverable

---
 packages/client/components/DiscussionThread.tsx | 10 ++++++++--
 packages/client/hooks/useControlBarCovers.ts    |  7 +++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/client/components/DiscussionThread.tsx b/packages/client/components/DiscussionThread.tsx
index 7b5e62fa4a9..1495395cea3 100644
--- a/packages/client/components/DiscussionThread.tsx
+++ b/packages/client/components/DiscussionThread.tsx
@@ -55,8 +55,14 @@ const DiscussionThread = (props: Props) => {
   const editorRef = useRef<HTMLTextAreaElement>(null)
   const ref = useRef<HTMLDivElement>(null)
   const isExpanded =
-    useCoverable(`${meetingType}-thread`, ref, MeetingControlBarEnum.HEIGHT, meetingContentRef) ||
-    !!endedAt
+    useCoverable(
+      'threads',
+      ref,
+      MeetingControlBarEnum.HEIGHT,
+      meetingContentRef,
+      undefined,
+      meetingType
+    ) || !!endedAt
   return (
     <Wrapper isExpanded={isExpanded} isPokerMeeting={isPokerMeeting} ref={ref}>
       <DiscussionThreadList
diff --git a/packages/client/hooks/useControlBarCovers.ts b/packages/client/hooks/useControlBarCovers.ts
index b5e34936349..068c097bf15 100644
--- a/packages/client/hooks/useControlBarCovers.ts
+++ b/packages/client/hooks/useControlBarCovers.ts
@@ -1,5 +1,6 @@
 import {RefObject, useEffect} from 'react'
 import {BezierCurve, Breakpoint, DiscussionThreadEnum, NavSidebar} from '~/types/constEnums'
+import {MeetingTypeEnum} from '../__generated__/SummarySheet_meeting.graphql'
 import useResizeObserver from './useResizeObserver'
 
 interface ControlBarCoverable {
@@ -40,10 +41,11 @@ export const useCoverable = (
   ref: RefObject<HTMLDivElement>,
   height: number,
   parentRef?: RefObject<HTMLDivElement>,
-  columnsRef?: RefObject<HTMLDivElement>
+  columnsRef?: RefObject<HTMLDivElement>,
+  meetingType?: MeetingTypeEnum
 ) => {
-  if (id === 'poker-thread') return true
   const updateCoverables = () => {
+    if (meetingType === 'poker') return
     const el = ref.current
     if (!el) return
     if (window.innerWidth < Breakpoint.SINGLE_REFLECTION_COLUMN) return
@@ -79,6 +81,7 @@ export const useCoverable = (
     }
   }, [])
 
+  if (meetingType === 'poker') return true
   return coverables[id]?.isExpanded ?? false
 }