From f2054ae4d2b2fd785cc95898305ce809172654b2 Mon Sep 17 00:00:00 2001
From: Spencer Schoeneman <78219375+Spencer-Sch@users.noreply.github.com>
Date: Tue, 14 Nov 2023 16:24:46 -0600
Subject: [PATCH] Add page layouts to frontend (#2)

* add page layout with no header or footer

* add page layout with header and footer

* edit index.tsx page to work with new page layouts

* remove Header and Footer from _app.tsx

* alter _app.tsx to work with new page layouts
---
 .../nextjs/components/layouts/CleanLayout.tsx | 13 ++++++++++
 .../components/layouts/HeaderFooterLayout.tsx | 17 +++++++++++++
 packages/nextjs/pages/_app.tsx                | 25 +++++++++++--------
 packages/nextjs/pages/index.tsx               | 14 ++++++++---
 4 files changed, 54 insertions(+), 15 deletions(-)
 create mode 100644 packages/nextjs/components/layouts/CleanLayout.tsx
 create mode 100644 packages/nextjs/components/layouts/HeaderFooterLayout.tsx

diff --git a/packages/nextjs/components/layouts/CleanLayout.tsx b/packages/nextjs/components/layouts/CleanLayout.tsx
new file mode 100644
index 0000000..2695706
--- /dev/null
+++ b/packages/nextjs/components/layouts/CleanLayout.tsx
@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+
+interface CleanLayoutProps {
+  children: ReactNode;
+}
+
+export default function CleanLayout({ children }: CleanLayoutProps) {
+  return (
+    <>
+      <main className="relative flex flex-col justify-center flex-1">{children}</main>
+    </>
+  );
+}
diff --git a/packages/nextjs/components/layouts/HeaderFooterLayout.tsx b/packages/nextjs/components/layouts/HeaderFooterLayout.tsx
new file mode 100644
index 0000000..d1d0d5c
--- /dev/null
+++ b/packages/nextjs/components/layouts/HeaderFooterLayout.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+import { Footer } from "~~/components/Footer";
+import { Header } from "~~/components/Header";
+
+interface HeaderFooterLayoutProps {
+  children: ReactNode;
+}
+
+export default function HeaderFooterLayout({ children }: HeaderFooterLayoutProps) {
+  return (
+    <>
+      <Header />
+      <main className="relative flex flex-col justify-center flex-1">{children}</main>
+      <Footer />
+    </>
+  );
+}
diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
index a0dc186..f083134 100644
--- a/packages/nextjs/pages/_app.tsx
+++ b/packages/nextjs/pages/_app.tsx
@@ -1,13 +1,12 @@
-import { useEffect, useState } from "react";
+import { ReactElement, ReactNode, useEffect, useState } from "react";
 import type { AppProps } from "next/app";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
+import type { NextPage } from "next";
 import NextNProgress from "nextjs-progressbar";
 import { Toaster } from "react-hot-toast";
 import { useDarkMode } from "usehooks-ts";
 import { WagmiConfig } from "wagmi";
-import { Footer } from "~~/components/Footer";
-import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { useGlobalState } from "~~/services/store/store";
@@ -15,7 +14,15 @@ import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 import { appChains } from "~~/services/web3/wagmiConnectors";
 import "~~/styles/globals.css";
 
-const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
+export type NextPageWithLayout<P = Record<string, never>, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+const ScaffoldEthApp = ({ Component, pageProps }: AppPropsWithLayout) => {
   const price = useNativeCurrencyPrice();
   const setNativeCurrencyPrice = useGlobalState(state => state.setNativeCurrencyPrice);
   // This variable is required for initial client side rendering of correct theme for RainbowKit
@@ -32,6 +39,8 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
     setIsDarkTheme(isDarkMode);
   }, [isDarkMode]);
 
+  const getLayout = Component.getLayout || (page => page);
+
   return (
     <WagmiConfig config={wagmiConfig}>
       <NextNProgress />
@@ -40,13 +49,7 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
         avatar={BlockieAvatar}
         theme={isDarkTheme ? darkTheme() : lightTheme()}
       >
-        <div className="flex flex-col min-h-screen">
-          <Header />
-          <main className="relative flex flex-col justify-center flex-1">
-            <Component {...pageProps} />
-          </main>
-          <Footer />
-        </div>
+        <div className="flex flex-col min-h-screen">{getLayout(<Component {...pageProps} />)}</div>
         <Toaster />
       </RainbowKitProvider>
     </WagmiConfig>
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index a94c44b..5ec514b 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -1,11 +1,13 @@
+import { ReactElement } from "react";
 import Link from "next/link";
-import type { NextPage } from "next";
+import type { NextPageWithLayout } from "./_app";
 import { MetaHeader } from "~~/components/MetaHeader";
+import CleanLayout from "~~/components/layouts/CleanLayout";
 
-const Home: NextPage = () => {
+const LandingPage: NextPageWithLayout = () => {
   return (
     <>
-      <MetaHeader />
+      <MetaHeader /> {/* Look into MetaHeader - should it be moved to _app.tsx ??? */}
       <div className="flex flex-col items-center pt-10">
         <div className="px-5">
           <h1 className="text-center mb-8">
@@ -26,4 +28,8 @@ const Home: NextPage = () => {
   );
 };
 
-export default Home;
+LandingPage.getLayout = function getLayout(page: ReactElement) {
+  return <CleanLayout>{page}</CleanLayout>;
+};
+
+export default LandingPage;