추가하기 ( input으로 입력 받은 데이터 추가하기 )

- SPA ( Single Page Application )

 

import logo from './logo.svg';

import './App.css';

import {useEffect, useState } from 'react';

import UserList from './components/UserList';

import { fetchUserList, fetchUserSave  } from './http/HttpService';

import ResponeError from './components/ResponseError';

function App() {

  const [userList, SetUserList] = useState([]);

  const [error, SetError] = useState(null);

  const [modalIsOpen, SetModalIsOpen] = useState(false);

  const [dele, SetDele] = useState(null);

  const [isEdit, SetIsEdit] = useState({

    id:"",

    email:"",

    first_name: "",

    last_name: "",

    avatar: "https://reqres.in/img/faces/12-image.jpg"

  });

  const [inputs, setInputs] = useState({id: "", email: "", first_name: "", last_name: ""});

  //input 태그 저장

  function handleChange(e){

    var new_inputs = {...inputs, [e.target.name]:e.target.value}

    setInputs(new_inputs);

  }

  //form 태그 안에 input 쓰면 자동으로 submit 걸림

  // 저장

  function handleSubmit(e){

    e.preventDefault();

    console.log("inputs:", inputs);

    //서버 연동

    let response = fetchUserSave(inputs);

    console.log("response:", response);

    //로컬 연동

    var new_userList = [...userList, inputs];

    SetUserList(new_userList);

  }

  console.log(userList);

  //서버에서 한번만 땡겨오면 됌, 단 한번만 실행은 빈배열 => []

  useEffect(()=>{

    var req = async function() {      

   

      try{

        var userList = await fetchUserList(2);

        SetUserList(userList);

      }catch(err){

        console.log("App.fetchUserList", err);

        SetError({message:"fetchUserList 에러발생"});

      }

    };

    req();

  }, []);

  //삭제 확인 - 모달창 이용해서 확인

  function handleRemove(del_id){

    console.log("App.handleRemove", del_id);

    SetModalIsOpen(modalIsOpen => !modalIsOpen);

    SetDele(del_id);

  }

  // 삭제 기능

  // 배열?에서 삭제할때는 삭제할려는 걸 뺀 나머지를 불러온다

  // 불변객체(새로운 배열)을 받아야함

  function handleRemoveConfirm(){

    console.log("App.handleRemoveConfirm");

    SetModalIsOpen(false);

    var new_userList = userList.filter((row,idx)=>row.id !== dele);

    SetUserList(new_userList);

  }

  function add(){

    SetIsEdit(isEdit=>!isEdit);

  }

  return (

    <div className="App">

      {/* 모달창 */}

      <dialog open={modalIsOpen}>

        <p>진짜로 삭제할까요</p>

        <button onClick={()=>SetModalIsOpen(modalIsOpen => !modalIsOpen)}>cancle</button>

        <button onClick={handleRemoveConfirm}>ok</button>

      </dialog>

     <h2>userList 목록</h2>

     { error && <ResponeError message={error}/> }

     { !error && <UserList userList={userList} onRemove={handleRemove}/> }

   

     <hr />

    <button onClick={add}>추가</button>

  { !isEdit &&

    <form onSubmit={handleSubmit}>

      id: <input type='text' name='id' onChange={handleChange} value={inputs.id} /><br></br>

      email: <input type='text' name='email' onChange={handleChange} value={inputs.email} /><br></br>

      first_name: <input type='text' name='first_name' onChange={handleChange} value={inputs.first_name} /><br></br>

      last_name: <input type='text' name='last_name' onChange={handleChange} value={inputs.last_name} /><br></br>

      <button>저장</button>

    </form>

  }

    </div>

  );

}

export default App;

 

 

 

 

export async function fetchUserList(n){

    var url = `https://reqres.in/api/users?page=${n}`;

    var response = await fetch(url, {

        method: 'GET'

    });

    if(!response.ok){

        console.log("fetchUserList Error 발생");

        throw new Error("fetchUserList Error 발생");

    }

    //예외가 발생되면 에러가 호출한 곳(fetchUserList)으로 넘어감

    //호출한곳에서 try catch 하면됨

    var json = await response.json();

    var userList = json.data;

    return userList;

}

export async function fetchUserUpdate(){

}

//POST 및 PUT 요청은 반드시 다음과 같은 코드를 사용

export async function fetchUserSave(user){

    var url = `https://reqres.in/api/users`;

    var response = await fetch(url, {

        method: 'POST',

        headers: {

            "Content-Type": "application/json",

           

        },

        body: JSON.stringify(user)

    });

    if(!response.ok){

        console.log("fetchUserList Error 발생");

        throw new Error("fetchUserList Error 발생");

    }

    //예외가 발생되면 에러는 호출한 곳으로 넘어감

    //호출한곳에서 try catch 하면됨

    var json = await response.json();

    var userList = json.data;

    return userList;

}