add post tags, display in post card and post view, add/edit tags in create/edit post

Author: JM-Flores

apps/codebility/app/home/feeds/_components/CreatePostForm.tsx

@@ -8,6 +8,7 @@ import toast from "react-hot-toast";
 
 import { addPost } from "../_services/action";
 import MarkdownEditor from "./MarkdownEditor";
+import TagSelector from "./TagSelector";
 import ThumbnailUpload from "./ThumbnailUpload";
 
 const CreatePostForm = ({
@@ -20,6 +21,8 @@ const CreatePostForm = ({
   const [image, setImage] = useState<File | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [uploadedImageIds, setUploadedImageIds] = useState<string[]>([]);
+  const [selectedTagIds, setSelectedTagIds] = useState<number[]>([]);
+
   const fetchPosts = useFeedsStore((state) => state.fetchPosts);
   const { user } = useUserStore();
 
@@ -45,12 +48,13 @@ const CreatePostForm = ({
         });
       }
 
-      const newPost = await addPost({
+      await addPost({
         title,
         content,
         author_id: user?.id,
         image_url,
         content_image_ids: uploadedImageIds,
+        tag_ids: selectedTagIds,
       });
 
       // Refresh Posts
@@ -102,6 +106,8 @@ const CreatePostForm = ({
         onImagesUploaded={setUploadedImageIds}
       />
 
+      <TagSelector onChange={(tags) => setSelectedTagIds(tags)} />
+
       <input type="hidden" name="content" value={""} />
 
       <Button type="submit" className="w-full" disabled={isSubmitting}>

apps/codebility/app/home/feeds/_components/EditPostForm.tsx

@@ -11,6 +11,7 @@ import { Textarea } from "@codevs/ui/textarea";
 import { addPost, editPost } from "../_services/action";
 import { PostType } from "../_services/query";
 import MarkdownEditor from "./MarkdownEditor";
+import TagSelector from "./TagSelector";
 import ThumbnailUpload from "./ThumbnailUpload";
 
 const EditPostForm = ({
@@ -30,6 +31,10 @@ const EditPostForm = ({
   const [title, setTitle] = useState(post.title);
   const [content, setContent] = useState(post.content);
   const [uploadedImageIds, setUploadedImageIds] = useState<string[]>([]);
+  const [selectedTagIds, setSelectedTagIds] = useState<number[]>(
+    post.tags.map((t) => Number(t.tag_id)),
+  );
+
   const fetchPosts = useFeedsStore((state) => state.fetchPosts);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -54,12 +59,13 @@ const EditPostForm = ({
         });
       }
 
-      const newPost = await editPost({
+      await editPost({
         id: post.id,
         title,
         content,
         image_url: image_url!,
         content_image_ids: uploadedImageIds,
+        tag_ids: selectedTagIds,
       });
 
       // Notify
@@ -114,6 +120,11 @@ const EditPostForm = ({
         onImagesUploaded={setUploadedImageIds}
       />
 
+      <TagSelector
+        selectedTags={selectedTagIds}
+        onChange={(tags) => setSelectedTagIds(tags)}
+      />
+
       <input type="hidden" name="content" value={""} />
 
       <Button type="submit" className="w-full" disabled={isSubmitting}>

apps/codebility/app/home/feeds/_components/PostCard.tsx

@@ -13,6 +13,7 @@ import { deletePost } from "../_services/action";
 import { PostType } from "../_services/query";
 import { DeleteDialog } from "./DeleteDialog";
 import PostCommentCount from "./PostCommentCount";
+import PostTags from "./PostTags";
 import PostUpvote from "./PostUpvote";
 
 interface PostProps {
@@ -70,7 +71,7 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
   return (
     <div>
       <Box
-        className="group relative flex h-[400px] cursor-pointer flex-col justify-between rounded-xl p-3"
+        className="group relative flex h-[440px] cursor-pointer flex-col justify-between rounded-xl p-3"
         onClick={openModal}
       >
         {/* Delete Button in top-right */}
@@ -105,25 +106,28 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
           </div>
 
           <div className="h-[60px] flex-grow">
-            <p className="mt-2 line-clamp-2 text-xl font-semibold text-gray-700 dark:text-gray-300">
+            <p className="mt-2 line-clamp-2 text-xl font-semibold leading-snug text-gray-700 dark:text-gray-300">
               {post.title}
             </p>
           </div>
+          <div className="mb-2">
+            <PostTags post={post} minimal={true} />
+          </div>
 
           <p className="text-sm text-gray-500 dark:text-gray-400">
             {format(new Date(post.created_at), "MMM d, yyyy")}
           </p>
         </div>
 
-        <div className="h-60 w-full overflow-hidden rounded-sm">
+        <div className="my-2 h-60 w-full overflow-hidden rounded-sm">
           <img
             src={post.image_url || "/assets/images/bg-certificate.png"}
             alt="Post image"
             className="h-full w-full object-cover"
           />
         </div>
 
-        <div className="mx-4 mt-4 flex items-center space-x-4 text-gray-600 dark:text-gray-400">
+        <div className="mx-4 flex items-center space-x-4 text-gray-600 dark:text-gray-400">
           <PostUpvote post={post} />
 
           <PostCommentCount post={post} />

apps/codebility/app/home/feeds/_components/PostTags.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import type { PostType } from "../_services/query";
+
+interface PostTagsProps {
+  post: PostType;
+  minimal?: boolean;
+}
+
+export default function PostTags({ post, minimal = false }: PostTagsProps) {
+  const tags = post.tags ?? [];
+
+  if (!tags.length && !minimal) return null;
+
+  // Determine which tags to display
+  const displayTags = minimal ? tags.slice(0, 3) : tags;
+  const hiddenCount = minimal ? tags.length - displayTags.length : 0;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {displayTags.map((tag) => (
+        <span
+          key={tag.tag_id}
+          className="
+            flex h-6
+            items-center gap-2 rounded-md border
+            border-gray-300 bg-gray-50 px-2 text-xs text-gray-500
+            shadow-sm  dark:border-gray-600
+            dark:bg-gray-700 dark:text-gray-400
+          "
+        >
+          {tag.name}
+        </span>
+      ))}
+
+      {hiddenCount > 0 ? (
+        <span
+          className="
+            flex h-6
+            items-center gap-2 rounded-md border
+            border-gray-300 bg-gray-50 px-2 text-xs text-gray-500
+            shadow-sm  dark:border-gray-600
+            dark:bg-gray-700 dark:text-gray-400
+          "
+        >
+          +{hiddenCount} more
+        </span>
+      ) : minimal && !tags.length ? (
+        <span
+          className="
+            flex h-6
+            items-center gap-2 rounded-md border
+            border-gray-300 bg-gray-50 px-2 text-xs text-gray-500
+            opacity-0  shadow-sm
+            dark:border-gray-600 dark:bg-gray-700
+            dark:text-gray-400
+          "
+        >
+          placeholder
+        </span>
+      ) : null}
+    </div>
+  );
+}

apps/codebility/app/home/feeds/_components/PostView.tsx

@@ -17,6 +17,7 @@ import type { PostType } from "../_services/query";
 import PostUpvote from "../_components/PostUpvote";
 import { getUserRole } from "../_services/action";
 import PostCommentCount from "./PostCommentCount";
+import PostTags from "./PostTags";
 import PostViewCommentList from "./PostViewCommentList";
 import PostViewCreateComment from "./PostViewCreateComment";
 
@@ -105,6 +106,8 @@ export default function PostView({ postId }: PostViewProps) {
         <PostCommentCount post={post} />
       </div>
 
+      <PostTags post={post} />
+
       <div className="max-h-[90vh] overflow-y-auto">
         <div className="prose prose-sm dark:prose-invert max-w-none text-sm">
           <ReactMarkdown remarkPlugins={[remarkGfm]}>

apps/codebility/app/home/feeds/_components/TagSelector.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+
+import { Checkbox } from "@codevs/ui/checkbox";
+
+import { getPostTagsLookup } from "../_services/query";
+
+interface TagSelectorProps {
+  selectedTags?: number[];
+  onChange?: (selectedTagIds: number[]) => void;
+}
+
+interface Tag {
+  id: number;
+  name: string;
+  selected: boolean;
+}
+
+const TagSelector = ({ selectedTags = [], onChange }: TagSelectorProps) => {
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      try {
+        const data = await getPostTagsLookup();
+        if (!data) return;
+
+        const mappedTags: Tag[] = data.map((t) => ({
+          id: t.id,
+          name: t.name,
+          selected: selectedTags.includes(t.id),
+        }));
+
+        setTags(mappedTags);
+      } catch (error) {
+        console.error("Failed to fetch tags:", error);
+      }
+    };
+
+    fetchTags();
+  }, []);
+
+  const toggleTag = (id: number) => {
+    const updatedTags = tags.map((t) =>
+      t.id === id ? { ...t, selected: !t.selected } : t,
+    );
+    setTags(updatedTags);
+
+    if (onChange) {
+      const selectedIds = updatedTags
+        .filter((t) => t.selected)
+        .map((t) => t.id);
+      onChange(selectedIds);
+    }
+  };
+
+  return (
+    <div className="mt-4">
+      <Button
+        type="button"
+        variant="outline"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        {isOpen ? "Hide Tags" : "Select Tags"}
+      </Button>
+
+      {isOpen && (
+        <div className="mt-2 flex flex-wrap gap-2">
+          {tags.map((tag) => (
+            <label key={tag.id} className="flex items-center gap-1">
+              <Checkbox
+                checked={tag.selected}
+                onCheckedChange={() => toggleTag(tag.id)}
+              />
+              <span className="text-sm">{tag.name}</span>
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TagSelector;