enhancement: scroll admissions content into view using effect hook

indocom · Jan 22, 2021 · 27cf1f0 · 27cf1f0 · vercel · Jan 22, 2021
1 parent 88441e4
commit 27cf1f0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/pageContent/Admissions/index.tsx b/src/pageContent/Admissions/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import Button from "src/components/Button";
@@ -22,6 +22,15 @@ const AdmissionsContent: React.FC<OwnProps> = ({
   const currPageNum = parseInt(slug[slug.length - 1]);
 
   const contentRef = useRef(null);
+  const firstUpdate = useRef(true);
+  useEffect(() => {
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    }
+
+    contentRef.current.scrollIntoView();
+  });
 
   const renderNavItems = (navItems, chapter) => {
     return navItems[chapter].map((navItem, index) => {
@@ -85,13 +94,12 @@ const AdmissionsContent: React.FC<OwnProps> = ({
           <div className={`flex flex-row justify-between mt-20`}>
             {currPageNum > 1 && (
               <Button
-                onClick={async () => {
-                  await router.push(
+                onClick={() => {
+                  router.push(
                     `/admissions/${slug[0]}/${currPageNum < 10 ? "0" : ""}${
                       currPageNum - 1
                     }`
                   );
-                  await contentRef.current.scrollIntoView();
                 }}
                 style={`mr-auto`}
               >
@@ -100,13 +108,12 @@ const AdmissionsContent: React.FC<OwnProps> = ({
             )}
             {currPageNum < Object.keys(navItems[chapter]).length && (
               <Button
-                onClick={async () => {
-                  await router.push(
+                onClick={() => {
+                  router.push(
                     `/admissions/${slug[0]}/${currPageNum < 10 ? "0" : ""}${
                       currPageNum + 1
                     }`
                   );
-                  await contentRef.current.scrollIntoView();
                 }}
                 style={`ml-auto`}
               >

diff --git a/src/pageContent/Home/index.tsx b/src/pageContent/Home/index.tsx
@@ -70,7 +70,7 @@ const HomeContent: React.FC = () => {
           className={`lg:hidden col-start-6 col-span-7 row-start-1 row-span-6`}
         >
           <div
-            className={`mt-6 ml-6 grid grid-cols-7 grid-rows-6 h-full w-full`}
+            className={`pt-6 pl-6 grid grid-cols-7 grid-rows-6 h-full w-full`}
           >
             <div className={`col-span-6 row-span-5 bg-pinus-blue`} />
           </div>