Merge f9e8ea5 into 6f1d5d3

src/__tests__/__snapshots__/App.test.js.snap

@@ -28,13 +28,16 @@ exports[`<App /> Should render the <App /> component. 1`] = `
       </span>
     </div>
     <div
-      class="StyledBox-sc-13pk1d4-0 IRSNj"
+      class="StyledBox-sc-13pk1d4-0 laNWCK"
     >
       <h3
         class="StyledHeading-sc-1rdh4aw-0 ftOecI"
       >
         Contracts
       </h3>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+      />
       <div
         class="StyledBox-sc-13pk1d4-0 ffeAql"
       >
@@ -83,6 +86,28 @@ exports[`<App /> Should render the <App /> component. 1`] = `
         >
           3
         </span>
+        <div
+          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 iChEkS"
+        />
+        <button
+          class="StyledButton-sc-323bzc-0 jJyttA"
+          disabled=""
+          type="button"
+          value="0"
+        >
+          <svg
+            aria-label="Checkmark"
+            class="StyledIcon-ofa7kd-0 iOkQrb"
+            viewBox="0 0 24 24"
+          >
+            <polyline
+              fill="none"
+              points="2 14 9 20 22 4"
+              stroke="#000"
+              stroke-width="2"
+            />
+          </svg>
+        </button>
       </div>
     </div>
     <div

src/__tests__/components/ContractsDisplay.test.js

@@ -0,0 +1,33 @@
+import { customRender } from '../../test-utils'
+import ContractsDisplay from '../../components/ContractsDisplay'
+import { defaultState } from '../../fixtures'
+import { fireEvent } from '@testing-library/dom';
+
+const customState = {
+  ...defaultState,
+  user: {
+    ...defaultState.user,
+    contracts: [{ id: '0', itemType: 'Plasma', value: 2, volume: 1 }]
+  }
+}
+
+describe('<ContractsDisplay />', () => {
+  it('Should render the <ContractsDisplay /> component.', () => {
+    const container = customRender({
+      component: ContractsDisplay,
+      state: customState
+    })
+    expect(container.asFragment()).toMatchSnapshot()
+  })
+
+  it('Should handle selecting a contract.', () => {
+    const { debug, container } = customRender({
+      component: ContractsDisplay,
+      state: customState
+    })
+
+    const button = container.querySelector('button')
+
+    fireEvent.click(button)
+  })
+})

src/__tests__/components/__snapshots__/ContractsDisplay.test.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ContractsDisplay /> Should render the <ContractsDisplay /> component. 1`] = `
+<DocumentFragment>
+  <div
+    class="StyledBox-sc-13pk1d4-0 laNWCK"
+  >
+    <h3
+      class="StyledHeading-sc-1rdh4aw-0 ftOecI"
+    >
+      Contracts
+    </h3>
+    <div
+      class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+    />
+    <div
+      class="StyledBox-sc-13pk1d4-0 ffeAql"
+    >
+      <span
+        class="StyledText-sc-1sadyjn-0 bnqisW"
+      >
+        Item Type
+      </span>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 iChEkS"
+      />
+      <span
+        class="StyledText-sc-1sadyjn-0 fWSbXS"
+      >
+        Ore
+      </span>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 iChEkS"
+      />
+      <span
+        class="StyledText-sc-1sadyjn-0 bnqisW"
+      >
+        Volume
+      </span>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 iChEkS"
+      />
+      <span
+        class="StyledText-sc-1sadyjn-0 fWSbXS"
+      >
+        1
+      </span>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 iChEkS"
+      />
+      <span
+        class="StyledText-sc-1sadyjn-0 bnqisW"
+      >
+        Value
+      </span>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 iChEkS"
+      />
+      <span
+        class="StyledText-sc-1sadyjn-0 fWSbXS"
+      >
+        3
+      </span>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 iChEkS"
+      />
+      <button
+        class="StyledButton-sc-323bzc-0 jJyttA"
+        disabled=""
+        type="button"
+        value="0"
+      >
+        <svg
+          aria-label="Checkmark"
+          class="StyledIcon-ofa7kd-0 iOkQrb"
+          viewBox="0 0 24 24"
+        >
+          <polyline
+            fill="none"
+            points="2 14 9 20 22 4"
+            stroke="#000"
+            stroke-width="2"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/components/ContractsDisplay.js

@@ -1,12 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Box, Heading, Text } from 'grommet'
+import { Box, Heading, Text, Button } from 'grommet'
+import { Checkmark, Close } from 'grommet-icons'
 import { connect } from 'react-redux'
+import { resetContract, setContract } from '../redux/actions/user'
 
-const ContractsDisplay = ({ contracts }) => {
+const ContractsDisplay = ({
+  contracts,
+  currentContract,
+  handleResetContract,
+  handleSetContract
+}) => {
   return (
-    <Box>
+    <Box gap="small" margin={{ vertical: 'medium' }}>
       <Heading level="3">Contracts</Heading>
+      {currentContract && (
+        <Box direction="row" gap="small">
+          <Text>Current Contract: {currentContract.id}</Text>
+          <Button
+            hoverIndicator
+            icon={<Close />}
+            onClick={() => handleResetContract()}
+            plain
+          />
+        </Box>
+      )}
       {contracts.map(contract => (
         <Box direction="row" key={contract.id} gap="small">
           <Text weight="bold">Item Type</Text>
@@ -15,18 +33,48 @@ const ContractsDisplay = ({ contracts }) => {
           <Text>{contract.volume}</Text>
           <Text weight="bold">Value</Text>
           <Text>{contract.value}</Text>
+          <Button
+            disabled={currentContract !== null}
+            hoverIndicator
+            icon={<Checkmark />}
+            onClick={e =>
+              handleSetContract(
+                contracts.find(
+                  contract => contract.id === e.target.parentElement.value
+                )
+              )
+            }
+            plain
+            value={contract.id}
+          />
         </Box>
       ))}
     </Box>
   )
 }
 
 ContractsDisplay.propTypes = {
-  contracts: PropTypes.array.isRequired
+  contracts: PropTypes.array.isRequired,
+  currentContract: PropTypes.object,
+  handleResetContract: PropTypes.func.isRequired,
+  handleSetContract: PropTypes.func.isRequired
 }
 
-const mapStateToProps = ({ world }) => ({
-  contracts: world.contracts
+const mapStateToProps = ({ user, world }) => ({
+  contracts: world.contracts,
+  currentContract: user.contract
+})
+
+const mapDispatchToProps = dispatch => ({
+  handleResetContract: () => {
+    dispatch(resetContract())
+  },
+  handleSetContract: contract => {
+    dispatch(setContract(contract))
+  }
 })
 
-export default connect(mapStateToProps)(ContractsDisplay)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ContractsDisplay)

src/redux/actions/user.js

@@ -1,11 +1,21 @@
 // * ACTION TYPES
 const ADD_CASH = 'ADD_CASH'
 const REMOVE_CASH = 'REMOVE_CASH'
+const RESET_CONTRACT = 'RESET_CONTRACT'
+const SET_CONTRACT = 'SET_CONTRACT'
 
 // * ACTION GENERATORS
 export const addCash = amount => ({ type: ADD_CASH, payload: { amount } })
+
 export const removeCash = amount => ({ type: REMOVE_CASH, payload: { amount } })
 
+export const resetContract = () => ({ type: RESET_CONTRACT })
+
+export const setContract = contract => ({
+  type: SET_CONTRACT,
+  payload: { contract }
+})
+
 // * PROMISES
 
 // * THUNKS

src/redux/reducers/user.js

@@ -1,5 +1,6 @@
 const userDefaultState = {
-  cash: 100
+  cash: 100,
+  contract: null
 }
 
 export default (state = userDefaultState, action) => {
@@ -8,6 +9,10 @@ export default (state = userDefaultState, action) => {
       return { ...state, cash: state.cash + action.payload.amount }
     case 'REMOVE_CASH':
       return { ...state, cash: state.cash - action.payload.amount }
+    case 'RESET_CONTRACT':
+      return { ...state, contract: null }
+    case 'SET_CONTRACT':
+      return { ...state, contract: action.payload.contract }
     default:
       return state
   }