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.

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

[Feat] - Token holder account summary section #16

Merged
merged 28 commits into from
Jan 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
04eec99
Now passing props to the protected route
Agupane Dec 27, 2018
9b210ee
Improved performance on app.js
Agupane Dec 27, 2018
3bdfcf8
The user can subscribe
Agupane Dec 27, 2018
041cdeb
The user can subscribe and unsubscribe
Agupane Dec 27, 2018
c490e62
Refactored account summary into two different components
Agupane Dec 27, 2018
ff92949
Added info of the account summary
Agupane Dec 27, 2018
1ecafc4
Refactored web3Provider and fixed subscription bug
Agupane Dec 28, 2018
0f7cc47
Refactored web3Provider and fixed subscription bug
Agupane Dec 28, 2018
11fe18a
Rendering account summary data
Agupane Dec 28, 2018
846a701
Now rendering information about the account summary
Agupane Dec 28, 2018
b9eae8d
Deleted TODO in sendToast function
Agupane Jan 2, 2019
299dcc3
Added toast on network errors
Agupane Jan 2, 2019
8ef73d5
Added address field display in account summary
Agupane Jan 2, 2019
d16cc0b
Added address field display in account summary
Agupane Jan 2, 2019
acddcf7
Fixed home.js tests
Agupane Jan 2, 2019
40cbb7d
Added button test file
Agupane Jan 2, 2019
368f442
Added userSubscribed tests
Agupane Jan 2, 2019
ae7830a
Added userSubscribed tests
Agupane Jan 2, 2019
25ca367
Added livepeer balance and stake
Agupane Jan 2, 2019
32ec182
Refactored to functional components
Agupane Jan 2, 2019
552253e
Deleted showed info on account summary, fixed warnings
Agupane Jan 2, 2019
ecffb4c
Deleted showed info on account summary, fixed warnings
Agupane Jan 2, 2019
9da17d8
Fixed warning
Agupane Jan 2, 2019
5a5f38e
Refactored
Agupane Jan 2, 2019
42bb4bc
Added subscription btn logic
Agupane Jan 2, 2019
aefb1d5
Fix bug when showing eth balance
Agupane Jan 2, 2019
b847fe4
Removed change subscription if user not subscribed
Agupane Jan 2, 2019
215b30b
Removed logs
Agupane Jan 2, 2019
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
1 change: 1 addition & 0 deletions package.json
100755 → 100644
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"livepeer"
],
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"react": "^16.6.3",
"react-dom": "^16.6.3",
Expand Down
14 changes: 13 additions & 1 deletion src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,18 @@ import withWeb3Provider from './Components/Common/Hoc/Web3Provider/Web3Provider'
import Spinner from './Components/Common/UI/Spinner/Spinner'

export class App extends Component {
shouldComponentUpdate(nextProps, nextState, nextContext) {
console.log('[App.js] shouldComponentUpdate')
let shouldUpdate =
this.props.render !== nextProps.render ||
this.props.userData.authenticated !== nextProps.userData.authenticated ||
this.props.userData.address !== nextProps.userData.address ||
this.props.userData.currentNetwork !== nextProps.userData.currentNetwork
return shouldUpdate
}

render() {
console.log('[App.js] props', this.props)
console.log('[App.js] render, web3 address: ', this.props.userData.address)
let content = <Spinner />
if (this.props.render) {
content = (
Expand All @@ -23,6 +33,8 @@ export class App extends Component {
authenticated={this.props.userData.authenticated}
exact
path="/account"
web3={this.props.web3}
userData={this.props.userData}
component={AccountSummaryComponent}
/>
</Switch>
Expand Down
288 changes: 288 additions & 0 deletions src/Components/AccountSummary/AccountSummary.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,288 @@
import React, { Component } from 'react'
import axios from 'axios'
import Spinner from '../Common/UI/Spinner/Spinner'
import * as displayTexts from './AccountSummaryTexts'
import UserSubscribed from './UserSubscribed/UserSubscribed'
import { toast, ToastContainer } from 'react-toastify'

export class AccountSummaryComponent extends Component {
state = {
userData: {
address: null,
isSubscribed: false,
activated: null,
id: null,
email: 'test@altoros.com',
frequency: 'weekly',
activatedCode: null,
createdAt: null
},
summary: {
bondedAmount: '',
fees: '',
lastClaimRound: '',
startRound: '',
status: 'Bonded',
withdrawRound: '',
stake: ''
},
render: false,
displayMsg: displayTexts.LOADING_USER_DATA,
toastId: 1,
error: false
}

initState = async () => {
this.setState({
userData: {
...this.state.userData,
mariano-aguero marked this conversation as resolved.
Show resolved Hide resolved
address: this.props.userData.address,
ethBalance: this.props.userData.ethBalance
}
})
}

componentDidMount = async () => {
console.log('[AccountSummaryComponent.js] componentDidMount')
let userDataPromise, summaryPromise
await this.initState()
try {
userDataPromise = axios.get('/address/' + this.state.userData.address)
summaryPromise = axios.get('/summary/' + this.state.userData.address)
let resultValues = await Promise.all([userDataPromise, summaryPromise])
let userData = resultValues[0]
let summaryData = resultValues[1]
console.log('Promise all finished')
this.setState(
{
userData: {
...this.state.userData,
isSubscribed: true,
activated: userData.data.activated,
id: userData.data._id,
activatedCode: userData.data.activatedCode,
createdAt: userData.data.createdAt,
email: userData.data.email,
frequency: userData.data.frequency
},
summary: {
bondedAmount: summaryData.data.summary.bondedAmount,
fees: summaryData.data.summary.fees,
lastClaimRound: summaryData.data.summary.lastClaimRound,
startRound: summaryData.data.summary.startRound,
status: summaryData.data.summary.status,
withdrawRound: summaryData.data.summary.withdrawRound,
stake: summaryData.data.summary.totalStake
},
render: true,
displayMsg: displayTexts.WELCOME_AGAIN + this.state.userData.email,
error: false,
lpBalance: summaryData.data.balance
},
() => console.log('setting state finished ', this.state)
)
} catch (error) {
/** Subscription not found **/
console.log('subscription not found')
if (error.response && error.response.status === 404) {
console.log('Subscription not found')
this.setState({
userData: {
...this.state.userData,
isSubscribed: false
},
render: true,
displayMsg: displayTexts.WELCOME_NOT_SUBSCRIBED,
error: true
})
await this.fetchAccountSummaryData()
} else {
console.log('[AccountSummary.js] exception on getRequest', error)
this.setState(
{
render: true,
displayMsg: displayTexts.FAIL_NO_REASON,
error: true
},
() => this.sendToast()
)
}
}
}

sendToast = toastTime => {
console.log('Sending toast')
let time = 6000
if (toastTime) {
time = toastTime
}
let displayMsg = this.state.displayMsg

if (!toast.isActive(this.state.toastId) && this.state.render) {
if (this.state.error) {
toast.error(displayMsg, {
position: toast.POSITION.TOP_RIGHT,
progressClassName: 'Toast-progress-bar',
autoClose: time,
toastId: this.state.toastId
})
} else {
toast.success(displayMsg, {
position: toast.POSITION.TOP_RIGHT,
progressClassName: 'Toast-progress-bar',
autoClose: time,
toastId: this.state.toastId
})
}
}
}

fetchAccountSummaryData = async () => {
try {
let summaryData = await axios.get('/summary/' + this.state.userData.address)
console.log('summary data ', summaryData)
this.setState({
summary: {
bondedAmount: summaryData.data.summary.bondedAmount,
fees: summaryData.data.summary.fees,
lastClaimRound: summaryData.data.summary.lastClaimRound,
startRound: summaryData.data.summary.startRound,
status: summaryData.data.summary.status,
withdrawRound: summaryData.data.summary.withdrawRound,
stake: summaryData.data.summary.totalStake
},
lpBalance: summaryData.data.balance
})
} catch (exception) {
console.log('Exception fetching account summary ', exception)
}
}

onSubscribeBtnHandler = async () => {
console.log('[AccountSummary.js] subscribe btnHandler')
let response
this.setState({
render: false,
displayMsg: displayTexts.LOADING_SUBSCRIPTION
})
const data = {
email: this.state.userData.email,
address: this.state.userData.address,
frequency: this.state.userData.frequency
}
try {
console.log('Creating new subscriber with data: ', data)
response = await axios.post('', data)
this.setState({
userData: {
...this.state.userData,
mariano-aguero marked this conversation as resolved.
Show resolved Hide resolved
activated: response.data.activated,
id: response.data._id,
activatedCode: response.data.activated,
createdAt: response.data.createdAt,
isSubscribed: true
},
render: true,
error: false,
displayMsg: displayTexts.WELCOME_NEW_SUBSCRIBER + this.state.userData.email
})
} catch (exception) {
console.log('[AccountSummary.js] exception on postSubscription', exception)
/** TODO -- PARSE WHEN EMAIL ALREADY EXISTS **/
this.setState(
{
render: true,
displayMsg: displayTexts.FAIL_NO_REASON,
error: true
},
() => this.sendToast()
)
}
}

onUnSubscribeBtnHandler = async () => {
console.log('[AccountSummary.js] unsubscribe btnHandler')
this.setState({
render: false,
displayMsg: displayTexts.LOADING_UNSUBSCRIPTION
})
const data = {
username: 'test'
}
try {
await axios.delete('/' + this.state.userData.id, data)
console.log('User unsubscribed')
this.setState(
{
render: true,
displayMsg: displayTexts.UNSUBSCRIPTION_SUCCESSFUL,
userData: {
...this.state.userData,
mariano-aguero marked this conversation as resolved.
Show resolved Hide resolved
isSubscribed: false,
activated: null,
id: null,
activatedCode: null,
createdAt: null,
error: false
}
},
() => this.sendToast()
)
} catch (exception) {
console.log('[AccountSummary.js] exception on deleteSubscription')
if (exception.response.status === 404) {
/** User with that id not found **/
this.setState(
{
render: true,
displayMsg: displayTexts.WELCOME_NOT_SUBSCRIBED,
error: true
},
() => this.sendToast()
)
} else {
this.setState(
{
render: true,
displayMsg: displayTexts.FAIL_NO_REASON,
error: true
},
() => this.sendToast()
)
}
}
}

onSubscriptionChangeHandler = () => {
console.log('[AccountSummary.js] onSubscriptionChangeHandler')
}

render() {
let content = (
<>
<h3>{this.state.displayMsg}</h3>
<Spinner />
</>
)
if (this.state.render) {
content = (
<>
<UserSubscribed
onUnSubscribeBtnHandler={this.onUnSubscribeBtnHandler}
onSubscriptionChangeHandler={this.onSubscriptionChangeHandler}
web3={this.props.web3}
userData={this.state.userData}
summary={this.state.summary}
lpBalance={this.state.lpBalance}
/>
</>
)
}
return (
<div>
{content}
<ToastContainer autoClose={3000} />
</div>
)
}
}
Loading