Add article tagging functionality: Introduce ArticleTag model and repository, update Article interface to include optional tags, and enhance article update logic to manage tags. Refactor ArticleEditor to support tag selection during article creation and updates.

Author: kingRayhan

src/app/api/play/route.ts

@@ -2,10 +2,9 @@ import * as articleActions from "@/backend/services/article.actions";
 import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
-  return NextResponse.json({
-    handle: await articleActions.getUniqueArticleHandle(
-      "untitled",
-      "fc6cfc91-f017-4923-9706-8813ae8df621"
-    ),
-  });
+  // return NextResponse.json({
+  //   handle: await articleActions.updateArticle({
+  //     article_id: "5f0a1c0c-a8c8-4f5b-b8d8-c4d4d4d4d4d4",
+  //   }),
+  // });
 }

src/backend/models/domain-models.ts

@@ -55,6 +55,7 @@ export interface Article {
   id: string;
   title: string;
   handle: string;
+  tags?: Tag[];
   excerpt?: string | null;
   body?: string | null;
   cover_image?: IServerFile | null;
@@ -100,3 +101,11 @@ export interface Tag {
   created_at: Date;
   updated_at: Date;
 }
+
+export interface ArticleTag {
+  id: string;
+  article_id: string;
+  tag_id: string;
+  created_at: Date;
+  updated_at: Date;
+}

src/backend/persistence-repositories.ts

@@ -1,5 +1,6 @@
 import {
   Article,
+  ArticleTag,
   Series,
   SeriesItem,
   Tag,
@@ -23,6 +24,10 @@ export const tagRepository = new PersistentRepository<Tag>(
   DatabaseTableName.tags,
   pgClient
 );
+export const articleTagRepository = new PersistentRepository<ArticleTag>(
+  DatabaseTableName.article_tag,
+  pgClient
+);
 export const userSocialRepository = new PersistentRepository<UserSocial>(
   DatabaseTableName.user_socials,
   pgClient
@@ -47,6 +52,7 @@ export const persistenceRepository = {
   userSocial: userSocialRepository,
   userSession: userSessionRepository,
   article: articleRepository,
+  articleTag: articleTagRepository,
   tags: tagRepository,
   series: seriesRepository,
   seriesItems: seriesItemsRepository,

src/backend/persistence/persistence-contracts.ts

@@ -115,4 +115,5 @@ export enum DatabaseTableName {
   series = "series",
   series_items = "series_items",
   tags = "tags",
+  article_tag = "article_tag",
 }

src/backend/services/article.actions.ts

@@ -3,7 +3,7 @@
 import { slugify } from "@/lib/slug-helper.util";
 import { removeMarkdownSyntax } from "@/lib/utils";
 import { z } from "zod";
-import { Article, User } from "../models/domain-models";
+import { Article, Tag, User } from "../models/domain-models";
 import { pgClient } from "../persistence/database-drivers/pg.client";
 import {
   and,
@@ -12,6 +12,7 @@ import {
   joinTable,
   like,
   neq,
+  notInArray,
   or,
 } from "../persistence/persistence-where-operator";
 import { PersistentRepository } from "../persistence/persistence.repository";
@@ -22,6 +23,7 @@ import {
 import { ArticleRepositoryInput } from "./inputs/article.input";
 import { getSessionUserId } from "./session.actions";
 import { DatabaseTableName } from "../persistence/persistence-contracts";
+import { persistenceRepository } from "../persistence-repositories";
 
 const articleRepository = new PersistentRepository<Article>(
   DatabaseTableName.articles,
@@ -227,6 +229,23 @@ export async function updateMyArticle(
         metadata: input.metadata,
       },
     });
+
+    if (input.tag_ids) {
+      await persistenceRepository.articleTag.deleteRows({
+        where: and(
+          eq("article_id", article.id),
+          notInArray("tag_id", input.tag_ids)
+        ),
+      });
+
+      await input.tag_ids.forEach((tag_id) => {
+        persistenceRepository.articleTag.createOne({
+          article_id: article.id,
+          tag_id: tag_id,
+        });
+      });
+    }
+
     return article;
   } catch (error) {
     handleRepositoryException(error);
@@ -417,6 +436,12 @@ export async function articleDetailByHandle(article_handle: string) {
           foreignField: "id",
           columns: ["id", "name", "username", "profile_photo"],
         }),
+        // joinTable<Article, Tag>({
+        //   as: "tags",
+        //   joinTo: "tags",
+        //   localField: "author_id",
+        //   foreignField: "id",
+        // }),
       ],
       limit: 1,
     });

src/backend/services/inputs/article.input.ts

@@ -66,6 +66,8 @@ export const ArticleRepositoryInput = {
     // Optional boolean flag for publish status
     is_published: z.boolean().optional(),
 
+    tag_ids: z.array(z.string()).optional().nullable(),
+
     // Optional metadata object
     metadata: z
       .object({

src/components/Editor/ArticleEditorDrawer.tsx

@@ -3,7 +3,7 @@
 import { Article } from "@/backend/models/domain-models";
 import * as articleActions from "@/backend/services/article.actions";
 import { ArticleRepositoryInput } from "@/backend/services/inputs/article.input";
-import MultipleSelector, { Option } from "@/components/ui/multi-select";
+import MultipleSelector from "@/components/ui/multi-select";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { useTranslation } from "@/i18n/use-translation";
 import { useSession } from "@/store/session.atom";
@@ -25,7 +25,6 @@ import {
   FormMessage,
 } from "../ui/form";
 import { Input } from "../ui/input";
-import { InputTags } from "../ui/input-tags";
 import { Sheet, SheetContent } from "../ui/sheet";
 import { Textarea } from "../ui/textarea";
 
@@ -70,6 +69,7 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
       title: article?.title ?? "",
       handle: article?.handle ?? "",
       excerpt: article?.excerpt ?? "",
+      tag_ids: article?.tags?.map((tag) => tag.id) ?? [],
       metadata: {
         seo: {
           title: article?.metadata?.seo?.title ?? "",
@@ -84,12 +84,11 @@ const ArticleEditorDrawer: React.FC<Props> = ({ article, open, onClose }) => {
   const handleOnSubmit: SubmitHandler<
     z.infer<typeof ArticleRepositoryInput.updateMyArticleInput>
   > = (payload) => {
-    console.log(payload);
-
     updateMyArticleMutation.mutate({
       article_id: article?.id ?? "",
       excerpt: payload.excerpt,
       handle: payload.handle,
+      tag_ids: payload.tag_ids,
       metadata: {
         seo: {
           title: payload.metadata?.seo?.title ?? "",