Exemplo de página de edição de usuários

Exemplo de edição de usuários em React.

Para implementar o processo de atualização de um usuário em uma aplicação React, vamos criar as funcionalidades que permitam a edição dos detalhes do usuário e o envio dessas atualizações de volta para o servidor. Faremos a criação de um formulário de edição, a manipulação do estado do formulário, e a comunicação com a API para enviar as atualizações.

Passo 1: Serviço de Atualização de Usuário

Primeiro, você precisará de um Serviços na sua camada de API para enviar a atualização para o servidor. Vamos adicionar um método updateUser ao serviço apiService.js.

const BASE_URL = 'https://jsonplaceholder.typicode.com';
 
// Função para buscar usuários
export const fetchUsers = async () => {
  try {
    const response = await fetch(`${BASE_URL}/users`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error('Error fetching users:', error);
    throw error;
  }
};
 
// Função para buscar detalhes de um usuário específico
export const fetchUserById = async (userId) => {
  try {
    const response = await fetch(`${BASE_URL}/users/${userId}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error(`Error fetching user with ID ${userId}:`, error);
    throw error;
  }
};
 
export const updateUser = async (userId, userData) => {
  try {
    const response = await fetch(`${BASE_URL}/users/${userId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userData)
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Error updating user:', error);
    throw error;
  }
};

Passo 2: Componente de Formulário de Edição

Você pode criar um componente separado para gerenciar o formulário de edição, basicamente um Componentes de Apresentação. Vamos chamá-lo de UserEditForm.js.

import React, { useState } from 'react';
 
function UserEditForm({ user, onSave }) {
  const [formData, setFormData] = useState({
    name: user.name,
    email: user.email,
    phone: user.phone
  });
 
  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };
 
  const handleSubmit = (e) => {
    e.preventDefault();
    onSave(user.id, formData);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <br />
      <label>
        Phone:
        <input type="text" name="phone" value={formData.phone} onChange={handleChange} />
      </label>
      <br />
      <button type="submit">Save Changes</button>
    </form>
  );
}
 
export default UserEditForm;

Passo 3: Integração na Página do Usuário

Agora, você precisa integrar esse formulário na página UserDetailPage, permitindo a edição e atualização de usuários.

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import UserDetail from '../components/UserDetail';
import UserEditForm from '../components/UserEditForm';
import { fetchUserById, updateUser } from '../services/apiService';
 
function UserDetailPage() {
  const { userId } = useParams();
  const [user, setUser] = useState(null);
  const [editing, setEditing] = useState(false);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetchUserById(userId).then(setUser).catch(setError).finally(() => setLoading(false));
  }, [userId]);
 
  const handleSave = async (id, userData) => {
    setLoading(true);
    try {
      const updatedUser = await updateUser(id, userData);
      setUser(updatedUser);
      setEditing(false);
    } catch (error) {
      setError('Failed to update user');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };
 
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return <div>No user found.</div>;
 
  return (
    <div>
      <h1>User Details</h1>
      {editing ? (
        <UserEditForm user={user} onSave={handleSave} />
      ) : (
        <div>
          <UserDetail user={user} />
          <button onClick={() => setEditing(true)}>Edit</button>
        </div>
      )}
    </div>
  );
}
 
export default UserDetailPage;

Explicação:

• UserEditForm: Este é um componente de formulário que permite aos usuários editar e enviar novos dados.
• Integração e Estado: UserDetailPage gerencia o estado de edição e atualiza os dados do usuário. Quando o usuário clica em “Edit”, o componente de edição é mostrado.
• Atualização de Usuários: A função handleSave lida com a atualização dos dados do usuário usando o serviço updateUser, atualiza o estado do usuário na interface e retorna ao modo de visualização.

Esse exemplo ilustra como você pode estruturar um fluxo de edição de usuário dentro de uma aplicação React, mantendo uma boa separação de responsabilidades entre a lógica de UI e de serviço.