Container/Presenter en Mobile

import { useCallback } from "react";
import { ActivityIndicator, FlatList, Pressable, Text, View } from "react-native";
import { useQuery } from "@tanstack/react-query";
 
interface User {
  id: string;
  name: string;
}
 
interface UserListProps {
  users: User[];
  onSelect: (id: string) => void;
}
 
// Presentador - sin fetch, sin router, sin stores globales
export function UserList({ users, onSelect }: UserListProps) {
  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Pressable onPress={() => onSelect(item.id)}>
          <Text>{item.name}</Text>
        </Pressable>
      )}
    />
  );
}
 
// Contenedor - conecta datos + navegación
export function UserListScreen() {
  const { data, isPending, isError, refetch } = useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });
 
  const handleSelect = useCallback((id: string) => {
    // router.push(`/users/${id}`);
  }, []);
 
  if (isPending) return <ActivityIndicator />;
  if (isError) return <Text>No se pudieron cargar los usuarios</Text>;
 
  return <UserList users={data ?? []} onSelect={handleSelect} />;
}
 
async function fetchUsers(): Promise<User[]> {
  const res = await fetch("https://example.com/api/users");
  if (!res.ok) throw new Error("Error de red");
  return res.json();
}

import { useCallback } from "react";
import {
  ActivityIndicator,
  FlatList,
  Pressable,
  RefreshControl,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { useRouter } from "expo-router";
import { useQuery } from "@tanstack/react-query";
 
interface Project {
  id: string;
  name: string;
  status: "active" | "archived";
  openTasks: number;
}
 
type LoadState = "loading" | "error" | "empty" | "ready";
 
interface ProjectsPresenterProps {
  state: LoadState;
  projects: Project[];
  refreshing: boolean;
  errorMessage?: string;
  onRefresh: () => void;
  onPressProject: (id: string) => void;
}
 
export function ProjectsPresenter({
  state,
  projects,
  refreshing,
  errorMessage,
  onRefresh,
  onPressProject,
}: ProjectsPresenterProps) {
  if (state === "loading") {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" />
        <Text style={styles.muted}>Cargando proyectos…</Text>
      </View>
    );
  }
 
  if (state === "error") {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>{errorMessage ?? "Algo salió mal"}</Text>
        <Pressable onPress={onRefresh} style={styles.button}>
          <Text style={styles.buttonText}>Intentar de nuevo</Text>
        </Pressable>
      </View>
    );
  }
 
  if (state === "empty") {
    return (
      <View style={styles.center}>
        <Text style={styles.heading}>Sin proyectos aún</Text>
        <Text style={styles.muted}>Tira para actualizar después de tu primera sincronización.</Text>
      </View>
    );
  }
 
  return (
    <FlatList
      data={projects}
      keyExtractor={(item) => item.id}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
      renderItem={({ item }) => (
        <Pressable
          onPress={() => onPressProject(item.id)}
          style={styles.card}
        >
          <View style={styles.cardHeader}>
            <Text style={styles.title}>{item.name}</Text>
            <Text
              style={[
                styles.badge,
                item.status === "archived" && styles.badgeMuted,
              ]}
            >
              {item.status}
            </Text>
          </View>
          <Text style={styles.meta}>{item.openTasks} tareas abiertas</Text>
        </Pressable>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      contentContainerStyle={styles.list}
    />
  );
}
 
const MOCK_PROJECTS: Project[] = [
  { id: "p1", name: "Expo SDK 57 upgrade", status: "active", openTasks: 4 },
  { id: "p2", name: "Checkout redesign", status: "active", openTasks: 11 },
  { id: "p3", name: "Legacy billing", status: "archived", openTasks: 0 },
];
 
async function fetchProjects(): Promise<Project[]> {
  await new Promise((r) => setTimeout(r, 400));
  return MOCK_PROJECTS;
}
 
function toLoadState(
  isPending: boolean,
  isError: boolean,
  count: number
): LoadState {
  if (isPending) return "loading";
  if (isError) return "error";
  if (count === 0) return "empty";
  return "ready";
}
 
export default function ProjectsScreen() {
  const router = useRouter();
  const query = useQuery({
    queryKey: ["projects"],
    queryFn: fetchProjects,
  });
 
  const projects = query.data ?? [];
  const state = toLoadState(query.isPending, query.isError, projects.length);
 
  const handleRefresh = useCallback(() => {
    void query.refetch();
  }, [query]);
 
  const handlePressProject = useCallback(
    (id: string) => {
      router.push(`/projects/${id}`);
    },
    [router]
  );
 
  return (
    <View style={styles.screen}>
      <ProjectsPresenter
        state={state}
        projects={projects}
        refreshing={query.isFetching && !query.isPending}
        errorMessage={query.error instanceof Error ? query.error.message : undefined}
        onRefresh={handleRefresh}
        onPressProject={handlePressProject}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#f8fafc" },
  center: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 24,
    gap: 12,
  },
  heading: { fontSize: 20, fontWeight: "700", color: "#0f172a" },
  muted: { fontSize: 15, color: "#64748b", textAlign: "center" },
  error: { fontSize: 15, color: "#dc2626", textAlign: "center" },
  button: {
    backgroundColor: "#2563eb",
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8,
  },
  buttonText: { color: "#fff", fontWeight: "600" },
  list: { padding: 16 },
  card: {
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 16,
    gap: 6,
  },
  cardHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  title: { fontSize: 17, fontWeight: "600", color: "#0f172a", flex: 1 },
  badge: {
    fontSize: 12,
    fontWeight: "700",
    color: "#2563eb",
    textTransform: "uppercase",
  },
  badgeMuted: { color: "#94a3b8" },
  meta: { fontSize: 14, color: "#475569" },
  separator: { height: 10 },
});

// Prefiere uniones explícitas sobre muchos booleanos
type ProjectsViewModel =
  | { status: "loading" }
  | { status: "error"; message: string }
  | { status: "empty" }
  | { status: "ready"; projects: Project[]; refreshing: boolean };
 
interface ProjectsPresenterProps extends ProjectsViewModel {
  onRefresh: () => void;
  onPressProject: (id: string) => void;
}

// Los props del presentador documentan el contrato visual completo
interface ProjectCardProps {
  project: Project;
  onPress: (id: string) => void;
}
 
// El contenedor mapea API DTO - view model
function mapProjectDto(dto: ProjectDto): Project {
  return {
    id: dto.project_id,
    name: dto.display_name,
    status: dto.is_archived ? "archived" : "active",
    openTasks: dto.open_task_count,
  };
}