Add 'GetPayment' logic to RoomPage

backend/src/dutch_broomstick/urls.py

@@ -26,7 +26,7 @@
          views.LayerDetailView.as_view()),
 
     # payment urls
-    path('rooms/<str:url>/layers/<int:number>/payments',
+    path('rooms/<str:url>/layers/<int:number>/payments/',
          views.PaymentCreateView.as_view()),
     path('rooms/<str:url>/layers/<int:number>/payments/<str:id>',
          views.PaymentDetailView.as_view()),

frontend/src/components/organisms/PaymentList/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
-import { Button, List, Block } from 'components'
+import { Button, List, ListItem, Block } from 'components'
 
 
 const PaymentList = ({ paymentlist, roomurl }) => (
@@ -15,7 +15,7 @@ const PaymentList = ({ paymentlist, roomurl }) => (
         {
           paymentlist && paymentlist.map(
             ({ forWhat, fromWho, total }, idx) => (
-              <Listitem key={idx} title={`${forWhat}${fromWho}`} description={total} linkTo={`/room/:${roomurl}/payment_list/${forWhat}`} />
+              <ListItem key={idx} title={`${forWhat}${fromWho}`} description={total} linkTo={`/room/:${roomurl}/payment_list/${forWhat}`} />
             )
           )
         }

frontend/src/components/pages/RoomPage/index.js

@@ -7,15 +7,19 @@ import { getMemberDebtList, getSimplifiedGraph } from 'services/simplifier'
 import { Link } from 'react-router-dom'
 
 const RoomPage = props => {
-  const { room, members, showPayment, onClickMember, onToggle } = props
+  const { room, members, showPayment, payments, onClickMember, onToggle } = props
   if (!room) return <Block transparent>Loading...</Block>
-
-  // const graph = getSimplifiedGraph(getMemberDebtList(props.payments))
+
   const graph = {
     nodes: (members || []).map(m => ({ id: m.membername, label: m.membername })),
     edges: [],
   }
 
+  if (payments) {
+    const { edges } = getSimplifiedGraph(getMemberDebtList(payments))
+    graph.edges = edges
+  }
+
   const events = {
     selectNode(evt) {
       const nodeId = evt.nodes.find(() => true)

frontend/src/containers/PaymentList.js

@@ -22,7 +22,7 @@ const PaymentListContainer = (props) => {
 const mapStateToProps = (state) => ({
     username : state.user.username,
     roomname : state.room.room.roomname,
-    paymentlist : state.payment.paymentlist,
+    paymentlist : state.payment.payments,
     roomurl : state.room.room.url,
 })
 

frontend/src/containers/RoomPage.js

@@ -33,7 +33,7 @@ const mapStateToProps = state => ({
   room: state.room.room,
   member: state.room.member,
   members: state.member.members,
-  payments: state.room.payments,
+  payments: state.payment.payments,
   showPayment: state.room.showPayment,
 })
 

frontend/src/store/payment/actions.js

@@ -1,6 +1,7 @@
 
 export const PAYMENT_CREATE_REQUEST = "PAYMENT_CREATE_REQUEST"
 export const PAYMENT_CREATE_SUCCESS = "PAYMENT_CREATE_SUCCESS"
+export const PAYMENT_CREATE_FAILED = "PAYMENT_CREATE_FAILED"
 
 export const paymentCreateRequest = (room, payment) => ({
   type: PAYMENT_CREATE_REQUEST,
@@ -9,5 +10,33 @@ export const paymentCreateRequest = (room, payment) => ({
 })
 
 export const paymentCreateSuccess = (room, payment) => ({
-
+  type: PAYMENT_CREATE_SUCCESS,
+  room,
+  payment,
+})
+
+export const paymentCreateFailed = error => ({
+  tpe: PAYMENT_CREATE_FAILED,
+  error,
+})
+
+
+export const PAYMENT_GET_REQUEST = "PAYMENT_GET_REQUEST"
+export const PAYMENT_GET_SUCCESS = "PAYMENT_GET_SUCCESS"
+export const PAYMENT_GET_FAILED = "PAYMENT_GET_FAILED"
+
+export const paymentGetRequest = room => ({
+  type: PAYMENT_GET_REQUEST,
+  room,
+})
+
+export const paymentGetSuccess = (room, payments) => ({
+  type: PAYMENT_GET_SUCCESS,
+  room,
+  payments,
+})
+
+export const paymentGetFailed = error => ({
+  type: PAYMENT_GET_FAILED,
+  error,
 })

frontend/src/store/payment/reducer.js

@@ -1,6 +1,7 @@
 import {
-  } from 'store/actions'
-import {  } from './actions';
+  ROOM_LEAVE,
+} from 'store/actions'
+import * as actions from './actions';
 
   const initialState = {
     //after simplify, if room -> individual, update a member's send or get datas 
@@ -11,10 +12,29 @@ import {  } from './actions';
     //if individual -> account, update a senddata and call data's member's account
     senddata : null,
     accounts : null,
+
+    payments: null,  // 방의 결제 정보
   }
 
   const paymentReducer = (state = initialState, action) => {
     switch(action.type) {
+      case actions.PAYMENT_CREATE_SUCCESS:
+        return {
+          ...state,
+          payments: [
+            ...(state.payments || []),
+            action.payment,
+          ]
+        }
+      case actions.PAYMENT_GET_SUCCESS:
+        return {
+          ...state,
+          payments: action.payments,
+        }
+      case ROOM_LEAVE:
+        return {
+          ...initialState,
+        }
       default:
         return state
     }

frontend/src/store/payment/sagas.js

@@ -5,16 +5,33 @@ import * as actions from './actions'
 
 function* createRequest({ room, payment }) {
   try {
-    yield api.post(`/rooms/${room.url}/layers/0/payments`, { ...payment })
+    const newPayment = yield api.post(`/rooms/${room.url}/layers/0/payments/`, { ...payment })
+    yield put(actions.paymentCreateSuccess(room, newPayment))
   } catch(e) {
-    console.log(e)
+    yield put(actions.paymentCreateFailed(yield e.response.json()))
   }
 }
 
 function* watchPaymentCreateRequest() {
   yield takeEvery(actions.PAYMENT_CREATE_REQUEST, createRequest)
 }
 
+
+function* getRequest({ room, }) {
+  try {
+    const payments = yield api.get(`/rooms/${room.url}/layers/0/payments/`)
+    yield put(actions.paymentGetSuccess(room, payments))
+  } catch(e) {
+    yield put(actions.paymentGetFailed(yield e.response.json()))
+  }
+}
+
+function* watchPaymentGetRequest() {
+  yield takeEvery(actions.PAYMENT_GET_REQUEST, getRequest)
+}
+
+
 export default function* () {
   yield fork(watchPaymentCreateRequest)
-}
+  yield fork(watchPaymentGetRequest)
+}

frontend/src/store/room/sagas.js

@@ -7,7 +7,7 @@ import api from 'services/api'
  */
 
 import * as actions from './actions'
-import { memberGetRequest } from 'store/actions'
+import { memberGetRequest, paymentGetRequest } from 'store/actions'
 
 
 /* Room Create Request */
@@ -57,6 +57,7 @@ function* getRequest({ url }) {
     const room = yield api.get(`/rooms/${url}/`)
     yield put(actions.roomGetSuccess(room))
     yield put(memberGetRequest(url))
+    yield put(paymentGetRequest(room))
   } catch(e) {
     yield put(actions.roomGetFailed(e))
   }