Scroll the feed to the relevant update when goal title is clicked

pbteja1998 · pbteja1998 · commit cfaef580c008 · 2021-02-21T15:17:01.000+05:30
diff --git a/src/components/HomePageFeed.tsx b/src/components/HomePageFeed.tsx
@@ -34,6 +34,7 @@ import {
 } from '@/components'
 import { Goal } from './goals'
 import type { GoalResponse } from 'src/pages/[username]'
+import { scrollToContentWithId } from 'src/utils'
 
 type LikeData = {
   count: number
@@ -141,7 +142,13 @@ export function HomePageFeedUpdate({
             </div>
           </div>
           <div className="mt-4 flex">
-            <button onClick={() => setGoalId()} className="hidden lg:block">
+            <button
+              onClick={() => {
+                setGoalId()
+                scrollToContentWithId(`homepage-update-${update.id}`)
+              }}
+              className="hidden lg:block"
+            >
               <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-brand-100 text-brand-800 hover:text-brand-600">
                 🚀 Goal: {goal.title}
               </span>
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1 +1,11 @@
 export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms))
+
+export function scrollToContentWithId(id: string) {
+  const element = document.getElementById(id)
+  if (!element) {
+    return
+  }
+  const yOffset = 80
+  const y = element.getBoundingClientRect().top + window.pageYOffset - yOffset
+  window.scrollTo({ behavior: 'smooth', top: y })
+}
