refactor(starter): upgrade to new version of gatsby

src/components/Page/Page.js

@@ -1,28 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import styles from './Page.module.scss';
-
-type Props = {
-  title?: string,
-  children: React.Node
-};
-
-const Page = ({ title, children }: Props) => {
-  const pageRef = useRef();
-
-  useEffect(() => {
-    pageRef.current.scrollIntoView();
-  });
-
-  return (
-    <div ref={pageRef} className={styles['page']}>
-      <div className={styles['page__inner']}>
-        { title && <h1 className={styles['page__title']}>{title}</h1>}
-        <div className={styles['page__body']}>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Page;

src/components/Page/Page.module.scss

@@ -1,5 +1,5 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .page {
   @include margin-bottom(2);
@@ -21,7 +21,6 @@
     @include line-height(1);
     @include margin(0, 0, 1);
   }
-
 }
 
 @include breakpoint-sm {
@@ -31,9 +30,7 @@
     &__inner {
       padding: 30px 20px;
     }
-
   }
-
 }
 
 @include breakpoint-md {
@@ -43,7 +40,5 @@
     &__inner {
       padding: 40px 35px;
     }
-
   }
-
-}
+}

src/components/Page/Page.test.js

@@ -1,16 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Page from './Page';
-
-describe('Page', () => {
-  const props = {
-    children: 'test',
-    title: 'test',
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Page {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Page/Page.test.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import Page from "./Page";
+
+describe("Page", () => {
+  const props = {
+    children: "test",
+    title: "test",
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer
+      .create(<Page {...props}>{props.children}</Page>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Page/Page.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from "react";
+
+import type { Nullable } from "@/types";
+
+import styles from "./Page.module.scss";
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+const Page: React.FC<Props> = ({ title, children }: Props) => {
+  const pageRef = useRef<Nullable<HTMLDivElement>>(null);
+
+  useEffect(() => {
+    if (pageRef.current) {
+      pageRef.current.scrollIntoView();
+    }
+  }, []);
+
+  return (
+    <div ref={pageRef} className={styles.page}>
+      <div className={styles.page__inner}>
+        {title && <h1 className={styles.page__title}>{title}</h1>}
+        <div className={styles.page__body}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;

src/components/Page/index.js

@@ -1,2 +0,0 @@
-// @flow strict
-export { default } from './Page';

src/components/Page/index.ts

@@ -0,0 +1 @@
+export { default as Page } from "./Page";