mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-10-15 18:14:44 +00:00
Move next js project to archive (#207)
This commit is contained in:
Aaron Po
@@ -0,0 +1,100 @@
|
||||
import Link from 'next/link';
|
||||
import { FC, MutableRefObject, useRef } from 'react';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
import { z } from 'zod';
|
||||
|
||||
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
|
||||
import useBeerPostsByBeerStyle from '@/hooks/data-fetching/beer-posts/useBeerPostsByBeerStyles';
|
||||
import BeerRecommendationLoadingComponent from '../BeerById/BeerRecommendationLoadingComponent';
|
||||
|
||||
interface BeerStyleBeerSectionProps {
|
||||
beerStyle: z.infer<typeof BeerStyleQueryResult>;
|
||||
}
|
||||
|
||||
const BeerStyleBeerSection: FC<BeerStyleBeerSectionProps> = ({ beerStyle }) => {
|
||||
const PAGE_SIZE = 2;
|
||||
|
||||
const { beerPosts, isAtEnd, isLoadingMore, setSize, size } = useBeerPostsByBeerStyle({
|
||||
beerStyleId: beerStyle.id,
|
||||
pageSize: PAGE_SIZE,
|
||||
});
|
||||
const { ref: penultimateBeerPostRef } = useInView({
|
||||
/**
|
||||
* When the last beer post comes into view, call setSize from useBeerPostsByBeerStyle
|
||||
* to load more beer posts.
|
||||
*/
|
||||
onChange: (visible) => {
|
||||
if (!visible || isAtEnd) return;
|
||||
setSize(size + 1);
|
||||
},
|
||||
});
|
||||
|
||||
const beerRecommendationsRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||||
|
||||
return (
|
||||
<div className="card h-full" ref={beerRecommendationsRef}>
|
||||
<div className="card-body">
|
||||
<>
|
||||
<div className="my-2 flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold">Brews</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!!beerPosts.length && (
|
||||
<div className="space-y-5">
|
||||
{beerPosts.map((beerPost, index) => {
|
||||
const isPenultimateBeerPost = index === beerPosts.length - 2;
|
||||
|
||||
/**
|
||||
* Attach a ref to the second last beer post in the list. When it comes
|
||||
* into view, the component will call setSize to load more beer posts.
|
||||
*/
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={isPenultimateBeerPost ? penultimateBeerPostRef : undefined}
|
||||
key={beerPost.id}
|
||||
>
|
||||
<div>
|
||||
<Link className="link-hover link" href={`/beers/${beerPost.id}`}>
|
||||
<span className="text-xl font-semibold">{beerPost.name}</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link
|
||||
className="link-hover link"
|
||||
href={`/breweries/${beerPost.brewery.id}`}
|
||||
>
|
||||
<span className="text-xl font-semibold">
|
||||
{beerPost.brewery.name}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="space-x-2">
|
||||
<span>{beerPost.abv}% ABV</span>
|
||||
<span>{beerPost.ibu} IBU</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{
|
||||
/**
|
||||
* If there are more beer posts to load, show a loading component with a
|
||||
* skeleton loader and a loading spinner.
|
||||
*/
|
||||
!!isLoadingMore && !isAtEnd && (
|
||||
<BeerRecommendationLoadingComponent length={PAGE_SIZE} />
|
||||
)
|
||||
}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BeerStyleBeerSection;
|
||||
@@ -0,0 +1,65 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
|
||||
import { FunctionComponent } from 'react';
|
||||
import { useForm, SubmitHandler } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
|
||||
import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
|
||||
import toast from 'react-hot-toast';
|
||||
import createErrorToast from '@/util/createErrorToast';
|
||||
|
||||
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
|
||||
import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments';
|
||||
import { sendCreateBeerStyleCommentRequest } from '@/requests/comments/beer-style-comment';
|
||||
import CommentForm from '../Comments/CommentForm';
|
||||
|
||||
interface BeerCommentFormProps {
|
||||
beerStyle: z.infer<typeof BeerStyleQueryResult>;
|
||||
mutate: ReturnType<typeof useBeerStyleComments>['mutate'];
|
||||
}
|
||||
|
||||
const BeerStyleCommentForm: FunctionComponent<BeerCommentFormProps> = ({
|
||||
beerStyle,
|
||||
mutate,
|
||||
}) => {
|
||||
const { register, handleSubmit, formState, watch, reset, setValue } = useForm<
|
||||
z.infer<typeof CreateCommentValidationSchema>
|
||||
>({
|
||||
defaultValues: { rating: 0 },
|
||||
resolver: zodResolver(CreateCommentValidationSchema),
|
||||
});
|
||||
|
||||
const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
|
||||
data,
|
||||
) => {
|
||||
const loadingToast = toast.loading('Posting a new comment...');
|
||||
try {
|
||||
await sendCreateBeerStyleCommentRequest({
|
||||
body: { content: data.content, rating: data.rating },
|
||||
beerStyleId: beerStyle.id,
|
||||
});
|
||||
reset();
|
||||
toast.remove(loadingToast);
|
||||
toast.success('Comment posted successfully.');
|
||||
await mutate();
|
||||
} catch (error) {
|
||||
await mutate();
|
||||
toast.remove(loadingToast);
|
||||
createErrorToast(error);
|
||||
reset();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<CommentForm
|
||||
handleSubmit={handleSubmit}
|
||||
onSubmit={onSubmit}
|
||||
watch={watch}
|
||||
setValue={setValue}
|
||||
formState={formState}
|
||||
register={register}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BeerStyleCommentForm;
|
||||
@@ -0,0 +1,86 @@
|
||||
import UserContext from '@/contexts/UserContext';
|
||||
|
||||
import { FC, MutableRefObject, useContext, useRef } from 'react';
|
||||
import { z } from 'zod';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
|
||||
import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments';
|
||||
import {
|
||||
sendDeleteBeerStyleCommentRequest,
|
||||
sendEditBeerStyleCommentRequest,
|
||||
} from '@/requests/comments/beer-style-comment';
|
||||
import CommentLoadingComponent from '../Comments/CommentLoadingComponent';
|
||||
import CommentsComponent from '../Comments/CommentsComponent';
|
||||
import BeerStyleCommentForm from './BeerStyleCommentForm';
|
||||
|
||||
interface BeerStyleCommentsSectionProps {
|
||||
beerStyle: z.infer<typeof BeerStyleQueryResult>;
|
||||
}
|
||||
|
||||
const BeerStyleCommentsSection: FC<BeerStyleCommentsSectionProps> = ({ beerStyle }) => {
|
||||
const { user } = useContext(UserContext);
|
||||
const router = useRouter();
|
||||
|
||||
const pageNum = parseInt(router.query.comments_page as string, 10) || 1;
|
||||
const PAGE_SIZE = 15;
|
||||
|
||||
const { comments, isLoading, mutate, setSize, size, isLoadingMore, isAtEnd } =
|
||||
useBeerStyleComments({ id: beerStyle.id, pageNum, pageSize: PAGE_SIZE });
|
||||
|
||||
const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-3" ref={commentSectionRef}>
|
||||
<div className="card bg-base-300">
|
||||
<div className="card-body h-full">
|
||||
{user ? (
|
||||
<BeerStyleCommentForm beerStyle={beerStyle} mutate={mutate} />
|
||||
) : (
|
||||
<div className="flex h-52 flex-col items-center justify-center">
|
||||
<span className="text-lg font-bold">Log in to leave a comment.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/**
|
||||
* If the comments are loading, show a loading component. Otherwise, show the
|
||||
* comments.
|
||||
*/
|
||||
isLoading ? (
|
||||
<div className="card bg-base-300 pb-6">
|
||||
<CommentLoadingComponent length={PAGE_SIZE} />
|
||||
</div>
|
||||
) : (
|
||||
<CommentsComponent
|
||||
commentSectionRef={commentSectionRef}
|
||||
comments={comments}
|
||||
isLoadingMore={isLoadingMore}
|
||||
isAtEnd={isAtEnd}
|
||||
pageSize={PAGE_SIZE}
|
||||
setSize={setSize}
|
||||
size={size}
|
||||
mutate={mutate}
|
||||
handleDeleteCommentRequest={(id) => {
|
||||
return sendDeleteBeerStyleCommentRequest({
|
||||
beerStyleId: beerStyle.id,
|
||||
commentId: id,
|
||||
});
|
||||
}}
|
||||
handleEditCommentRequest={(id, data) => {
|
||||
return sendEditBeerStyleCommentRequest({
|
||||
beerStyleId: beerStyle.id,
|
||||
commentId: id,
|
||||
body: data,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BeerStyleCommentsSection;
|
||||
@@ -0,0 +1,112 @@
|
||||
import Link from 'next/link';
|
||||
import format from 'date-fns/format';
|
||||
import { FC, useContext } from 'react';
|
||||
|
||||
import UserContext from '@/contexts/UserContext';
|
||||
import { FaRegEdit } from 'react-icons/fa';
|
||||
|
||||
import { z } from 'zod';
|
||||
import useTimeDistance from '@/hooks/utilities/useTimeDistance';
|
||||
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
|
||||
import useBeerStyleLikeCount from '@/hooks/data-fetching/beer-style-likes/useBeerStyleLikeCount';
|
||||
import BeerStyleLikeButton from './BeerStyleLikeButton';
|
||||
|
||||
interface BeerInfoHeaderProps {
|
||||
beerStyle: z.infer<typeof BeerStyleQueryResult>;
|
||||
}
|
||||
|
||||
const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
|
||||
const createdAt = new Date(beerStyle.createdAt);
|
||||
const timeDistance = useTimeDistance(createdAt);
|
||||
|
||||
const { user } = useContext(UserContext);
|
||||
const idMatches = user && beerStyle.postedBy.id === user.id;
|
||||
const isPostOwner = !!(user && idMatches);
|
||||
|
||||
const { likeCount, mutate } = useBeerStyleLikeCount(beerStyle.id);
|
||||
|
||||
return (
|
||||
<article className="card flex flex-col justify-center bg-base-300">
|
||||
<div className="card-body">
|
||||
<header className="flex justify-between">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold lg:text-4xl">{beerStyle.name}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="italic">
|
||||
{' posted by '}
|
||||
<Link
|
||||
href={`/users/${beerStyle.postedBy.id}`}
|
||||
className="link-hover link"
|
||||
>
|
||||
{`${beerStyle.postedBy.username} `}
|
||||
</Link>
|
||||
{timeDistance && (
|
||||
<span
|
||||
className="tooltip tooltip-bottom"
|
||||
data-tip={format(createdAt, 'MM/dd/yyyy')}
|
||||
>
|
||||
{`${timeDistance} ago`}
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isPostOwner && (
|
||||
<div className="tooltip tooltip-left" data-tip={`Edit '${beerStyle.name}'`}>
|
||||
<Link href={`/beers/${beerStyle.id}/edit`} className="btn btn-ghost btn-xs">
|
||||
<FaRegEdit className="text-xl" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
<div>
|
||||
<p>{beerStyle.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="w-25 flex flex-row space-x-3">
|
||||
<div className="text-sm font-bold">
|
||||
ABV Range:{' '}
|
||||
<span>
|
||||
{beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-bold">
|
||||
IBU Range:{' '}
|
||||
<span>
|
||||
{beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-semibold">
|
||||
Recommended Glassware:{' '}
|
||||
<span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div>
|
||||
{(!!likeCount || likeCount === 0) && (
|
||||
<span>
|
||||
Liked by {likeCount}
|
||||
{likeCount !== 1 ? ' users' : ' user'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-actions items-end">
|
||||
{user && (
|
||||
<BeerStyleLikeButton beerStyleId={beerStyle.id} mutateCount={mutate} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
||||
export default BeerStyleHeader;
|
||||
@@ -0,0 +1,34 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
|
||||
import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
|
||||
import useCheckIfUserLikesBeerStyle from '@/hooks/data-fetching/beer-style-likes/useCheckIfUserLikesBeerPost';
|
||||
import sendBeerStyleLikeRequest from '@/requests/likes/beer-style-like/sendBeerStyleLikeRequest';
|
||||
import LikeButton from '../ui/LikeButton';
|
||||
|
||||
const BeerStyleLikeButton: FC<{
|
||||
beerStyleId: string;
|
||||
mutateCount: ReturnType<typeof useGetBeerPostLikeCount>['mutate'];
|
||||
}> = ({ beerStyleId, mutateCount }) => {
|
||||
const { isLiked, mutate: mutateLikeStatus } = useCheckIfUserLikesBeerStyle(beerStyleId);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(false);
|
||||
}, [isLiked]);
|
||||
|
||||
const handleLike = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await sendBeerStyleLikeRequest(beerStyleId);
|
||||
|
||||
await Promise.all([mutateCount(), mutateLikeStatus()]);
|
||||
setLoading(false);
|
||||
} catch (e) {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return <LikeButton isLiked={!!isLiked} handleLike={handleLike} loading={loading} />;
|
||||
};
|
||||
|
||||
export default BeerStyleLikeButton;
|
||||
Reference in New Issue
Block a user