feat(standups): Auto-open response discussion based on query param

packages/client/components/ResponseMentioned.tsx

@@ -17,6 +17,7 @@ const ResponseMentioned = (props: Props) => {
       fragment ResponseMentioned_notification on NotifyResponseMentioned {
         ...NotificationTemplate_notification
         response {
+          id
           user {
             picture
             preferredName
@@ -37,7 +38,7 @@ const ResponseMentioned = (props: Props) => {
   const {id: meetingId, name: meetingName} = meeting
   const goThere = () => {
     // :TODO: (jmtaber129): Link directly to card once we support that.
-    history.push(`/meet/${meetingId}`)
+    history.push(`/meet/${meetingId}/responses?responseId=${encodeURIComponent(response.id)}`)
   }
 
   // :TODO: (jmtaber129): Show mention preview.

packages/client/components/TeamPromptMeeting.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled'
 import graphql from 'babel-plugin-relay/macro'
-import React, {Suspense, useMemo} from 'react'
-import {useFragment} from 'react-relay'
+import React, {Suspense, useEffect, useMemo} from 'react'
+import {commitLocalUpdate, useFragment} from 'react-relay'
+import {useHistory} from 'react-router'
 import useAtmosphere from '~/hooks/useAtmosphere'
 import useMeeting from '~/hooks/useMeeting'
 import useTransition from '~/hooks/useTransition'
@@ -71,6 +72,7 @@ const TeamPromptMeeting = (props: Props) => {
         ...TeamPromptDiscussionDrawer_meeting
         ...TeamPromptEditablePrompt_meeting
         ...TeamPromptMeetingStatus_meeting
+        id
         isRightDrawerOpen
         phases {
           ... on TeamPromptResponsesPhase {
@@ -81,6 +83,7 @@ const TeamPromptMeeting = (props: Props) => {
                 userId
               }
               response {
+                id
                 plaintextContent
                 createdAt
               }
@@ -126,7 +129,26 @@ const TeamPromptMeeting = (props: Props) => {
   }, [phase])
   const transitioningStages = useTransition(stages)
   const {safeRoute, isDesktop} = useMeeting(meeting)
-  const {isRightDrawerOpen} = meeting
+  const history = useHistory()
+  const {isRightDrawerOpen, id: meetingId} = meeting
+  useEffect(() => {
+    const params = new URLSearchParams(history.location.search)
+    if (!params.get('responseId')) {
+      return
+    }
+
+    const stage = stages.find((stage) => stage.response?.id === params.get('responseId'))
+    if (!stage) {
+      return
+    }
+
+    commitLocalUpdate(atmosphere, (store) => {
+      const meetingProxy = store.get(meetingId)
+      if (!meetingProxy) return
+      meetingProxy.setValue(stage.id, 'localStageId')
+      meetingProxy.setValue(true, 'isRightDrawerOpen')
+    })
+  }, [])
   if (!safeRoute) return null
 
   return (

packages/client/modules/email/components/EmailNotifications/EmailResponseMentioned.tsx

@@ -18,6 +18,7 @@ const EmailResponseMentioned = (props: Props) => {
       fragment EmailResponseMentioned_notification on NotifyResponseMentioned {
         ...EmailNotificationTemplate_notification
         response {
+          id
           user {
             rasterPicture
             preferredName
@@ -36,8 +37,13 @@ const EmailResponseMentioned = (props: Props) => {
 
   const {id: meetingId, name: meetingName} = meeting
 
-  const linkUrl = makeAppURL(appOrigin, `/meet/${meetingId}`, {
-    searchParams: notificationSummaryUrlParams
+  // :TRICKY: If the URL we navigate to isn't the full URL w/ phase name (e.g. just
+  // '/meet/<meetingId>'), the URL will be overwritten and the 'responseId' will be lost.
+  const linkUrl = makeAppURL(appOrigin, `/meet/${meetingId}/responses`, {
+    searchParams: {
+      ...notificationSummaryUrlParams,
+      responseId: response.id
+    }
   })
 
   // :TODO: (jmtaber129): Show mention preview.

packages/client/utils/makeAppURL.ts

@@ -4,6 +4,7 @@ interface Options {
     utm_medium: string
     utm_campaign: string
     openNotifs?: string
+    responseId?: string
   }
 }