feat: fix and use research update anchors

functions/src/Integrations/firebase-discord.ts

@@ -111,7 +111,7 @@ export async function handleResearchUpdatePublished(
   try {
     const response = await sendMessage(
       `📝 New update from ${author} in their research: ${title}\n` +
-        `Learn about it here: <${SITE_URL}/research/${slug}>`,
+        `Learn about it here: <${SITE_URL}/research/${slug}#update_${newUpdateIndex + 1}>`,
     )
     handleResponse(response)
   } catch (error) {

packages/cypress/src/integration/research/discussions.spec.ts

@@ -39,7 +39,7 @@ describe('[Research.Discussions]', () => {
       .click()
     cy.get('[data-cy="comments-form"]').type(comment)
     cy.get('[data-cy="comment-submit"]').click()
-    cy.get('[data-cy=update_0]').contains('2 Comments')
+    cy.get('[data-cy="ResearchUpdate: 1"]').contains('2 Comments')
     cy.get('[data-cy="CommentItem"]').last().should('contain', comment)
 
     cy.step('Can edit their own comment')
@@ -99,7 +99,7 @@ describe('[Research.Discussions]', () => {
             triggeredBy.userId === visitor.username,
         )
         expect(discussionNotification.relevantUrl).to.include(
-          `/research/${item.slug}#update_0`,
+          `/research/${item.slug}#update_1`,
         ),
           expect(discussionNotification.title).to.eq(item.title),
           expect(discussionNotification.triggeredBy.userId).to.eq(
@@ -122,7 +122,7 @@ describe('[Research.Discussions]', () => {
           triggeredBy.userId === visitor.username,
       )
       expect(discussionNotification.relevantUrl).to.include(
-        `/research/${item.slug}#update_0`,
+        `/research/${item.slug}#update_1`,
       ),
         expect(discussionNotification.title).to.eq(item.title),
         expect(discussionNotification.triggeredBy.userId).to.eq(
@@ -138,7 +138,7 @@ describe('[Research.Discussions]', () => {
           ({ type }) => type === 'new_comment_discussion',
         )
         expect(discussionNotification.relevantUrl).to.include(
-          `/research/${item.slug}#update_0`,
+          `/research/${item.slug}#update_1`,
         ),
           expect(discussionNotification.title).to.eq(item.title),
           expect(discussionNotification.triggeredBy.userId).to.eq(

packages/cypress/src/integration/research/read.spec.ts

@@ -15,6 +15,7 @@ describe('[Research]', () => {
       it('[Visible to everyone]', () => {
         cy.step('Can visit research')
         cy.visit(researchArticleUrl)
+
         cy.title().should(
           'eq',
           `${article.title} - Research - Community Platform`,
@@ -86,6 +87,9 @@ describe('[Research]', () => {
         cy.get('[data-cy=breadcrumbsItem]')
           .eq(2)
           .should('contain', article.title)
+
+        cy.step('Can scroll to specific research updates')
+        cy.get('[id="update_3"]').scrollIntoView().should('be.visible')
       })
     })
 

src/pages/Research/Content/ResearchArticle.tsx

@@ -118,6 +118,7 @@ const ResearchArticle = observer(() => {
         })
       }
     }
+    setIsLoading(true)
     init()
 
     // Reset the store's active item and seo tags on component cleanup
@@ -187,9 +188,7 @@ const ResearchArticle = observer(() => {
     return <NotFoundPage />
   }
 
-  const research = {
-    ...item,
-  }
+  const research = { ...item }
 
   return (
     <Box sx={{ width: '100%', maxWidth: '1000px', alignSelf: 'center' }}>

src/pages/Research/Content/ResearchUpdate.tsx

@@ -57,12 +57,14 @@ const ResearchUpdate = ({
     navigate('/sign-in')
   }
 
+  const displayId = updateIndex + 1
+
   return (
     <>
       <Flex
-        data-testid={`ResearchUpdate: ${updateIndex}`}
-        data-cy={`update_${updateIndex}`}
-        id={`update_${updateIndex}`}
+        data-testid={`ResearchUpdate: ${displayId}`}
+        data-cy={`ResearchUpdate: ${displayId}`}
+        id={`update_${displayId}`}
         mx={[0, 0, -2]}
         mt={9}
         sx={{ flexDirection: ['column', 'column', 'row'] }}
@@ -71,7 +73,7 @@ const ResearchUpdate = ({
           <FlexStepNumber sx={{ height: 'fit-content' }}>
             <Card py={3} px={4} sx={{ width: '100%', textAlign: 'center' }}>
               <Heading as="p" mb={0}>
-                {updateIndex + 1}
+                {displayId}
               </Heading>
             </Card>
           </FlexStepNumber>

src/stores/Discussions/discussions.store.tsx

@@ -251,10 +251,12 @@ export class DiscussionStore extends ModuleStore {
             ? parentComment.creatorName
             : research._createdBy
 
+          const updateHash = '#update_' + (updateIndex + 1)
+
           await this.userNotificationsStore.triggerNotification(
             'new_comment_discussion',
             username,
-            '/research/' + research.slug + '#update_' + updateIndex,
+            `/research/${research.slug}${updateHash}`,
             research.title,
           )
 
@@ -263,7 +265,7 @@ export class DiscussionStore extends ModuleStore {
               this.userNotificationsStore.triggerNotification(
                 'new_comment_discussion',
                 collaborator,
-                `/research/${research.slug}#update_${updateIndex}-comment:${commentId}`,
+                `/research/${research.slug}${updateHash}-comment:${commentId}`,
                 research.title,
               )
             })