Camada de Tela (Screen Layer)

A Camada de Tela é responsável pela experiência do usuário (UX). Ela orquestra como os dados são apresentados e como as interações são capturadas, sem se preocupar com como os dados foram obtidos.

Exemplo Prático: Gestão de Estado de UI

Nesta camada, lidamos exclusivamente com o que o usuário vê. Isso inclui estados de carregamento, tratamento de erros visuais, filtros de tela e feedbacks.

1. O Hook da Tela (user-list-screen.hooks.ts)

O hook da tela isola a lógica de interação da renderização do componente.

// src/screens/users/user-list-screen.hooks.ts
import { useState } from 'react';
import { useUsersData } from '@/features/users/hooks/use-users-data';
import { useToast } from '@ptm/design-system';

export function useUserListScreen() {
  const { users, isLoading, updateStatus } = useUsersData();
  const [filter, setFilter] = useState('');
  const toast = useToast();

  const handleUpdateStatus = async (id: string, status: string) => {
    try {
      await updateStatus({ id, status });
      toast.show({ message: 'Status atualizado com sucesso!', type: 'success' });
    } catch (error) {
      toast.show({ message: 'Erro ao atualizar status.', type: 'error' });
    }
  };

  const filteredUsers = users.filter(user => 
    user.name.toLowerCase().includes(filter.toLowerCase())
  );

  return {
    users: filteredUsers,
    isLoading,
    filter,
    setFilter,
    handleUpdateStatus
  };
}

2. O Componente de Tela (user-list.screen.tsx)

A tela deve ser "burra", apenas mapeando o que vem do hook para os componentes de UI.

// src/screens/users/user-list.screen.tsx
import React from 'react';
import { View, Input, Loading, Text } from '@ptm/design-system';
import { useUserListScreen } from './user-list-screen.hooks';

export const UserListScreen = () => {
  const { users, isLoading, filter, setFilter, handleUpdateStatus } = useUserListScreen();

  if (isLoading) return <Loading />;

  return (
    <View>
      <Text variant="h1">Gestão de Usuários</Text>
      
      {/* Lógica de Filtro (Exclusiva da Tela) */}
      <Input 
        placeholder="Buscar por nome..." 
        value={filter} 
        onChangeText={setFilter} 
      />

      {users.length === 0 ? (
        <Text>Nenhum usuário encontrado para "{filter}"</Text>
      ) : (
        <List 
          data={users} 
          onAction={handleUpdateStatus} 
        />
      )}
    </View>
  );
};

Responsabilidades Exclusivas da Tela:

1. Loading e Empty States: Decidir se mostra um spinner ou uma mensagem de "lista vazia".
2. Feedback Visual: Disparar Toasts ou abrir Modais de confirmação.
3. Formatação para Exibição: Embora a lógica de negócio esteja na Feature, a decisão de mostrar um texto em Vermelho para "Inativo" é da Screen.
4. Navegação: Orquestrar a ida para outras telas após uma ação.
5. Filtros de UI: Estados temporários de busca ou ordenação que não afetam o banco de dados global.