refactor: Move selectors to their own file

fix: CAN REBASE AMEND, Infer status from state

feat: Infer status

Author: kyranjamie

components/maker/status/index.js

@@ -70,8 +70,8 @@ const Status = ({ app, status }) => {
 
         {isReady ? <AppMiningComplete /> : <AppMiningIncomplete/>}
 
-        <ItemToCompleteField label="Payment details" status={status.paymentDetailsComplete || hasPaymentDetails(app)} />
-        <ItemToCompleteField label="Identity Verification" status={status.kycComplete || app.hasCollectedKYC} />
+        <ItemToCompleteField label="Payment details" status={hasPaymentDetails(app)} />
+        <ItemToCompleteField label="Identity Verification" status={app.hasCollectedKYC} />
         <ItemToCompleteField label="Tax Documents" status={app.isKYCVerified} />
         <ItemToCompleteField label="SEC Participation Agreement" status={app.hasAcceptedSECTerms} />
       </Box>

pages/maker/index.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react'
 import { Flex, Box, Type } from 'blockstack-ui'
 import { connect } from 'react-redux'
 
-import { selectMaker, selectAppList, selectCurrentApp } from '@stores/maker/reducer'
+import { selectMaker, selectAppList, selectCurrentApp, selectCompetionStatus } from '@stores/maker/selectors'
 import { fetchApps, selectAppAction } from '@stores/maker/actions'
 import { selectApiServer, selectUser } from '@stores/apps/selectors'
 import { Page } from '@components/page'
@@ -12,9 +12,8 @@ import { MakerContainer, MakerContentBox, MakerStickyStatusBox } from '@componen
 
 const MakerPortal = ({ apiServer, user, maker, loading, errorMessage, appList, selectedApp, dispatch }) => {
 
-  useEffect(() => {
-    fetchApps({ apiServer, user })(dispatch)
-  }, [])
+const MakerPortal = ({ query, params, apiServer, user, maker, errorMessage, appList, selectedApp, competionStatus, dispatch }) => {
+  console.log('Rendering component')
 
   const app = selectedApp
 
@@ -55,7 +54,7 @@ const MakerPortal = ({ apiServer, user, maker, loading, errorMessage, appList, s
             <Maker.Status
               app={app}
               apiServer={apiServer}
-              status={maker.status}
+              status={competionStatus}
             />
           </MakerStickyStatusBox>
           <Box>
@@ -96,7 +95,8 @@ const mapStateToProps = (state) => ({
   apiServer: selectApiServer(state),
   maker: selectMaker(state),
   appList: selectAppList(state),
-  selectedApp: selectCurrentApp(state)
+  selectedApp: selectCurrentApp(state),
+  competionStatus: selectCompetionStatus(state)
 })
 
 export default connect(mapStateToProps)(MakerPortal)

stores/maker/actions.js

@@ -17,9 +17,11 @@ export const SELECT_APP = '[Maker Page] SELECT_APP'
 
 export const errorAction = () => ({ type: MAKER_AUTH_ERROR })
 export const setLoadingDoneAction = () => ({ type: SET_LOADING_DONE })
-export const setPaymentDetailsComplete = () => ({ type: SET_PAYMENT_DETAILS_COMPLETE })
 export const savePaymentDetailsAction = () => ({ type: SAVE_PAYMENT_DETAILS })
-export const savePaymentDetailsDoneAction = () => ({ type: SAVE_PAYMENT_DETAILS_DONE })
+export const savePaymentDetailsDoneAction = addresses => ({
+  type: SAVE_PAYMENT_DETAILS_DONE,
+  payload: addresses
+})
 export const savePaymentDetailsFailAction = () => ({ type: SAVE_PAYMENT_DETAILS_FAIL })
 
 export const setKycComplete = () => ({ type: SET_KYC_COMPLETE })
@@ -46,14 +48,12 @@ export const savePaymentDetails = ({ apiServer, appId, jwt, btcAddress, stxAddre
       })
     })
     await response.json()
-    dispatch(setPaymentDetailsComplete())
-    dispatch(savePaymentDetailsDoneAction())
+    dispatch(savePaymentDetailsDoneAction({ appId, btcAddress, stxAddress }))
   } catch (error) {
     dispatch(savePaymentDetailsFailAction(error))
   }
 }
 
-
 export const fetchApps = ({ user, apiServer }) => async dispatch => {
   dispatch(fetchAppsAction())
   if (!(user && user.jwt)) {
@@ -74,4 +74,3 @@ export const fetchApps = ({ user, apiServer }) => async dispatch => {
     dispatch(fetchAppsFailAction())
   }
 }
-

stores/maker/reducer.js

@@ -7,21 +7,12 @@ const initialState = {
   appIds: [],
   appEntities: {},
   selectedAppId: null,
-  errorMessage: null,
-  status: {
-    paymentDetailsComplete: false,
-    kycComplete: false,
-    legalComplete: false
-  }
+  errorMessage: null
 }
 
-const updateStatus = (state, props) => ({
-  ...state,
-  status: { ...state.status, ...props }
-})
-
 function makerReducer(state = initialState, action) {
   switch (action.type) {
+
     case MakerActions.SET_LOADING_DONE:
       return {
         ...state,
@@ -43,15 +34,6 @@ function makerReducer(state = initialState, action) {
         selectedAppId: action.payload.apps.length ? action.payload.apps[0].id : null
       }
 
-    case MakerActions.SET_PAYMENT_DETAILS_COMPLETE:
-      return updateStatus(state, { paymentDetailsComplete: true })
-
-    case MakerActions.SET_KYC_COMPLETE:
-      return updateStatus(state, { kycComplete: true })
-
-    case MakerActions.SET_LEGAL_COMPLETE:
-      return updateStatus(state, { legalComplete: true })
-
     case MakerActions.SELECT_APP:
       return { ...state, selectedAppId: action.payload }
 
@@ -60,8 +42,8 @@ function makerReducer(state = initialState, action) {
         ...state,
         appEntities: {
           ...state.appEntities,
-          [action.payload.id]: {
-            ...state.appEntities[action.payload.id],
+          [action.payload.appId]: {
+            ...state.appEntities[action.payload.appId],
             BTCAddress: action.payload.btcAddress,
             stacksAddress: action.payload.stxAddress
           }
@@ -74,7 +56,3 @@ function makerReducer(state = initialState, action) {
 }
 
 export default makerReducer
-
-export const selectMaker = state => state.maker
-export const selectAppList = state => state.maker.appIds.map(id => state.maker.appEntities[id])
-export const selectCurrentApp = state => state.maker.appEntities[state.maker.selectedAppId]

stores/maker/selectors.js

@@ -0,0 +1,23 @@
+const updateEntity = (state, id, newProps) => ({
+  ...state,
+  appEntities: {
+    ...state.appEntities,
+    [id]: {
+      ...state.appEntities[id],
+      ...newProps
+    }
+  }
+})
+
+export const selectMaker = state => state.maker
+
+export const selectAppList = state => state.maker.appIds.map(id => state.maker.appEntities[id])
+
+export const selectCurrentApp = state => state.maker.appEntities[state.maker.selectedAppId]
+
+// export const selectCompetionStatus = state => {
+//   const selectedApp = state.appEntities[state.selectedAppId]
+//   return {
+//     paymentDetailsComplete
+//   }
+// }