Skip to content
This repository was archived by the owner on Jan 6, 2023. It is now read-only.

Commit 2968cfe

Browse files
kyranjamiekyranjamie
committed
refactor: Create slice of state for maker portal
1 parent b870dfd commit 2968cfe

File tree

7 files changed

+209
-136
lines changed

7 files changed

+209
-136
lines changed

‎components/maker/modal.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import styled from 'styled-components'
55
import { CloseIcon } from '@components/svg/maker'
66

77
const customStyles = {
8+
overlay: {
9+
// above headroom header library
10+
zIndex: 100
11+
},
812
content : {
913
top: '50%',
1014
left: '50%',

‎components/maker/payment/helpers.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,3 @@ export const validateSTX = memoize(addr => {
1919
return false
2020
}
2121
})
22-
23-
export const savePaymentDetails = async ({ apiServer, appId, jwt, btcAddress, stxAddress }) => {
24-
const response = await fetch(`${apiServer}/api/maker/apps?appId=${appId}`, {
25-
method: 'POST',
26-
headers: new Headers({
27-
'Content-Type': 'application/json',
28-
authorization: `Bearer ${jwt}`
29-
}),
30-
body: JSON.stringify({
31-
BTCAddress: btcAddress,
32-
stacksAddress: stxAddress
33-
})
34-
})
35-
await response.json()
36-
}

‎components/maker/payment/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState } from 'react'
2-
import { validateBTC, validateSTX, savePaymentDetails } from './helpers'
2+
import { savePaymentDetails } from '@stores/maker/actions'
3+
import { validateBTC, validateSTX } from './helpers'
34
import {
45
PaymentContainer,
56
PaymentHeader,
@@ -10,7 +11,7 @@ import {
1011
PaymentButton
1112
} from './content'
1213

13-
const PaymentDetails = ({ app, apiServer, accessToken, user, onPaymentDetailsComplete }) => {
14+
const PaymentDetails = ({ app, apiServer, accessToken, user, dispatch }) => {
1415
const [btcAddress, setBTCAddress] = useState(app.BTCAddress)
1516
const [stxAddress, setSTXAddress] = useState(app.stacksAddress)
1617
const [saving, setSaving] = useState(false)
@@ -28,10 +29,9 @@ const PaymentDetails = ({ app, apiServer, accessToken, user, onPaymentDetailsCom
2829
setHasAttemptedSaved(true)
2930
if (!validateBTC(btcAddress) || !validateSTX(stxAddress)) return
3031
setSaving(true)
31-
await savePaymentDetails({ apiServer, appId: app.id, jwt: user.jwt, btcAddress, stxAddress })
32+
await savePaymentDetails({ apiServer, appId: app.id, jwt: user.jwt, btcAddress, stxAddress })(dispatch)
3233
setSaving(false)
3334
setSavedValue({ btcAddress, stxAddress })
34-
onPaymentDetailsComplete()
3535
}
3636

3737
const buttonText = () => {

‎pages/maker/index.js‎

Lines changed: 63 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,87 @@
1-
import React from 'react'
1+
import React, { useEffect } from 'react'
22
import { Flex, Box, Type } from 'blockstack-ui'
33
import { connect } from 'react-redux'
44

5+
import { selectMaker } from '@stores/maker/reducer'
6+
import { fetchApps } from '@stores/maker/actions'
57
import { selectApiServer, selectUser } from '@stores/apps/selectors'
68
import { Page } from '@components/page'
79
import Head from '@containers/head'
810
import Maker from '@components/maker'
911
import { MakerContainer, MakerContentBox, MakerStickyStatusBox } from '@components/maker/styled'
1012

11-
class MakerPortal extends React.Component {
1213

13-
state = {
14-
loading: true,
15-
apps: [],
16-
errorMessage: null,
17-
status: {
18-
paymentDetailsComplete: false,
19-
kycComplete: false,
20-
legalComplete: false
21-
}
22-
}
23-
24-
componentDidMount() {
25-
this.fetchApps()
26-
}
27-
28-
async fetchApps() {
29-
const { apiServer, user } = this.props
30-
31-
if (!(user && user.jwt)) {
32-
this.setState({
33-
...this.state,
34-
loading: false,
35-
errorMessage: 'Please sign in to access the maker portal.'
36-
})
37-
return
38-
}
39-
40-
const uri = `${apiServer}/api/maker/apps`
41-
const response = await fetch(uri, {
42-
headers: {
43-
Authorization: `Bearer ${user.jwt}`
44-
}
45-
})
46-
const { apps } = await response.json()
47-
this.setState({
48-
loading: false,
49-
apps
50-
})
51-
}
52-
53-
updateStatus (props) {
54-
this.setState({ ...this.state, status: { ...this.state.status, ...props } })
55-
}
56-
57-
setPaymentDetailsComplete () {
58-
this.updateStatus({ paymentDetailsComplete: true })
59-
}
60-
61-
setKycComplete () {
62-
this.updateStatus({ kycComplete: true })
63-
}
64-
65-
setLegalComplete () {
66-
this.updateStatus({ legalComplete: true })
67-
}
14+
const MakerPortal = ({ apiServer, user, maker, loading, errorMessage, dispatch }) => {
6815

69-
render() {
70-
const { apiServer, user } = this.props
71-
72-
const { loading, errorMessage, apps } = this.state
73-
const [app] = apps // TODO: this is for now until we handle multiple apps
74-
75-
if (loading || errorMessage) {
76-
return (
77-
<Page innerPadding={0} wrap>
78-
<Flex>
79-
<Box width={1}>
80-
<Type fontSize={5} my={7} textAlign="center">{loading ? 'Loading...' : errorMessage}</Type>
81-
</Box>
82-
</Flex>
83-
</Page>
84-
)
85-
}
16+
useEffect(() => {
17+
fetchApps({ apiServer, user })(dispatch)
18+
}, [])
8619

20+
const app = maker.appEntities[maker.appIds[0]]
21+
if (loading || !app) {
8722
return (
8823
<Page innerPadding={0} wrap>
89-
<Head title={app.name} />
90-
<MakerContainer>
91-
<Type fontSize={3} fontWeight={500} mx={[4, 6]} py={6} px={[20, 0]}>
92-
{app.name}
93-
</Type>
94-
<Flex flexDirection={['column', 'column', 'row-reverse']} maxWidth={[null, null, 1140]} alignItems="flex-start">
95-
<MakerStickyStatusBox>
96-
<Maker.Status
97-
app={app}
98-
apiServer={apiServer}
99-
status={this.state.status}
100-
/>
101-
</MakerStickyStatusBox>
102-
<Box>
103-
<MakerContentBox>
104-
<Maker.PaymentDetails
105-
app={app}
106-
user={user}
107-
apiServer={apiServer}
108-
onPaymentDetailsComplete={() => this.setPaymentDetailsComplete()}
109-
/>
110-
</MakerContentBox>
111-
<MakerContentBox>
112-
<Maker.KYC
113-
app={app}
114-
user={user}
115-
apiServer={apiServer}
116-
onKycComplete={() => this.setKycComplete()}
117-
/>
118-
</MakerContentBox>
119-
<MakerContentBox>
120-
<Maker.ParticipationAgreement
121-
app={app}
122-
user={user}
123-
apiServer={apiServer}
124-
onLegalComplete={() => this.setLegalComplete()}
125-
/>
126-
</MakerContentBox>
127-
</Box>
128-
</Flex>
129-
</MakerContainer>
24+
<Flex>
25+
<Box width={1}>
26+
<Type fontSize={5} my={7} textAlign="center">{loading ? 'Loading...' : errorMessage}</Type>
27+
</Box>
28+
</Flex>
13029
</Page>
13130
)
13231
}
32+
console.log(app)
33+
return (
34+
<Page innerPadding={0} wrap>
35+
<Head title={app.name} />
36+
<MakerContainer>
37+
<Type fontSize={3} fontWeight={500} mx={[4, 6]} py={6} px={[20, 0]}>
38+
{app.name}
39+
</Type>
40+
<Flex flexDirection={['column', 'column', 'row-reverse']} maxWidth={[null, null, 1140]} alignItems="flex-start">
41+
<MakerStickyStatusBox>
42+
<Maker.Status
43+
app={app}
44+
apiServer={apiServer}
45+
status={maker.status}
46+
/>
47+
</MakerStickyStatusBox>
48+
<Box>
49+
<MakerContentBox>
50+
<Maker.PaymentDetails
51+
app={app}
52+
user={user}
53+
apiServer={apiServer}
54+
dispatch={dispatch}
55+
// onPaymentDetailsComplete={() => dispatch(setPaymentDetailsComplete())}
56+
/>
57+
</MakerContentBox>
58+
<MakerContentBox>
59+
<Maker.KYC
60+
app={app}
61+
user={user}
62+
apiServer={apiServer}
63+
// onKycComplete={() => dispatch(setKycComplete())}
64+
/>
65+
</MakerContentBox>
66+
<MakerContentBox>
67+
<Maker.ParticipationAgreement
68+
app={app}
69+
user={user}
70+
apiServer={apiServer}
71+
// onLegalComplete={() => dispatch(setLegalComplete())}
72+
/>
73+
</MakerContentBox>
74+
</Box>
75+
</Flex>
76+
</MakerContainer>
77+
</Page>
78+
)
13379
}
13480

13581
const mapStateToProps = (state) => ({
13682
user: selectUser(state),
137-
apiServer: selectApiServer(state)
83+
apiServer: selectApiServer(state),
84+
maker: selectMaker(state)
13885
})
13986

14087
export default connect(mapStateToProps)(MakerPortal)

‎stores/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import newsletter from '@stores/newsletter'
88
import RouterStore from '@stores/router'
99
import makeMiningReducer from '@stores/mining/reducer'
1010
import AdminMiningReducer from '@stores/mining-admin/reducer'
11+
import makerReducer from '@stores/maker/reducer'
1112

1213
export default (data) => {
1314
const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose
@@ -21,7 +22,8 @@ export default (data) => {
2122
newsletter,
2223
router: RouterStore.reducer,
2324
mining: makeMiningReducer(data),
24-
miningAdmin: AdminMiningReducer
25+
miningAdmin: AdminMiningReducer,
26+
maker: makerReducer
2527
})
2628

2729
return finalCreateStore(Reducer)

‎stores/maker/actions.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
export const SET_LOADING_DONE = '[Maker Page] SET_LOADING_DONE'
2+
export const MAKER_AUTH_ERROR = '[Maker Page] MAKER_AUTH_ERROR'
3+
4+
export const SET_PAYMENT_DETAILS_COMPLETE = '[Maker Page] SET_PAYMENT_DETAILS_COMPLETE'
5+
export const SAVE_PAYMENT_DETAILS = '[Maker Page] SAVE_PAYMENT_DETAILS'
6+
export const SAVE_PAYMENT_DETAILS_DONE = '[Maker Page] SAVE_PAYMENT_DETAILS_DONE'
7+
export const SAVE_PAYMENT_DETAILS_FAIL = '[Maker Page] SAVE_PAYMENT_DETAILS_FAIL'
8+
9+
export const SET_KYC_COMPLETE = '[Maker Page] SET_KYC_COMPLETE'
10+
export const SET_LEGAL_COMPLETE = '[Maker Page] SET_LEGAL_COMPLETE'
11+
12+
export const FETCH_APPS = '[Maker Page] FETCH_APPS'
13+
export const FETCH_APPS_DONE = '[Maker Page] FETCH_APPS_DONE'
14+
export const FETCH_APPS_FAIL = '[Maker Page] FETCH_APPS_FAIL'
15+
16+
export const errorAction = () => ({ type: MAKER_AUTH_ERROR })
17+
export const setLoadingDoneAction = () => ({ type: SET_LOADING_DONE })
18+
export const setPaymentDetailsComplete = () => ({ type: SET_PAYMENT_DETAILS_COMPLETE })
19+
export const savePaymentDetailsAction = () => ({ type: SAVE_PAYMENT_DETAILS })
20+
export const savePaymentDetailsDoneAction = () => ({ type: SAVE_PAYMENT_DETAILS_DONE })
21+
export const savePaymentDetailsFailAction = () => ({ type: SAVE_PAYMENT_DETAILS_FAIL })
22+
23+
export const setKycComplete = () => ({ type: SET_KYC_COMPLETE })
24+
export const setLegalComplete = () => ({ type: SET_LEGAL_COMPLETE })
25+
26+
export const fetchAppsAction = () => ({ type: FETCH_APPS })
27+
export const fetchAppsDoneAction = payload => ({ type: FETCH_APPS_DONE, payload })
28+
export const fetchAppsFailAction = () => ({ type: FETCH_APPS_FAIL })
29+
30+
31+
export const savePaymentDetails = ({ apiServer, appId, jwt, btcAddress, stxAddress }) => async dispatch => {
32+
dispatch(savePaymentDetailsAction())
33+
try {
34+
const response = await fetch(`${apiServer}/api/maker/apps?appId=${appId}`, {
35+
method: 'POST',
36+
headers: new Headers({
37+
'Content-Type': 'application/json',
38+
authorization: `Bearer ${jwt}`
39+
}),
40+
body: JSON.stringify({
41+
BTCAddress: btcAddress,
42+
stacksAddress: stxAddress
43+
})
44+
})
45+
await response.json()
46+
dispatch(setPaymentDetailsComplete())
47+
dispatch(savePaymentDetailsDoneAction())
48+
} catch (error) {
49+
dispatch(savePaymentDetailsFailAction(error))
50+
}
51+
}
52+
53+
54+
export const fetchApps = ({ user, apiServer }) => async dispatch => {
55+
dispatch(fetchAppsAction())
56+
if (!(user && user.jwt)) {
57+
dispatch(errorAction())
58+
return
59+
}
60+
try {
61+
const uri = `${apiServer}/api/maker/apps`
62+
const response = await fetch(uri, {
63+
headers: {
64+
Authorization: `Bearer ${user.jwt}`
65+
}
66+
})
67+
const apps = await response.json()
68+
dispatch(fetchAppsDoneAction(apps))
69+
dispatch(setLoadingDoneAction())
70+
} catch (error) {
71+
dispatch(fetchAppsFailAction())
72+
}
73+
}
74+

0 commit comments

Comments
 (0)