How to update GRUD status?

Question

How do I update the status ?

How do I click register and update the screen on time, and when to click X it delete and also update the page on time. I’m not getting, I have to give an update on the manual page.

Personal API is a json file and was used json-server to simulate. Exercise also needs to use Typescript.

follows the code.

import React, { useEffect, useRef, useState } from 'react';
import './App.css';
import axios from 'axios'

function App() {

  const [usuarios, setUsuarios] = useState<any>([])

  const inputNome = useRef<HTMLInputElement>(null)
  const inputIdade = useRef<HTMLInputElement>(null)
  const inputEmpresa = useRef<HTMLInputElement>(null)
  const inputTelefone = useRef<HTMLInputElement>(null)

  const mostraUsuarios = () => {
    axios.get("http://localhost:4000/usuarios")
      .then(resposta => setUsuarios(resposta.data))
  }

  const enviarCadastro = () => {

    const requisicao = {
      name: inputNome.current?.value,
      age: inputIdade.current?.value,
      company: inputEmpresa.current?.value,
      phone: inputTelefone.current?.value
    }

    axios.post("http://localhost:4000/usuarios", requisicao)
    mostraUsuarios()
  }

  useEffect(() => {
    mostraUsuarios()
  }, [])

  const deletarUsuario = (id: any) => {
    axios.delete(`http://localhost:4000/usuarios/${id}`)
    mostraUsuarios()
  }

  return (
    <div className="App">
      <input type="text" placeholder="Nome" ref={inputNome} />
      <input type="text" placeholder="Idade" ref={inputIdade} />
      <input type="text" placeholder="Empresa" ref={inputEmpresa} />
      <input type="text" placeholder="Telefone" ref={inputTelefone} />
      <button onClick={enviarCadastro}>Cadastrar</button>

      <br/>

      <ul>
        
        { usuarios !== null && 
          usuarios.map((item: any) => (
            <li key={item.id}>{item.name}  <button onClick={() => deletarUsuario(item.id)}>X</button></li>
          ))
        }
      </ul>
    </div>
  );
}

export default App;

Answer 1

I generated a minimal example and it worked practically with your code, I made a change enviarCadastro that at the time of insertion and on return is identified if the statusreturn 201 that says the record was created and so I used the return data to update the list, example:

import React, { FormEvent, useEffect, useRef, useState } from 'react';
import axios from 'axios';

interface IUser {
  id?: number;
  name?: string;
  age?: number;
  company?: string;
  phone?: string;
}

function User() {
  const [usuarios, setUsuarios] = useState<IUser[]>([]);

  const inputNome = useRef<HTMLInputElement>(null);
  const inputIdade = useRef<HTMLInputElement>(null);
  const inputEmpresa = useRef<HTMLInputElement>(null);
  const inputTelefone = useRef<HTMLInputElement>(null);

  const mostraUsuarios = () => {
    axios
      .get('http://localhost:4000/usuarios')
      .then((resposta) => setUsuarios(resposta.data));
  };

  const deleteUsuario = (id?: number) => {
    axios.delete(`http://localhost:4000/usuarios/${id}`).then(() => {
      setUsuarios(usuarios.filter((x) => x.id !== id));
    });
  };

  const enviarCadastro = (e: FormEvent) => {
    e.preventDefault();
    const requisicao: IUser = {
      name: inputNome.current?.value,
      age: parseInt(inputIdade.current?.value || '0'),
      company: inputEmpresa.current?.value,
      phone: inputTelefone.current?.value,
    };
    axios
      .post('http://localhost:4000/usuarios', requisicao)
      .then((response) => {
        if (response.status === 201) {
          setUsuarios((state) => [...state, { ...response.data }]);
        }
      });
  };

  useEffect(() => {
    mostraUsuarios();
  }, []);

  return (
    <div>
      <form>
        <input type="text" placeholder="Nome" ref={inputNome} />
        <input type="text" placeholder="Idade" ref={inputIdade} />
        <input type="text" placeholder="Empresa" ref={inputEmpresa} />
        <input type="text" placeholder="Telefone" ref={inputTelefone} />
        <button onClick={enviarCadastro}>Cadastrar</button>
      </form>
      <div>
        {usuarios &&
          usuarios.map((u, i) => (
            <div key={i}>
              {u.name} - {u.company} - {u.age} - {u.phone}
              <button onClick={() => deleteUsuario(u.id)}>Excluir</button>
            </div>
          ))}
      </div>
    </div>
  );
}

export default User;