fix: next hydration error, using layout as actual wrapper

src/components/SearchBar/SearchBar.tsx

@@ -30,6 +30,7 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }: Props) => {
   const [mobileMenuIsOpen, setMobileMenuIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState(router.query.q);
   const [cookies, setCookies] = useCookies(["variantCount"])
+  const [variantCount, setVariantCount] = useState<number>(20000)
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -40,14 +41,12 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }: Props) => {
 
   const handleCountUp = () => {
     if (!inputRef.current) return;
-    if (cookies.variantCount) {
-      inputRef.current.placeholder = `Search ${cookies.variantCount} EDH combos`;
-      return;
-    }
     if (countUpRef.current < 25000) {
-      countUpRef.current +=  Math.floor(Math.random() * (50 - 25 + 1)) + 25;
+      countUpRef.current +=  Math.floor(Math.random() * (200 - 100 + 1)) + 100;
       inputRef.current.placeholder = `Search ${countUpToString(countUpRef.current)} EDH combos`;
       setTimeout(handleCountUp, 50);
+    } else if (cookies.variantCount) {
+      inputRef.current.placeholder = `Search ${cookies.variantCount} EDH combos`;
     }
   }
 
@@ -56,16 +55,14 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }: Props) => {
   }, [router.query.q]);
 
   useEffect(() => {
-    if (cookies.variantCount) {
-      handleCountUp()
-    }
+    if (cookies.variantCount) setVariantCount(cookies.variantCount)
     else if (!cookies.variantCount) {
       requestService.get<PaginatedResponse<Variant>>(`https://backend.commanderspellbook.com/variants/?limit=1`)
         .then((response) => {
           setCookies("variantCount", response.count, {path: "/", maxAge: 604800})
         })
-      handleCountUp()
     }
+    handleCountUp()
   }, []);
 
 
@@ -105,9 +102,7 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }: Props) => {
             name="q"
             ref={inputRef}
             onChange={(e) => setInputValue(e.target.value)}
-            placeholder={`Search ${
-              cookies.variantCount ? cookies.variantCount : "20000"
-            } EDH combos`}
+            placeholder={`Search ${variantCount} EDH combos`}
             id="search-bar-input"
             type="text"
             className={`${styles.mainSearchInput} ${

src/components/layout/PageWrapper/PageWrapper.tsx

@@ -3,25 +3,29 @@ import Footer from "../Footer/Footer";
 import SearchBar from "../../SearchBar/SearchBar";
 import styles from "./pageWrapper.module.scss";
 import AnalyticsCookieBanner from "../AnalyticsCookieBanner/AnalyticsCookieBanner";
+import {useRouter} from "next/router";
 
 type Props = {
   children: React.ReactNode;
   noMarginFooter?: boolean;
 };
 
 const PageWrapper: React.FC<Props> = ({ children, noMarginFooter }: Props) => {
+  const router = useRouter();
+  const isHome = router.pathname === '/';
+
   return (
-    <div className="flex flex-col h-full">
+    <div className={`flex flex-col h-full`}>
       <AnalyticsCookieBanner />
-      <div className="bg-dark">
+      <div className={`bg-dark  ${isHome ? 'hidden' : ''}`}>
         <nav className="container">
           <SearchBar />
         </nav>
         <div className={`gradient ${styles.searchBarBorder}`} />
       </div>
       <div className="flex-1">{children}</div>
 
-      <Footer noMargin={noMarginFooter} className="mt-24 lg:mt-48 z-0" />
+      <Footer noMargin={noMarginFooter} className={`mt-24 lg:mt-48 z-0 ${isHome ? 'hidden' : ''}`} />
     </div>
   );
 };

src/pages/404.tsx

@@ -1,7 +1,5 @@
-import PageWrapper from "../components/layout/PageWrapper/PageWrapper";
 import ErrorBase from "../components/layout/ErrorBase/ErrorBase";
 import styles from "./404.module.scss";
-import { useEffect } from "react";
 import { useState } from "react";
 import { useRouter } from "next/router";
 
@@ -39,13 +37,13 @@ const NotFoundPage = () => {
   // }, []);
 
   return (
-    <PageWrapper noMarginFooter>
+    <>
       <ErrorBase
         mainMessage="Page Not Found"
         subMessage={notFoundMessage}
         containerClassName={notFoundClass}
       />
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/500.tsx

@@ -17,13 +17,13 @@ const UnknownErrorPage = () => {
   }, []);
 
   return (
-    <PageWrapper noMarginFooter>
+    <>
       <ErrorBase
         mainMessage="Uh Oh"
         subMessage="Something went wrong. Try again in a few minutes."
         containerClassName={unknownErrorClass}
       />
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/_app.tsx

@@ -8,6 +8,7 @@ import { useEffect } from "react";
 import NextNProgress from 'nextjs-progressbar';
 import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
+import PageWrapper from "components/layout/PageWrapper/PageWrapper";
 config.autoAddCss = false
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
@@ -43,7 +44,9 @@ export default function App({ Component, pageProps }: AppProps) {
         }}
       />
       <NextNProgress options={{showSpinner: false}} color={"#9161f3"}/>
-      <Component {...pageProps} />
+      <PageWrapper>
+        <Component {...pageProps} />
+      </PageWrapper>
     </>
   );
 }

src/pages/about.tsx

@@ -2,14 +2,13 @@ import React from "react";
 import ArtCircle from "../components/layout/ArtCircle/ArtCircle";
 import ExternalLink from "../components/layout/ExternalLink/ExternalLink";
 import styles from "./about.module.scss";
-import PageWrapper from "../components/layout/PageWrapper/PageWrapper";
 import SpellbookHead from "../components/SpellbookHead/SpellbookHead";
 
 type Props = {};
 
 const About: React.FC<Props> = ({}: Props) => {
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Commander Spellbook: About"
         description="About the Commander Spellbook project to record EDH combos."
@@ -103,7 +102,7 @@ const About: React.FC<Props> = ({}: Props) => {
           </li>
         </ul>
       </div>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/advanced-search.tsx

@@ -624,7 +624,7 @@ const AdvancedSearch = () => {
   }, []);
 
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Commander Spellbook: Advanced Search"
         description="Advanced search form for searching through Commander Spellbook EDH combos."
@@ -887,7 +887,7 @@ const AdvancedSearch = () => {
           </div>
         </div>
       </form>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/combo/[id].tsx

@@ -1,4 +1,3 @@
-import PageWrapper from "../../components/layout/PageWrapper/PageWrapper";
 import pluralize from "pluralize";
 import CardHeader from "../../components/combo/CardHeader/CardHeader";
 import CardGroup from "../../components/combo/CardGroup/CardGroup";
@@ -102,7 +101,7 @@ const Combo = ({ combo }: Props) => {
   const loaded = true;
 
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title={`${title} ${subtitle}`}
         description={results.reduce(
@@ -187,7 +186,7 @@ const Combo = ({ combo }: Props) => {
           </aside>
         )}
       </div>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/find-my-combos.tsx

@@ -5,7 +5,6 @@ import {
   convertDecklistToDeck, Deck,
 } from "../lib/decklist-parser";
 import styles from "./find-my-combos.module.scss";
-import PageWrapper from "../components/layout/PageWrapper/PageWrapper";
 import ArtCircle from "../components/layout/ArtCircle/ArtCircle";
 import ComboResults from "../components/search/ComboResults/ComboResults";
 import SpellbookHead from "../components/SpellbookHead/SpellbookHead";
@@ -130,7 +129,7 @@ const FindMyCombos = () => {
   };
 
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Commander Spellbook: Find My Combos"
         description="Input a decklist to generate all possible combos in your deck as well as combo suggestions."
@@ -281,7 +280,7 @@ const FindMyCombos = () => {
           }
         </div>
       </div>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/index.tsx

@@ -1,4 +1,3 @@
-import Head from "next/head";
 import Link from "next/link";
 import Footer from "../components/layout/Footer/Footer";
 import SearchBar from "../components/SearchBar/SearchBar";
@@ -54,7 +53,6 @@ export default function Home({ featuredComboButtonText }: Props) {
         title="Commander Spellbook: The Search Engine for EDH Combos"
         description="The Premier Magic: the Gathering Combo Search Engine for the Commander / Elder Dragon Highlander (EDH) Format."
       />
-      <AnalyticsCookieBanner />
       <main>
         <div className="absolute top-5 right-5 z-20"><UserDropdown/></div>
         <div className="gradient relative z-10">

src/pages/login/discord.tsx

@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from "react";
-import PageWrapper from "../../components/layout/PageWrapper/PageWrapper";
 import ArtCircle from "../../components/layout/ArtCircle/ArtCircle";
 import styles from "../report-error.module.scss";
 import SpellbookHead from "../../components/SpellbookHead/SpellbookHead";
@@ -38,7 +37,7 @@ const Login: React.FC<Props> = ({}: Props) => {
   }, [router.isReady])
 
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Logging in."
         description="Discord logging in."
@@ -54,7 +53,7 @@ const Login: React.FC<Props> = ({}: Props) => {
             {error}
           </p>}
       </div>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/login/index.tsx

@@ -1,7 +1,6 @@
 import React, {useEffect, useState} from "react";
 import PageWrapper from "../../components/layout/PageWrapper/PageWrapper";
 import ArtCircle from "../../components/layout/ArtCircle/ArtCircle";
-import ExternalLink from "../../components/layout/ExternalLink/ExternalLink";
 import styles from "../report-error.module.scss";
 import SpellbookHead from "../../components/SpellbookHead/SpellbookHead";
 import TokenService from "../../services/token.service";
@@ -25,7 +24,7 @@ const Login: React.FC<Props> = ({}: Props) => {
   }, [])
 
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Commander Spellbook: Login"
         description="Login through discord to submit combo suggestions."
@@ -47,7 +46,7 @@ const Login: React.FC<Props> = ({}: Props) => {
           </Link>
         </div>
       </div>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/privacy-policy.tsx

@@ -1,4 +1,3 @@
-import PageWrapper from "../components/layout/PageWrapper/PageWrapper";
 import ArtCircle from "../components/layout/ArtCircle/ArtCircle";
 import ExternalLink from "../components/layout/ExternalLink/ExternalLink";
 import styles from "./privacy-policy.module.scss";
@@ -8,7 +7,7 @@ type Props = {};
 
 const PrivacyPolicy: React.FC<Props> = () => {
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Commander Spellbook: Privacy Policy"
         description="Privacy policy for the use of Commander Spellbook."
@@ -485,7 +484,7 @@ const PrivacyPolicy: React.FC<Props> = () => {
           agree to its terms.
         </p>
       </div>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/random.tsx

@@ -1,13 +1,12 @@
 import SplashPage from "../components/layout/SplashPage/SplashPage";
-import PageWrapper from "../components/layout/PageWrapper/PageWrapper";
 import SpellbookHead from "../components/SpellbookHead/SpellbookHead";
 import {RequestService} from "../services/request.service";
 import {GetServerSidePropsContext} from "next";
 
 const Random = () => {
 
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Commander Spellbook: Random"
         description="Find a random EDH combo on Commander Spellbook."
@@ -20,7 +19,7 @@ const Random = () => {
       >
         <p>Random combo</p>
       </SplashPage>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/report-error.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PageWrapper from "../components/layout/PageWrapper/PageWrapper";
 import ArtCircle from "../components/layout/ArtCircle/ArtCircle";
 import ExternalLink from "../components/layout/ExternalLink/ExternalLink";
 import styles from "./report-error.module.scss";
@@ -9,7 +8,7 @@ type Props = {};
 
 const ReportError: React.FC<Props> = ({}: Props) => {
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Commander Spellbook: Report Error"
         description="Report an error in a combo on Commander Spellbook through our discord."
@@ -47,7 +46,7 @@ const ReportError: React.FC<Props> = ({}: Props) => {
           </ExternalLink>
         </div>
       </div>
-    </PageWrapper>
+    </>
   );
 };
 

src/pages/search.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PageWrapper from "../components/layout/PageWrapper/PageWrapper";
 import SearchMessage from "../components/search/SearchMessage/SearchMessage";
 import StyledSelect, {
   Option,
@@ -92,7 +91,7 @@ const Search: React.FC<Props> = ({combos, count, page}: Props) => {
   const legalityMessage = (parsedSearchQuery.includes("legal:")) ? "" : " (legal:commander has been applied by default)"
 
   return (
-    <PageWrapper>
+    <>
       <SpellbookHead
         title="Commander Spellbook: Search Results"
         description="Search results for all EDH combos matching your query."
@@ -168,7 +167,7 @@ const Search: React.FC<Props> = ({combos, count, page}: Props) => {
           )}
         </div>
       </div>
-    </PageWrapper>
+    </>
   );
 };