Frontend Architecture: React Atomic Design

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles/globals.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

type Screen = Method | "home";

function App() {
  const [screen, setScreen] = useState<Screen>("home");
  const [lastMethod, setLastMethod] = useState<Method>(readLastMethod);

  if (screen === "home")      return <HomePage      lastMethod={lastMethod} onSelect={handleSelect} />;
  if (screen === "binary")    return <BinaryPage    onHome={goHome} />;
  if (screen === "integer")   return <IntegerPage   onHome={goHome} />;
  if (screen === "bisection") return <BisectionPage onHome={goHome} />;
  if (screen === "multivar")  return <MultivarPage  onHome={goHome} />;
  if (screen === "kkt")       return <KKTPage       onHome={goHome} />;
  return <SolverPage onHome={goHome} />;
}

// src/services/simplexApi.ts

import type { SimplexRequest, SimplexResponse } from "../types/simplex";

const BASE_URL = import.meta.env.VITE_API_URL ?? "http://localhost:8000/api/v1";

class ApiError extends Error {
  constructor(
    public readonly status: number,
    message: string,
  ) {
    super(message);
    this.name = "ApiError";
  }
}

async function post<TBody, TResponse>(
  path: string,
  body: TBody,
): Promise<TResponse> {
  const response = await fetch(`${BASE_URL}${path}`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });

  if (!response.ok) {
    const detail = await response
      .json()
      .then((d: { detail?: string }) => d.detail ?? response.statusText)
      .catch(() => response.statusText);
    throw new ApiError(response.status, String(detail));
  }

  return response.json() as Promise<TResponse>;
}

export const simplexApi = {
  solve: (payload: SimplexRequest): Promise<SimplexResponse> =>
    post<SimplexRequest, SimplexResponse>("/simplex/solve", payload),
};

// src/hooks/useSimplex.ts

export function useSimplex() {
  const [state, setState] = useState<UseSolverState>({
    result: null,
    loading: false,
    error: null,
  });

  const solve = useCallback(
    async (
      nVars: VariableCount,
      objCoeffs: number[],
      goal: Goal,
      constraints: Constraint[],
    ) => {
      setState({ result: null, loading: true, error: null });

      try {
        const result = await simplexApi.solve({
          objective: objCoeffs.slice(0, nVars),
          goal,
          constraints: constraints.map((c) => ({
            coefficients: c.coefficients.slice(0, nVars),
            inequality: c.inequality,
            rhs: c.rhs,
          })),
        });
        setState({ result, loading: false, error: null });
      } catch (err) {
        const message =
          err instanceof Error ? err.message : "Ocurrió un error inesperado";
        setState({ result: null, loading: false, error: message });
      }
    },
    [],
  );

  const reset = useCallback(() => {
    setState({ result: null, loading: false, error: null });
  }, []);

  return { ...state, solve, reset };
}

// Domain types
export type Goal          = "max" | "min";
export type Inequality    = "<=" | ">=" | "=";
export type VariableCount = 2 | 3 | 4 | 5;
export type SolveStatus   = "optimal" | "unbounded" | "infeasible";

// API request
export interface SimplexRequest {
  objective: number[];
  goal: Goal;
  constraints: Array<{
    coefficients: number[];
    inequality: Inequality;
    rhs: number;
  }>;
}

// API response
export interface SimplexResponse {
  status: SolveStatus;
  objective_value?: number;
  variables?: Record<string, number>;
  iterations?: number;
  tableau_headers?: string[];
  tableau_rows?: TableauRow[];
  message?: string;
  graphical?: GraphicalData | null;
  iteration_tableaux?: IterationTableau[] | null;
}

{
  "scripts": {
    "dev":     "vite",
    "build":   "vite build",
    "preview": "vite preview",
    "lint":    "eslint src --ext ts,tsx --report-unused-disable-directives"
  }
}

cd frontend
npm install
cp .env.example .env   # Set VITE_API_URL if needed
npm run dev