✨ Fixed post CRUD issues

dnrm · Jun 14, 2023 · b2adb3e · b2adb3e
1 parent b4dfe77
commit b2adb3e
Show file tree

Hide file tree

Showing 10 changed files with 428 additions and 33 deletions.
diff --git a/middleware/middleware.ts b/middleware/middleware.ts
@@ -1,9 +1,9 @@
-import nextConnect from "next-connect";
+import { createRouter } from "next-connect";
 import multiparty from "multiparty";
 
-const middleware = nextConnect();
+const router = createRouter();
 
-middleware.use(async (req: any, res: any, next: any) => {
+router.use(async (req: any, res: any, next: any) => {
   const form = new multiparty.Form();
 
   await form.parse(req, function (err: any, fields: any, files: any) {
@@ -13,4 +13,4 @@ middleware.use(async (req: any, res: any, next: any) => {
   });
 });
 
-export default middleware;
+export default router;
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
     "@next-auth/mongodb-adapter": "^1.1.3",
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
+    "cloudinary": "^1.37.1",
     "framer-motion": "^10.12.16",
     "mongodb": "^5.6.0",
     "multiparty": "^4.2.3",
@@ -14,6 +15,7 @@
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
     "react-markdown": "^8.0.7",
+    "spinners-react": "^1.0.7",
     "swr": "^2.1.5",
     "tailwindcss": "^3.3.2"
   },

diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].js
@@ -3,7 +3,7 @@ import GoogleProvider from "next-auth/providers/google";
 import { MongoDBAdapter } from "@next-auth/mongodb-adapter"
 import clientPromise from "../../../lib/mongodb"
 
-export default NextAuth({
+export const authOptions = {
     providers: [
         GoogleProvider({
             clientId: process.env.GOOGLE_CLIENT_ID,
@@ -15,4 +15,6 @@ export default NextAuth({
     },
     adapter: MongoDBAdapter(clientPromise),
     secret: process.env.SECRET
-});
+}
+
+export default NextAuth(authOptions);
diff --git a/pages/api/create.ts b/pages/api/create.ts
@@ -1,6 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getSession } from "next-auth/react";
+import { getServerSession } from "next-auth/next";
 import { connectToDatabase } from "../../lib/mongodb-old";
+import { authOptions } from "../../pages/api/auth/[...nextauth]"
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   const { db } = await connectToDatabase();
@@ -11,11 +12,12 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     });
   }
 
-  const session = await getSession({ req });
+  const session = await getServerSession(req, res, authOptions);
+  console.log("Session: " + session)
 
   if (req.body.content && req.body.title && session) {
-    const response = await db.collection("posts").insert({
-      author: session?.user?.email,
+    const response = await db.collection("posts").insertOne({
+      author: session?.user?.email || "Anonymous",
       title: req?.body?.title,
       content: req?.body?.content,
       src: req?.body?.src,

diff --git a/pages/api/delete/[id].ts b/pages/api/delete/[id].ts
@@ -1,11 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { connectToDatabase } from "../../../lib/mongodb-old";
-import { getSession } from "next-auth/react";
-import { ObjectID } from "mongodb";
+import { getServerSession } from "next-auth/next";
+import { ObjectId } from "mongodb";
+import { authOptions } from "../auth/[...nextauth]";
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   const { db } = await connectToDatabase();
-  const session = await getSession({ req });
+  const session = await getServerSession(req, res, authOptions);
 
   if (!req.query.id) {
     return res.status(400).send("No ID provided");
@@ -17,12 +18,12 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     try {
       const posts = await db
         .collection("posts")
-        .deleteOne({ _id: ObjectID(id) });
+        .deleteOne({ _id: new ObjectId(id) });
       res.status(200).send(posts);
     } catch (e) {
       res.status(500).json(e);
     }
   } else {
-    res.send({ message: "Not logged in" });
+    res.status(403).send({ message: "Not logged in" });
   }
 };
diff --git a/pages/api/update-post.ts b/pages/api/update-post.ts
@@ -1,7 +1,8 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getSession } from "next-auth/react";
+import { getServerSession } from "next-auth/next";
 import { connectToDatabase } from "../../lib/mongodb-old";
 import { ObjectId } from "mongodb";
+import { authOptions } from "./auth/[...nextauth]";
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   const { db } = await connectToDatabase();
@@ -12,7 +13,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
     });
   }
 
-  const session = await getSession({ req });
+  const session = await getServerSession(req, res, authOptions);
 
   if (req.body.content && req.body.title && session) {
     console.log(req.body.content);

diff --git a/pages/api/upload-image.ts b/pages/api/upload-image.ts
@@ -1,14 +1,12 @@
 import middleware from "../../middleware/middleware";
-import nextConnect from "next-connect";
+import { createRouter } from "next-connect";
 import cloudinary from "cloudinary";
 
-const handler = nextConnect();
-handler.use(middleware);
+const router = createRouter();
 
-handler.post(async (req: any, res: any) => {
-  console.log(req.files);
-  console.log(req.files.image[0].path);
+router.use(middleware);
 
+router.post(async (req: any, res: any) => {
   cloudinary.v2.uploader.upload(
     req.files.image[0].path,
     function (error: any, result: any) {
@@ -26,4 +24,4 @@ export const config = {
   },
 };
 
-export default handler;
+export default router.handler();
diff --git a/pages/create-post.tsx b/pages/create-post.tsx
@@ -103,6 +103,7 @@ const Create = () => {
           toast.success("Created post successfully :D");
           router.push("/dashboard");
         } else {
+          console.log("Error:", response);
           throw new Error("Unable to create post");
         }
       } catch (e) {

diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -21,8 +21,8 @@ const Post: React.FC = () => {
         <title>{post?.title ? post.title : "Loading..."} | Crystal</title>
       </Head>
       <Navbar />
-      <header className="border-t-2 border-gray-300">
-        <div className="image relative h-[50vh] w-screen">
+      <header className="border-t-2 border-gray-300 bg-black">
+        <div className="image relative h-[50vh] w-screen opacity-50">
           {post && (
             <Image
               src={post ? post.src : "https://source.unsplash.com/random"}
@@ -36,11 +36,11 @@ const Post: React.FC = () => {
       <main className="flex flex-col items-center">
         <section
           id="post-container"
-          className="px-2 md:p-0 w-full flex justify-center items-center max-w-3xl mx-auto"
+          className="px-2 md:p-0 w-full flex justify-center items-center max-w-4xl mx-auto"
         >
           <div className="pb-16 pt-8">
             {post ? (
-              <div className="prose max-w-none text-justify prose-headings:font-sauce prose-headings:font-black prose-headings:text-left prose-headings:text-6xl">
+              <div className="prose max-w-none text-justify font-sauce prose-h1:tracking-tight prose-h1:font-black prose-h1:text-left prose-h1:text-6xl prose-h1:m-0 prose-hr:my-4 prose-h2:text-4xl">
                 <ReactMarkdown>{post.content}</ReactMarkdown>
               </div>
             ) : null}