✨ Changed fonts and fixed issues with missing dependencies as well as…

… legacy next.js elements
dnrm · Jun 14, 2023 · f248ce1 · f248ce1 · vercel · Jun 14, 2023
1 parent eea0c31
commit f248ce1
Show file tree

Hide file tree

Showing 23 changed files with 1,696 additions and 88 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,37 +1,28 @@
+/* eslint-disable @next/next/no-img-element */
 import React, { useEffect } from "react";
 import Link from "next/link";
-import Head from "next/head";
-import styles from "../styles/fonts.module.css";
 import { useSession } from "next-auth/react";
-import { useUserContext } from "../context/user";
 
 const Navbar = () => {
   const { data: session, status } = useSession();
 
   return (
     <nav>
-      <Head>
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
-          rel="stylesheet"
-        />
-      </Head>
-      <ul className="h-22 flex p-4 md:px-8 py-5 justify-between items-center text-gray-700">
+      <ul className="h-22 flex p-4 md:px-8 py-5 justify-between items-center text-gray-700 font-sauce">
         <div className="flex">
           <li className="px-1 md:px-2 tracking-tighter">
             <Link href="/" legacyBehavior>
-              <a className={`${styles.mono} text-lg font-normal`}>Home</a>
+              <a className={`text-base font-medium`}>Home</a>
             </Link>
           </li>
           <li className="px-1 md:px-2 tracking-tighter">
             <Link href="/dashboard" legacyBehavior>
-              <a className={`${styles.mono} text-lg font-normal`}>Dashboard</a>
+              <a className={`text-base font-medium`}>Dashboard</a>
             </Link>
           </li>
           <li className="px-1 md:px-2 tracking-tighter">
             <Link href="/create-post" legacyBehavior>
-              <a className={`${styles.mono} text-lg font-normal`}>Publish</a>
+              <a className={`text-base font-medium`}>Publish</a>
             </Link>
           </li>
         </div>

diff --git a/next.config.js b/next.config.js
@@ -4,7 +4,8 @@ module.exports = {
       "source.unsplash.com",
       "images.unsplash.com",
       "res.cloudinary.com",
-      "cdn.hashnode.com"
+      "cdn.hashnode.com",
+      "lh3.googleusercontent.com",
     ],
   },
 };
diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
   "devDependencies": {
     "@types/node": "20.3.1",
     "@types/react": "18.2.12",
+    "eslint": "8.42.0",
+    "eslint-config-next": "13.4.5",
     "typescript": "5.1.3"
   }
 }
diff --git a/pages/404.tsx b/pages/404.tsx
@@ -17,10 +17,6 @@ const NotFound = () => {
           property="og:image"
           content="https://source.unsplash.com/random"
         />
-        <script
-          src="https://kit.fontawesome.com/d465d5991c.js"
-          crossOrigin="anonymous"
-        ></script>
       </Head>
       <header className="flex items-center justify-between">
         <h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tighter font-bold text-black py-10">

diff --git a/pages/500.tsx b/pages/500.tsx
@@ -17,10 +17,6 @@ const ServerError = () => {
           property="og:image"
           content="https://source.unsplash.com/random"
         />
-        <script
-          src="https://kit.fontawesome.com/d465d5991c.js"
-          crossOrigin="anonymous"
-        ></script>
       </Head>
       <header className="flex items-center justify-between">
         <h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tighter font-bold text-black py-10">

diff --git a/pages/account.tsx b/pages/account.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import React, { useState, useEffect } from "react";
 import Head from "next/head";
 import { getSession } from "next-auth/react";

diff --git a/pages/api/create.ts b/pages/api/create.ts
@@ -1,9 +1,10 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { connectToDatabase } from "../../lib/mongodb-old";
-import { authOptions } from "../../pages/api/auth/[...nextauth]"
+import { authOptions } from "../../pages/api/auth/[...nextauth]";
+import { Session } from "next-auth";
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { db } = await connectToDatabase();
 
   if (req.method != "POST") {
@@ -12,12 +13,12 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     });
   }
 
-  const session = await getServerSession(req, res, authOptions);
-  console.log("Session: " + session)
+  const session: Session = await getServerSession(req, res, authOptions);
+  console.log("Session: " + session);
 
   if (req.body.content && req.body.title && session) {
     const response = await db.collection("posts").insertOne({
-      author: session?.user?.email || "Anonymous",
+      author: session.user.email,
       title: req?.body?.title,
       content: req?.body?.content,
       src: req?.body?.src,
@@ -30,3 +31,5 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     });
   }
 };
+
+export default handler;
diff --git a/pages/api/delete/[id].ts b/pages/api/delete/[id].ts
@@ -3,10 +3,11 @@ import { connectToDatabase } from "../../../lib/mongodb-old";
 import { getServerSession } from "next-auth/next";
 import { ObjectId } from "mongodb";
 import { authOptions } from "../auth/[...nextauth]";
+import { Session } from "next-auth";
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { db } = await connectToDatabase();
-  const session = await getServerSession(req, res, authOptions);
+  const session: Session = await getServerSession(req, res, authOptions);
 
   if (!req.query.id) {
     return res.status(400).send("No ID provided");
@@ -27,3 +28,5 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     res.status(403).send({ message: "Not logged in" });
   }
 };
+
+export default handler;
diff --git a/pages/api/get-user.ts b/pages/api/get-user.ts
@@ -6,7 +6,7 @@ const client = new MongoClient(
     process.env.DATABASE_URL || ""
 );
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     const session = await getSession({ req });
     if (!session) {
         return res.status(404).send({
@@ -20,3 +20,6 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     let doc = await db.collection("users").findOne({ email });
     return res.status(200).send(doc);
 };
+
+
+export default handler
diff --git a/pages/api/own-posts.ts b/pages/api/own-posts.ts
@@ -1,15 +1,21 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { connectToDatabase } from '../../lib/mongodb-old' 
+import { connectToDatabase } from "../../lib/mongodb-old";
 import { getSession } from "next-auth/react";
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const { db } = await connectToDatabase()
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const { db } = await connectToDatabase();
   const session = await getSession({ req });
 
   if (session && session.user) {
-    const posts = await db.collection('posts').find({ author: session.user.email }).sort({'_id': -1}).toArray()
+    const posts = await db
+      .collection("posts")
+      .find({ author: session.user.email })
+      .sort({ _id: -1 })
+      .toArray();
     res.send(posts);
   } else {
-    res.send({ message: 'Not logged in' })
+    res.send({ message: "Not logged in" });
   }
 };
+
+export default handler;
diff --git a/pages/api/post/[id].ts b/pages/api/post/[id].ts
@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { connectToDatabase } from "../../../lib/mongodb-old";
 import { ObjectId } from "bson";
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { db } = await connectToDatabase();
 
   if (!req.query.id) {
@@ -18,3 +18,5 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
 
   res.send(post[0]);
 };
+
+export default handler;
diff --git a/pages/api/posts.ts b/pages/api/posts.ts
@@ -1,15 +1,21 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { connectToDatabase } from '../../lib/mongodb-old' 
+import { connectToDatabase } from "../../lib/mongodb-old";
 import { getSession } from "next-auth/react";
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const { db } = await connectToDatabase()
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const { db } = await connectToDatabase();
   const session = await getSession({ req });
 
   if (session && session.user) {
-    const posts = await db.collection('posts').find({  }).sort({'_id': -1}).toArray()
+    const posts = await db
+      .collection("posts")
+      .find({})
+      .sort({ _id: -1 })
+      .toArray();
     res.send(posts);
   } else {
-    res.send({ message: 'Not logged in' })
+    res.send({ message: "Not logged in" });
   }
 };
+
+export default handler;
diff --git a/pages/api/update-post.ts b/pages/api/update-post.ts
@@ -3,8 +3,9 @@ import { getServerSession } from "next-auth/next";
 import { connectToDatabase } from "../../lib/mongodb-old";
 import { ObjectId } from "mongodb";
 import { authOptions } from "./auth/[...nextauth]";
+import { Session } from "next-auth";
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const { db } = await connectToDatabase();
 
   if (req.method != "POST") {
@@ -13,16 +14,14 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     });
   }
 
-  const session = await getServerSession(req, res, authOptions);
+  const session: Session = await getServerSession(req, res, authOptions);
 
   if (req.body.content && req.body.title && session) {
-    console.log(req.body.content);
-    console.log(req.body.id) 
     const response = await db.collection("posts").updateOne(
       { _id: new ObjectId(req.body.id) },
       {
         $set: {
-          author: session?.user?.email,
+          author: session.user.email,
           title: req?.body?.title,
           content: req?.body?.content,
           src: req?.body?.src,
@@ -37,3 +36,5 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     });
   }
 };
+
+export default handler;
diff --git a/pages/api/update-user.ts b/pages/api/update-user.ts
@@ -2,11 +2,12 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { MongoClient } from "mongodb";
 import { authOptions } from "./auth/[...nextauth]";
+import { Session } from "next-auth";
 
 const client = new MongoClient(process.env.MONGODB_URI || "");
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const session = await getServerSession(req, res, authOptions);
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const session: Session = await getServerSession(req, res, authOptions);
   if (!session || !req.body.username) {
     return res.status(400).send({
       error: "You're missing to log in or to provide the username to set.",
@@ -25,20 +26,20 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
 
   console.log(req.body);
 
-  const email = session?.user?.email;
+  const email = session.user.email;
   await client.connect();
   let db = await client.db("auth");
-  let doc = await db
-    .collection("users")
-    .findOneAndUpdate(
-      { email },
-      {
-        $set: {
-          username: req.body.username,
-          name: req.body.name,
-          bio: req.body.bio,
-        },
-      }
-    );
+  let doc = await db.collection("users").findOneAndUpdate(
+    { email },
+    {
+      $set: {
+        username: req.body.username,
+        name: req.body.name,
+        bio: req.body.bio,
+      },
+    }
+  );
   return res.status(200).send(doc);
 };
+
+export default handler;
diff --git a/pages/api/users.ts b/pages/api/users.ts
@@ -4,7 +4,7 @@ import { MongoClient } from "mongodb";
 
 const client = new MongoClient(process.env.MONGODB_URI || "");
 
-export default async (req: NextApiRequest, res: NextApiResponse) => {
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const session = await getSession({ req });
   if (!session) {
     return res.status(404).send({
@@ -17,3 +17,5 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
   let users = await db.collection("users").find().toArray();
   return res.status(200).send(users);
 };
+
+export default handler;
diff --git a/pages/create-post.tsx b/pages/create-post.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
 import router from "next/router";
 import { toast } from "react-hot-toast";

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
@@ -29,10 +29,6 @@ export default function Login() {
           href="https://fonts.gstatic.com"
           crossOrigin=""
         />
-        <link
-          href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
-          rel="stylesheet"
-        />
       </Head>
       <Navbar />
       <main className="flex flex-col p-8 bg-beige">
@@ -130,6 +126,7 @@ export default function Login() {
                     ? posts.map((i: any) => {
                         return (
                           <Post
+                            key={i._id}
                             layout={layout}
                             id={i._id}
                             title={i.title}

diff --git a/pages/edit/[id].tsx b/pages/edit/[id].tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import React, { useRef, useState } from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -99,6 +99,7 @@ export default function Home() {
                   ? posts.map((i: any) => {
                       return (
                         <Post
+                          key={i._id}
                           layout={layout}
                           id={i._id}
                           title={i.title}

diff --git a/pages/signin.tsx b/pages/signin.tsx
@@ -1,6 +1,7 @@
 import { getProviders, signIn } from "next-auth/react";
 import Navbar from "../components/Navbar";
 import Head from "next/head";
+import Image from "next/image";
 
 export default function SignIn({ providers }: any) {
   return (
@@ -25,7 +26,7 @@ export default function SignIn({ providers }: any) {
                 onClick={() => signIn(provider.id, { callbackUrl: "/" })}
                 className="w-full flex justify-start items-center gap-4 text-lg text-left p-5"
               >
-                <img src="/google.png" className="h-10 w-10" alt="" />
+                <Image src="/google.png" width={25} height={25} alt="Google logo" />
                 Sign in with {provider.name}
               </button>
             </div>