Merge branch 'master' into bugs2

backend/src/dutch_broomstick/tests.py

@@ -151,7 +151,7 @@ def test_create_payment(self):
 
         # Payment 생성 요청
         response = self.client.post(
-            f"/api/rooms/{room_json.get('url')}/layers/0/payments",
+            f"/api/rooms/{room_json.get('url')}/layers/0/payments/",
             {
                 'fromWho': 'test1',
                 'forWhat': "고깃집",

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,19 +7,28 @@ 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)
-      onClickMember(members.find(m => m.membername === nodeId))
+      const member = members.find(m => m.membername === nodeId)
+      onClickMember(
+        member,
+        graph.edges.filter(({from}) => from === nodeId),
+        graph.edges.filter(({to}) => to === nodeId),
+      )
     }
   }
 

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,14 +33,16 @@ 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,
 })
 
 const mapDispatchToProps = dispatch => ({
   onGetRoom: (url) => dispatch(roomGetRequest(url)),
   onLeave: () => dispatch(roomLeave()),
-  onClickMember: member => dispatch(roomSetMember(member)),
+  onClickMember: (member, sendlist, getlist) => {
+    dispatch(roomSetMember(member, sendlist, getlist))
+  },
   onToggle: () => dispatch(roomToggleContents()),
 })
 

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,7 +10,35 @@ 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,
 })
 
 export const ACCOUNT_IN_REQUEST = "ACCOUNT_IN_REQUEST"

frontend/src/store/payment/reducer.js

@@ -1,6 +1,8 @@
 import {
-  } from 'store/actions'
-import { ACCOUNT_IN_REQUEST } from './actions';
+  ROOM_LEAVE,
+  ROOM_SET_MEMBER,
+} from 'store/actions'
+import * as actions from './actions';
 
   const initialState = {
     //after simplify, if room -> individual, update a member's send or get datas 
@@ -11,19 +13,43 @@ import { ACCOUNT_IN_REQUEST } 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 ACCOUNT_IN_REQUEST:
+      case actions.ACCOUNT_IN_REQUEST:
         const edge = state.getlist.find(m => action.toname == m.to)
         const acc = action.member.find(m => edge.to == m.membername)
         return {
           ...state,
           senddata: edge,
           accounts: acc.account,
         }
-
+      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,
+        }
+      case ROOM_SET_MEMBER:
+        return {
+          ...state,
+          sendlist: action.sendlist,
+          getlist: action.getlist,
+        }
       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/actions.js

@@ -89,9 +89,11 @@ export const roomLeave = () => ({ type: ROOM_LEAVE })
 
 export const ROOM_SET_MEMBER = "ROOM_SET_MEMBER"
 
-export const roomSetMember = member => ({
+export const roomSetMember = (member, sendlist, getlist) => ({
   type: ROOM_SET_MEMBER,
   member,
+  sendlist,
+  getlist,
 })
 
 

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))
   }