Jotai 2 — إدارة الحالة الذرية في React و Next.js: من الصفر إلى الإنتاج

npx create-next-app@latest jotai-cart --typescript --tailwind --app --src-dir
cd jotai-cart

npm install jotai
npm install -D jotai-devtools

mkdir -p src/atoms src/components

import { atom } from "jotai";
 
export const countAtom = atom(0);

// src/components/Counter.tsx
"use client";
 
import { useAtom } from "jotai";
import { countAtom } from "@/atoms/counter";
 
export function Counter() {
  const [count, setCount] = useAtom(countAtom);
 
  return (
    <div className="flex items-center gap-3">
      <button
        onClick={() => setCount((c) => c - 1)}
        className="rounded bg-slate-200 px-3 py-1"
      >
        -
      </button>
      <span className="text-xl font-semibold">{count}</span>
      <button
        onClick={() => setCount((c) => c + 1)}
        className="rounded bg-slate-200 px-3 py-1"
      >
        +
      </button>
    </div>
  );
}

import { useAtomValue, useSetAtom } from "jotai";
import { countAtom } from "@/atoms/counter";
 
function Display() {
  const count = useAtomValue(countAtom);
  return <span>{count}</span>;
}
 
function IncrementButton() {
  const setCount = useSetAtom(countAtom);
  return <button onClick={() => setCount((c) => c + 1)}>+1</button>;
}

import { atom } from "jotai";
 
export type CartItem = {
  id: string;
  name: string;
  price: number;
  quantity: number;
};
 
export const cartItemsAtom = atom<CartItem[]>([]);
 
export const cartTotalAtom = atom((get) => {
  const items = get(cartItemsAtom);
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
});
 
export const cartCountAtom = atom((get) => {
  const items = get(cartItemsAtom);
  return items.reduce((sum, item) => sum + item.quantity, 0);
});

export const addItemAtom = atom(
  null, // لا قيمة قراءة — كتابة فقط
  (get, set, newItem: CartItem) => {
    const items = get(cartItemsAtom);
    const existing = items.find((i) => i.id === newItem.id);
 
    if (existing) {
      set(
        cartItemsAtom,
        items.map((i) =>
          i.id === newItem.id
            ? { ...i, quantity: i.quantity + newItem.quantity }
            : i,
        ),
      );
    } else {
      set(cartItemsAtom, [...items, newItem]);
    }
  },
);
 
export const removeItemAtom = atom(null, (get, set, id: string) => {
  set(
    cartItemsAtom,
    get(cartItemsAtom).filter((i) => i.id !== id),
  );
});

"use client";
 
import { useSetAtom } from "jotai";
import { addItemAtom } from "@/atoms/cart";
 
export function AddToCart({ item }: { item: CartItem }) {
  const addItem = useSetAtom(addItemAtom);
  return (
    <button onClick={() => addItem({ ...item, quantity: 1 })}>
      أضف إلى السلة
    </button>
  );
}

import { atomWithStorage } from "jotai/utils";
import type { CartItem } from "./cart";
 
export const persistedCartAtom = atomWithStorage<CartItem[]>(
  "noqta-cart-v1",
  [],
);

"use client";
 
import { useEffect, useState } from "react";
import { useAtomValue } from "jotai";
import { persistedCartAtom } from "@/atoms/cart";
 
export function CartBadge() {
  const [mounted, setMounted] = useState(false);
  const items = useAtomValue(persistedCartAtom);
 
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;
 
  return <span className="badge">{items.length}</span>;
}

import { atom } from "jotai";
 
export type Product = {
  id: string;
  name: string;
  price: number;
};
 
export const productsAtom = atom(async (): Promise<Product[]> => {
  const res = await fetch("/api/products");
  if (!res.ok) throw new Error("Failed to load products");
  return res.json();
});

"use client";
 
import { Suspense } from "react";
import { useAtomValue } from "jotai";
import { productsAtom } from "@/atoms/products";
 
function ProductList() {
  const products = useAtomValue(productsAtom);
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          {p.name} — ${p.price}
        </li>
      ))}
    </ul>
  );
}
 
export function ProductsPage() {
  return (
    <Suspense fallback={<p>جارٍ تحميل المنتجات...</p>}>
      <ProductList />
    </Suspense>
  );
}

import { loadable } from "jotai/utils";
 
export const productsLoadableAtom = loadable(productsAtom);

const value = useAtomValue(productsLoadableAtom);
 
if (value.state === "loading") return <Skeleton />;
if (value.state === "hasError") return <Error error={value.error} />;
return <ProductList data={value.data} />;

import { atomFamily } from "jotai/utils";
import { atom } from "jotai";
 
export type Todo = { id: string; text: string; done: boolean };
 
export const todoAtomFamily = atomFamily((id: string) =>
  atom<Todo>({ id, text: "", done: false }),
);

function TodoItem({ id }: { id: string }) {
  const [todo, setTodo] = useAtom(todoAtomFamily(id));
  return (
    <label>
      <input
        type="checkbox"
        checked={todo.done}
        onChange={(e) => setTodo({ ...todo, done: e.target.checked })}
      />
      {todo.text}
    </label>
  );
}

"use client";
 
import { useHydrateAtoms } from "jotai/utils";
import type { ReactNode } from "react";
import type { Product } from "@/atoms/products";
import { productsAtom } from "@/atoms/products";
 
type HydrateProps = {
  products: Product[];
  children: ReactNode;
};
 
export function AtomsHydrator({ products, children }: HydrateProps) {
  useHydrateAtoms([[productsAtom, products]]);
  return <>{children}</>;
}

// src/app/page.tsx (server component)
import { AtomsHydrator } from "@/components/AtomsHydrator";
import { ProductList } from "@/components/ProductList";
 
async function getProducts() {
  const res = await fetch("https://api.noqta.tn/products", {
    next: { revalidate: 60 },
  });
  return res.json();
}
 
export default async function Page() {
  const products = await getProducts();
 
  return (
    <AtomsHydrator products={products}>
      <ProductList />
    </AtomsHydrator>
  );
}

import { Provider } from "jotai";
 
export function TenantScope({ children }: { children: ReactNode }) {
  return <Provider>{children}</Provider>;
}

// src/components/DevTools.tsx
"use client";
 
import { DevTools as JotaiDevTools } from "jotai-devtools";
import "jotai-devtools/styles.css";
 
export function DevTools() {
  if (process.env.NODE_ENV !== "development") return null;
  return <JotaiDevTools theme="dark" />;
}

import { atom } from "jotai";
import { atomWithStorage } from "jotai/utils";
 
export type Product = { id: string; name: string; price: number };
export type CartLine = { productId: string; quantity: number };
 
export const productsAtom = atom<Product[]>([]);
 
export const cartLinesAtom = atomWithStorage<CartLine[]>("noqta-cart", []);
 
export const cartDetailsAtom = atom((get) => {
  const products = get(productsAtom);
  const lines = get(cartLinesAtom);
 
  return lines
    .map((line) => {
      const product = products.find((p) => p.id === line.productId);
      if (!product) return null;
      return {
        ...product,
        quantity: line.quantity,
        subtotal: product.price * line.quantity,
      };
    })
    .filter(Boolean);
});
 
export const cartTotalAtom = atom((get) =>
  get(cartDetailsAtom).reduce((sum, l) => sum + (l?.subtotal ?? 0), 0),
);
 
export const addToCartAtom = atom(
  null,
  (get, set, productId: string, quantity = 1) => {
    const lines = get(cartLinesAtom);
    const existing = lines.find((l) => l.productId === productId);
    if (existing) {
      set(
        cartLinesAtom,
        lines.map((l) =>
          l.productId === productId
            ? { ...l, quantity: l.quantity + quantity }
            : l,
        ),
      );
    } else {
      set(cartLinesAtom, [...lines, { productId, quantity }]);
    }
  },
);
 
export const removeFromCartAtom = atom(null, (get, set, productId: string) => {
  set(
    cartLinesAtom,
    get(cartLinesAtom).filter((l) => l.productId !== productId),
  );
});

"use client";
 
import { useAtomValue, useSetAtom } from "jotai";
import {
  cartDetailsAtom,
  cartTotalAtom,
  removeFromCartAtom,
} from "@/atoms/shop";
 
export function CartSummary() {
  const items = useAtomValue(cartDetailsAtom);
  const total = useAtomValue(cartTotalAtom);
  const remove = useSetAtom(removeFromCartAtom);
 
  if (items.length === 0) return <p>سلّتك فارغة.</p>;
 
  return (
    <div className="space-y-3">
      {items.map((item) =>
        item ? (
          <div
            key={item.id}
            className="flex items-center justify-between border-b py-2"
          >
            <div>
              <p className="font-medium">{item.name}</p>
              <p className="text-sm text-slate-500">
                {item.quantity} x ${item.price}
              </p>
            </div>
            <div className="flex items-center gap-3">
              <span className="font-semibold">${item.subtotal}</span>
              <button
                onClick={() => remove(item.id)}
                className="text-red-500 hover:underline"
              >
                إزالة
              </button>
            </div>
          </div>
        ) : null,
      )}
      <div className="flex justify-between pt-2 text-lg font-bold">
        <span>المجموع</span>
        <span>${total}</span>
      </div>
    </div>
  );
}

import { createStore } from "jotai";
import { cartLinesAtom, addToCartAtom, cartTotalAtom } from "@/atoms/shop";
 
test("adds items and computes total", () => {
  const store = createStore();
  store.set(addToCartAtom, "p1", 2);
  store.set(addToCartAtom, "p1", 1);
 
  expect(store.get(cartLinesAtom)).toEqual([
    { productId: "p1", quantity: 3 },
  ]);
});