style: linting and formatting

2023-11-29 19:44:39 +01:00
parent 74ec709155
commit 77a9d50927
23 changed files with 1452 additions and 127 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,22 @@
 {
-  "extends": "next/core-web-vitals"
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"]
+  }
 }
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,7 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn audit
+yarn format
+yarn lint
+yarn typecheck
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 80,
+  "jsxSingleQuote": true,
+  "tabWidth": 2,
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
--- a/app/api/cron/route.ts
+++ b/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);
 }
--- a/app/api/subscribe/route.ts
+++ b/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 });
 }
--- a/app/api/unsubscribe/route.ts
+++ b/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 });
 }
--- a/app/globals.css
+++ b/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%);
 }

--- a/app/layout.tsx
+++ b/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>
-  )
+  );
 }
--- a/app/page.tsx
+++ b/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>
  );
 }
--- a/app/subscribe/page.tsx
+++ b/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>
  );
 }
--- a/app/success/page.tsx
+++ b/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>
  );
 }
--- a/app/unsubscribe/page.tsx
+++ b/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>
  );
 }
--- a/app/utils/types.ts
+++ b/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()
 });
--- a/commitlint.config.ts
+++ b/commitlint.config.ts
@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,7 +1,7 @@
-interface ButtonProps {
+type ButtonProps = {
  label: string;
  onClick: () => void;
-}
+};

 export const Button = ({ label, onClick }: ButtonProps) => (
  <button onClick={onClick} key={1} className="overflow-hidden rounded-md">
--- a/components/VerticalLayout.tsx
+++ b/components/VerticalLayout.tsx
@@ -2,10 +2,10 @@ export const VerticalLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <div
      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '16px',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "16px",
      }}
    >
      {children}
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};

-module.exports = nextConfig
+module.exports = nextConfig;
--- a/package.json
+++ b/package.json
@@ -1,13 +1,16 @@
 {
  "name": "next-newsletter",
  "version": "0.1.0",
-  "private": true,
+  "description": "Template for NodeJS APIs with TypeScript, with configurations for linting and testing",
+  "author": "riccardo.s@hey.com",
  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint",
+    "format": "prettier --config .prettierrc 'app/' --write",
    "typecheck": "tsc --noEmit",
+    "prepare": "husky install",
    "vercel:link": "vercel link",
    "vercel:env": "vercel env pull .env",
    "prisma:push": "npx prisma db push",
@@ -15,21 +18,39 @@
  },
  "dependencies": {
    "@prisma/client": "^5.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zod-validation-error": "^2.1.0"
  },
  "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
+    "@typescript-eslint/parser": "^6.12.0",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
+    "eslint-config-prettier": "^9.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.1.0",
    "postcss": "^8",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
    "prisma": "^5.6.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --quiet --fix"
+    ],
+    "*.{json,ts}": [
+      "prettier --write --ignore-unknown"
+    ]
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
    tailwindcss: {},
    autoprefixer: {},
  },
-}
+};
--- a/prisma/prisma.ts
+++ b/prisma/prisma.ts
@@ -1,4 +1,4 @@
-import { PrismaClient } from '@prisma/client';
+import { PrismaClient } from "@prisma/client";

 // PrismaClient is attached to the `global` object in development to prevent
 // exhausting your database connection limit.
@@ -10,6 +10,6 @@ const globalForPrisma = global as unknown as { prisma: PrismaClient };

 export const prisma = globalForPrisma.prisma || new PrismaClient();

-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

 export default prisma;
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,20 +1,20 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";

 const config: Config = {
  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
-}
-export default config
+};
+export default config;
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				`module.exports = { extends: ['@commitlint/config-conventional'] };`