Update next-connect middleware to return next() to fix error handling

This commit is contained in:
Aaron William Po
2023-07-17 15:44:32 -04:00
parent 8ed798ce60
commit bfbf7c3cf3
9 changed files with 167 additions and 50 deletions

View File

@@ -15,44 +15,44 @@
"@hapi/iron": "^7.0.1", "@hapi/iron": "^7.0.1",
"@headlessui/react": "^1.7.15", "@headlessui/react": "^1.7.15",
"@headlessui/tailwindcss": "^0.1.3", "@headlessui/tailwindcss": "^0.1.3",
"@hookform/resolvers": "^3.1.0", "@hookform/resolvers": "^3.1.1",
"@mapbox/mapbox-sdk": "^0.15.1", "@mapbox/mapbox-sdk": "^0.15.2",
"@mapbox/search-js-core": "^1.0.0-beta.16", "@mapbox/search-js-core": "^1.0.0-beta.17",
"@mapbox/search-js-react": "^1.0.0-beta.16", "@mapbox/search-js-react": "^1.0.0-beta.17",
"@next/bundle-analyzer": "^13.4.4", "@next/bundle-analyzer": "^13.4.10",
"@prisma/client": "^4.15.0", "@prisma/client": "^5.0.0",
"@react-email/components": "^0.0.6", "@react-email/components": "^0.0.7",
"@react-email/render": "^0.0.7", "@react-email/render": "^0.0.7",
"@react-email/tailwind": "^0.0.8", "@react-email/tailwind": "^0.0.8",
"@vercel/analytics": "^1.0.1", "@vercel/analytics": "^1.0.1",
"argon2": "^0.30.3", "argon2": "^0.30.3",
"cloudinary": "^1.37.0", "cloudinary": "^1.37.3",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"dotenv": "^16.1.3", "dotenv": "^16.3.1",
"jsonwebtoken": "^9.0.0", "jsonwebtoken": "^9.0.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mapbox-gl": "^2.15.0", "mapbox-gl": "^2.15.0",
"multer": "^1.4.5-lts.1", "multer": "^1.4.5-lts.1",
"multer-storage-cloudinary": "^4.0.0", "multer-storage-cloudinary": "^4.0.0",
"next": "^13.4.4", "next": "^13.4.10",
"next-connect": "^1.0.0-next.3", "next-connect": "^1.0.0-next.3",
"passport": "^0.6.0", "passport": "^0.6.0",
"passport-local": "^1.0.0", "passport-local": "^1.0.0",
"pino": "^8.14.1", "pino": "^8.14.1",
"pino-pretty": "^10.0.0", "pino-pretty": "^10.0.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-daisyui": "^3.1.2", "react-daisyui": "^4.0.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-email": "^1.9.3", "react-email": "^1.9.4",
"react-hook-form": "^7.44.3", "react-hook-form": "^7.45.2",
"react-hot-toast": "^2.4.1", "react-hot-toast": "^2.4.1",
"react-icons": "^4.9.0", "react-icons": "^4.10.1",
"react-intersection-observer": "^9.4.4", "react-intersection-observer": "^9.5.2",
"react-map-gl": "^7.0.25", "react-map-gl": "^7.1.2",
"react-responsive-carousel": "^3.2.23", "react-responsive-carousel": "^3.2.23",
"sparkpost": "^2.1.4", "sparkpost": "^2.1.4",
"swr": "^2.1.5", "swr": "^2.2.0",
"theme-change": "^2.5.0", "theme-change": "^2.5.0",
"zod": "^3.21.4" "zod": "^3.21.4"
}, },
@@ -63,31 +63,31 @@
"@types/lodash": "^4.14.195", "@types/lodash": "^4.14.195",
"@types/mapbox__mapbox-sdk": "^0.13.4", "@types/mapbox__mapbox-sdk": "^0.13.4",
"@types/multer": "^1.4.7", "@types/multer": "^1.4.7",
"@types/node": "^20.2.5", "@types/node": "^20.4.2",
"@types/passport-local": "^1.0.35", "@types/passport-local": "^1.0.35",
"@types/react": "^18.2.8", "@types/react": "^18.2.15",
"@types/react-dom": "^18.2.4", "@types/react-dom": "^18.2.7",
"@types/sparkpost": "^2.1.5", "@types/sparkpost": "^2.1.5",
"@vercel/fetch": "^6.2.0", "@vercel/fetch": "^7.0.0",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"daisyui": "^3.0.0", "daisyui": "^3.2.1",
"dotenv-cli": "^7.2.1", "dotenv-cli": "^7.2.1",
"eslint": "^8.41.0", "eslint": "^8.45.0",
"eslint-config-airbnb-base": "15.0.0", "eslint-config-airbnb-base": "15.0.0",
"eslint-config-airbnb-typescript": "17.0.0", "eslint-config-airbnb-typescript": "17.1.0",
"eslint-config-next": "^13.4.4", "eslint-config-next": "^13.4.10",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
"eslint-plugin-react": "^7.32.2", "eslint-plugin-react": "^7.32.2",
"onchange": "^7.1.0", "onchange": "^7.1.0",
"postcss": "^8.4.24", "postcss": "^8.4.26",
"prettier": "^2.8.8", "prettier": "^3.0.0",
"prettier-plugin-jsdoc": "^0.4.2", "prettier-plugin-jsdoc": "^0.4.2",
"prettier-plugin-tailwindcss": "^0.3.0", "prettier-plugin-tailwindcss": "^0.4.1",
"prisma": "^4.15.0", "prisma": "^5.0.0",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.3",
"tailwindcss-animate": "^1.0.5", "tailwindcss-animate": "^1.0.6",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"typescript": "^4.9.0" "typescript": "^5.1.6"
}, },
"prisma": { "prisma": {
"schema": "./src/prisma/schema.prisma", "schema": "./src/prisma/schema.prisma",

View File

@@ -38,7 +38,7 @@ const checkIfCommentOwner = async (
throw new ServerError('You are not authorized to modify this comment', 403); throw new ServerError('You are not authorized to modify this comment', 403);
} }
await next(); return next();
}; };
const editComment = async ( const editComment = async (
@@ -53,7 +53,7 @@ const editComment = async (
id, id,
}); });
return res.status(200).json({ res.status(200).json({
success: true, success: true,
message: 'Comment updated successfully', message: 'Comment updated successfully',
statusCode: 200, statusCode: 200,

View File

@@ -1,7 +1,6 @@
import getCurrentUser from '@/config/nextConnect/middleware/getCurrentUser'; import getCurrentUser from '@/config/nextConnect/middleware/getCurrentUser';
import getBeerPostById from '@/services/BeerPost/getBeerPostById'; import getBeerPostById from '@/services/BeerPost/getBeerPostById';
import { UserExtendedNextApiRequest } from '@/config/auth/types'; import { UserExtendedNextApiRequest } from '@/config/auth/types';
import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
import editBeerPostById from '@/services/BeerPost/editBeerPostById'; import editBeerPostById from '@/services/BeerPost/editBeerPostById';
import EditBeerPostValidationSchema from '@/services/BeerPost/schema/EditBeerPostValidationSchema'; import EditBeerPostValidationSchema from '@/services/BeerPost/schema/EditBeerPostValidationSchema';
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema'; import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
@@ -10,6 +9,8 @@ import { createRouter, NextHandler } from 'next-connect';
import { z } from 'zod'; import { z } from 'zod';
import ServerError from '@/config/util/ServerError'; import ServerError from '@/config/util/ServerError';
import DBClient from '@/prisma/DBClient'; import DBClient from '@/prisma/DBClient';
import validateRequest from '@/config/nextConnect/middleware/validateRequest';
import NextConnectOptions from '@/config/nextConnect/NextConnectOptions';
interface BeerPostRequest extends UserExtendedNextApiRequest { interface BeerPostRequest extends UserExtendedNextApiRequest {
query: { id: string }; query: { id: string };
@@ -37,7 +38,7 @@ const checkIfBeerPostOwner = async (
throw new ServerError('You cannot edit that beer post.', 403); throw new ServerError('You cannot edit that beer post.', 403);
} }
next(); return next();
}; };
const editBeerPost = async ( const editBeerPost = async (
@@ -82,8 +83,21 @@ const router = createRouter<
NextApiResponse<z.infer<typeof APIResponseValidationSchema>> NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
>(); >();
router.put(getCurrentUser, checkIfBeerPostOwner, editBeerPost); router.put(
router.delete(getCurrentUser, checkIfBeerPostOwner, deleteBeerPost); validateRequest({
bodySchema: EditBeerPostValidationSchema,
querySchema: z.object({ id: z.string() }),
}),
getCurrentUser,
checkIfBeerPostOwner,
editBeerPost,
);
router.delete(
validateRequest({ querySchema: z.object({ id: z.string() }) }),
getCurrentUser,
checkIfBeerPostOwner,
deleteBeerPost,
);
const handler = router.handler(NextConnectOptions); const handler = router.handler(NextConnectOptions);

View File

@@ -35,7 +35,7 @@ const checkIfBreweryPostOwner = async (
throw new ServerError('You are not the owner of this brewery post', 403); throw new ServerError('You are not the owner of this brewery post', 403);
} }
next(); return next();
}; };
const editBreweryPost = async ( const editBreweryPost = async (
@@ -64,9 +64,7 @@ const deleteBreweryPost = async (req: BreweryPostRequest, res: NextApiResponse)
query: { id }, query: { id },
} = req; } = req;
const deleted = await DBClient.instance.beerPost.delete({ const deleted = await DBClient.instance.breweryPost.delete({ where: { id } });
where: { id },
});
if (!deleted) { if (!deleted) {
throw new ServerError('Brewery post not found', 404); throw new ServerError('Brewery post not found', 404);

View File

@@ -39,7 +39,7 @@ const checkIfCommentOwner = async (
throw new ServerError('You are not authorized to modify this comment', 403); throw new ServerError('You are not authorized to modify this comment', 403);
} }
await next(); return next();
}; };
const editComment = async ( const editComment = async (

View File

@@ -46,7 +46,7 @@ const checkIfUserCanEditUser = async (
throw new ServerError('You are not permitted to modify this user', 403); throw new ServerError('You are not permitted to modify this user', 403);
} }
await next(); return next();
}; };
const editUser = async ( const editUser = async (

View File

@@ -1,9 +1,19 @@
import FormError from '@/components/ui/forms/FormError';
import FormInfo from '@/components/ui/forms/FormInfo';
import FormLabel from '@/components/ui/forms/FormLabel';
import FormPageLayout from '@/components/ui/forms/FormPageLayout'; import FormPageLayout from '@/components/ui/forms/FormPageLayout';
import FormSegment from '@/components/ui/forms/FormSegment';
import FormTextArea from '@/components/ui/forms/FormTextArea';
import FormTextInput from '@/components/ui/forms/FormTextInput';
import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById'; import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById';
import BreweryPostQueryResult from '@/services/BreweryPost/schema/BreweryPostQueryResult'; import BreweryPostQueryResult from '@/services/BreweryPost/schema/BreweryPostQueryResult';
import EditBreweryPostValidationSchema from '@/services/BreweryPost/schema/EditBreweryPostValidationSchema';
import withPageAuthRequired from '@/util/withPageAuthRequired'; import withPageAuthRequired from '@/util/withPageAuthRequired';
import { zodResolver } from '@hookform/resolvers/zod';
import { NextPage } from 'next'; import { NextPage } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import { useRouter } from 'next/router';
import { useForm } from 'react-hook-form';
import { BiBeer } from 'react-icons/bi'; import { BiBeer } from 'react-icons/bi';
import { z } from 'zod'; import { z } from 'zod';
@@ -14,6 +24,49 @@ interface EditPageProps {
const EditBreweryPostPage: NextPage<EditPageProps> = ({ breweryPost }) => { const EditBreweryPostPage: NextPage<EditPageProps> = ({ breweryPost }) => {
const pageTitle = `Edit \u201c${breweryPost.name}\u201d`; const pageTitle = `Edit \u201c${breweryPost.name}\u201d`;
const router = useRouter();
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<z.infer<typeof EditBreweryPostValidationSchema>>({
resolver: zodResolver(EditBreweryPostValidationSchema),
defaultValues: {
name: breweryPost.name,
description: breweryPost.description,
id: breweryPost.id,
dateEstablished: breweryPost.dateEstablished,
},
});
const onSubmit = async (data: z.infer<typeof EditBreweryPostValidationSchema>) => {
const response = await fetch(`/api/breweries/${breweryPost.id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (!response.ok) {
throw new Error('Something went wrong');
}
router.push(`/breweries/${breweryPost.id}`);
};
const handleDelete = async () => {
const response = await fetch(`/api/breweries/${breweryPost.id}`, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error('Something went wrong');
}
router.push('/breweries');
};
return ( return (
<> <>
<Head> <Head>
@@ -27,7 +80,59 @@ const EditBreweryPostPage: NextPage<EditPageProps> = ({ breweryPost }) => {
backLink={`/breweries/${breweryPost.id}`} backLink={`/breweries/${breweryPost.id}`}
backLinkText={`Back to "${breweryPost.name}"`} backLinkText={`Back to "${breweryPost.name}"`}
> >
<></> <>
<form className="form-control space-y-4" onSubmit={handleSubmit(onSubmit)}>
<div className="w-full">
<FormInfo>
<FormLabel htmlFor="name">Name</FormLabel>
<FormError>{errors.name?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
id="name"
type="text"
placeholder="Name"
formValidationSchema={register('name')}
error={!!errors.name}
disabled={isSubmitting}
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="description">Description</FormLabel>
<FormError>{errors.description?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextArea
disabled={isSubmitting}
placeholder="Ratione cumque quas quia aut impedit ea culpa facere. Ut in sit et quas reiciendis itaque."
error={!!errors.description}
formValidationSchema={register('description')}
id="description"
rows={8}
/>
</FormSegment>
</div>
<div className="w-full space-y-3">
<button
disabled={isSubmitting}
className="btn-primary btn w-full"
type="submit"
>
{isSubmitting ? 'Saving...' : 'Save'}
</button>
<button
className="btn-primary btn w-full"
type="button"
onClick={handleDelete}
>
Delete Brewery
</button>
</div>
</form>
</>
</FormPageLayout> </FormPageLayout>
</> </>
); );

View File

@@ -12,7 +12,7 @@ async function sendEditBeerPostRequest(
}); });
if (!response.ok) { if (!response.ok) {
throw new Error('something went wrong'); throw new Error(`${response.status}: ${response.statusText}`);
} }
const json = await response.json(); const json = await response.json();

View File

@@ -15,14 +15,14 @@ const CreateBreweryPostSchema = z.object({
invalid_type_error: 'Description must be a string.', invalid_type_error: 'Description must be a string.',
}) })
.min(1, { message: 'Description is required.' }) .min(1, { message: 'Description is required.' })
.max(500, { message: 'Description is too long.' }), .max(1500, { message: 'Description is too long.' }),
address: z address: z
.string({ .string({
required_error: 'Address is required.', required_error: 'Address is required.',
invalid_type_error: 'Address must be a string.', invalid_type_error: 'Address must be a string.',
}) })
.min(1, { message: 'Address is required.' }) .min(1, { message: 'Address is required.' })
.max(100, { message: 'Address is too long.' }), .max(300, { message: 'Address is too long.' }),
city: z city: z
.string({ .string({