AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Implement react-intersection-observer to facilitate infinite scroll

Browse Source 
Uses react-intersection-observer to load more comments when the last of the previously loaded comments is in the viewport.
This commit is contained in:
Aaron William Po
2023-04-09 18:41:58 -04:00
parent 8981bcb4b8
commit 915adb722a
12 changed files with 157 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/BeerById/BeerCommentForm.tsx
View File

@@ -8,7 +8,6 @@ import { Rating } from 'react-daisyui';
import { useForm, SubmitHandler } from 'react-hook-form';
import { z } from 'zod';
import { useRouter } from 'next/router';
import useBeerPostComments from '@/hooks/useBeerPostComments';
import Button from '../ui/forms/Button';
@@ -18,10 +17,9 @@ import FormLabel from '../ui/forms/FormLabel';
import FormSegment from '../ui/forms/FormSegment';
import FormTextArea from '../ui/forms/FormTextArea';
interface BeerCommentFormProps {
beerPost: z.infer<typeof beerPostQueryResult>;
mutate: ReturnType<typeof useBeerPostComments>['mutate']
mutate: ReturnType<typeof useBeerPostComments>['mutate'];
}
const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
@@ -43,7 +41,6 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
reset({ rating: 0, content: '' });
}, [reset]);
const router = useRouter();
const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
data,
) => {
@@ -54,14 +51,8 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
rating: data.rating,
beerPostId: beerPost.id,
});
await mutate();
reset();
const submitTasks: Promise<unknown>[] = [
router.push(`/beers/${beerPost.id}`, undefined, { scroll: false }),
mutate(),
];
await Promise.all(submitTasks);
};
const { errors } = formState;