Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wiring up new homepage to new dashboard #281

Merged
merged 7 commits into from
Sep 27, 2018
Merged

Wiring up new homepage to new dashboard #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e0daf87
Wiring homepage up to new dashboard
benwerd Sep 26, 2018
b96c624
Adding proptype validation
benwerd Sep 26, 2018
c7c43f1
Fixing import issue
benwerd Sep 26, 2018
edae52c
Using Link
benwerd Sep 27, 2018
60d5d9b
Linter fix
benwerd Sep 27, 2018
192aa3b
Removing prop
benwerd Sep 27, 2018
d65d363
Linter
benwerd Sep 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions unlock-app/src/components/Unlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React from 'react'
import { Route, Switch } from 'react-router'

import LockMaker from './creator/LockMaker'
import Dashboard from './creator/Dashboard'
import Lock from './consumer/Lock'
import Home from './pages/Home'
import Jobs from './pages/Jobs'
Expand Down Expand Up @@ -63,6 +64,7 @@ export function Unlock({ network, config, path }) {
return (
<Switch>
<Route path="/provider" component={Provider} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/creator" component={LockMaker} />
<Route path="/lock/:lockAddress" component={Lock} />
<Route path="/jobs" component={Jobs} />
Expand Down
18 changes: 17 additions & 1 deletion unlock-app/src/components/creator/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import UnlockPropTypes from '../../propTypes'

import React, { Component } from 'react'
import { connect } from 'react-redux'
import Layout from '../interface/Layout'
import CreatorAccount from './CreatorAccount'
import CreatorLocks from './CreatorLocks'

export default class Dashboard extends Component {
export class Dashboard extends Component {
render() {
if (!this.props.account) {
return null //loading
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably eventually handle that at a higher level.. But that'll do for now!


return (
<Layout title="Creator Dashboard">
<CreatorAccount network={this.props.network} account={this.props.account} />
Expand All @@ -22,3 +27,14 @@ Dashboard.propTypes = {
transactions: UnlockPropTypes.transactions,
locks: UnlockPropTypes.locks,
}

const mapStateToProps = state => {
return {
account: state.network.account, // TODO change account to base level
network: state.network,
transactions: state.transactions,
locks: state.locks,
}
}

export default connect(mapStateToProps)(Dashboard)
12 changes: 8 additions & 4 deletions unlock-app/src/components/pages/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import styled from 'styled-components'
import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom'
import Layout from '../interface/Layout'
import { Section, Headline, SubTitle, CallToAction, ThreeColumns, Column } from './Components'
import { ActionButton } from '../creator/CreatorLocks'
Expand All @@ -13,10 +14,12 @@ export default class Home extends PureComponent {
Unlock is a protocol which enables creators to monetize their content with a few lines of code in a fully decentralized way.
</Headline>

<Action>
<HomepageButton>Go to Your Dashboard</HomepageButton>
<ButtonLabel>Requires a browser with an Ethereum wallet</ButtonLabel>
</Action>
<Link to={'/dashboard'}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll know what I say about nesting components!... but I guess you tried without?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did, yeah. I have some feature requests for the next version of styled-components.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol. happy to hear them!

<Action>
<HomepageButton>Go to Your Dashboard</HomepageButton>
<ButtonLabel>Requires a browser with an Ethereum wallet</ButtonLabel>
</Action>
</Link>

<ThreeColumns>
<Column>
Expand Down Expand Up @@ -82,6 +85,7 @@ const ButtonLabel = styled.small`
font-size: 12px;
font-weight: 200;
font-family: 'IBM Plex Mono', 'Courier New', Serif;
color: var(--darkgrey);
`

const Paragraph = styled.p`
Expand Down