Mini Project — Link Stash (Part 2): Add/Delete Feature နှင့် Filtering

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Part 1 က static list ကို ဒီအဆင့်မှာ data-driven app အဖြစ်ပြောင်းပါမယ်။ Bookmark data တွေကို module-level array ကို simulate လုပ်တဲ့ lib/db.ts data layer တစ်ခုနဲ့ စီမံပြီး၊ Server Action နဲ့ form submit လုပ်တဲ့အခါ server မှာတိုက်ရိုက် insert/delete လုပ်ပါမယ်။ Client-side JavaScript disable ဖြစ်နေရင်တောင် form က အလုပ်လုပ်ဆဲဖြစ်အောင် progressive enhancement ကို လေ့လာရမှာပါ။ ဒါအပြင် home page ကို ?tag=docs လို search params နဲ့ filter လုပ်နိုင်အောင် ထည့်ပြီး၊ data ပြောင်းတိုင်း UI က အလိုအလျောက် update ဖြစ်အောင် revalidatePath ကိုသုံးပါမယ်။

လက်တွေ့ ဆောက်ကြည့်မယ်

lib/db.ts ဖန်တီးပြီး bookmarks array ကို module scope မှာထားကာ getBookmarks(), addBookmark(), deleteBookmark() function တွေ export လုပ်ပါ (real project မှာ SQLite/Prisma ကိုသုံးနိုင်ပေမယ့် ဒီ project အတွက် in-memory array နဲ့ ရိုးရှင်းစွာလုပ်ပါမယ်)။ app/actions.ts ထဲမှာ "use server" directive နဲ့ createBookmark, removeBookmark Server Actions ရေးပြီး revalidatePath("/") ခေါ်ပါ။ app/bookmarks/new/page.tsx မှာ form တစ်ခုဖန်တီးပြီး action={createBookmark} ချိတ်ပါ။ app/page.tsx ကို searchParams prop လက်ခံအောင်ပြင်ပြီး tag filter query နဲ့ list ကို filter လုပ်ပါ။ Bookmark card တစ်ခုချင်းစီမှာ delete button နဲ့ removeBookmark action ကိုချိတ်ပါ။

• Add Bookmark form က Server Action ဖြင့် data အသစ်ကို database layer ထဲ insert လုပ်ပေးနိုင်ပြီ
• Delete button နှိပ်ရင် bookmark ပျောက်သွားပြီး UI က revalidatePath ကြောင့် auto refresh ဖြစ်ပြီ
• URL မှာ ?tag=docs ထည့်လိုက်ရင် home page က tag ကိုက်ညီတဲ့ bookmark တွေချည်းသာ ပြနေပြီ

Code နမူနာ

// lib/db.ts
type Bookmark = { id: string; title: string; url: string; tags: string[] };

let bookmarks: Bookmark[] = [
  { id: "1", title: "Next.js Docs", url: "https://nextjs.org", tags: ["docs"] },
];

export function getBookmarks(tag?: string) {
  if (!tag) return bookmarks;
  return bookmarks.filter((b) => b.tags.includes(tag));
}

export function addBookmark(data: Omit<Bookmark, "id">) {
  bookmarks.push({ id: crypto.randomUUID(), ...data });
}

export function deleteBookmark(id: string) {
  bookmarks = bookmarks.filter((b) => b.id !== id);
}

// app/actions.ts
"use server";
import { revalidatePath } from "next/cache";
import { addBookmark, deleteBookmark } from "@/lib/db";

export async function createBookmark(formData: FormData) {
  const title = String(formData.get("title") ?? "").trim();
  const url = String(formData.get("url") ?? "").trim();
  if (!title || !url) return;
  addBookmark({ title, url, tags: [] });
  revalidatePath("/");
}

export async function removeBookmark(id: string) {
  deleteBookmark(id);
  revalidatePath("/");
}

Form ကနေ bookmark အသစ်ထည့်လိုက်ရင် home page ထဲမှာ card အသစ်ပေါ်လာပြီး၊ tag query param အလိုက် list ကလည်း filter ဖြစ်နေပါလိမ့်မယ်။