AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Remove Layout in page components, used in _app

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/404.tsx
View File

@@ -1,12 +1,11 @@
// create a 404 next js page using tailwind
import Layout from '@/components/ui/Layout';
import { NextPage } from 'next';
import Head from 'next/head';
const NotFound: NextPage = () => {
return (
<Layout>
<>
<Head>
<title>404 Page Not Found</title>
<meta name="description" content="404 Page Not Found" />
@@ -17,7 +16,7 @@ const NotFound: NextPage = () => {
Sorry, the page you are looking for does not exist.
</h2>
</div>
</Layout>
</>
);
};

5
src/pages/500.tsx
View File

@@ -1,10 +1,9 @@
import Layout from '@/components/ui/Layout';
import { NextPage } from 'next';
import Head from 'next/head';
const ServerErrorPage: NextPage = () => {
return (
<Layout>
<>
<Head>
<title>500 Internal Server Error</title>
<meta name="description" content="500 Internal Server Error" />
@@ -15,7 +14,7 @@ const ServerErrorPage: NextPage = () => {
Please try again later or contact us if the problem persists.
</h2>
</div>
</Layout>
</>
);
};

5
src/pages/_app.tsx
View File

@@ -7,6 +7,7 @@ import { themeChange } from 'theme-change';
import { Space_Grotesk } from 'next/font/google';
import Head from 'next/head';
import Layout from '@/components/ui/Layout';
const spaceGrotesk = Space_Grotesk({
subsets: ['latin'],
@@ -34,7 +35,9 @@ export default function App({ Component, pageProps }: AppProps) {
/>
</Head>
<UserContext.Provider value={{ user, isLoading, error, mutate }}>
<Component {...pageProps} />
<Layout>
<Component {...pageProps} />
</Layout>
</UserContext.Provider>
</>
);

9
src/pages/account/index.tsx
View File

@@ -1,15 +1,12 @@
import Layout from '@/components/ui/Layout';
import { NextPage } from 'next';
interface AccountPageProps {}
const AccountPage: NextPage<AccountPageProps> = () => {
return (
<Layout>
<div>
<h1>Account Page</h1>
</div>
</Layout>
<div>
<h1>Account Page</h1>
</div>
);
};

5
src/pages/beers/[id]/edit.tsx
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>
</>
);
};

5
src/pages/beers/[id]/index.tsx
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>
</>
</>
);
};

20
src/pages/beers/create.tsx
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>
);
};

6
src/pages/beers/index.tsx
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>
</>
);
};

53
src/pages/beers/search.tsx
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>
);
};

6
src/pages/breweries/[id].tsx
View File

@@ -1,5 +1,3 @@
import Layout from '@/components/ui/Layout';
import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
import { GetServerSideProps, NextPage } from 'next';
@@ -11,9 +9,9 @@ interface BreweryPageProps {
const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
return (
<Layout>
<>
<h1 className="text-3xl font-bold underline">{breweryPost.name}</h1>
</Layout>
</>
);
};

6
src/pages/breweries/index.tsx
View File

@@ -3,7 +3,7 @@ import { GetServerSideProps, NextPage } from 'next';
import Link from 'next/link';
import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
import Layout from '@/components/ui/Layout';
import { FC } from 'react';
import Image from 'next/image';
import { z } from 'zod';
@@ -41,7 +41,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => {
return (
<Layout>
<>
<div className="flex items-center justify-center bg-base-100">
<div className="my-10 flex w-10/12 flex-col space-y-4">
<header className="my-10">
@@ -56,7 +56,7 @@ const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => {
</div>
</div>
</div>
</Layout>
</>
);
};

24
src/pages/index.tsx
View File

@@ -1,4 +1,3 @@
import Layout from '@/components/ui/Layout';
import { NextPage } from 'next';
import Head from 'next/head';
@@ -12,19 +11,18 @@ const Home: NextPage = () => {
content="The Biergarten App is an app for beer lovers to share their favourite brews and breweries with like-minded people online."
/>
</Head>
<Layout>
<div className="flex h-full w-full items-center justify-center bg-primary">
<div className="w-9/12 text-center lg:w-8/12">
<h1 className="text-3xl font-bold md:text-4xl lg:text-5xl xl:text-8xl">
The Biergarten App
</h1>
<p className="mt-4 text-lg lg:text-2xl">
An app for beer lovers to share their favourite brews and breweries with
like-minded people online.
</p>
</div>
<div className="flex h-full w-full items-center justify-center bg-primary">
<div className="w-9/12 text-center lg:w-8/12">
<h1 className="text-3xl font-bold md:text-4xl lg:text-5xl xl:text-8xl">
The Biergarten App
</h1>
<p className="mt-4 text-lg lg:text-2xl">
An app for beer lovers to share their favourite brews and breweries with
like-minded people online.
</p>
</div>
</Layout>
</div>
</>
);
};

6
src/pages/login/index.tsx
View File

@@ -1,5 +1,5 @@
import { NextPage } from 'next';
import Layout from '@/components/ui/Layout';
import LoginForm from '@/components/Login/LoginForm';
import Image from 'next/image';
@@ -12,7 +12,7 @@ import useRedirectWhenLoggedIn from '@/hooks/useRedirectIfLoggedIn';
const LoginPage: NextPage = () => {
useRedirectWhenLoggedIn();
return (
<Layout>
<>
<Head>
<title>Login</title>
<meta name="description" content="Login to your account" />
@@ -49,7 +49,7 @@ const LoginPage: NextPage = () => {
</div>
</div>
</div>
</Layout>
</>
);
};

5
src/pages/register/index.tsx
View File

@@ -1,6 +1,5 @@
import RegisterUserForm from '@/components/RegisterUserForm';
import FormPageLayout from '@/components/ui/forms/FormPageLayout';
import Layout from '@/components/ui/Layout';
import useRedirectWhenLoggedIn from '@/hooks/useRedirectIfLoggedIn';
import { NextPage } from 'next';
@@ -11,7 +10,7 @@ const RegisterUserPage: NextPage = () => {
useRedirectWhenLoggedIn();
return (
<Layout>
<>
<Head>
<title>Register User</title>
<meta name="description" content="Register a new user" />
@@ -24,7 +23,7 @@ const RegisterUserPage: NextPage = () => {
>
<RegisterUserForm />
</FormPageLayout>
</Layout>
</>
);
};

35
src/pages/user/current.tsx
View File

@@ -1,4 +1,3 @@
import Layout from '@/components/ui/Layout';
import Spinner from '@/components/ui/Spinner';
import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired';
import UserContext from '@/contexts/userContext';
@@ -18,24 +17,22 @@ const ProtectedPage: NextPage = () => {
const isDesktop = useMediaQuery('(min-width: 768px)');
return (
<Layout>
<div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
{isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}
{user && !isLoading && (
<>
<h1 className="text-2xl font-bold lg:text-7xl">
Good {isMorning && 'morning'}
{isAfternoon && 'afternoon'}
{isEvening && 'evening'}
{`, ${user?.firstName}!`}
</h1>
<h2 className="text-xl font-bold lg:text-4xl">
Welcome to the Biergarten App!
</h2>
</>
)}
</div>
</Layout>
<div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
{isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}
{user && !isLoading && (
<>
<h1 className="text-2xl font-bold lg:text-7xl">
Good {isMorning && 'morning'}
{isAfternoon && 'afternoon'}
{isEvening && 'evening'}
{`, ${user?.firstName}!`}
</h1>
<h2 className="text-xl font-bold lg:text-4xl">
Welcome to the Biergarten App!
</h2>
</>
)}
</div>
);
};