Money page implementation

[ghost]

Basic component design with react-data-grid

• react-data-grid package를 이용하여 basic table component를 구현하였습니다.
• Budget : total cost를 계산해줍니다.

• Expense : 사용자별 total cost를 계산해줍니다. (split, dutchpay 구현)

• 위의 screenshot data는 참고용으로 넣어놓은 것으로, data 추가 기능을 구현할 예정입니다.

[choppaluv]

Saga in Money Page - GET, POST

• money page의 budget, expense 모두 saga작업 완료하였습니다.

• 새로운 budget과 expense를 생성할 수 있습니다. (method=POST, status code=201)

• budget tab의 경우 backend에서 가져온 data를 component를 통해 보여주는 작업까지 완료하였습니다. (method=GET, status code=200)

• expense tab 또한 backend와의 통신이 잘 이루어져 data를 가져오나 component로 그려주는 작업은 아직 진행중에 있습니다.

[ghost]

Add buttons

• budget tab과 expense tab 각각에 antd form을 이용한 add button을 생성하였습니다.

• 입력을 하지 않고 add할 경우 경고도 지원됩니다.

[ghost]

Delete, Modify functions added

• list의 row를 선택하면 delete button으로 삭제할 수 있는 기능을 추가하였습니다.

• list의 cell을 double click하면 내용을 변경할 수 있는 기능을 추가하였습니다. (saga에서 PATCH 성공할 경우에만)

[choppaluv]

Saga in Money Page - PATCH, DELETE

• saga를 통해 backend에 PATCH request를 보내도록 하였으며 성공적으로 내용이 바뀌는 것을 확인하였습니다. (method=PATCH, status_code=200)

• saga를 통해 backend에 DELETE request를 보내도록 하였으며 성공적으로 삭제되는 것을 확인했습니다. (method=PATCH, status_code=204)
• 또한 여러개를 선택한 후 delete를 하는 경우에도 모두 성공적으로 삭제되는 것을 확인하였습니다.

[ghost]

Problem with component rendering update

• post나 delete 후 결과 반영이 바로 되지 않는 문제가 있었습니다. state 변경은 component가 바로 인식해서 render하지 않기 때문에 생기는 문제였습니다.
• 다음과 같이 두 개의 function을 overriding하여 해결하였습니다. componentWillReceiveProps는 props 변경을 인식하기 때문에 여기에서 setState를 해주면 render하기 전에 state를 변경할 수 있습니다. 그 이후 shouldComponentUpdate에서 props 변경 조건을 추가해주면 새로 rendering이 됩니다.

componentWillReceiveProps(nextProps) {
    console.log('####################componentWillReceiveProps', this.props,nextProps);
    if (nextProps.updated){
      var row = this.createRows(nextProps.budget.length,nextProps.budget)
      this.setState({selectedIndexes : [], rows:row[0], total: row[1]})
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
      console.log("#########shouldCOmponent",this.props, nextProps, this.state,nextState)
      return (nextProps.updated ) || (this.props!==nextProps) || (this.state!==nextState)
  }