비품 항목 Update and Insert

현지님이 비품이랑 관리비 항목 부분을 구현하시다가 떠나신 걸 발견해서 이어서 만들어봤다!

1. 비품 항목 기입 순서 최신순 정렬

• sort 를 사용해서 구현했다.

function Data() {
  let { id } = useParams() //비구조화 할당으로 id 변수에 useParams의 객체를 할당
  const [info, setInfos] = useState([])

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

  const fetchPost = async () => {
    const requestOptions = {
      roomID: id,
    }

    const fetchedPost = await axiosInstance
      .post(
        [
          'http://',
          config.NOW_IP,
          ':',
          config.PORT_NUMBER,
          config.ROOM_UTIL_LIST,
        ].join(''),
        requestOptions
      )
      .then(res => res.data)
      .catch(err => console.log(err.response.data))
    //const postContent = await fetchedPost.json()
    console.log('WHAT IS RESPONSE.Json: ', fetchedPost)
    setInfos(fetchedPost)
  }

  if (info !== null) {
    return info
      .sort(function (a, b) {
        a = new Date(a.createdAt)
        b = new Date(b.createdAt)
        return a > b ? -1 : a < b ? 1 : 0
      })
      .map(utils => {
        return (
          <div>
            <UtilItems
              id={utils.id}
              roomid={utils.RoomID}
              name={utils.Name}
              price={utils.Price}
              etc={utils.Etc}
              createdAt={utils.createdAt}
              updatedAt={utils.updatedAt}
            />
          </div>
        )
      })
  } else {
    return <div>No Data</div> //id변수에 담은 값을 div태그에 출력
  }
}

2. insert & Update 기능 구현

• insert와 거의 유사하게
• insert의 경우 button을 클릭할 경우 state를 통해 insert칸이 나오는 방법으로 구현되어 있었다.
• update의 경우 수정하기 버튼을 클릭할 경우 수정 url로 이동하고, placeholder로 값을 보여준다.
• state를 값을 수정하지 않는 경우도 존재하므로 각각 항목의 state를 이전에 받아온 값으로 초기화 진행 후 , 값 handle -> post
• 수정 완료 후 props.history.goBack() 함수를 통해 이전 페이지로 되돌아 간다.

// 수정하는 페이지로 이동하는 div .. UtilItems.js
          <Link
            to={{
              pathname: `/utils/${id}/update`,
              state: {
                id: this.props.id,
                roomid: this.props.roomid,
                name: this.props.name,
                price: this.props.price,
                etc: this.props.etc,
                createdAt: this.props.createdAt,
                updatedAt: this.props.updatedAt,
              },
            }}
          >
            <button className="util-update-button">수정 하기</button>
          </Link>

// 수정하기
function Data(e) {
  const location = useLocation()
  //location.state 안에 내가 보낸정보 (id ~ updatedAt) 다들어있음

  const [name, setName] = useState(location.state.name)
  const [price, setPrice] = useState(location.state.price)
  const [etc, setEtc] = useState(location.state.etc)

  const handleName = e => {
    var mydata = e.target.value
    setName(mydata)
  }

 //.. 다른 항목도 똑같이
 
  const handlePost = () => {
    let body = {
      id: location.state.id, //?
      name: name,
      price: price,
      etc: etc,
    }

    axiosInstance
      .post(
       ..
      )
      .then(res => {
        e.props.history.goBack()
        console.log(res)
      })
      .catch(err => console.log(err))
  }
  return (
    <div className="util-item-update-wrapper">
      <input
        className="util-item-update-name"
        placeholder={location.state.name}
        onChange={handleName}
      ></input>
     //.. 다른것도
      <button className="util-item-update-button" onClick={handlePost}>
        입력
      </button>
    </div>
  )
}
// to use data from roomitems page

class UtilItemUpdate extends Component {
  render() {
    return (
      <main className="util-item-update-template">
        <div className="util-item-update-title">비품 수정 페이지</div>
        <Data props={this.props} /> //props 전달
      </main>
    )
  }
}

..

쪽지 기능을 만들면서 공부한 부분과 비슷해서 금방 해결할 수 있었다.
table 형태로 값을 보이도록 수정해야지~