diff --git a/backend/src/dutch_broomstick/tests.py b/backend/src/dutch_broomstick/tests.py index d019d35..aaefb1e 100644 --- a/backend/src/dutch_broomstick/tests.py +++ b/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': "고깃집", diff --git a/backend/src/dutch_broomstick/urls.py b/backend/src/dutch_broomstick/urls.py index b7bea4e..ec44a6f 100644 --- a/backend/src/dutch_broomstick/urls.py +++ b/backend/src/dutch_broomstick/urls.py @@ -26,7 +26,7 @@ views.LayerDetailView.as_view()), # payment urls - path('rooms//layers//payments', + path('rooms//layers//payments/', views.PaymentCreateView.as_view()), path('rooms//layers//payments/', views.PaymentDetailView.as_view()), diff --git a/frontend/src/components/organisms/PaymentList/index.js b/frontend/src/components/organisms/PaymentList/index.js index 6f4e4aa..2d40c12 100644 --- a/frontend/src/components/organisms/PaymentList/index.js +++ b/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) => ( - + ) ) } diff --git a/frontend/src/components/pages/RoomPage/index.js b/frontend/src/components/pages/RoomPage/index.js index 5a7b4dc..df8b3e3 100644 --- a/frontend/src/components/pages/RoomPage/index.js +++ b/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 Loading... - - // 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), + ) } } diff --git a/frontend/src/containers/PaymentList.js b/frontend/src/containers/PaymentList.js index 42f4582..848325f 100644 --- a/frontend/src/containers/PaymentList.js +++ b/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, }) diff --git a/frontend/src/containers/RoomPage.js b/frontend/src/containers/RoomPage.js index 89fbffb..6551d5f 100644 --- a/frontend/src/containers/RoomPage.js +++ b/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()), }) diff --git a/frontend/src/store/payment/actions.js b/frontend/src/store/payment/actions.js index c651dce..a86b1a7 100644 --- a/frontend/src/store/payment/actions.js +++ b/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" diff --git a/frontend/src/store/payment/reducer.js b/frontend/src/store/payment/reducer.js index ab0c002..26283fb 100644 --- a/frontend/src/store/payment/reducer.js +++ b/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,11 +13,13 @@ 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 { @@ -23,7 +27,29 @@ import { ACCOUNT_IN_REQUEST } from './actions'; 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 } diff --git a/frontend/src/store/payment/sagas.js b/frontend/src/store/payment/sagas.js index 30af91d..8284d13 100644 --- a/frontend/src/store/payment/sagas.js +++ b/frontend/src/store/payment/sagas.js @@ -5,9 +5,10 @@ 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())) } } @@ -15,6 +16,22 @@ 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) -} \ No newline at end of file + yield fork(watchPaymentGetRequest) +} diff --git a/frontend/src/store/room/actions.js b/frontend/src/store/room/actions.js index ecc3ede..e1b2464 100644 --- a/frontend/src/store/room/actions.js +++ b/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, }) diff --git a/frontend/src/store/room/sagas.js b/frontend/src/store/room/sagas.js index 722ea52..2e92846 100644 --- a/frontend/src/store/room/sagas.js +++ b/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)) }