refactor scroll content

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/containers/Tutorial/components/Level.tsx

@@ -39,16 +39,8 @@ type Props = {
 }
 
 const Level = ({ level }: Props) => {
-  const pageTopRef = React.useRef(null)
-  const scrollToTop = () => {
-    // @ts-ignore
-    pageTopRef.current.scrollIntoView({ behavior: 'smooth' })
-  }
-  React.useEffect(scrollToTop, [level.id])
-
   return (
     <div css={styles.page}>
-      <div ref={pageTopRef} />
       <div css={styles.content}>
         <Content title={level.title} content={level.content} />
 

web-app/src/containers/Tutorial/components/ScrollContent.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+type Props = {
+  item: string
+  children: React.ReactElement
+}
+
+const ScrollContent = ({ item, children }: Props) => {
+  const pageTopRef: React.RefObject<any> = React.useRef(null)
+
+  const pageBottomRef: React.RefObject<any> = React.useRef(null)
+
+  const scrollToTop = () => {
+    pageTopRef.current.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  React.useEffect(scrollToTop, [item])
+
+  return (
+    <>
+      <div ref={pageTopRef} />
+      {children}
+      <div ref={pageBottomRef} />
+    </>
+  )
+}
+
+export default ScrollContent

web-app/src/containers/Tutorial/index.tsx

@@ -13,6 +13,7 @@ import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
 import formatLevels from './formatLevels'
 import Reset from './components/Reset'
 import Continue from './components/Continue'
+import ScrollContent from './components/ScrollContent'
 
 const styles = {
   header: {
@@ -120,7 +121,11 @@ const TutorialPage = (props: PageProps) => {
           <span css={styles.title}>{tutorial.summary.title}</span>
         </div>
 
-        {page === 'level' && <Level level={level} />}
+        {page === 'level' && (
+          <ScrollContent item={level.id}>
+            <Level level={level} />
+          </ScrollContent>
+        )}
         {page === 'review' && <ReviewPage levels={levels} />}
         {/* {page === 'settings' && <SettingsPage />} */}
       </div>