AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 18:52:06 +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

2
src/components/ui/Navbar.tsx
View File

@@ -18,7 +18,7 @@ const DesktopLinks: FC = () => {
<Link tabIndex={0} href={page.slug}> <Link tabIndex={0} href={page.slug}>
<span <span
className={`text-lg uppercase ${ className={`text-lg uppercase ${
currentURL === page.slug ? 'font-extrabold' : 'font-semibold' currentURL === page.slug ? 'font-black' : 'font-medium'
} text-primary-content`} } text-primary-content`}
> >
{page.name} {page.name}

5
src/pages/404.tsx
View File

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

5
src/pages/500.tsx
View File

@@ -1,10 +1,9 @@
import Layout from '@/components/ui/Layout';
import { NextPage } from 'next'; import { NextPage } from 'next';
import Head from 'next/head'; import Head from 'next/head';
const ServerErrorPage: NextPage = () => { const ServerErrorPage: NextPage = () => {
return ( return (
<Layout> <>
<Head> <Head>
<title>500 Internal Server Error</title> <title>500 Internal Server Error</title>
<meta name="description" content="500 Internal Server Error" /> <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. Please try again later or contact us if the problem persists.
</h2> </h2>
</div> </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 { Space_Grotesk } from 'next/font/google';
import Head from 'next/head'; import Head from 'next/head';
import Layout from '@/components/ui/Layout';
const spaceGrotesk = Space_Grotesk({ const spaceGrotesk = Space_Grotesk({
subsets: ['latin'], subsets: ['latin'],
@@ -34,7 +35,9 @@ export default function App({ Component, pageProps }: AppProps) {
/> />
</Head> </Head>
<UserContext.Provider value={{ user, isLoading, error, mutate }}> <UserContext.Provider value={{ user, isLoading, error, mutate }}>
<Component {...pageProps} /> <Layout>
<Component {...pageProps} />
</Layout>
</UserContext.Provider> </UserContext.Provider>
</> </>
); );

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

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

5
src/pages/beers/[id]/edit.tsx
View File

@@ -2,7 +2,6 @@ import { NextPage } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import Layout from '@/components/ui/Layout';
import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired'; import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired';
import getBeerPostById from '@/services/BeerPost/getBeerPostById'; import getBeerPostById from '@/services/BeerPost/getBeerPostById';
import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult'; import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
@@ -19,7 +18,7 @@ const EditPage: NextPage<EditPageProps> = ({ beerPost }) => {
const pageTitle = `Edit \u201c${beerPost.name}\u201d`; const pageTitle = `Edit \u201c${beerPost.name}\u201d`;
return ( return (
<Layout> <>
<Head> <Head>
<title>{pageTitle}</title> <title>{pageTitle}</title>
<meta name="description" content={pageTitle} /> <meta name="description" content={pageTitle} />
@@ -41,7 +40,7 @@ const EditPage: NextPage<EditPageProps> = ({ beerPost }) => {
}} }}
/> />
</FormPageLayout> </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 BeerInfoHeader from '@/components/BeerById/BeerInfoHeader';
import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSection'; import BeerPostCommentsSection from '@/components/BeerById/BeerPostCommentsSection';
import BeerRecommendations from '@/components/BeerById/BeerRecommendations'; import BeerRecommendations from '@/components/BeerById/BeerRecommendations';
import Layout from '@/components/ui/Layout';
import getBeerPostById from '@/services/BeerPost/getBeerPostById'; import getBeerPostById from '@/services/BeerPost/getBeerPostById';
import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations'; import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations';
@@ -37,7 +36,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
<title>{beerPost.name}</title> <title>{beerPost.name}</title>
<meta name="description" content={beerPost.description} /> <meta name="description" content={beerPost.description} />
</Head> </Head>
<Layout> <>
<div> <div>
<Carousel <Carousel
className="w-full" className="w-full"
@@ -100,7 +99,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
</div> </div>
</div> </div>
</div> </div>
</Layout> </>
</> </>
); );
}; };

20
src/pages/beers/create.tsx
View File

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

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

@@ -1,5 +1,5 @@
import { NextPage } from 'next'; import { NextPage } from 'next';
import Layout from '@/components/ui/Layout';
import BeerCard from '@/components/BeerIndex/BeerCard'; import BeerCard from '@/components/BeerIndex/BeerCard';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
@@ -32,7 +32,7 @@ const BeerPage: NextPage = () => {
const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null); const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
return ( return (
<Layout> <>
<Head> <Head>
<title>Beer</title> <title>Beer</title>
<meta name="description" content="Beer posts" /> <meta name="description" content="Beer posts" />
@@ -105,7 +105,7 @@ const BeerPage: NextPage = () => {
)} )}
</div> </div>
</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 { NextPage } from 'next';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@@ -43,36 +42,34 @@ const SearchPage: NextPage = () => {
const showSearchResults = !isLoading && searchResults && !searchError; const showSearchResults = !isLoading && searchResults && !searchError;
return ( return (
<Layout> <div className="flex h-full w-full flex-col items-center justify-center">
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="h-full w-full space-y-20">
<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="flex h-[50%] w-full items-center justify-center bg-base-200"> <div className="w-8/12">
<div className="w-8/12"> <FormLabel htmlFor="search">What are you looking for?</FormLabel>
<FormLabel htmlFor="search">What are you looking for?</FormLabel> <input
<input type="text"
type="text" id="search"
id="search" className="input-bordered input w-full rounded-lg"
className="input-bordered input w-full rounded-lg" onChange={onChange}
onChange={onChange} value={searchValue}
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>
</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> </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 getBreweryPostById from '@/services/BreweryPost/getBreweryPostById';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult'; import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
import { GetServerSideProps, NextPage } from 'next'; import { GetServerSideProps, NextPage } from 'next';
@@ -11,9 +9,9 @@ interface BreweryPageProps {
const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => { const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost }) => {
return ( return (
<Layout> <>
<h1 className="text-3xl font-bold underline">{breweryPost.name}</h1> <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 Link from 'next/link';
import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts'; import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult'; import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
import Layout from '@/components/ui/Layout';
import { FC } from 'react'; import { FC } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { z } from 'zod'; import { z } from 'zod';
@@ -41,7 +41,7 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => { const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => {
return ( return (
<Layout> <>
<div className="flex items-center justify-center bg-base-100"> <div className="flex items-center justify-center bg-base-100">
<div className="my-10 flex w-10/12 flex-col space-y-4"> <div className="my-10 flex w-10/12 flex-col space-y-4">
<header className="my-10"> <header className="my-10">
@@ -56,7 +56,7 @@ const BreweryPage: NextPage<BreweryPageProps> = ({ breweryPosts }) => {
</div> </div>
</div> </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 { NextPage } from 'next';
import Head from 'next/head'; 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." content="The Biergarten App is an app for beer lovers to share their favourite brews and breweries with like-minded people online."
/> />
</Head> </Head>
<Layout>
<div className="flex h-full w-full items-center justify-center bg-primary"> <div className="flex h-full w-full items-center justify-center bg-primary">
<div className="w-9/12 text-center lg:w-8/12"> <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"> <h1 className="text-3xl font-bold md:text-4xl lg:text-5xl xl:text-8xl">
The Biergarten App The Biergarten App
</h1> </h1>
<p className="mt-4 text-lg lg:text-2xl"> <p className="mt-4 text-lg lg:text-2xl">
An app for beer lovers to share their favourite brews and breweries with An app for beer lovers to share their favourite brews and breweries with
like-minded people online. like-minded people online.
</p> </p>
</div>
</div> </div>
</Layout> </div>
</> </>
); );
}; };

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

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

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

@@ -1,6 +1,5 @@
import RegisterUserForm from '@/components/RegisterUserForm'; import RegisterUserForm from '@/components/RegisterUserForm';
import FormPageLayout from '@/components/ui/forms/FormPageLayout'; import FormPageLayout from '@/components/ui/forms/FormPageLayout';
import Layout from '@/components/ui/Layout';
import useRedirectWhenLoggedIn from '@/hooks/useRedirectIfLoggedIn'; import useRedirectWhenLoggedIn from '@/hooks/useRedirectIfLoggedIn';
import { NextPage } from 'next'; import { NextPage } from 'next';
@@ -11,7 +10,7 @@ const RegisterUserPage: NextPage = () => {
useRedirectWhenLoggedIn(); useRedirectWhenLoggedIn();
return ( return (
<Layout> <>
<Head> <Head>
<title>Register User</title> <title>Register User</title>
<meta name="description" content="Register a new user" /> <meta name="description" content="Register a new user" />
@@ -24,7 +23,7 @@ const RegisterUserPage: NextPage = () => {
> >
<RegisterUserForm /> <RegisterUserForm />
</FormPageLayout> </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 Spinner from '@/components/ui/Spinner';
import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired'; import withPageAuthRequired from '@/getServerSideProps/withPageAuthRequired';
import UserContext from '@/contexts/userContext'; import UserContext from '@/contexts/userContext';
@@ -18,24 +17,22 @@ const ProtectedPage: NextPage = () => {
const isDesktop = useMediaQuery('(min-width: 768px)'); const isDesktop = useMediaQuery('(min-width: 768px)');
return ( return (
<Layout> <div className="flex h-full flex-col items-center justify-center space-y-3 text-center">
<div className="flex h-full flex-col items-center justify-center space-y-3 text-center"> {isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}
{isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />} {user && !isLoading && (
{user && !isLoading && ( <>
<> <h1 className="text-2xl font-bold lg:text-7xl">
<h1 className="text-2xl font-bold lg:text-7xl"> Good {isMorning && 'morning'}
Good {isMorning && 'morning'} {isAfternoon && 'afternoon'}
{isAfternoon && 'afternoon'} {isEvening && 'evening'}
{isEvening && 'evening'} {`, ${user?.firstName}!`}
{`, ${user?.firstName}!`} </h1>
</h1> <h2 className="text-xl font-bold lg:text-4xl">
<h2 className="text-xl font-bold lg:text-4xl"> Welcome to the Biergarten App!
Welcome to the Biergarten App! </h2>
</h2> </>
</> )}
)} </div>
</div>
</Layout>
); );
}; };