React spa

// features/orders/stores/order.store.ts
import { create } from "zustand";

interface OrderState {
  orders: OrderView[];
  isLoading: boolean;
  setOrders: (orders: OrderView[]) => void;
}

export const useOrderStore = create<OrderState>((set) => ({
  orders: [],
  isLoading: false,
  setOrders: (orders) => set({ orders }),
}));

// features/orders/components/OrderList.tsx
export function OrderList() {
  const { data } = useQuery(ordersQuery());
  const orders = useOrderStore((state) => state.orders);
  const setOrders = useOrderStore((state) => state.setOrders);

  useEffect(() => {
    if (data) setOrders(data);
  }, [data, setOrders]);

  return <OrderTable orders={orders} />;
}

// features/orders/stores/order-filter.store.ts
import { create } from "zustand";
import type { OrderStatus } from "../schemas/order.schema";

type StatusFilter = OrderStatus | "all";

interface OrderFilterState {
  status: StatusFilter;
  searchTerm: string;
  selectStatus: (status: StatusFilter) => void;
  changeSearchTerm: (searchTerm: string) => void;
  clearFilters: () => void;
}

const INITIAL_FILTERS = { status: "all", searchTerm: "" } as const;

export const useOrderFilterStore = create<OrderFilterState>((set) => ({
  ...INITIAL_FILTERS,
  selectStatus: (status) => set({ status }),
  changeSearchTerm: (searchTerm) => set({ searchTerm }),
  clearFilters: () => set(INITIAL_FILTERS),
}));

// features/orders/components/OrderList.tsx
export function OrderList() {
  const status = useOrderFilterStore((state) => state.status);
  const { data: orders, isPending, isError } = useQuery(ordersQuery(status));

  if (isPending) return <OrderListSkeleton />;
  if (isError) return <OrderListError />;

  return <OrderTable orders={orders} />;
}

// features/orders/hooks/use-orders.ts
export function useOrders(status: StatusFilter): UseOrdersResult {
  const [orders, setOrders] = useState<OrderView[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    listOrders(status)
      .then(setOrders)
      .catch(() => setError("Não foi possível carregar os pedidos."))
      .finally(() => setIsLoading(false));
  }, [status]);

  return { orders, isLoading, error };
}

// features/orders/queries/order.queries.ts
import { queryOptions } from "@tanstack/react-query";
import { listOrders } from "../services/order.service";
import type { StatusFilter } from "../stores/order-filter.store";

const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;

export function ordersQuery(status: StatusFilter) {
  const options = queryOptions({
    queryKey: ["orders", { status }],
    queryFn: () => listOrders(status),
    staleTime: FIVE_MINUTES_IN_MS,
  });

  return options;
}

// lib/query-client.ts
import { QueryClient } from "@tanstack/react-query";

const ONE_MINUTE_IN_MS = 60 * 1000;
const MAX_RETRY_ATTEMPTS = 2;

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: ONE_MINUTE_IN_MS,
      retry: MAX_RETRY_ATTEMPTS,
      refetchOnWindowFocus: true,
    },
  },
});

// features/orders/mutations/order.mutations.ts
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { createOrder } from "../services/order.service";
import type { CreateOrderInput } from "../schemas/order.schema";

export function useCreateOrder() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (input: CreateOrderInput) => createOrder(input),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["orders"] });
    },
  });

  return mutation;
}

// features/orders/components/CreateOrderForm.tsx
export function CreateOrderForm() {
  const { mutate: createOrder, isPending } = useCreateOrder();

  const submitOrder = (input: CreateOrderInput) => {
    createOrder(input);
  };

  return <OrderForm onSubmit={submitOrder} isSubmitting={isPending} />;
}

// features/orders/components/OrderDetail.tsx
export function OrderDetail() {
  const { orderId } = useParams();

  if (!orderId) return <NotFound />;

  const { data: order } = useQuery(orderQuery(orderId));

  return <OrderSummary order={order} />;
}

// routes/orders.$orderId.tsx
import { createFileRoute, redirect } from "@tanstack/react-router";
import { z } from "zod";
import { orderQuery } from "@/features/orders/queries/order.queries";
import { OrderSummary } from "@/features/orders/components/OrderSummary";

const orderParamsSchema = z.object({
  orderId: z.string().uuid(),
});

export const Route = createFileRoute("/orders/$orderId")({
  params: {
    parse: (params) => orderParamsSchema.parse(params),
  },
  beforeLoad: ({ context }) => {
    const isSignedIn = context.session.isAuthenticated;

    if (!isSignedIn) {
      throw redirect({ to: "/login" });
    }
  },
  loader: ({ context, params }) => {
    return context.queryClient.ensureQueryData(orderQuery(params.orderId));
  },
  component: OrderDetailPage,
});

function OrderDetailPage() {
  const { orderId } = Route.useParams();
  const { data: order } = useSuspenseQuery(orderQuery(orderId));

  return <OrderSummary order={order} />;
}

// features/orders/components/OrderFilters.tsx
export function OrderFilters() {
  const { status, searchTerm, selectStatus, changeSearchTerm } = useOrderFilterStore();

  return (
    <FilterBar
      status={status}
      searchTerm={searchTerm}
      onStatusChange={selectStatus}
      onSearchChange={changeSearchTerm}
    />
  );
}

// features/orders/components/OrderFilters.tsx
import { useShallow } from "zustand/react/shallow";
import { useOrderFilterStore } from "../stores/order-filter.store";

export function OrderFilters() {
  const { status, searchTerm } = useOrderFilterStore(
    useShallow((state) => ({ status: state.status, searchTerm: state.searchTerm })),
  );
  const selectStatus = useOrderFilterStore((state) => state.selectStatus);
  const changeSearchTerm = useOrderFilterStore((state) => state.changeSearchTerm);

  return (
    <FilterBar
      status={status}
      searchTerm={searchTerm}
      onStatusChange={selectStatus}
      onSearchChange={changeSearchTerm}
    />
  );
}

// features/settings/stores/preferences.store.ts
import { create } from "zustand";
import { persist } from "zustand/middleware";

type Theme = "light" | "dark";

interface PreferencesState {
  theme: Theme;
  rowsPerPage: number;
  changeTheme: (theme: Theme) => void;
  changeRowsPerPage: (rowsPerPage: number) => void;
}

const DEFAULT_ROWS_PER_PAGE = 25;
const PREFERENCES_STORAGE_KEY = "acme.preferences";

export const usePreferencesStore = create<PreferencesState>()(
  persist(
    (set) => ({
      theme: "light",
      rowsPerPage: DEFAULT_ROWS_PER_PAGE,
      changeTheme: (theme) => set({ theme }),
      changeRowsPerPage: (rowsPerPage) => set({ rowsPerPage }),
    }),
    { name: PREFERENCES_STORAGE_KEY },
  ),
);