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

Refactor api requests and components out of pages

Browse Source
This commit is contained in:
Aaron William Po
2023-01-28 21:05:20 -05:00
parent a182f55280
commit fe277d5964
32 changed files with 1455 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
pages/beers/[id].tsx
View File

@@ -1,110 +1,18 @@
import { GetServerSideProps, NextPage } from 'next';
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
import getBeerPostById from '@/services/BeerPost/getBeerPostById';
import Layout from '@/components/Layout';
import Layout from '@/components/ui/Layout';
import Head from 'next/head';
import Link from 'next/link';
import formatDistanceStrict from 'date-fns/formatDistanceStrict';
import { useState } from 'react';
import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
import Image from 'next/image';
import BeerInfoHeader from '@/components/BeerById/BeerInfoHeader';
import CommentCard from '@/components/BeerById/CommentCard';
interface BeerPageProps {
beerPost: BeerPostQueryResult;
}
const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => {
const createdAtDate = new Date(beerPost.createdAt);
const timeDistance = formatDistanceStrict(createdAtDate, Date.now());
const [isLiked, setIsLiked] = useState(false);
return (
<div className="card bg-base-300">
<div className="card-body">
<h1 className="text-4xl font-bold">{beerPost.name}</h1>
<h2 className="text-2xl font-semibold">
by{' '}
<Link
href={`/breweries/${beerPost.brewery.id}`}
className="link-hover link text-2xl font-semibold"
>
{beerPost.brewery.name}
</Link>
</h2>
<h3 className="italic">
posted by{' '}
<Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
{beerPost.postedBy.username}
</Link>
{` ${timeDistance}`} ago
</h3>
<p>{beerPost.description}</p>
<div className="flex justify-between">
<div>
<div className="mb-1">
<Link
className="text-lg font-medium"
href={`/beers/types/${beerPost.type.id}`}
>
{beerPost.type.name}
</Link>
</div>
<div>
<span className="mr-4 text-lg font-medium">{beerPost.abv}% ABV</span>
<span className="text-lg font-medium">{beerPost.ibu} IBU</span>
</div>
</div>
<div className="card-actions">
<button
type="button"
className={`btn gap-2 rounded-2xl ${
!isLiked ? 'btn-ghost outline' : 'btn-primary'
}`}
onClick={() => {
setIsLiked(!isLiked);
}}
>
{isLiked ? (
<>
<FaThumbsUp className="text-2xl" />
<span>Liked</span>
</>
) : (
<>
<FaRegThumbsUp className="text-2xl" />
<span>Like</span>
</>
)}
</button>
</div>
</div>
</div>
</div>
);
};
const CommentCard: React.FC<{ comment: BeerPostQueryResult['beerComments'][number] }> = ({
comment,
}) => {
return (
<div className="card bg-base-300">
<div className="card-body">
<h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>
<h4 className="italic">{`posted ${formatDistanceStrict(
new Date(comment.createdAt),
new Date(),
)} ago`}</h4>
<p>{comment.content}</p>
</div>
</div>
);
};
const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
console.log(beerPost.beerComments);
return (
<Layout>
<Head>
@@ -113,7 +21,8 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
</Head>
<main>
{beerPost.beerImages[0] && (
<img
<Image
alt={beerPost.beerImages[0].alt}
src={beerPost.beerImages[0].url}
className="h-[42rem] w-full object-cover"
/>
@@ -122,13 +31,10 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
<div className="my-12 flex w-full items-center justify-center ">
<div className="w-10/12 space-y-3">
<BeerInfoHeader beerPost={beerPost} />
<div className="mt-4 flex space-x-3">
<div className="w-[60%] space-y-3">
<div className="card h-[22rem] bg-base-300"></div>
<div className="card h-[44rem] overflow-y-auto bg-base-300">
{/* for each comment make a card */}
{beerPost.beerComments.map((comment) => (
<CommentCard key={comment.id} comment={comment} />
))}

9
pages/beers/create.tsx
View File

@@ -1,5 +1,5 @@
import BeerForm from '@/components/BeerForm';
import Layout from '@/components/Layout';
import Layout from '@/components/ui/Layout';
import DBClient from '@/prisma/DBClient';
import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
@@ -16,14 +16,13 @@ interface CreateBeerPageProps {
const Create: NextPage<CreateBeerPageProps> = ({ breweries, types }) => {
return (
<Layout>
<div className="align-center my-12 flex h-full flex-col items-center justify-center">
<div className="align-center my-20 flex h-fit flex-col items-center justify-center">
<div className="w-8/12">
<div className="flex flex-col items-center space-y-1">
<BiBeer className="text-5xl" />
<h1 className="text-3xl font-bold">Create a New Beer</h1>
</div>
<BeerForm type="create" breweries={breweries} types={types} />
<BeerForm formType="create" breweries={breweries} types={types} />
</div>
</div>
</Layout>
@@ -32,8 +31,8 @@ const Create: NextPage<CreateBeerPageProps> = ({ breweries, types }) => {
export const getServerSideProps = async () => {
const breweryPosts = await getAllBreweryPosts();
const beerTypes = await DBClient.instance.beerType.findMany();
return {
props: {
breweries: JSON.parse(JSON.stringify(breweryPosts)),

66
pages/beers/index.tsx
View File

@@ -1,75 +1,18 @@
import { GetServerSideProps, NextPage } from 'next';
import getAllBeerPosts from '@/services/BeerPost/getAllBeerPosts';
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
import Link from 'next/link';
import { useRouter } from 'next/router';
import DBClient from '@/prisma/DBClient';
import Layout from '@/components/Layout';
import { FC } from 'react';
import Image from 'next/image';
import Layout from '@/components/ui/Layout';
import Pagination from '../../components/BeerIndex/Pagination';
import BeerCard from '../../components/BeerIndex/BeerCard';
interface BeerPageProps {
initialBeerPosts: BeerPostQueryResult[];
pageCount: number;
}
interface PaginationProps {
pageNum: number;
pageCount: number;
}
const Pagination: FC<PaginationProps> = ({ pageCount, pageNum }) => {
const router = useRouter();
return (
<div className="btn-group">
<button
className="btn"
disabled={pageNum <= 1}
onClick={async () =>
router.push({ pathname: '/beers', query: { page_num: pageNum - 1 } })
}
>
«
</button>
<button className="btn">Page {pageNum}</button>
<button
className="btn"
disabled={pageNum >= pageCount}
onClick={async () =>
router.push({ pathname: '/beers', query: { page_num: pageNum + 1 } })
}
>
»
</button>
</div>
);
};
const BeerCard: FC<{ post: BeerPostQueryResult }> = ({ post }) => {
return (
<div className="card bg-base-300" key={post.id}>
<figure className="card-image h-96">
{post.beerImages.length > 0 && (
<Image src={post.beerImages[0].url} alt={post.name} width="1029" height="110" />
)}
</figure>
<div className="card-body space-y-3">
<div>
<h2 className="text-3xl font-bold">
<Link href={`/beers/${post.id}`}>{post.name}</Link>
</h2>
<h3 className="text-xl font-semibold">{post.brewery.name}</h3>
</div>
<div>
<p>{post.description}</p>
</div>
</div>
</div>
);
};
const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
const router = useRouter();
const { query } = router;
@@ -93,13 +36,10 @@ const BeerPage: NextPage<BeerPageProps> = ({ initialBeerPosts, pageCount }) => {
export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (context) => {
const { query } = context;
const pageNumber = parseInt(query.page_num as string, 10) || 1;
const pageSize = 12;
const numberOfPosts = await DBClient.instance.beerPost.count();
const pageCount = numberOfPosts ? Math.ceil(numberOfPosts / pageSize) : 0;
const beerPosts = await getAllBeerPosts(pageNumber, pageSize);
return {