Project: Task Tracker Polish

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

နောက်ဆုံး Part မှာ app ကို "toy demo" ကနေ "တကယ်သုံးလို့ရတဲ့ app" ဖြစ်လာအောင် polish လုပ်ပါမယ်။ Browser ကို refresh လုပ်လိုက်ရင်တောင် task data တွေ မပျောက်အောင် useEffect နဲ့ localStorage ထဲ save/load လုပ်ဖို့ လိုပါတယ်။ ဒီ logic ကို component ထဲမှာ တိုက်ရိုက်ရေးမယ့်အစား custom hook (useLocalStorage) တစ်ခုအဖြစ် ထုတ်ခွဲထားရင် code ပိုသန့်ပြီး reusable ဖြစ်ပါတယ်။ ဒီအပြင် "All / Active / Done" filter buttons ထည့်ပြီး၊ task list ကြီးလာရင် unnecessary re-computation မဖြစ်အောင် useMemo နဲ့ filtered list ကို optimize လုပ်ပါမယ်။ ဒီအဆင့်ကို ပြီးရင် Task Tracker project တစ်ခုလုံး ပြီးစီးပါပြီ။

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

src/hooks/useLocalStorage.js ဆိုပြီး custom hook ဆောက်ပါ - useState + useEffect ပေါင်းစပ်ပြီး key/initialValue လက်ခံပြီး value ပြောင်းတိုင်း localStorage.setItem လုပ်ပေးရမယ်။ TaskTracker ထဲက useState(tasks) ကို useLocalStorage("tasks", []) နဲ့ အစားထိုးပါ။ filter state (all/active/done) တစ်ခု ထပ်ထည့်ပြီး filter button သုံးခု render လုပ်ပါ။ useMemo နဲ့ filteredTasks ကို tasks နဲ့ filter ပြောင်းမှသာ ပြန် compute အောင် wrap ထားပါ။ နောက်ဆုံးအနေနဲ့ CSS class name တွေထည့်ပြီး app ကို visual အရ သပ်ရပ်အောင် style ပေးပါ - flex layout, padding, border-radius စသည်ဖြင့်။

• useLocalStorage custom hook ဆောက်ပြီး task data ကို persist လုပ်နိုင်ပြီ
• All / Active / Done filter buttons သုံးပြီး task list ကို filter လုပ်နိုင်ပြီ
• useMemo နဲ့ filtered list computation ကို optimize လုပ်နိုင်ပြီ

Code နမူနာ

// src/hooks/useLocalStorage.js
import { useState, useEffect } from "react";

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

export default useLocalStorage;

// src/components/TaskTracker.jsx (excerpt)
import { useState, useMemo } from "react";
import useLocalStorage from "../hooks/useLocalStorage";

function TaskTracker() {
  const [tasks, setTasks] = useLocalStorage("tasks", []);
  const [filter, setFilter] = useState("all");

  const filteredTasks = useMemo(() => {
    if (filter === "active") return tasks.filter((t) => !t.done);
    if (filter === "done") return tasks.filter((t) => t.done);
    return tasks;
  }, [tasks, filter]);

  return (
    <div className="task-tracker">
      <h2>My Tasks</h2>
      <div className="filters">
        <button onClick={() => setFilter("all")}>All</button>
        <button onClick={() => setFilter("active")}>Active</button>
        <button onClick={() => setFilter("done")}>Done</button>
      </div>
      {/* form + list from Part 2 stays the same, mapped over filteredTasks */}
    </div>
  );
}

Browser refresh လုပ်တောင် task list မပျောက်တော့ဘဲ၊ filter button တွေနှိပ်တဲ့အခါ Active/Done task များပဲ ချက်ချင်းစီညှိပြသွားပါလိမ့်မယ်။