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

Commit 1e0f4da

Browse files
kyranjamiekyranjamie
committed
feat: Allow selection of different apps
1 parent d833ceb commit 1e0f4da

File tree

6 files changed

+102
-57
lines changed

6 files changed

+102
-57
lines changed

‎common/styles/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const theme = {
7272
accent: '#0CCABA'
7373
}),
7474
grey: Object.assign('#5B647C', {
75-
light: '#E6E9EE',
75+
light: '#F9F9FC',
7676
mid: '#7588A2',
7777
dark: '#142144'
7878
}),
@@ -94,7 +94,7 @@ const wrapperStyle = css`
9494
padding-right: 20px;
9595
${below.md`
9696
padding-left: 20px;
97-
padding-right: 20px;
97+
padding-right: 20px;
9898
`};
9999
`
100100

‎components/submit/index.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react'
2+
import Link from 'next/link'
3+
import { Type, Box, Button } from 'blockstack-ui'
4+
5+
const SuccessCard = ({ isAppMiningEligible }) => (
6+
<Box width="100%" textAlign="center">
7+
<Box pb={6} width="100%">
8+
<Type mx="auto" fontSize={5} fontWeight="bold">
9+
Success!
10+
</Type>
11+
</Box>
12+
<Box mx="auto">
13+
<Type display="block">
14+
Thanks for your submission! Your app will need to be approved before being public on app.co.
15+
</Type>
16+
{isAppMiningEligible && (
17+
<>
18+
<Type my={3} display="block">
19+
To update your app&apos;s details and enroll in App Mining, visit our Maker Portal
20+
</Type>
21+
<Link href={{ pathname: '/maker' }} passHref>
22+
<Button is="a" href="/" color="white !important">
23+
Go to the Maker Portal
24+
</Button>
25+
</Link>
26+
</>
27+
)}
28+
</Box>
29+
</Box>
30+
)
31+
32+
export default SuccessCard

‎pages/maker/index.js‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,28 @@ 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'
5+
import { selectMaker, selectAppList, selectCurrentApp } from '@stores/maker/reducer'
6+
import { fetchApps, selectAppAction } from '@stores/maker/actions'
77
import { selectApiServer, selectUser } from '@stores/apps/selectors'
88
import { Page } from '@components/page'
99
import Head from '@containers/head'
1010
import Maker from '@components/maker'
1111
import { MakerContainer, MakerContentBox, MakerStickyStatusBox } from '@components/maker/styled'
1212

13-
14-
const MakerPortal = ({ apiServer, user, maker, loading, errorMessage, dispatch }) => {
13+
const MakerPortal = ({ apiServer, user, maker, loading, errorMessage, appList, selectedApp, dispatch }) => {
1514

1615
useEffect(() => {
1716
fetchApps({ apiServer, user })(dispatch)
1817
}, [])
1918

20-
const app = maker.appEntities[maker.appIds[0]]
19+
const app = selectedApp
20+
21+
function handleChangingApp (event) {
22+
event.persist()
23+
const id = event.target.value
24+
dispatch(selectAppAction(id))
25+
}
26+
2127
if (loading || !app) {
2228
return (
2329
<Page innerPadding={0} wrap>
@@ -29,11 +35,18 @@ const MakerPortal = ({ apiServer, user, maker, loading, errorMessage, dispatch }
2935
</Page>
3036
)
3137
}
32-
console.log(app)
38+
3339
return (
3440
<Page innerPadding={0} wrap>
3541
<Head title={app.name} />
3642
<MakerContainer>
43+
<Box>
44+
<select onChange={handleChangingApp}>
45+
{appList.map(({ name, id }) => (
46+
<option key={id} value={id}>{name}</option>
47+
))}
48+
</select>
49+
</Box>
3750
<Type fontSize={3} fontWeight={500} mx={[4, 6]} py={6} px={[20, 0]}>
3851
{app.name}
3952
</Type>
@@ -81,7 +94,9 @@ const MakerPortal = ({ apiServer, user, maker, loading, errorMessage, dispatch }
8194
const mapStateToProps = (state) => ({
8295
user: selectUser(state),
8396
apiServer: selectApiServer(state),
84-
maker: selectMaker(state)
97+
maker: selectMaker(state),
98+
appList: selectAppList(state),
99+
selectedApp: selectCurrentApp(state)
85100
})
86101

87102
export default connect(mapStateToProps)(MakerPortal)

‎pages/submit.js‎

Lines changed: 22 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import React from 'react'
22
import 'isomorphic-unfetch'
33
import { connect } from 'react-redux'
44
import Head from '@containers/head'
5-
import Link from 'next/link'
65
import { bindActionCreators } from 'redux'
7-
import { MakerTitle, MakerCardHeader, MakerCardText, MakerButton, MakerField } from '@components/maker/styled'
6+
import { MakerTitle, MakerCardHeader, MakerButton } from '@components/maker/styled'
87
import { Page } from '@components/page'
9-
import { Type, Field, Flex, Box, Button } from 'blockstack-ui'
8+
import { Type, Field, Flex, Box } from 'blockstack-ui'
109
import { selectAppConstants, selectApiServer } from '@stores/apps/selectors'
11-
import { FormSection, ErrorMessage, Bar, sections as getSections } from '@containers/submit'
10+
import { FormSection, ErrorMessage, sections as getSections } from '@containers/submit'
11+
import SuccessCard from '@components/submit'
1212
import debounce from 'lodash.debounce'
1313
import UserStore from '@stores/user'
1414

@@ -257,48 +257,24 @@ class SubmitDapp extends React.Component {
257257
<Page innerPadding={0} pt={0}>
258258
<Head title="Submit your dapp" description="Submit your dapp to be listed on the Universal Dapp Store." />
259259
<Page.Section p={['32px', '64px']} mb={3} bg="white">
260-
{this.state.success ? (
261-
<>
262-
<Box width="100%" textAlign="center">
263-
<Box pb={6} width="100%">
264-
<Type mx="auto" fontSize={5} fontWeight="bold">
265-
Success!
266-
</Type>
267-
</Box>
268-
<Box mx="auto">
269-
<Type display="block">Thanks for your submission! Your app will need to be approved before being public on app.co.</Type>
270-
{this.appMiningEligible() && (
271-
<>
272-
<Type my={3} display="block">To update your app&apos;s details and enroll in App Mining, visit our Maker Portal</Type>
273-
<Link
274-
href={{
275-
pathname: '/maker'
276-
}}
277-
passHref
278-
>
279-
<Button is="a" href="/" color="white !important">
280-
Go to the Maker Portal
281-
</Button>
282-
</Link>
283-
</>
284-
)}
285-
</Box>
286-
</Box>
287-
</>
288-
) : (
289-
<Submit
290-
loading={this.state.loading}
291-
submit={this.submit}
292-
success={this.state.success}
293-
appConstants={appConstants}
294-
setState={debounce((args) => this.setState(args), 100)}
295-
state={this.state.values}
296-
errors={this.state.errorCount > 0 && this.state.errors}
297-
signIn={this.props.signIn}
298-
user={this.props.user}
299-
isAppMiningEligible={this.appMiningEligible()}
300-
/>
301-
)}
260+
{
261+
this.state.success
262+
? <SuccessCard isAppMiningEligible={this.appMiningEligible()} />
263+
: (
264+
<Submit
265+
loading={this.state.loading}
266+
submit={this.submit}
267+
success={this.state.success}
268+
appConstants={appConstants}
269+
setState={debounce((args) => this.setState(args), 100)}
270+
state={this.state.values}
271+
errors={this.state.errorCount > 0 && this.state.errors}
272+
signIn={this.props.signIn}
273+
user={this.props.user}
274+
isAppMiningEligible={this.appMiningEligible()}
275+
/>
276+
)
277+
}
302278
</Page.Section>
303279
</Page>
304280
)

‎stores/maker/actions.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export const FETCH_APPS = '[Maker Page] FETCH_APPS'
1313
export const FETCH_APPS_DONE = '[Maker Page] FETCH_APPS_DONE'
1414
export const FETCH_APPS_FAIL = '[Maker Page] FETCH_APPS_FAIL'
1515

16+
export const SELECT_APP = '[Maker Page] SELECT_APP'
17+
1618
export const errorAction = () => ({ type: MAKER_AUTH_ERROR })
1719
export const setLoadingDoneAction = () => ({ type: SET_LOADING_DONE })
1820
export const setPaymentDetailsComplete = () => ({ type: SET_PAYMENT_DETAILS_COMPLETE })
@@ -27,6 +29,7 @@ export const fetchAppsAction = () => ({ type: FETCH_APPS })
2729
export const fetchAppsDoneAction = payload => ({ type: FETCH_APPS_DONE, payload })
2830
export const fetchAppsFailAction = () => ({ type: FETCH_APPS_FAIL })
2931

32+
export const selectAppAction = payload => ({ type: SELECT_APP, payload })
3033

3134
export const savePaymentDetails = ({ apiServer, appId, jwt, btcAddress, stxAddress }) => async dispatch => {
3235
dispatch(savePaymentDetailsAction())

‎stores/maker/reducer.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { keyBy } from 'lodash'
1+
import keyBy from 'lodash/keyBy'
22
import * as MakerActions from './actions'
33

44
const initialState = {
55
loading: true,
66
apps: [],
77
appIds: [],
88
appEntities: {},
9+
selectedAppId: null,
910
errorMessage: null,
1011
status: {
1112
paymentDetailsComplete: false,
@@ -38,7 +39,8 @@ function makerReducer(state = initialState, action) {
3839
return {
3940
...state,
4041
appIds: action.payload.apps.map(app => app.id),
41-
appEntities: keyBy(action.payload.apps, 'id')
42+
appEntities: keyBy(action.payload.apps, 'id'),
43+
selectedAppId: action.payload.apps.length ? action.payload.apps[0].id : null
4244
}
4345

4446
case MakerActions.SET_PAYMENT_DETAILS_COMPLETE:
@@ -50,6 +52,22 @@ function makerReducer(state = initialState, action) {
5052
case MakerActions.SET_LEGAL_COMPLETE:
5153
return updateStatus(state, { legalComplete: true })
5254

55+
case MakerActions.SELECT_APP:
56+
return { ...state, selectedAppId: action.payload }
57+
58+
case MakerActions.SAVE_PAYMENT_DETAILS_DONE:
59+
return {
60+
...state,
61+
appEntities: {
62+
...state.appEntities,
63+
[action.payload.id]: {
64+
...state.appEntities[action.payload.id],
65+
BTCAddress: action.payload.btcAddress,
66+
stacksAddress: action.payload.stxAddress
67+
}
68+
}
69+
}
70+
5371
default:
5472
return state
5573
}
@@ -59,3 +77,4 @@ export default makerReducer
5977

6078
export const selectMaker = state => state.maker
6179
export const selectAppList = state => state.maker.appIds.map(id => state.maker.appEntities[id])
80+
export const selectCurrentApp = state => state.maker.appEntities[state.maker.selectedAppId]

0 commit comments

Comments
 (0)