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

Commit 672486d

Browse files
kyranjamiekyranjamie
authored
Merge pull request #652 from blockstack/feature/payment-details-card-updated-maker-page
Feature/payment details card updated maker page
2 parents 5a63a74 + f8be599 commit 672486d

File tree

9 files changed

+156
-152
lines changed

9 files changed

+156
-152
lines changed

‎components/maker/modal.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const customStyles = {
99
// above headroom header library
1010
zIndex: 100
1111
},
12-
content : {
12+
content: {
1313
top: '50%',
1414
left: '50%',
1515
right: 'auto',
@@ -31,7 +31,7 @@ const CloseButtonContainer = styled.div`
3131

3232
const CloseButton = ({ handleClick }) => (
3333
<CloseButtonContainer onClick={handleClick}>
34-
<CloseIcon/>
34+
<CloseIcon />
3535
</CloseButtonContainer>
3636
)
3737

@@ -40,12 +40,11 @@ const MakerModal = ({ isOpen, handleClose, children }) => (
4040
isOpen={isOpen}
4141
onRequestClose={handleClose}
4242
style={customStyles}
43-
appElement={document.querySelector('#__next')}
43+
appElement={typeof document !== 'undefined' ? document.querySelector('#__next') : null}
4444
>
4545
<CloseButton handleClick={handleClose} />
4646
{children}
4747
</Modal>
4848
)
4949

50-
5150
export default MakerModal

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"grid-styled": "5.0.2",
6565
"intersection-observer": "^0.5.1",
6666
"isomorphic-unfetch": "^3.0.0",
67+
"js-cookie": "^2.2.1",
6768
"lodash": "^4.17.11",
6869
"lodash.debounce": "^4.0.8",
6970
"lru-cache": "^4.1.3",

‎pages/maker/apps/index.js‎

Lines changed: 73 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from 'react'
1+
import React from 'react'
22
import { useRouter } from 'next/router'
33
import { Flex, Box, Type } from 'blockstack-ui'
44
import { connect } from 'react-redux'
@@ -12,130 +12,111 @@ import { Page } from '@components/page'
1212
import Head from '@containers/head'
1313
import Maker from '@components/maker'
1414

15-
const MakerPortal = ({ params, apiServer, user, maker, errorMessage, appList, selectedApp, competionStatus, dispatch }) => {
16-
17-
const hasAppId = params && !!params.appId
15+
const mapStateToProps = (state) => ({
16+
user: selectUser(state),
17+
apiServer: selectApiServer(state),
18+
maker: selectMaker(state),
19+
appList: selectAppList(state),
20+
selectedApp: selectCurrentApp(state),
21+
completionStatus: selectCompetionStatus(state)
22+
})
1823

19-
const router = useRouter()
24+
const handleChangingApp = (event, fn) => (dispatch) => {
25+
event.persist()
26+
const id = event.target.value
27+
dispatch(selectAppAction(id))
28+
fn(id)
29+
}
2030

21-
const updateMakerRoute = id => router.push(
22-
'/maker/apps',
23-
`/maker/apps/${id}`,
24-
{
25-
shallow: true
26-
}
27-
)
31+
const getAppId = (params) => {
32+
if (!params) return undefined
33+
const id = parseInt(params.appId, 10)
34+
if (isNaN(id)) return undefined
35+
return id
36+
}
2837

29-
const getAppId = () => {
30-
if (!params) return undefined
31-
const id = parseInt(params.appId, 10)
32-
if (isNaN(id)) return undefined
33-
return id
34-
}
38+
const LoadingPage = ({ message = 'Loading...' }) => (
39+
<Page innerPadding={0} wrap>
40+
<Flex>
41+
<Box width={1}>
42+
<Type fontSize={5} my={7} textAlign="center">
43+
{message}
44+
</Type>
45+
</Box>
46+
</Flex>
47+
</Page>
48+
)
3549

36-
useEffect(() => {
37-
async function fetchAppsOnInit () {
38-
await fetchApps({ apiServer, user })(dispatch)
39-
if (hasAppId) {
40-
dispatch(selectAppAction(getAppId()))
41-
}
42-
if (!hasAppId && process.browser) {
43-
setTimeout(() => {
44-
console.log(appList)
45-
const { id } = appList[0]
46-
dispatch(selectAppAction(id))
47-
})
48-
}
49-
}
50-
fetchAppsOnInit()
51-
}, [])
50+
const MakerPortal = connect()(({ maker, selectedApp, appList, appId, apiServer, completionStatus, user, dispatch }) => {
51+
const router = useRouter()
5252

53-
if (maker.loading || !selectedApp) {
54-
return (
55-
<Page innerPadding={0} wrap>
56-
<Flex>
57-
<Box width={1}>
58-
<Type fontSize={5} my={7} textAlign="center">{maker.loading ? 'Loading...' : errorMessage}</Type>
59-
</Box>
60-
</Flex>
61-
</Page>
62-
)
63-
}
53+
const updateMakerRoute = (id) =>
54+
router.push('/maker/apps', `/maker/apps/${id}`, {
55+
shallow: true
56+
})
6457

65-
function handleChangingApp (event) {
66-
event.persist()
67-
const id = event.target.value
68-
dispatch(selectAppAction(id))
69-
updateMakerRoute(id)
70-
}
58+
if (maker.loading || !selectedApp) return <LoadingPage />
7159

7260
return (
7361
<Page innerPadding={0} wrap>
7462
<Head title={selectedApp.name} />
7563
<MakerContainer>
7664
<Box>
77-
{
78-
appList.length &&
79-
<select onChange={handleChangingApp} value={getAppId()}>
65+
{appList.length && (
66+
<select onChange={(e) => handleChangingApp(e, updateMakerRoute)(dispatch)} value={appId}>
8067
{appList.map(({ name, id }) => (
81-
<option key={id} value={id}>{name}</option>
68+
<option key={id} value={id}>
69+
{name}
70+
</option>
8271
))}
8372
</select>
84-
}
73+
)}
8574
</Box>
8675
<Type fontSize={3} fontWeight={500} mx={[4, 6]} py={6} px={[20, 0]}>
8776
{selectedApp.name}
8877
</Type>
89-
<Flex flexDirection={['column', 'column', 'row-reverse']} maxWidth={[null, null, 1140]} alignItems="flex-start">
78+
<Flex
79+
flexDirection={['column', 'column', 'row-reverse']}
80+
maxWidth={['unset', 'unset', 1140]}
81+
alignItems="flex-start"
82+
>
9083
<MakerStickyStatusBox>
91-
<Maker.Status
92-
app={selectedApp}
93-
apiServer={apiServer}
94-
status={competionStatus}
95-
/>
84+
<Maker.Status app={selectedApp} apiServer={apiServer} status={completionStatus} />
9685
</MakerStickyStatusBox>
9786
<Box>
9887
<MakerContentBox>
99-
<Maker.PaymentDetails
100-
app={selectedApp}
101-
user={user}
102-
apiServer={apiServer}
103-
dispatch={dispatch}
104-
/>
88+
<Maker.PaymentDetails app={selectedApp} user={user} apiServer={apiServer} dispatch={dispatch} />
10589
</MakerContentBox>
10690
<MakerContentBox>
107-
<Maker.KYC
108-
app={selectedApp}
109-
user={user}
110-
apiServer={apiServer}
111-
/>
91+
<Maker.KYC app={selectedApp} user={user} apiServer={apiServer} />
11292
</MakerContentBox>
11393
<MakerContentBox>
114-
<Maker.ParticipationAgreement
115-
app={selectedApp}
116-
user={user}
117-
apiServer={apiServer}
118-
/>
94+
<Maker.ParticipationAgreement app={selectedApp} user={user} apiServer={apiServer} />
11995
</MakerContentBox>
12096
</Box>
12197
</Flex>
12298
</MakerContainer>
12399
</Page>
124100
)
125-
}
101+
})
126102

127-
MakerPortal.getInitialProps = (x) => {
128-
console.log(x.userApps)
129-
return { params: x.query.params }
130-
}
103+
MakerPortal.getInitialProps = async ({ req, reduxStore }) => {
104+
const { params, universalCookies } = req
105+
const userCookie = universalCookies.cookies.jwt
106+
const appId = getAppId(params)
107+
const apiServer = selectApiServer(reduxStore.getState())
108+
await fetchApps({ apiServer, user: { jwt: userCookie } })(reduxStore.dispatch)
109+
let selectedApp = {}
110+
if (appId) {
111+
reduxStore.dispatch(selectAppAction(appId))
112+
selectedApp = selectCurrentApp(reduxStore.getState())
113+
} else {
114+
const firstApp = selectAppList(reduxStore.getState())[0]
115+
selectedApp = firstApp
116+
}
117+
const props = mapStateToProps(reduxStore.getState())
131118

132-
const mapStateToProps = state => ({
133-
user: selectUser(state),
134-
apiServer: selectApiServer(state),
135-
maker: selectMaker(state),
136-
appList: selectAppList(state),
137-
selectedApp: selectCurrentApp(state),
138-
competionStatus: selectCompetionStatus(state)
139-
})
119+
return { appId, ...props, selectedApp, dispatch: reduxStore.dispatch }
120+
}
140121

141-
export default connect(mapStateToProps)(MakerPortal)
122+
export default MakerPortal

‎pages/maker/magic-link.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ class MakerMagicLink extends React.Component {
1414
const { accessToken } = query
1515
const apiServer = selectApiServer(reduxStore.getState())
1616
const appResult = await fetch(`${apiServer}/api/magic-link/${accessToken}`)
17+
console.log(appResult)
1718
const { app } = await appResult.json()
1819

1920
return {
@@ -85,7 +86,8 @@ class MakerMagicLink extends React.Component {
8586
{app.name} is now owned by {app.adminBlockstackId || user.user.blockstackUsername}
8687
</Type>
8788
<Type mt={5}>
88-
Your Magic Link is now no longer functional. Instead, you will use your Blockstack ID to sign in to the developer portal.
89+
Your Magic Link is now no longer functional. Instead, you will use your Blockstack ID to sign in to
90+
the developer portal.
8991
</Type>
9092
<Link href="/maker" passHref>
9193
<Button mt={5}>Continue to Developer Portal</Button>
@@ -97,9 +99,12 @@ class MakerMagicLink extends React.Component {
9799
Sign in with Blockstack to claim {app.name}
98100
</Type>
99101
<Type mt={5}>
100-
You will use this Blockstack ID to make changes to your app, and remove or modify your listing in the future.
102+
You will use this Blockstack ID to make changes to your app, and remove or modify your listing in
103+
the future.
101104
</Type>
102-
<Button mt={5} onClick={() => this.signIn()}>{loading ? 'Loading...' : 'Sign in with Blockstack'}</Button>
105+
<Button mt={5} onClick={() => this.signIn()}>
106+
{loading ? 'Loading...' : 'Sign in with Blockstack'}
107+
</Button>
103108
</>
104109
)}
105110
</Box>
@@ -117,4 +122,7 @@ const mapStateToProps = (state) => ({
117122

118123
const mapDispatchToProps = (dispatch) => bindActionCreators({ ...UserStore.actions }, dispatch)
119124

120-
export default connect(mapStateToProps, mapDispatchToProps)(MakerMagicLink)
125+
export default connect(
126+
mapStateToProps,
127+
mapDispatchToProps
128+
)(MakerMagicLink)

‎stores/maker/actions.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const SELECT_APP = 'maker-page/SELECT_APP'
1818
export const errorAction = () => ({ type: MAKER_AUTH_ERROR })
1919
export const setLoadingDoneAction = () => ({ type: SET_LOADING_DONE })
2020
export const savePaymentDetailsAction = () => ({ type: SAVE_PAYMENT_DETAILS })
21-
export const savePaymentDetailsDoneAction = addresses => ({
21+
export const savePaymentDetailsDoneAction = (addresses) => ({
2222
type: SAVE_PAYMENT_DETAILS_DONE,
2323
payload: addresses
2424
})
@@ -28,12 +28,14 @@ export const setKycComplete = () => ({ type: SET_KYC_COMPLETE })
2828
export const setLegalComplete = () => ({ type: SET_LEGAL_COMPLETE })
2929

3030
export const fetchAppsAction = () => ({ type: FETCH_APPS })
31-
export const fetchAppsDoneAction = payload => ({ type: FETCH_APPS_DONE, payload })
31+
32+
export const fetchAppsDoneAction = (payload) => ({ type: FETCH_APPS_DONE, payload })
33+
3234
export const fetchAppsFailAction = () => ({ type: FETCH_APPS_FAIL })
3335

34-
export const selectAppAction = payload => ({ type: SELECT_APP, payload })
36+
export const selectAppAction = (payload) => ({ type: SELECT_APP, payload })
3537

36-
export const savePaymentDetails = ({ apiServer, appId, jwt, btcAddress, stxAddress }) => async dispatch => {
38+
export const savePaymentDetails = ({ apiServer, appId, jwt, btcAddress, stxAddress }) => async (dispatch) => {
3739
dispatch(savePaymentDetailsAction())
3840
try {
3941
const response = await fetch(`${apiServer}/api/maker/apps?appId=${appId}`, {
@@ -54,11 +56,12 @@ export const savePaymentDetails = ({ apiServer, appId, jwt, btcAddress, stxAddre
5456
}
5557
}
5658

57-
export const fetchApps = ({ user, apiServer }) => async dispatch => {
59+
export const fetchApps = ({ user, apiServer }) => async (dispatch) => {
5860
if (!(user && user.jwt)) {
5961
dispatch(errorAction())
6062
return
6163
}
64+
6265
dispatch(fetchAppsAction())
6366
try {
6467
const uri = `${apiServer}/api/maker/apps`
@@ -67,8 +70,8 @@ export const fetchApps = ({ user, apiServer }) => async dispatch => {
6770
Authorization: `Bearer ${user.jwt}`
6871
}
6972
})
70-
const apps = await response.json()
71-
await dispatch(fetchAppsDoneAction(apps))
73+
const data = await response.json()
74+
await dispatch(fetchAppsDoneAction(data))
7275
} catch (error) {
7376
dispatch(fetchAppsFailAction())
7477
}

‎stores/maker/reducer.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const initialState = {
1212

1313
function makerReducer(state = initialState, action) {
1414
switch (action.type) {
15-
1615
case MakerActions.MAKER_AUTH_ERROR:
1716
return {
1817
...state,
@@ -24,9 +23,8 @@ function makerReducer(state = initialState, action) {
2423
return {
2524
...state,
2625
loading: false,
27-
appIds: action.payload.apps.map(app => app.id),
26+
appIds: action.payload.apps.map((app) => app.id),
2827
appEntities: keyBy(action.payload.apps, 'id')
29-
// selectedAppId: action.payload.apps.length ? action.payload.apps[0].id : null
3028
}
3129

3230
case MakerActions.SELECT_APP:

‎stores/maker/selectors.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ const updateEntity = (state, id, newProps) => ({
99
}
1010
})
1111

12-
export const selectMaker = state => state.maker
12+
export const selectMaker = (state) => state.maker
1313

14-
export const selectAppList = state => state.maker.appIds.map(id => state.maker.appEntities[id])
14+
export const selectIsMakerLoading = (state) => state.maker.loading
1515

16-
export const selectCurrentApp = state => state.maker.appEntities[state.maker.selectedAppId]
16+
export const selectAppList = (state) => state.maker.appIds.map((id) => state.maker.appEntities[id])
1717

18-
export const selectCompetionStatus = state => {
18+
export const selectCurrentApp = (state) => state.maker.appEntities[state.maker.selectedAppId]
19+
20+
export const selectCompetionStatus = (state) => {
1921
const selectedApp = state.maker.appEntities[state.maker.selectedAppId]
2022
if (!selectedApp) {
2123
return {}

0 commit comments

Comments
 (0)