Ürün yönetim paneli

// src/project/api.ts
export type Product = {
  id: number;
  name: string;
  price: number;
  stock: number;
  isFavorite: boolean;
};

export type ProductPage = { items: Product[]; hasMore: boolean };

export type Review = { id: number; productId: number; text: string };

export type ReviewPage = { items: Review[]; nextCursor: number | null };

export class HttpError extends Error {
  status: number;

  constructor(status: number, message: string) {
    super(message);
    this.status = status;
  }
}

const PAGE_SIZE = 5;
const REVIEW_PAGE_SIZE = 3;

const names = [
  "Canvas Sneaker", "Linen Shirt", "Wool Beanie", "Leather Belt", "Denim Jacket",
  "Running Shoe", "Cotton Tee", "Rain Coat", "Silk Scarf", "Hiking Boot",
  "Chino Pants", "Knit Sweater", "Sun Hat",
];

const products: Product[] = names.map((name, index) => ({
  id: index + 1,
  name,
  price: 250 + index * 75,
  stock: (index * 7) % 12,
  isFavorite: false,
}));

const reviews: Review[] = products.flatMap((product) =>
  Array.from({ length: 7 }, (_, index) => ({
    id: product.id * 100 + index,
    productId: product.id,
    text: `${product.name} için yorum ${index + 1}`,
  })),
);

const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export async function fetchProductPage(page: number, search: string): Promise<ProductPage> {
  await delay(500);
  const matches = products.filter((p) => p.name.toLowerCase().includes(search.toLowerCase()));
  const start = (page - 1) * PAGE_SIZE;
  return {
    items: matches.slice(start, start + PAGE_SIZE).map((p) => ({ ...p })),
    hasMore: start + PAGE_SIZE < matches.length,
  };
}

export async function fetchProduct(id: number): Promise<Product> {
  await delay(400);
  const product = products.find((p) => p.id === id);
  if (!product) throw new HttpError(404, "Product not found");
  return { ...product };
}

export async function updateStock({ id, stock }: { id: number; stock: number }): Promise<Product> {
  await delay(600);
  if (stock < 0) throw new HttpError(422, "Stock cannot be negative");
  const product = products.find((p) => p.id === id);
  if (!product) throw new HttpError(404, "Product not found");
  product.stock = stock;
  return { ...product };
}

export async function toggleFavorite(id: number): Promise<Product> {
  await delay(800);
  // Yaklaşık dört istekten biri başarısız olsun; geri almayı görmek için
  if (Math.random() < 0.25) throw new HttpError(500, "Favorite could not be saved");
  const product = products.find((p) => p.id === id);
  if (!product) throw new HttpError(404, "Product not found");
  product.isFavorite = !product.isFavorite;
  return { ...product };
}

export async function fetchReviews(productId: number, cursor: number): Promise<ReviewPage> {
  await delay(500);
  const all = reviews.filter((r) => r.productId === productId);
  const items = all.slice(cursor, cursor + REVIEW_PAGE_SIZE);
  const next = cursor + REVIEW_PAGE_SIZE;
  return { items, nextCursor: next < all.length ? next : null };
}

export async function addReview({ productId, text }: { productId: number; text: string }): Promise<Review> {
  await delay(700);
  const review = { id: Date.now(), productId, text };
  reviews.unshift(review);
  return review;
}

// src/project/queries.ts
import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
import { fetchProduct, fetchProductPage, fetchReviews } from "./api";

export const productQueries = {
  all: () => ["products"] as const,
  lists: () => [...productQueries.all(), "list"] as const,
  list: (page: number, search: string) =>
    queryOptions({
      queryKey: [...productQueries.lists(), { page, search }],
      queryFn: () => fetchProductPage(page, search),
    }),
  details: () => [...productQueries.all(), "detail"] as const,
  detail: (id: number) =>
    queryOptions({
      queryKey: [...productQueries.details(), id],
      queryFn: () => fetchProduct(id),
    }),
};

export const reviewQueries = {
  all: (productId: number) => ["reviews", productId] as const,
  infinite: (productId: number) =>
    infiniteQueryOptions({
      queryKey: [...reviewQueries.all(productId), "infinite"],
      queryFn: ({ pageParam }) => fetchReviews(productId, pageParam),
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage.nextCursor,
    }),
};

// src/project/toast.ts
import { useSyncExternalStore } from "react";

let message: string | null = null;
const listeners = new Set<() => void>();

export function showToast(text: string) {
  message = text;
  listeners.forEach((listener) => listener());
  setTimeout(() => {
    message = null;
    listeners.forEach((listener) => listener());
  }, 3000);
}

function subscribe(listener: () => void) {
  listeners.add(listener);
  return () => listeners.delete(listener);
}

export function useToast() {
  return useSyncExternalStore(subscribe, () => message);
}

// src/project/query-client.ts
import { QueryCache, QueryClient } from "@tanstack/react-query";
import { showToast } from "./toast";

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30 * 1000 },
  },
  queryCache: new QueryCache({
    onError: (error, query) => {
      // Ekranda veri varken başarısız olan arka plan yenilemesi
      if (query.state.data !== undefined) {
        showToast(`Veri güncellenemedi: ${error.message}`);
      }
    },
  }),
});

// src/project/ProductTable.tsx
import { useEffect, useState } from "react";
import { keepPreviousData, noop, useQuery, useQueryClient } from "@tanstack/react-query";
import { productQueries } from "./queries";

type ProductTableProps = {
  selectedId: number | null;
  onSelect: (id: number) => void;
};

export function ProductTable({ selectedId, onSelect }: ProductTableProps) {
  const queryClient = useQueryClient();
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");

  const { data, isPending, isError, error, isFetching, isPlaceholderData } = useQuery({
    ...productQueries.list(page, search),
    placeholderData: keepPreviousData,
  });

  // Sonraki sayfayı arka planda hazırla
  useEffect(() => {
    if (!isPlaceholderData && data?.hasMore) {
      void queryClient.query(productQueries.list(page + 1, search)).catch(noop);
    }
  }, [data, isPlaceholderData, page, search, queryClient]);

  const prefetchDetail = (id: number) => {
    void queryClient.query(productQueries.detail(id)).catch(noop);
  };

  return (
    <section>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          setSearch(String(new FormData(event.currentTarget).get("search")));
          setPage(1);
        }}
      >
        <input name="search" placeholder="Ürün ara" defaultValue={search} />
        <button>Ara</button>
      </form>

      {isPending ? (
        <p>Yükleniyor...</p>
      ) : isError ? (
        <p>Hata: {error.message}</p>
      ) : (
        <table style={{ opacity: isPlaceholderData ? 0.5 : 1 }}>
          <tbody>
            {data.items.map((product) => (
              <tr key={product.id} aria-selected={product.id === selectedId}>
                <td>
                  <button
                    onClick={() => onSelect(product.id)}
                    onMouseEnter={() => prefetchDetail(product.id)}
                    onFocus={() => prefetchDetail(product.id)}
                  >
                    {product.name}
                  </button>
                </td>
                <td>{product.price} TL</td>
                <td>{product.stock} adet</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      <button onClick={() => setPage((p) => p - 1)} disabled={page === 1}>
        Önceki
      </button>
      <span> Sayfa {page} </span>
      <button
        onClick={() => setPage((p) => p + 1)}
        disabled={isPlaceholderData || !data?.hasMore}
      >
        Sonraki
      </button>
      {isFetching && <span> Güncelleniyor...</span>}
    </section>
  );
}

// src/project/StockForm.tsx
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { updateStock, type Product } from "./api";
import { productQueries } from "./queries";
import { showToast } from "./toast";

export function StockForm({ product }: { product: Product }) {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: updateStock,
    onSuccess: (updated) => {
      // Detay: cevabı doğrudan cache'e yaz
      queryClient.setQueryData(productQueries.detail(updated.id).queryKey, updated);
      // Listeler: yeniden çek; Promise'i döndür ki buton beklesin
      return queryClient.invalidateQueries({ queryKey: productQueries.lists() });
    },
  });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const stock = Number(new FormData(event.currentTarget).get("stock"));
        mutation.mutate(
          { id: product.id, stock },
          { onSuccess: () => showToast("Stok güncellendi") },
        );
      }}
    >
      <label>
        Stok <input name="stock" type="number" defaultValue={product.stock} />
      </label>
      <button disabled={mutation.isPending}>
        {mutation.isPending ? "Kaydediliyor..." : "Kaydet"}
      </button>
      {mutation.isError && <p role="alert">{mutation.error.message}</p>}
    </form>
  );
}

// src/project/FavoriteButton.tsx
import { useMutation } from "@tanstack/react-query";
import { toggleFavorite, type Product } from "./api";
import { productQueries } from "./queries";
import { showToast } from "./toast";

const favoriteKey = ["toggle-favorite"];

export function FavoriteButton({ product }: { product: Product }) {
  const mutation = useMutation({
    mutationKey: favoriteKey,
    mutationFn: toggleFavorite,
    onMutate: async (id: number, context) => {
      const queryKey = productQueries.detail(id).queryKey;
      await context.client.cancelQueries({ queryKey });
      const previous = context.client.getQueryData(queryKey);
      context.client.setQueryData(queryKey, (old) =>
        old ? { ...old, isFavorite: !old.isFavorite } : old,
      );
      return { previous, queryKey };
    },
    onError: (error, _id, onMutateResult, context) => {
      if (onMutateResult) {
        context.client.setQueryData(onMutateResult.queryKey, onMutateResult.previous);
      }
      showToast(error.message);
    },
    onSettled: (_data, _error, id, _onMutateResult, context) => {
      // Yalnızca son favori isteği sunucuyla eşitlesin
      if (context.client.isMutating({ mutationKey: favoriteKey }) === 1) {
        return context.client.invalidateQueries({
          queryKey: productQueries.detail(id).queryKey,
        });
      }
    },
  });

  return (
    <button onClick={() => mutation.mutate(product.id)} aria-pressed={product.isFavorite}>
      {product.isFavorite ? "★ Favoride" : "☆ Favorilere ekle"}
    </button>
  );
}

// src/project/Reviews.tsx
import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { addReview } from "./api";
import { reviewQueries } from "./queries";

export function Reviews({ productId }: { productId: number }) {
  const queryClient = useQueryClient();
  const { data, status, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
    useInfiniteQuery(reviewQueries.infinite(productId));

  const mutation = useMutation({
    mutationFn: addReview,
    onSettled: () =>
      queryClient.invalidateQueries({ queryKey: reviewQueries.all(productId) }),
  });

  return (
    <section>
      <h3>Yorumlar</h3>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          const form = event.currentTarget;
          const text = String(new FormData(form).get("text")).trim();
          if (!text) return;
          mutation.mutate({ productId, text }, { onSuccess: () => form.reset() });
        }}
      >
        <input name="text" placeholder="Yorumunuz" />
        <button disabled={mutation.isPending}>Gönder</button>
      </form>

      {mutation.isPending && <p style={{ opacity: 0.5 }}>{mutation.variables.text}</p>}
      {mutation.isError && (
        <p>
          {mutation.variables.text} gönderilemedi.{" "}
          <button onClick={() => mutation.mutate(mutation.variables)}>Tekrar dene</button>
        </p>
      )}

      {status === "pending" ? (
        <p>Yorumlar yükleniyor...</p>
      ) : status === "error" ? (
        <p>Yorumlar yüklenemedi.</p>
      ) : (
        <>
          {data.pages.flatMap((page) => page.items).map((review) => (
            <p key={review.id}>{review.text}</p>
          ))}
          <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetching}>
            {isFetchingNextPage ? "Yükleniyor..." : hasNextPage ? "Daha fazla" : "Hepsi bu kadar"}
          </button>
        </>
      )}
    </section>
  );
}

// src/project/ProductDetail.tsx
import { useSuspenseQuery } from "@tanstack/react-query";
import { productQueries } from "./queries";
import { FavoriteButton } from "./FavoriteButton";
import { StockForm } from "./StockForm";
import { Reviews } from "./Reviews";

export function ProductDetail({ id }: { id: number }) {
  const { data: product } = useSuspenseQuery(productQueries.detail(id));

  return (
    <article>
      <h2>{product.name}</h2>
      <p>{product.price} TL</p>
      <FavoriteButton product={product} />
      <StockForm key={product.id} product={product} />
      <Reviews productId={product.id} />
    </article>
  );
}

// src/project/App.tsx
import { Suspense, useState, useTransition } from "react";
import { QueryErrorResetBoundary } from "@tanstack/react-query";
import { ErrorBoundary } from "react-error-boundary";
import { ProductTable } from "./ProductTable";
import { ProductDetail } from "./ProductDetail";
import { useToast } from "./toast";

export function App() {
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [isSwitching, startTransition] = useTransition();
  const toast = useToast();

  return (
    <main style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
      <ProductTable
        selectedId={selectedId}
        onSelect={(id) => startTransition(() => setSelectedId(id))}
      />

      <div style={{ opacity: isSwitching ? 0.5 : 1 }}>
        {selectedId === null ? (
          <p>Bir ürün seçin.</p>
        ) : (
          <QueryErrorResetBoundary>
            {({ reset }) => (
              <ErrorBoundary
                onReset={reset}
                resetKeys={[selectedId]}
                fallbackRender={({ resetErrorBoundary }) => (
                  <div>
                    <p>Ürün yüklenemedi.</p>
                    <button onClick={() => resetErrorBoundary()}>Tekrar dene</button>
                  </div>
                )}
              >
                <Suspense fallback={<p>Ürün yükleniyor...</p>}>
                  <ProductDetail id={selectedId} />
                </Suspense>
              </ErrorBoundary>
            )}
          </QueryErrorResetBoundary>
        )}
      </div>

      {toast && <div role="status">{toast}</div>}
    </main>
  );
}

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { queryClient } from "./project/query-client";
import { App } from "./project/App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </StrictMode>,
);

npm run lint
npm run build