Remove Layout in page components, used in _app

This fixes a glitch where the theme change button would stop working on client route change.
This commit is contained in:
Aaron William Po
2023-04-22 22:16:46 -04:00
parent 603588ca54
commit 53c147eecc
16 changed files with 90 additions and 107 deletions

View File

@@ -2,7 +2,6 @@ import { NextPage } from 'next';
import Head from 'next/head';
import React from 'react';
import Layout from '@/components/ui/Layout';
import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired';
import getBeerPostById from '@/services/BeerPost/getBeerPostById';
import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
@@ -19,7 +18,7 @@ const EditPage: NextPage<EditPageProps> = ({ beerPost }) => {
const pageTitle = `Edit \u201c${beerPost.name}\u201d`;
return (
<Layout>
<>
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageTitle} />
@@ -41,7 +40,7 @@ const EditPage: NextPage<EditPageProps> = ({ beerPost }) => {
}}
/>
</FormPageLayout>
</Layout>
</>
);
};

View File

@@ -5,7 +5,6 @@ import Image from 'next/image';
import BeerInfoHeader from '@/components/BeerById/BeerInfoHeader';
import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSection';
import BeerRecommendations from '@/components/BeerById/BeerRecommendations';
import Layout from '@/components/ui/Layout';
import getBeerPostById from '@/services/BeerPost/getBeerPostById';
import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations';
@@ -37,7 +36,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
<title>{beerPost.name}</title>
<meta name="description" content={beerPost.description} />
</Head>
<Layout>
<>
<div>
<Carousel
className="w-full"
@@ -100,7 +99,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
</div>
</div>
</div>
</Layout>
</>
</>
);
};

View File

@@ -1,6 +1,6 @@
import CreateBeerPostForm from '@/components/CreateBeerPostForm';
import FormPageLayout from '@/components/ui/forms/FormPageLayout';
import Layout from '@/components/ui/Layout';
import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired';
import DBClient from '@/prisma/DBClient';
import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
@@ -17,16 +17,14 @@ interface CreateBeerPageProps {
const Create: NextPage<CreateBeerPageProps> = ({ breweries, types }) => {
return (
<Layout>
<FormPageLayout
headingText="Create a new beer"
headingIcon={BiBeer}
backLink="/beers"
backLinkText="Back to beers"
>
<CreateBeerPostForm breweries={breweries} types={types} />
</FormPageLayout>
</Layout>
<FormPageLayout
headingText="Create a new beer"
headingIcon={BiBeer}
backLink="/beers"
backLinkText="Back to beers"
>
<CreateBeerPostForm breweries={breweries} types={types} />
</FormPageLayout>
);
};

View File

@@ -1,5 +1,5 @@
import { NextPage } from 'next';
import Layout from '@/components/ui/Layout';
import BeerCard from '@/components/BeerIndex/BeerCard';
import Head from 'next/head';
import Link from 'next/link';
@@ -32,7 +32,7 @@ const BeerPage: NextPage = () => {
const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
return (
<Layout>
<>
<Head>
<title>Beer</title>
<meta name="description" content="Beer posts" />
@@ -105,7 +105,7 @@ const BeerPage: NextPage = () => {
)}
</div>
</div>
</Layout>
</>
);
};

View File

@@ -1,4 +1,3 @@
import Layout from '@/components/ui/Layout';
import { NextPage } from 'next';
import { useRouter } from 'next/router';
@@ -43,36 +42,34 @@ const SearchPage: NextPage = () => {
const showSearchResults = !isLoading && searchResults && !searchError;
return (
<Layout>
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="h-full w-full space-y-20">
<div className="flex h-[50%] w-full items-center justify-center bg-base-200">
<div className="w-8/12">
<FormLabel htmlFor="search">What are you looking for?</FormLabel>
<input
type="text"
id="search"
className="input-bordered input w-full rounded-lg"
onChange={onChange}
value={searchValue}
/>
</div>
</div>
<div className="flex flex-col items-center justify-center">
{!showSearchResults ? (
<Spinner size="lg" />
) : (
<div className="grid w-8/12 gap-4 md:grid-cols-2 lg:grid-cols-3">
{searchResults.map((result) => {
return <BeerCard key={result.id} post={result} />;
})}
</div>
)}
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="h-full w-full space-y-20">
<div className="flex h-[50%] w-full items-center justify-center bg-base-200">
<div className="w-8/12">
<FormLabel htmlFor="search">What are you looking for?</FormLabel>
<input
type="text"
id="search"
className="input-bordered input w-full rounded-lg"
onChange={onChange}
value={searchValue}
/>
</div>
</div>
<div className="flex flex-col items-center justify-center">
{!showSearchResults ? (
<Spinner size="lg" />
) : (
<div className="grid w-8/12 gap-4 md:grid-cols-2 lg:grid-cols-3">
{searchResults.map((result) => {
return <BeerCard key={result.id} post={result} />;
})}
</div>
)}
</div>
</div>
</Layout>
</div>
);
};