feat: Add deeplink to comments on Insights

Works both on the main InsightViewer, as well as the /discuss subpage
ExpediaGroup · May 5, 2022 · 2c16b29 · 2c16b29
1 parent 260f3fc
commit 2c16b29
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/...nents/insight-viewer/components/insight-comments/components/comment-card/comment-card.tsx b/...nents/insight-viewer/components/insight-comments/components/comment-card/comment-card.tsx
@@ -14,7 +14,18 @@
  * limitations under the License.
  */
 
-import { Avatar, Box, Flex, HStack, IconButton, Text, Tooltip, StackDivider, VStack } from '@chakra-ui/react';
+import {
+  Avatar,
+  Box,
+  Flex,
+  HStack,
+  IconButton,
+  Link as ChakraLink,
+  Text,
+  Tooltip,
+  StackDivider,
+  VStack
+} from '@chakra-ui/react';
 import { DateTime } from 'luxon';
 import { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -109,8 +120,11 @@ export const CommentCard = ({
     return onLike(comment.id, liked);
   };
 
+  // `=` characters are not valid in CSS selectors
+  const idSlug = `comment-${comment.id.replaceAll(/=/gi, '')}`;
+
   return (
-    <VStack spacing="1rem" align="stretch">
+    <VStack spacing="1rem" align="stretch" id={idSlug}>
       <HStack align="center">
         <Avatar name={comment.author?.displayName} size="sm" />
 
@@ -119,14 +133,14 @@ export const CommentCard = ({
             {comment.author?.displayName}
           </Text>
         </Link>
-        <Text color="polar.600" fontSize="sm">
+        <ChakraLink href={`#${idSlug}`} color="polar.600" fontSize="sm">
           {formatDateIntl(comment.createdAt as unknown as string, DateTime.DATETIME_MED)}
           {comment.isEdited && (
             <Tooltip label="This comment was edited" aria-label="This comment was edited">
               {' (edited)'}
             </Tooltip>
           )}
-        </Text>
+        </ChakraLink>
 
         <HStack spacing="0.25rem" flexGrow={1} justify="flex-end" align="center">
           {isOwnComment && (

diff --git a/...s/insight-page/components/insight-viewer/components/insight-comments/insight-comments.tsx b/...s/insight-page/components/insight-viewer/components/insight-comments/insight-comments.tsx
@@ -23,6 +23,7 @@ import { Alert } from '../../../../../../components/alert/alert';
 import { Card } from '../../../../../../components/card/card';
 import { Crumbs } from '../../../../../../components/crumbs/crumbs';
 import type { Comment, CommentConnection, Insight } from '../../../../../../models/generated/graphql';
+import { useScrollToLocation } from '../../../../../../shared/use-scroll-to-location';
 import { useLikedBy } from '../../../../../../shared/useLikedBy';
 import type { RootState } from '../../../../../../store/store';
 
@@ -135,6 +136,9 @@ export const InsightComments = ({ insight, inline = false, ...props }: Props & B
   // Standalone mode is the opposite of inline mode.
   const standalone = !inline;
 
+  // Scroll to anchor location if needed
+  useScrollToLocation();
+
   const toast = useToast();
 
   const [{ data, error, fetching }, reexecuteQuery] = useQuery<{ comments: CommentConnection }>({