From f6fffa432829c998c7f93b8bbb79db3dd3f5ce17 Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Wed, 9 Oct 2024 00:17:41 +0530
Subject: [PATCH 01/11] added form to submit blog

---
 app/blog/submit-blog/page.tsx | 164 ++++++++++++++++++++++++++++++++++
 components/ui/textarea.tsx    |  24 +++++
 next-env.d.ts                 |   1 -
 yarn.lock                     |  14 ++-
 4 files changed, 201 insertions(+), 2 deletions(-)
 create mode 100644 app/blog/submit-blog/page.tsx
 create mode 100644 components/ui/textarea.tsx

diff --git a/app/blog/submit-blog/page.tsx b/app/blog/submit-blog/page.tsx
new file mode 100644
index 000000000..9c8706d29
--- /dev/null
+++ b/app/blog/submit-blog/page.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Loader2 } from "lucide-react";
+
+export default function SubmitBlog() {
+  const [blogData, setBlogData] = useState({
+    title: "",
+    url: "",
+    excerpt: "",
+    date: "",
+    author: "",
+    readingTime: "",
+    thumbnail: "",
+    tags: "",
+    content: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target;
+    setBlogData({ ...blogData, [name]: value });
+    console.log(blogData);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      // TODO : make an API call to submit the blog
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      // TODO: Reset form or show success message here
+    } catch (error) {
+      console.error("Error submitting blog:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="mx-auto mt-24 w-full max-w-3xl">
+      <CardHeader>
+        <CardTitle className="text-2xl">Submit Your Blog</CardTitle>
+        <CardDescription>
+          Fill in the details to submit your blog post.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="title">Blog Title</Label>
+            <Input
+              id="title"
+              name="title"
+              placeholder="blog title"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="url">URL</Label>
+            <Input
+              id="url"
+              name="url"
+              placeholder="/blog/your-blog-title"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="excerpt">Excerpt</Label>
+            <Textarea
+              id="excerpt"
+              name="excerpt"
+              placeholder="excerpt"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="date">Publication Date</Label>
+            <Input
+              id="date"
+              name="date"
+              placeholder="yyyy-mm-dd"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="author">Author</Label>
+            <Input
+              id="author"
+              name="author"
+              placeholder="author name"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="readingTime">Reading Time</Label>
+            <Input
+              id="readingTime"
+              placeholder="i.e 5 minutes"
+              name="readingTime"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="thumbnail">Thumbnail URL</Label>
+            <Input
+              id="thumbnail"
+              name="thumbnail"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="tags">Tags (comma-separated)</Label>
+            <Input id="tags" name="tags" onChange={handleChange} required />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="content">Content (Markdown)</Label>
+            <Textarea
+              id="content"
+              name="content"
+              onChange={handleChange}
+              required
+              className="min-h-[200px]"
+            />
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full" onClick={handleSubmit} disabled={isLoading}>
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Submitting...
+            </>
+          ) : (
+            "Submit Blog"
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 000000000..9f0057345
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/next-env.d.ts b/next-env.d.ts
index fd36f9494..4f11a03dc 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/yarn.lock b/yarn.lock
index 2f206b7bf..c5b4e0c23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2135,13 +2135,20 @@
     "@radix-ui/react-use-previous" "1.1.0"
     "@radix-ui/react-use-size" "1.1.0"
 
-"@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.1.0":
+"@radix-ui/react-slot@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
   integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
 
+"@radix-ui/react-slot@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@radix-ui/react-switch@^1.0.3":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz#fcf8e778500f1d60d4b2bec2fc3fad77a7c118e3"
@@ -6237,6 +6244,11 @@ ramda@^0.29.0:
   resolved "https://registry.npmjs.org/ramda/-/ramda-0.29.1.tgz#408a6165b9555b7ba2fc62555804b6c5a2eca196"
   integrity sha512-OfxIeWzd4xdUNxlWhgFazxsA/nl3mS4/jGZI5n00uWOoSSFRhC1b6gl6xvmzUamgmqELraWp0J/qqVlXYPDPyA==
 
+react-day-picker@8.10.1:
+  version "8.10.1"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.1.tgz#4762ec298865919b93ec09ba69621580835b8e80"
+  integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
+
 react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"

From 4bcf08d76084bcede894a5bda9c7e975ab42522b Mon Sep 17 00:00:00 2001
From: Aman Jain <145151053+itzamanjain@users.noreply.github.com>
Date: Tue, 8 Oct 2024 19:04:35 +0000
Subject: [PATCH 02/11] added form to submit blog

---
 app/blog/submit-blog/page.tsx | 164 ++++++++++++++++++++++++++++++++++
 components/ui/textarea.tsx    |  24 +++++
 next-env.d.ts                 |   1 -
 3 files changed, 188 insertions(+), 1 deletion(-)
 create mode 100644 app/blog/submit-blog/page.tsx
 create mode 100644 components/ui/textarea.tsx

diff --git a/app/blog/submit-blog/page.tsx b/app/blog/submit-blog/page.tsx
new file mode 100644
index 000000000..9c8706d29
--- /dev/null
+++ b/app/blog/submit-blog/page.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Loader2 } from "lucide-react";
+
+export default function SubmitBlog() {
+  const [blogData, setBlogData] = useState({
+    title: "",
+    url: "",
+    excerpt: "",
+    date: "",
+    author: "",
+    readingTime: "",
+    thumbnail: "",
+    tags: "",
+    content: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target;
+    setBlogData({ ...blogData, [name]: value });
+    console.log(blogData);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      // TODO : make an API call to submit the blog
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      // TODO: Reset form or show success message here
+    } catch (error) {
+      console.error("Error submitting blog:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="mx-auto mt-24 w-full max-w-3xl">
+      <CardHeader>
+        <CardTitle className="text-2xl">Submit Your Blog</CardTitle>
+        <CardDescription>
+          Fill in the details to submit your blog post.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="title">Blog Title</Label>
+            <Input
+              id="title"
+              name="title"
+              placeholder="blog title"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="url">URL</Label>
+            <Input
+              id="url"
+              name="url"
+              placeholder="/blog/your-blog-title"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="excerpt">Excerpt</Label>
+            <Textarea
+              id="excerpt"
+              name="excerpt"
+              placeholder="excerpt"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="date">Publication Date</Label>
+            <Input
+              id="date"
+              name="date"
+              placeholder="yyyy-mm-dd"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="author">Author</Label>
+            <Input
+              id="author"
+              name="author"
+              placeholder="author name"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="readingTime">Reading Time</Label>
+            <Input
+              id="readingTime"
+              placeholder="i.e 5 minutes"
+              name="readingTime"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="thumbnail">Thumbnail URL</Label>
+            <Input
+              id="thumbnail"
+              name="thumbnail"
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="tags">Tags (comma-separated)</Label>
+            <Input id="tags" name="tags" onChange={handleChange} required />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="content">Content (Markdown)</Label>
+            <Textarea
+              id="content"
+              name="content"
+              onChange={handleChange}
+              required
+              className="min-h-[200px]"
+            />
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full" onClick={handleSubmit} disabled={isLoading}>
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Submitting...
+            </>
+          ) : (
+            "Submit Blog"
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 000000000..9f0057345
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/next-env.d.ts b/next-env.d.ts
index fd36f9494..4f11a03dc 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

From 70c16600fb5ffb340c7059037a44d33189b8a28e Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sun, 13 Oct 2024 22:44:29 +0530
Subject: [PATCH 03/11] Refactor blog submission API and form handling

---
 app/api/submit-blog/route.ts  | 59 +++++++++++++++++++++++++++++++++++
 app/blog/submit-blog/page.tsx | 11 ++++++-
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 app/api/submit-blog/route.ts

diff --git a/app/api/submit-blog/route.ts b/app/api/submit-blog/route.ts
new file mode 100644
index 000000000..041eecd8d
--- /dev/null
+++ b/app/api/submit-blog/route.ts
@@ -0,0 +1,59 @@
+import { NextRequest, NextResponse } from "next/server";
+import { withAuth } from "@/utils/withAuth";
+import { createClient } from "@/utils/supabase/server";
+import { User } from "@supabase/supabase-js";
+
+async function submitBlog(request: NextRequest & { user: User }) {
+  const supabase = createClient();
+
+  try {
+    const {
+      title,
+      url,
+      excerpt,
+      date,
+      author,
+      tag,
+      content,
+      readingTime,
+    } = await request.json();
+    console.log("request", request);
+    
+
+    const { data: blog, error } = await supabase
+      .from("blogs")
+      .insert([
+        {
+          title,
+          url,
+          excerpt,
+          date,
+          author,
+          readingTime,
+          tag,
+          content,
+          status:"pending",
+        },
+      ]);
+      console.log("blog", blog);
+      
+    if (error) {
+      console.error("error submitting blog", error);
+      return NextResponse.json(
+        { error: "Error submitting blog. Please contact PearAI team." },
+        { status: 500 },
+      );
+    }
+
+    return NextResponse.json({ blog });
+  } catch (error) {
+    console.error("error submitting blog", error);
+    return NextResponse.json(
+      { error: "Error submitting blog. Please contact PearAI team." },
+      { status: 500 },
+    );
+  }
+}
+
+export const POST = withAuth(submitBlog);
+
diff --git a/app/blog/submit-blog/page.tsx b/app/blog/submit-blog/page.tsx
index 9c8706d29..170da418e 100644
--- a/app/blog/submit-blog/page.tsx
+++ b/app/blog/submit-blog/page.tsx
@@ -43,7 +43,16 @@ export default function SubmitBlog() {
 
     try {
       // TODO : make an API call to submit the blog
-      await new Promise((resolve) => setTimeout(resolve, 2000));
+      // api should allow to auth user to submit a blog with all the detail and status as pending and admin can approve it one the blog is approve show it to /blog section of the website 
+      const resposne = fetch("/api/submit-blog", {
+        method: "POST",
+        body: JSON.stringify(blogData),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+      )
+      console.log("response", resposne)
       // TODO: Reset form or show success message here
     } catch (error) {
       console.error("Error submitting blog:", error);

From 5ba8ff2b342b1b7d1791499815c4121a85770ea9 Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sun, 13 Oct 2024 22:53:56 +0530
Subject: [PATCH 04/11] corrected format

---
 app/api/submit-blog/route.ts  | 46 +++++++++++++----------------------
 app/blog/submit-blog/page.tsx |  7 +++---
 2 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/app/api/submit-blog/route.ts b/app/api/submit-blog/route.ts
index 041eecd8d..847a8c888 100644
--- a/app/api/submit-blog/route.ts
+++ b/app/api/submit-blog/route.ts
@@ -7,36 +7,25 @@ async function submitBlog(request: NextRequest & { user: User }) {
   const supabase = createClient();
 
   try {
-    const {
-      title,
-      url,
-      excerpt,
-      date,
-      author,
-      tag,
-      content,
-      readingTime,
-    } = await request.json();
+    const { title, url, excerpt, date, author, tag, content, readingTime } =
+      await request.json();
     console.log("request", request);
-    
 
-    const { data: blog, error } = await supabase
-      .from("blogs")
-      .insert([
-        {
-          title,
-          url,
-          excerpt,
-          date,
-          author,
-          readingTime,
-          tag,
-          content,
-          status:"pending",
-        },
-      ]);
-      console.log("blog", blog);
-      
+    const { data: blog, error } = await supabase.from("blogs").insert([
+      {
+        title,
+        url,
+        excerpt,
+        date,
+        author,
+        readingTime,
+        tag,
+        content,
+        status: "pending",
+      },
+    ]);
+    console.log("blog", blog);
+
     if (error) {
       console.error("error submitting blog", error);
       return NextResponse.json(
@@ -56,4 +45,3 @@ async function submitBlog(request: NextRequest & { user: User }) {
 }
 
 export const POST = withAuth(submitBlog);
-
diff --git a/app/blog/submit-blog/page.tsx b/app/blog/submit-blog/page.tsx
index 170da418e..4b22f577d 100644
--- a/app/blog/submit-blog/page.tsx
+++ b/app/blog/submit-blog/page.tsx
@@ -43,16 +43,15 @@ export default function SubmitBlog() {
 
     try {
       // TODO : make an API call to submit the blog
-      // api should allow to auth user to submit a blog with all the detail and status as pending and admin can approve it one the blog is approve show it to /blog section of the website 
+      // api should allow to auth user to submit a blog with all the detail and status as pending and admin can approve it one the blog is approve show it to /blog section of the website
       const resposne = fetch("/api/submit-blog", {
         method: "POST",
         body: JSON.stringify(blogData),
         headers: {
           "Content-Type": "application/json",
         },
-      }
-      )
-      console.log("response", resposne)
+      });
+      console.log("response", resposne);
       // TODO: Reset form or show success message here
     } catch (error) {
       console.error("Error submitting blog:", error);

From 3c9233542b0c730cf8eb97c0d4ac1173b5dbeda7 Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sun, 13 Oct 2024 23:27:10 +0530
Subject: [PATCH 05/11] Refactor blog submission form handling and API call

---
 app/blog/submit-blog/page.tsx | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/blog/submit-blog/page.tsx b/app/blog/submit-blog/page.tsx
index 4b22f577d..54dc8b2ea 100644
--- a/app/blog/submit-blog/page.tsx
+++ b/app/blog/submit-blog/page.tsx
@@ -34,7 +34,6 @@ export default function SubmitBlog() {
   ) => {
     const { name, value } = e.target;
     setBlogData({ ...blogData, [name]: value });
-    console.log(blogData);
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -42,17 +41,19 @@ export default function SubmitBlog() {
     setIsLoading(true);
 
     try {
-      // TODO : make an API call to submit the blog
-      // api should allow to auth user to submit a blog with all the detail and status as pending and admin can approve it one the blog is approve show it to /blog section of the website
-      const resposne = fetch("/api/submit-blog", {
+      // Make the API call to submit the blog
+      const response = await fetch("/api/submit-blog", {
         method: "POST",
         body: JSON.stringify(blogData),
         headers: {
           "Content-Type": "application/json",
         },
       });
-      console.log("response", resposne);
-      // TODO: Reset form or show success message here
+
+      const data = await response.json();
+      console.log("Response:", data);
+
+      // Reset form or show success message
     } catch (error) {
       console.error("Error submitting blog:", error);
     } finally {
@@ -153,20 +154,18 @@ export default function SubmitBlog() {
               className="min-h-[200px]"
             />
           </div>
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Submitting...
+              </>
+            ) : (
+              "Submit Blog"
+            )}
+          </Button>
         </form>
       </CardContent>
-      <CardFooter>
-        <Button className="w-full" onClick={handleSubmit} disabled={isLoading}>
-          {isLoading ? (
-            <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              Submitting...
-            </>
-          ) : (
-            "Submit Blog"
-          )}
-        </Button>
-      </CardFooter>
     </Card>
   );
 }

From b413dacb2dc8409a8a50a82f212e2f8de145e0e6 Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sat, 19 Oct 2024 18:29:42 +0530
Subject: [PATCH 06/11] Refactor blog submission form handling and API call

---
 app/api/submit-blog/route.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/api/submit-blog/route.ts b/app/api/submit-blog/route.ts
index 847a8c888..d2342138b 100644
--- a/app/api/submit-blog/route.ts
+++ b/app/api/submit-blog/route.ts
@@ -1,9 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
-import { withAuth } from "@/utils/withAuth";
+// import { withAuth } from "@/utils/withAuth";
 import { createClient } from "@/utils/supabase/server";
-import { User } from "@supabase/supabase-js";
 
-async function submitBlog(request: NextRequest & { user: User }) {
+// TODO - Add withAuth middleware
+async function submitBlog(request: NextRequest) {
   const supabase = createClient();
 
   try {
@@ -11,14 +11,14 @@ async function submitBlog(request: NextRequest & { user: User }) {
       await request.json();
     console.log("request", request);
 
-    const { data: blog, error } = await supabase.from("blogs").insert([
+    const { data: blog, error } = await supabase.from("blog").insert([
       {
         title,
         url,
         excerpt,
         date,
         author,
-        readingTime,
+        readingtime: readingTime,
         tag,
         content,
         status: "pending",
@@ -44,4 +44,4 @@ async function submitBlog(request: NextRequest & { user: User }) {
   }
 }
 
-export const POST = withAuth(submitBlog);
+export const POST = submitBlog;

From b19120e7109914aed4d3d4f726e7e608e30f5751 Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sat, 19 Oct 2024 18:40:09 +0530
Subject: [PATCH 07/11] approved blog api

---
 app/api/approve-blog/route.ts | 37 +++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 app/api/approve-blog/route.ts

diff --git a/app/api/approve-blog/route.ts b/app/api/approve-blog/route.ts
new file mode 100644
index 000000000..2b8b4127c
--- /dev/null
+++ b/app/api/approve-blog/route.ts
@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createClient } from "@/utils/supabase/server";
+
+// Todo only admin can approve blog
+async function updateBlogStatus(request: NextRequest) {
+  const supabase = createClient();
+
+  try {
+    const { id } = await request.json();
+
+    const { data, error } = await supabase
+      .from("blog")
+      .update({ status: "approved" })
+      .eq("id", id);
+
+    if (error) {
+      console.error("Error updating blog status:", error);
+      return NextResponse.json(
+        { error: "Failed to update blog status" },
+        { status: 500 },
+      );
+    }
+
+    return NextResponse.json({
+      message: "Blog status updated successfully",
+      data,
+    });
+  } catch (error) {
+    console.error("Error parsing request body:", error);
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 },
+    );
+  }
+}
+
+export const POST = updateBlogStatus;

From 1746d5665f91efb643e60722210e9b78022ba35a Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sat, 19 Oct 2024 19:16:52 +0530
Subject: [PATCH 08/11] Refactor blog submission API

---
 app/api/approve-blog/route.ts | 4 ++--
 app/api/submit-blog/route.ts  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/api/approve-blog/route.ts b/app/api/approve-blog/route.ts
index 2b8b4127c..4a8063e6f 100644
--- a/app/api/approve-blog/route.ts
+++ b/app/api/approve-blog/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { createClient } from "@/utils/supabase/server";
-
+import { withAuth } from "@/utils/withAuth";
 // Todo only admin can approve blog
 async function updateBlogStatus(request: NextRequest) {
   const supabase = createClient();
@@ -34,4 +34,4 @@ async function updateBlogStatus(request: NextRequest) {
   }
 }
 
-export const POST = updateBlogStatus;
+export const POST = withAuth(updateBlogStatus);
diff --git a/app/api/submit-blog/route.ts b/app/api/submit-blog/route.ts
index d2342138b..032f4424a 100644
--- a/app/api/submit-blog/route.ts
+++ b/app/api/submit-blog/route.ts
@@ -1,8 +1,8 @@
 import { NextRequest, NextResponse } from "next/server";
-// import { withAuth } from "@/utils/withAuth";
+import { withAuth } from "@/utils/withAuth";
 import { createClient } from "@/utils/supabase/server";
 
-// TODO - Add withAuth middleware
+// TODO add rate limiting to this endpoint to prevent spam submissions
 async function submitBlog(request: NextRequest) {
   const supabase = createClient();
 
@@ -44,4 +44,4 @@ async function submitBlog(request: NextRequest) {
   }
 }
 
-export const POST = submitBlog;
+export const POST = withAuth(submitBlog);

From 81482bfa4d8751fb3b7b527c64ec292c3c0f7b85 Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sat, 19 Oct 2024 19:58:17 +0530
Subject: [PATCH 09/11] added secret admin path

---
 app/api/approve-blog/route.ts       |  84 ++++++++++------
 app/blog/secret-admin-page/page.tsx | 142 ++++++++++++++++++++++++++++
 components/ui/table.tsx             | 117 +++++++++++++++++++++++
 3 files changed, 315 insertions(+), 28 deletions(-)
 create mode 100644 app/blog/secret-admin-page/page.tsx
 create mode 100644 components/ui/table.tsx

diff --git a/app/api/approve-blog/route.ts b/app/api/approve-blog/route.ts
index 4a8063e6f..0ce2e30b0 100644
--- a/app/api/approve-blog/route.ts
+++ b/app/api/approve-blog/route.ts
@@ -3,35 +3,63 @@ import { createClient } from "@/utils/supabase/server";
 import { withAuth } from "@/utils/withAuth";
 // Todo only admin can approve blog
 async function updateBlogStatus(request: NextRequest) {
-  const supabase = createClient();
-
-  try {
-    const { id } = await request.json();
-
-    const { data, error } = await supabase
-      .from("blog")
-      .update({ status: "approved" })
-      .eq("id", id);
-
-    if (error) {
-      console.error("Error updating blog status:", error);
-      return NextResponse.json(
-        { error: "Failed to update blog status" },
-        { status: 500 },
-      );
+    const supabase = createClient();
+
+    try {
+        const { id } = await request.json();
+
+        const { data, error } = await supabase
+            .from("blog")
+            .update({ status: "approved" })
+            .eq("id", id);
+
+        if (error) {
+            console.error("Error updating blog status:", error);
+            return NextResponse.json(
+                { error: "Failed to update blog status" },
+                { status: 500 },
+            );
+        }
+
+        return NextResponse.json({
+            message: "Blog status updated successfully",
+            data,
+        });
+    } catch (error) {
+        console.error("Error parsing request body:", error);
+        return NextResponse.json(
+            { error: "Invalid request body" },
+            { status: 400 },
+        );
     }
+}
 
-    return NextResponse.json({
-      message: "Blog status updated successfully",
-      data,
-    });
-  } catch (error) {
-    console.error("Error parsing request body:", error);
-    return NextResponse.json(
-      { error: "Invalid request body" },
-      { status: 400 },
-    );
-  }
+async function getBlog(request: NextRequest) {
+    const supabase = createClient();
+
+    try {
+        const { data, error } = await supabase
+            .from('blog')
+            .select('*')
+            .eq('status', 'pending');
+
+        if (error) {
+            return NextResponse.json(
+            { error: "failed to fetch blogs"},
+            { status: 500 },
+            );
+        }
+
+        return NextResponse.json(data,{status:200});
+
+    } catch (error) {
+        console.error("Error parsing request body:", error);
+        return NextResponse.json(
+            { error: "Invalid request body" },
+            { status: 400 },
+        );
+    }
 }
 
-export const POST = withAuth(updateBlogStatus);
+export const POST = updateBlogStatus;
+export const GET = getBlog
diff --git a/app/blog/secret-admin-page/page.tsx b/app/blog/secret-admin-page/page.tsx
new file mode 100644
index 000000000..9b4ee39de
--- /dev/null
+++ b/app/blog/secret-admin-page/page.tsx
@@ -0,0 +1,142 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { MoreHorizontal, Loader2 } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+interface Blog {
+  id: number
+  title: string
+  url: string
+  excerpt: string
+  date: string
+  author: string
+  tag: string | null
+  content: string
+  readingtime: number
+  status: string
+}
+
+export default function BlogApproval() {
+  const [blogs, setBlogs] = useState<Blog[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchBlogs()
+  }, [])
+
+  const fetchBlogs = async () => {
+    try {
+      const response = await fetch('/api/approve-blog')
+      if (!response.ok) {
+        throw new Error('Failed to fetch blogs')
+      }
+      const data = await response.json()
+      setBlogs(data)
+    } catch (err) {
+      setError('Failed to load blogs. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleApprove = async (blogId: number) => {
+    try {
+      const response = await fetch('/api/approve-blog', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: blogId }),
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to approve blog')
+      }
+
+      // Update the local state to reflect the change
+
+    } catch (err) {
+      setError('Failed to approve blog.')
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return <div className="text-red-500">{error}</div>
+  }
+
+  return (
+    <Card className="w-full mt-20">
+      <CardHeader>
+        <CardTitle>Approve Blogs</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>ID</TableHead>
+              <TableHead>Title</TableHead>
+              <TableHead>URL</TableHead>
+              <TableHead>Excerpt</TableHead>
+              <TableHead>Date</TableHead>
+              <TableHead>Author</TableHead>
+              <TableHead>Tag</TableHead>
+              <TableHead>Content</TableHead>
+              <TableHead>Reading Time</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {blogs.map((blog) => (
+              <TableRow key={blog.id}>
+                <TableCell>{blog.id}</TableCell>
+                <TableCell>{blog.title}</TableCell>
+                <TableCell>{blog.url}</TableCell>
+                <TableCell>{blog.excerpt}</TableCell>
+                <TableCell>{blog.date}</TableCell>
+                <TableCell>{blog.author}</TableCell>
+                <TableCell>{blog.tag || 'N/A'}</TableCell>
+                <TableCell>{blog.content.substring(0, 50)}...</TableCell>
+                <TableCell>{blog.readingtime} min</TableCell>
+                <TableCell>{blog.status}</TableCell>
+                <TableCell>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => handleApprove(blog.id)}>
+                        Approve
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
new file mode 100644
index 000000000..7f3502f8b
--- /dev/null
+++ b/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

From 6941cf97e70282f1062a7c67f0a1567d1955c65d Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sat, 19 Oct 2024 19:59:36 +0530
Subject: [PATCH 10/11] added approve blog path

---
 app/api/approve-blog/route.ts       | 93 ++++++++++++++--------------
 app/blog/secret-admin-page/page.tsx | 94 +++++++++++++++--------------
 components/ui/table.tsx             | 44 +++++++-------
 3 files changed, 118 insertions(+), 113 deletions(-)

diff --git a/app/api/approve-blog/route.ts b/app/api/approve-blog/route.ts
index 0ce2e30b0..8bb865733 100644
--- a/app/api/approve-blog/route.ts
+++ b/app/api/approve-blog/route.ts
@@ -3,63 +3,62 @@ import { createClient } from "@/utils/supabase/server";
 import { withAuth } from "@/utils/withAuth";
 // Todo only admin can approve blog
 async function updateBlogStatus(request: NextRequest) {
-    const supabase = createClient();
+  const supabase = createClient();
 
-    try {
-        const { id } = await request.json();
+  try {
+    const { id } = await request.json();
 
-        const { data, error } = await supabase
-            .from("blog")
-            .update({ status: "approved" })
-            .eq("id", id);
+    const { data, error } = await supabase
+      .from("blog")
+      .update({ status: "approved" })
+      .eq("id", id);
 
-        if (error) {
-            console.error("Error updating blog status:", error);
-            return NextResponse.json(
-                { error: "Failed to update blog status" },
-                { status: 500 },
-            );
-        }
-
-        return NextResponse.json({
-            message: "Blog status updated successfully",
-            data,
-        });
-    } catch (error) {
-        console.error("Error parsing request body:", error);
-        return NextResponse.json(
-            { error: "Invalid request body" },
-            { status: 400 },
-        );
+    if (error) {
+      console.error("Error updating blog status:", error);
+      return NextResponse.json(
+        { error: "Failed to update blog status" },
+        { status: 500 },
+      );
     }
+
+    return NextResponse.json({
+      message: "Blog status updated successfully",
+      data,
+    });
+  } catch (error) {
+    console.error("Error parsing request body:", error);
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 },
+    );
+  }
 }
 
 async function getBlog(request: NextRequest) {
-    const supabase = createClient();
-
-    try {
-        const { data, error } = await supabase
-            .from('blog')
-            .select('*')
-            .eq('status', 'pending');
+  const supabase = createClient();
 
-        if (error) {
-            return NextResponse.json(
-            { error: "failed to fetch blogs"},
-            { status: 500 },
-            );
-        }
+  try {
+    const { data, error } = await supabase
+      .from("blog")
+      .select("*")
+      .eq("status", "pending");
 
-        return NextResponse.json(data,{status:200});
-
-    } catch (error) {
-        console.error("Error parsing request body:", error);
-        return NextResponse.json(
-            { error: "Invalid request body" },
-            { status: 400 },
-        );
+    if (error) {
+      return NextResponse.json(
+        { error: "failed to fetch blogs" },
+        { status: 500 },
+      );
     }
+
+    return NextResponse.json(data, { status: 200 });
+  } catch (error) {
+    console.error("Error parsing request body:", error);
+    return NextResponse.json(
+      { error: "Invalid request body" },
+      { status: 400 },
+    );
+  }
 }
 
 export const POST = updateBlogStatus;
-export const GET = getBlog
+export const GET = getBlog;
diff --git a/app/blog/secret-admin-page/page.tsx b/app/blog/secret-admin-page/page.tsx
index 9b4ee39de..8f4265e37 100644
--- a/app/blog/secret-admin-page/page.tsx
+++ b/app/blog/secret-admin-page/page.tsx
@@ -1,89 +1,95 @@
-'use client'
+"use client";
 
-import React, { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { MoreHorizontal, Loader2 } from 'lucide-react'
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { MoreHorizontal, Loader2 } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+} from "@/components/ui/dropdown-menu";
 
 interface Blog {
-  id: number
-  title: string
-  url: string
-  excerpt: string
-  date: string
-  author: string
-  tag: string | null
-  content: string
-  readingtime: number
-  status: string
+  id: number;
+  title: string;
+  url: string;
+  excerpt: string;
+  date: string;
+  author: string;
+  tag: string | null;
+  content: string;
+  readingtime: number;
+  status: string;
 }
 
 export default function BlogApproval() {
-  const [blogs, setBlogs] = useState<Blog[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const [blogs, setBlogs] = useState<Blog[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    fetchBlogs()
-  }, [])
+    fetchBlogs();
+  }, []);
 
   const fetchBlogs = async () => {
     try {
-      const response = await fetch('/api/approve-blog')
+      const response = await fetch("/api/approve-blog");
       if (!response.ok) {
-        throw new Error('Failed to fetch blogs')
+        throw new Error("Failed to fetch blogs");
       }
-      const data = await response.json()
-      setBlogs(data)
+      const data = await response.json();
+      setBlogs(data);
     } catch (err) {
-      setError('Failed to load blogs. Please try again.')
+      setError("Failed to load blogs. Please try again.");
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   const handleApprove = async (blogId: number) => {
     try {
-      const response = await fetch('/api/approve-blog', {
-        method: 'POST',
+      const response = await fetch("/api/approve-blog", {
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({ id: blogId }),
-      })
+      });
 
       if (!response.ok) {
-        throw new Error('Failed to approve blog')
+        throw new Error("Failed to approve blog");
       }
 
       // Update the local state to reflect the change
-
     } catch (err) {
-      setError('Failed to approve blog.')
+      setError("Failed to approve blog.");
     }
-  }
+  };
 
   if (isLoading) {
     return (
-      <div className="flex justify-center items-center h-screen">
+      <div className="flex h-screen items-center justify-center">
         <Loader2 className="h-8 w-8 animate-spin" />
       </div>
-    )
+    );
   }
 
   if (error) {
-    return <div className="text-red-500">{error}</div>
+    return <div className="text-red-500">{error}</div>;
   }
 
   return (
-    <Card className="w-full mt-20">
+    <Card className="mt-20 w-full">
       <CardHeader>
         <CardTitle>Approve Blogs</CardTitle>
       </CardHeader>
@@ -113,7 +119,7 @@ export default function BlogApproval() {
                 <TableCell>{blog.excerpt}</TableCell>
                 <TableCell>{blog.date}</TableCell>
                 <TableCell>{blog.author}</TableCell>
-                <TableCell>{blog.tag || 'N/A'}</TableCell>
+                <TableCell>{blog.tag || "N/A"}</TableCell>
                 <TableCell>{blog.content.substring(0, 50)}...</TableCell>
                 <TableCell>{blog.readingtime} min</TableCell>
                 <TableCell>{blog.status}</TableCell>
@@ -138,5 +144,5 @@ export default function BlogApproval() {
         </Table>
       </CardContent>
     </Card>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 7f3502f8b..73cf6b4ad 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -13,16 +13,16 @@ const Table = React.forwardRef<
       {...props}
     />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
     className={cn("[&_tr:last-child]:border-0", className)}
     {...props}
   />
-))
-TableBody.displayName = "TableBody"
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -44,12 +44,12 @@ const TableFooter = React.forwardRef<
     ref={ref}
     className={cn(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -59,12 +59,12 @@ const TableRow = React.forwardRef<
     ref={ref}
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -74,12 +74,12 @@ const TableHead = React.forwardRef<
     ref={ref}
     className={cn(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -90,8 +90,8 @@ const TableCell = React.forwardRef<
     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -102,8 +102,8 @@ const TableCaption = React.forwardRef<
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = "TableCaption";
 
 export {
   Table,
@@ -114,4 +114,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};

From f0e9e5e4fdf9e98e9456673675adc7e0683a428d Mon Sep 17 00:00:00 2001
From: itzamanjain <aman.044063@tmu.ac.in>
Date: Sat, 19 Oct 2024 20:19:21 +0530
Subject: [PATCH 11/11] added approve or reject blog

---
 app/api/approve-blog/route.ts       |  4 ++--
 app/blog/secret-admin-page/page.tsx | 29 +++++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/app/api/approve-blog/route.ts b/app/api/approve-blog/route.ts
index 8bb865733..87ae59784 100644
--- a/app/api/approve-blog/route.ts
+++ b/app/api/approve-blog/route.ts
@@ -6,11 +6,11 @@ async function updateBlogStatus(request: NextRequest) {
   const supabase = createClient();
 
   try {
-    const { id } = await request.json();
+    const { id, status } = await request.json();
 
     const { data, error } = await supabase
       .from("blog")
-      .update({ status: "approved" })
+      .update({ status: status })
       .eq("id", id);
 
     if (error) {
diff --git a/app/blog/secret-admin-page/page.tsx b/app/blog/secret-admin-page/page.tsx
index 8f4265e37..52b2af88b 100644
--- a/app/blog/secret-admin-page/page.tsx
+++ b/app/blog/secret-admin-page/page.tsx
@@ -63,7 +63,7 @@ export default function BlogApproval() {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ id: blogId }),
+        body: JSON.stringify({ id: blogId, status: "approved" }),
       });
 
       if (!response.ok) {
@@ -76,6 +76,26 @@ export default function BlogApproval() {
     }
   };
 
+  const handleReject = async (blogId: number) => {
+    try {
+      const response = await fetch("/api/approve-blog", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ id: blogId, status: "rejected" }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to reject blog");
+      }
+
+      // Update the local state to reflect the change
+    } catch (err) {
+      setError("Failed to reject blog.");
+    }
+  };
+
   if (isLoading) {
     return (
       <div className="flex h-screen items-center justify-center">
@@ -85,7 +105,9 @@ export default function BlogApproval() {
   }
 
   if (error) {
-    return <div className="text-red-500">{error}</div>;
+    return (
+      <div className="flex h-screen items-center justify-center">{error}</div>
+    );
   }
 
   return (
@@ -135,6 +157,9 @@ export default function BlogApproval() {
                       <DropdownMenuItem onClick={() => handleApprove(blog.id)}>
                         Approve
                       </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleReject(blog.id)}>
+                        Reject
+                      </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </TableCell>