Merge pull request #48 from aaronpo97/Fix--async-error-handling

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

.github/workflows/github-actions-demo.yml

@@ -8,13 +8,12 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install dependencies
-        run: |
-          npm ci
+        run: npm ci

package.json

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

src/pages/_app.tsx

@@ -1,4 +1,4 @@
-import UserContext, { AuthProvider } from '@/contexts/UserContext';
+import { AuthProvider } from '@/contexts/UserContext';
 
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
@@ -10,7 +10,6 @@ import { Analytics } from '@vercel/analytics/react';
 import { Space_Grotesk } from 'next/font/google';
 import Head from 'next/head';
 import Layout from '@/components/ui/Layout';
-import useUser from '@/hooks/auth/useUser';
 import CustomToast from '@/components/ui/CustomToast';
 
 const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] });

src/pages/api/beer-comments/[id].ts

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

src/pages/api/beers/[id]/index.ts

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

src/pages/api/breweries/[id]/index.ts

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

src/pages/api/brewery-comments/[id].ts

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

src/pages/api/users/[id]/index.ts

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

src/pages/breweries/[id]/edit.tsx

@@ -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 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 BreweryPostQueryResult from '@/services/BreweryPost/schema/BreweryPostQueryResult';
+import EditBreweryPostValidationSchema from '@/services/BreweryPost/schema/EditBreweryPostValidationSchema';
 import withPageAuthRequired from '@/util/withPageAuthRequired';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { NextPage } from 'next';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { useForm } from 'react-hook-form';
 import { BiBeer } from 'react-icons/bi';
 import { z } from 'zod';
 
@@ -14,6 +24,49 @@ interface EditPageProps {
 const EditBreweryPostPage: NextPage<EditPageProps> = ({ breweryPost }) => {
   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 (
     <>
       <Head>
@@ -27,7 +80,59 @@ const EditBreweryPostPage: NextPage<EditPageProps> = ({ breweryPost }) => {
         backLink={`/breweries/${breweryPost.id}`}
         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>
     </>
   );

src/requests/BeerPost/sendEditBeerPostRequest.ts

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

src/services/BreweryPost/schema/CreateBreweryPostSchema.ts

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