Refactor BeerPostHeader, refactor login and register

- Updated BeerPostHeader in /id page to use semantic HTML tags
- Removed the getServerSidesProps fn in /login and /register. Moved the redirect logic over to the client, will redirect on the client side.
- Added delete BeerPost option on the edit page.
This commit is contained in:
Aaron William Po
2023-03-15 21:30:26 -04:00
parent 584e3b349f
commit 6b12cb72c5
8 changed files with 106 additions and 69 deletions

View File

@@ -39,10 +39,10 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: numb
}, [beerPost.createdAt]);
return (
<div className="card flex flex-col justify-center bg-base-300">
<div className="card-body">
<main className="card flex flex-col justify-center bg-base-300">
<article className="card-body">
<div className="flex justify-between">
<div>
<header>
<h1 className="text-4xl font-bold">{beerPost.name}</h1>
<h2 className="text-2xl font-semibold">
by{' '}
@@ -53,31 +53,29 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: numb
{beerPost.brewery.name}
</Link>
</h2>
</div>
<div>
{isPostOwner && (
<div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
<Link
href={`/beers/${beerPost.id}/edit`}
className="btn-outline btn-sm btn"
>
<FaRegEdit className="text-xl" />
</Link>
</div>
)}
</div>
</header>
{isPostOwner && (
<div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
<Link
href={`/beers/${beerPost.id}/edit`}
className="btn-outline btn-sm btn"
>
<FaRegEdit className="text-xl" />
</Link>
</div>
)}
</div>
<h3 className="italic">
posted by{' '}
<Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
{beerPost.postedBy.username}{' '}
{beerPost.postedBy.username}
</Link>
<span
className="tooltip tooltip-bottom"
data-tip={format(createdAtDate, 'MM/dd/yyyy')}
>
{timeDistance} ago
{` ${timeDistance}`} ago
</span>
</h3>
@@ -108,8 +106,8 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: numb
)}
</div>
</div>
</div>
</div>
</article>
</main>
);
};