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

Add create beer, beer post page

Browse Source
This commit is contained in:
Aaron William Po
2023-01-24 21:03:31 -05:00
parent 972846f5a8
commit d0bced1376
12 changed files with 264 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,7 +86,25 @@ const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost
);
};
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>
@@ -108,7 +126,13 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ 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] 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} />
))}
</div>
</div>
<div className="w-[40%]">
<div className="card h-full bg-base-300"></div>

21
pages/beers/create.tsx
View File

@@ -1,19 +1,29 @@
import BeerForm from '@/components/BeerForm';
import Layout from '@/components/Layout';
import DBClient from '@/prisma/DBClient';
import getAllBreweryPosts from '@/services/BreweryPost/getAllBreweryPosts';
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
import { BeerType } from '@prisma/client';
import { NextPage } from 'next';
import { BiBeer } from 'react-icons/bi';
interface CreateBeerPageProps {
breweries: BreweryPostQueryResult[];
types: BeerType[];
}
const Create: NextPage<CreateBeerPageProps> = ({ breweries }) => {
const Create: NextPage<CreateBeerPageProps> = ({ breweries, types }) => {
return (
<Layout>
<div className="align-center flex h-full flex-col items-center justify-center">
<div className="align-center my-12 flex h-full flex-col items-center justify-center">
<div className="w-8/12">
<BeerForm type="create" breweries={breweries} />
<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} />
</div>
</div>
</Layout>
@@ -22,9 +32,12 @@ const Create: NextPage<CreateBeerPageProps> = ({ breweries }) => {
export const getServerSideProps = async () => {
const breweryPosts = await getAllBreweryPosts();
const beerTypes = await DBClient.instance.beerType.findMany();
return {
props: {
breweries: breweryPosts,
breweries: JSON.parse(JSON.stringify(breweryPosts)),
types: JSON.parse(JSON.stringify(beerTypes)),
},
};
};

2
pages/beers/index.tsx
View File

@@ -96,7 +96,7 @@ export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (cont
const pageNumber = parseInt(query.page_num as string, 10) || 1;
const pageSize = 24;
const pageSize = 12;
const numberOfPosts = await DBClient.instance.beerPost.count();
const pageCount = numberOfPosts ? Math.ceil(numberOfPosts / pageSize) : 0;