refactor(blogs, posts): rename blog references to post in queries, actions, and components

Author: tyronejosee

docs/etc/queries.md

@@ -4,15 +4,15 @@ Some examples of queries you can run in Supabase.
 
 ```sql
 create type resource_status as enum ('pending', 'approved', 'rejected');
-create type blog_status as enum ('draft', 'published', 'archived');
+create type post_status as enum ('draft', 'published', 'archived');
 
 ---
 
 alter table resources
 add column status resource_status not null default 'pending';
 
-alter table blogs
-add column status blog_status not null default 'draft';
+alter table posts
+add column status post_status not null default 'draft';
 ```
 
 ```sql

docs/resume.md

@@ -21,7 +21,7 @@ Software developers of all levels looking to improve their stack, learn new tech
 
 ### Resource Navigation
 
-- Feed-style views: explore, trending, blogs, etc.
+- Feed-style views: explore, trending, posts, etc.
 - Category-based feed views
 - Detail page for each resource (`/resources/[slug]`)
 - Redirection to the original URL of the resource

src/actions/blogs.ts

@@ -0,0 +1,62 @@
+"use server";
+
+import type { Post, PostForm } from "@/types";
+
+import { createClient } from "@/lib/supabase/server";
+
+export const getPosts = async (): Promise<Post[]> => {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("posts")
+    .select(`*, author:profiles (username, full_name, avatar_url)`);
+
+  if (error) throw new Error(error.message);
+  return data;
+};
+
+export const getPostsByAdmin = async (): Promise<Post[]> => {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("posts")
+    .select(`*, author:profiles (id, username, full_name, avatar_url)`);
+
+  if (error) throw new Error(error.message);
+  return data;
+};
+
+export const getPostBySlug = async (slug: string): Promise<Post> => {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("posts")
+    .select(`*, author:profiles (username, full_name, avatar_url)`)
+    .eq("slug", slug)
+    .single();
+
+  if (error) throw new Error(error.message);
+  return data;
+};
+
+export const createPostByAdmin = async (input: PostForm) => {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("posts")
+    .insert(input)
+    .select()
+    .single();
+
+  if (error) throw new Error(`Error creating post: ${error.message}`);
+  return data;
+};
+
+export const updatePostByAdmin = async (id: string, input: PostForm) => {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("posts")
+    .update(input)
+    .eq("id", id)
+    .select()
+    .single();
+
+  if (error) throw new Error(`Error updating post: ${error.message}`);
+  return data;
+};

src/actions/posts.ts

@@ -0,0 +1,12 @@
+"use server";
+
+import type { Profile } from "@/types";
+
+import { createClient } from "@/lib/supabase/server";
+
+export const getProfilesByAdmin = async (): Promise<Profile[]> => {
+  const supabase = await createClient();
+  const { data, error } = await supabase.from("profiles").select("*");
+  if (error) throw new Error(error.message);
+  return data;
+};

src/actions/profiles.ts

@@ -0,0 +1,152 @@
+"use client";
+
+import type { Post, PostForm, Profile } from "@/types";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useDisclosure, addToast } from "@heroui/react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { HeadingDashboard } from "@/components/ui";
+import { PostDrawer, PostTable } from "@/components/posts";
+import { createPostByAdmin, updatePostByAdmin } from "@/actions/posts";
+import { uploadImage } from "@/actions/storage";
+import { postsSchema } from "@/lib/zod";
+
+type Props = {
+  posts: Post[];
+  authors: Profile[];
+};
+
+export default function PostsPageClient({ posts, authors }: Props) {
+  const router = useRouter();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [editingPost, setEditingPost] = useState<Post | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<PostForm>({
+    resolver: zodResolver(postsSchema),
+    defaultValues: {
+      name: "",
+      content: "",
+      cover_url: undefined,
+      excerpt: "",
+      tags: [""],
+      author: "",
+      status: "draft",
+    },
+  });
+
+  const { fields, replace, append, remove } = useFieldArray({
+    control,
+    // @ts-expect-error - name is a valid key for FieldArrayWithId
+    name: "tags" as const,
+  });
+
+  const openEditModal = (post: Post) => {
+    setEditingPost(post);
+    reset({
+      name: post.name,
+      content: post.content,
+      cover_url: post.cover_url,
+      excerpt: post.excerpt,
+      tags: post.tags,
+      author: post.author.id,
+      status: post.status,
+    });
+    replace(post.tags);
+    onOpen();
+  };
+
+  const openAddModal = () => {
+    setEditingPost(null);
+    reset({
+      name: "",
+      content: "",
+      cover_url: undefined,
+      excerpt: "",
+      tags: [""],
+      author: "",
+      status: "draft",
+    });
+    onOpen();
+  };
+
+  const onSubmit = async (data: PostForm) => {
+    setLoading(true);
+    try {
+      let coverURL = editingPost?.cover_url || "";
+
+      if (data.cover_url_file instanceof File) {
+        coverURL = await uploadImage({
+          file: data.cover_url_file,
+          name: data.name,
+          bucket: "code-atlas",
+          folder: "posts",
+        });
+      } else if (data.cover_url) {
+        coverURL = data.cover_url;
+      }
+
+      const payload = {
+        name: data.name,
+        content: data.content,
+        cover_url: coverURL,
+        excerpt: data.excerpt,
+        tags: data.tags.filter((tag) => tag.trim() !== ""),
+        author: data.author,
+        status: data.status,
+      };
+
+      if (editingPost) await updatePostByAdmin(editingPost.id, payload);
+      else await createPostByAdmin(payload);
+
+      router.refresh();
+      setEditingPost(null);
+      onClose();
+    } catch (error) {
+      console.error("Submit error:", error);
+      addToast({ title: "Error", description: "Error submitting form." });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Heading */}
+      <HeadingDashboard
+        title="Posts"
+        count={posts.length}
+        openAddModal={openAddModal}
+      />
+
+      {/* Table */}
+      <PostTable posts={posts} openEditModal={openEditModal} />
+
+      {/* Drawer */}
+      <PostDrawer
+        editingPost={editingPost}
+        control={control}
+        authors={authors}
+        fields={fields}
+        errors={errors}
+        onSubmit={onSubmit}
+        handleSubmit={handleSubmit}
+        register={register}
+        append={append}
+        remove={remove}
+        onClose={onClose}
+        isOpen={isOpen}
+        loading={loading}
+        isSubmitting={isSubmitting}
+      />
+    </div>
+  );
+}

src/app/(private)/dashboard/posts/client.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+
+import { PROJECT_NAME } from "@/config/constants";
+import { getPostsByAdmin } from "@/actions/posts";
+import { getProfilesByAdmin } from "@/actions/profiles";
+import PostsPageClient from "./client";
+
+export const metadata: Metadata = {
+  title: `Posts - ${PROJECT_NAME}`,
+  description: "Manage all posts.",
+};
+
+export default async function PostsPage() {
+  const [posts, profiles] = await Promise.all([
+    getPostsByAdmin(),
+    getProfilesByAdmin(),
+  ]);
+
+  return (
+    <main className="max-w-screen-xl mx-auto p-4">
+      <PostsPageClient posts={posts} authors={profiles} />
+    </main>
+  );
+}