Payment Viewer Frontend page

frontend/src/components/App.js

@@ -29,7 +29,8 @@ const App = () => {
         <Route path="/user/setting/" component={UserInfoPage} exact  />
         <Route path="/user/create_room/" component={RoomCreatePage} exact  />
         <Route path="/user/:room_id/entrance/" component={EntrancePage} />
-        <Route path="/room/:room_id/payment/" component={PaymentPage} />
+        <Route path="/room/:room_id/payment/" component={PaymentPage} exact />
+        <Route path="/room/:room_id/payment/:payment_id/" component={PaymentPage} exact />
         <Route path="/room/:room_id/setting/" component={RoomSettingPage} />
         <Route path="/room/:room_id/member/:member/" component={IndividualPage} exact />
         <Route path="/room/:room_id/member/:member/:to" component={AccountPage} />

frontend/src/components/atoms/Button/index.js

@@ -16,6 +16,12 @@ const Button = styled.button`
   width: 100%;
   max-width: 224px;
   z-index: 1;
+
+  :disabled {
+    background-color: lightgrey;
+    color: grey;
+    cursor: none;
+  }
 `
 
 const LightButton = styled(Button)`

frontend/src/components/atoms/Graph/index.js

@@ -11,7 +11,6 @@ const Wrapper = styled.div`
   padding-top: 100%;
   width: 100%;
   position: relative;
-  z-index: -1;
 `
 
 const Content = styled.div`

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

@@ -32,7 +32,8 @@ const Credit = ({ member: {membername}, index, ...props }) => (
   />
 )
 
-const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total, nBbang, ...props }) => {
+const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total, nBbang, ...rest }) => {
+  const { disabled } = rest
   return (
     <Form onSubmit={handleSubmit}>
       <Block>
@@ -78,7 +79,7 @@ const PaymentForm = ({ handleSubmit, room, members, payment, amountLeft, total,
         >
             취소
         </LinkButton>
-        <Button type="submit" horizontal>확인</Button>
+        <Button type="submit" horizontal disabled={disabled}>확인</Button>
       </Block>
     </Form>
   )

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

@@ -14,8 +14,12 @@ const PaymentList = ({ paymentlist, roomurl }) => (
       <List>
         {
           paymentlist && paymentlist.map(
-            ({ forWhat, fromWho, total }, idx) => (
-              <ListItem key={idx} title={`${forWhat}${fromWho}`} description={total} linkTo={`/room/${roomurl}/payment_list/${forWhat}`} />
+            ({ id, forWhat, fromWho, total }, idx) => (
+              <ListItem key={idx}
+                title={`${forWhat} - ${fromWho}`}
+                description={total}
+                linkTo={`/room/${roomurl}/payment/${id}/`}
+              />
             )
           )
         }

frontend/src/containers/PaymentForm.js

@@ -54,16 +54,25 @@ const mapDispatchToProps = dispatch => ({
   }
 })
 
-const PaymentFormContainer = ({...props}) => {
-  const initialValues = {
-    credits: props.members.map(
-      ({ membername }) => ({ toWho: membername, amount: 0.0 })
-    ),
-    room: props.room,
-  } 
+const PaymentFormContainer = ({payment, ...props}) => {
+  const initialValues = (payment ? 
+    {  // if payment exists
+      ...payment,
+      room: props.room,
+    } :
+    {  // if payment doesn't exist
+      credits: props.members.map(
+        ({ membername }) => ({ toWho: membername, amount: 0.0 })
+      ),
+      room: props.room,
+    }
+  )
+
+  console.log(initialValues)
 
   return (
     <PaymentReduxForm
+      disabled={!!payment}
       initialValues={initialValues}
       {...props}
     />

frontend/src/containers/PaymentPage.js

@@ -3,14 +3,16 @@ import { connect } from 'react-redux'
 
 import { PaymentPage } from 'components'
 
-const PaymentPageContainer = props => {
-  return <PaymentPage {...props} />
+const PaymentPageContainer = ({ match, payments, ...props }) => {
+  const paymentId = parseInt(match.params.payment_id)
+  const payment = payments.find(p => p.id === paymentId)
+  return <PaymentPage payment={payment} {...props} />
 }
 
 const mapStateToProps = state => ({
   room: state.room.room,
   members: state.member.members,
-  payment: state.payment.payment,
+  payments: state.payment.payments,
 })
 
 export default connect(mapStateToProps)(PaymentPageContainer)

frontend/src/store/sagas.js

@@ -11,7 +11,7 @@ const req = require.context('.', true, /\.\/.+\/sagas\.js$/)
 const sagas = req.keys().map(key => req(key).default)
 
 sagas.push(function* () {
-  yield takeEvery(a => a.error, function* ({ type, error }) {
+  yield takeEvery(a => a.error && a.type[0] !== '@', function* ({ type, error }) {
     toastError(type, JSON.stringify(error))
   })
 })