style: linting and formatting

app/api/cron/route.ts

@@ -14,22 +14,22 @@ export async function GET(request: Request) {
   const response = await hackernewsApi();
 
   return new NextResponse(JSON.stringify(response), {
-    status: 200,
+    status: 200
   });
 }
 
 async function hackernewsApi() {
-  const topstories: number[] = await fetch(topNews).then((res) => res.json());
+  const topstories: number[] = await fetch(topNews).then(res => res.json());
 
   console.log('topstories', topstories);
 
   const newsPromises = topstories
     .splice(0, Number(process.env.NEWS_LIMIT))
-    .map(async (id) => {
+    .map(async id => {
       console.log('id', id);
       const sourceNews: z.infer<typeof NewsSchema> = await fetch(
         singleNews(id)
-      ).then((res) => res.json());
+      ).then(res => res.json());
 
       console.log('sourceNews', sourceNews);
 
@@ -42,7 +42,7 @@ async function hackernewsApi() {
           by: sourceNews.by,
           time: sourceNews.time,
           url: sourceNews.url,
-          score: sourceNews.score,
+          score: sourceNews.score
         },
         update: {
           title: sourceNews.title,
@@ -51,18 +51,18 @@ async function hackernewsApi() {
           by: sourceNews.by,
           time: sourceNews.time,
           url: sourceNews.url,
-          score: sourceNews.score,
+          score: sourceNews.score
         },
         where: {
-          id,
+          id
         },
         select: {
-          id: true,
-        },
+          id: true
+        }
       });
     });
 
   const newsIds = await Promise.all(newsPromises);
 
-  return newsIds.map((news) => news.id);
+  return newsIds.map(news => news.id);
 }

app/api/subscribe/route.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { fromZodError } from 'zod-validation-error';
 import prisma from '../../../prisma/prisma';
 import { ResponseSchema, SubscribeFormSchema } from '../../utils/types';
 
@@ -7,7 +8,8 @@ export async function POST(request: Request) {
   const body = await request.json();
   const validation = SubscribeFormSchema.safeParse(body);
   if (!validation.success) {
-    return new Response('Bad request', { status: 400 });
+    const message = fromZodError(validation.error);
+    return new Response(message.message, { status: 400 });
   }
 
   const { email, targetingAllowed } = validation.data;
@@ -15,18 +17,18 @@ export async function POST(request: Request) {
   await prisma.user.upsert({
     create: {
       email,
-      targetingAllowed,
+      targetingAllowed
     },
     update: {
-      targetingAllowed,
+      targetingAllowed
     },
     where: {
-      email,
-    },
+      email
+    }
   });
 
   const message: z.infer<typeof ResponseSchema> = {
-    message: `${email} subscribed!`,
+    message: `${email} subscribed!`
   };
   return new Response(JSON.stringify(message), { status: 200 });
 }

app/api/unsubscribe/route.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { fromZodError } from 'zod-validation-error';
 import prisma from '../../../prisma/prisma';
 import { ResponseSchema, UnsubscribeFormSchema } from '../../utils/types';
 
@@ -7,7 +8,8 @@ export async function POST(request: Request) {
   const body = await request.json();
   const validation = UnsubscribeFormSchema.safeParse(body);
   if (!validation.success) {
-    return new Response('Bad request', { status: 400 });
+    const message = fromZodError(validation.error);
+    return new Response(message.message, { status: 400 });
   }
 
   const { email } = validation.data;
@@ -15,15 +17,15 @@ export async function POST(request: Request) {
   try {
     await prisma.user.delete({
       where: {
-        email,
-      },
+        email
+      }
     });
   } catch (err) {
     console.log(err);
   }
 
   const message: z.infer<typeof ResponseSchema> = {
-    message: `${email} unsubscribe!`,
+    message: `${email} unsubscribe!`
   };
   return new Response(JSON.stringify(message), { status: 200 });
 }

app/globals.css

@@ -2,8 +2,18 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   background: #1e1e1e;
   min-height: 100vh;
   display: flex;
@@ -28,8 +38,11 @@ body {
   border-radius: 10px;
   width: 85%;
   padding: 50px;
-  box-shadow: 0 54px 55px rgb(78 78 78 / 25%), 0 -12px 30px rgb(78 78 78 / 25%),
-    0 4px 6px rgb(78 78 78 / 25%), 0 12px 13px rgb(78 78 78 / 25%),
+  box-shadow:
+    0 54px 55px rgb(78 78 78 / 25%),
+    0 -12px 30px rgb(78 78 78 / 25%),
+    0 4px 6px rgb(78 78 78 / 25%),
+    0 12px 13px rgb(78 78 78 / 25%),
     0 -3px 5px rgb(78 78 78 / 25%);
 }
 

app/layout.tsx

@@ -1,22 +1,22 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  description: 'Generated by create next app'
+};
 
 export default function RootLayout({
-  children,
+  children
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }

app/page.tsx

@@ -9,8 +9,8 @@ export default function Home() {
   return (
     <VerticalLayout>
       <h1>Home</h1>
-      <Button label="Subscribe" onClick={() => router.push('/subscribe')} />
-      <Button label="Unsubscribe" onClick={() => router.push('/unsubscribe')} />
+      <Button label='Subscribe' onClick={() => router.push('/subscribe')} />
+      <Button label='Unsubscribe' onClick={() => router.push('/unsubscribe')} />
     </VerticalLayout>
   );
 }

app/subscribe/page.tsx

@@ -18,12 +18,12 @@ export default function Home() {
       const response = await fetch('/api/subscribe', {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/json',
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
           email: data.get('email'),
-          targetingAllowed: isChecked,
-        }),
+          targetingAllowed: isChecked
+        })
       });
 
       if (!response?.ok) {
@@ -33,6 +33,8 @@ export default function Home() {
       const formResponse: z.infer<typeof ResponseSchema> =
         await response.json();
 
+      console.log(formResponse);
+
       router.push('/success');
     } catch (err) {
       console.log(err);
@@ -46,34 +48,34 @@ export default function Home() {
 
   return (
     <VerticalLayout>
-      <form className="container" onSubmit={handleSubmit}>
+      <form className='container' onSubmit={handleSubmit}>
         <h1>Subscribe to newsletter</h1>
-        <div className="email block">
-          <label htmlFor="frm-email">Email</label>
+        <div className='email block'>
+          <label htmlFor='frm-email'>Email</label>
           <input
-            placeholder="example@email.com"
-            id="email"
-            type="email"
-            name="email"
+            placeholder='example@email.com'
+            id='email'
+            type='email'
+            name='email'
             required
           />
         </div>
-        <div className="checkbox block">
-          <label htmlFor="frm-checkbox">Allow advertising</label>
+        <div className='checkbox block'>
+          <label htmlFor='frm-checkbox'>Allow advertising</label>
           <input
-            id="targetingAllowed"
-            type="checkbox"
-            name="targetingAllowed"
+            id='targetingAllowed'
+            type='checkbox'
+            name='targetingAllowed'
             checked={isChecked}
             onChange={handleCheckboxChange}
           />
         </div>
-        <div className="button block">
-          <button type="submit">Subscribe</button>
+        <div className='button block'>
+          <button type='submit'>Subscribe</button>
         </div>
       </form>
-      <Button label="Home" onClick={() => router.push('/')} />
-      <Button label="Unsubscribe" onClick={() => router.push('/unsubscribe')} />
+      <Button label='Home' onClick={() => router.push('/')} />
+      <Button label='Unsubscribe' onClick={() => router.push('/unsubscribe')} />
     </VerticalLayout>
   );
 }

app/success/page.tsx

@@ -1,4 +1,5 @@
-import { useRouter } from 'next/router';
+'use client';
+import { useRouter } from 'next/navigation';
 import { Button } from '../../components/Button';
 import { VerticalLayout } from '../../components/VerticalLayout';
 
@@ -8,7 +9,7 @@ export default function Home() {
   return (
     <VerticalLayout>
       <h1>Success!</h1>
-      <Button label="Home" onClick={() => router.push('/')} />
+      <Button label='Home' onClick={() => router.push('/')} />
     </VerticalLayout>
   );
 }

app/unsubscribe/page.tsx

@@ -17,11 +17,11 @@ export default function Home() {
       const response = await fetch('/api/unsubscribe', {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/json',
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          email: data.get('email'),
-        }),
+          email: data.get('email')
+        })
       });
 
       if (!response?.ok) {
@@ -31,6 +31,8 @@ export default function Home() {
       const formResponse: z.infer<typeof ResponseSchema> =
         await response.json();
 
+      console.log(formResponse);
+
       router.push('/success');
     } catch (err) {
       console.log(err);
@@ -40,24 +42,24 @@ export default function Home() {
 
   return (
     <VerticalLayout>
-      <form className="container" onSubmit={handleSubmit}>
+      <form className='container' onSubmit={handleSubmit}>
         <h1>Unsubscribe newsletter</h1>
-        <div className="email block">
-          <label htmlFor="frm-email">Email</label>
+        <div className='email block'>
+          <label htmlFor='frm-email'>Email</label>
           <input
-            placeholder="example@email.com"
-            id="email"
-            type="email"
-            name="email"
+            placeholder='example@email.com'
+            id='email'
+            type='email'
+            name='email'
             required
           />
         </div>
-        <div className="button block">
-          <button type="submit">Unsubscribe</button>
+        <div className='button block'>
+          <button type='submit'>Unsubscribe</button>
         </div>
       </form>
-      <Button label="Home" onClick={() => router.push('/')} />
-      <Button label="Subscribe" onClick={() => router.push('/subscribe')} />
+      <Button label='Home' onClick={() => router.push('/')} />
+      <Button label='Subscribe' onClick={() => router.push('/subscribe')} />
     </VerticalLayout>
   );
 }

app/utils/types.ts

@@ -1,16 +1,16 @@
 import { z } from 'zod';
 
 export const ResponseSchema = z.object({
-  message: z.string(),
+  message: z.string()
 });
 
 export const SubscribeFormSchema = z.object({
   email: z.string().email(),
-  targetingAllowed: z.boolean(),
+  targetingAllowed: z.boolean()
 });
 
 export const UnsubscribeFormSchema = z.object({
-  email: z.string().email(),
+  email: z.string().email()
 });
 
 export const NewsSchema = z.object({
@@ -21,5 +21,5 @@ export const NewsSchema = z.object({
   by: z.string(),
   time: z.number(),
   url: z.string().optional(),
-  score: z.number(),
+  score: z.number()
 });