8840cd97b1
Added JSDoc and helpful comments throughout. Allowed new lines in tweets. Tweet box focussed on render. After user creation, user taken to update profile page. Handle form submit and enter pressed on all forms Now handles changing user/route by re-searching for different user. Begin adding contract tests (WIP)
78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
import Header from './Header'
|
|
import Main from './Main'
|
|
import React, { Component } from 'react';
|
|
import imgAvatar from '../../img/avatar-default.png';
|
|
|
|
/**
|
|
* Class representing the highest order component. Any user
|
|
* updates in child components should trigger an event in this
|
|
* class so that the current user details can be re-fetched from
|
|
* the contract and propagated to all children that rely on it
|
|
*
|
|
* @extends React.Component
|
|
*/
|
|
class App extends Component {
|
|
|
|
//#region Constructor
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
user: {}
|
|
}
|
|
}
|
|
//#endregion
|
|
|
|
//#region Helper methods
|
|
/**
|
|
* Loads user details from the contract based on the current
|
|
* account (address).
|
|
*
|
|
* First, the owners mapping is queried using the owner address key. It returns
|
|
* the hash of the username it maps to. This username hash is then used to query
|
|
* the users mapping in the contract to get the details of the user. Once the user
|
|
* details are returned, the state is updated with the details, which triggers a
|
|
* render in this component and all child components.
|
|
*
|
|
* @returns {null}
|
|
*/
|
|
_loadCurrentUser = async () => {
|
|
const accounts = await web3.eth.getAccounts();
|
|
try {
|
|
const usernameHash = await DTwitter.methods.owners(accounts[0]).call();
|
|
if (usernameHash) {
|
|
// get user details from contract
|
|
const user = await DTwitter.methods.users(usernameHash).call();
|
|
|
|
// update user picture with ipfs url
|
|
user.picture = user.picture.length > 0 ? EmbarkJS.Storage.getUrl(user.picture) : imgAvatar;
|
|
|
|
// update state with user details
|
|
return this.setState({ user: user, account: accounts[0] });
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.error('Error loading currenet user: ', err);
|
|
}
|
|
}
|
|
//#endregion
|
|
|
|
//#region React lifecycle events
|
|
componentDidMount() {
|
|
EmbarkJS.onReady(() => {
|
|
setTimeout(() => { this._loadCurrentUser(); }, 0);
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<Header user={ this.state.user } account={ this.state.account } />
|
|
<Main user={ this.state.user } account={ this.state.account } onAfterUserUpdate={ (e) => this._loadCurrentUser() } />
|
|
</div>
|
|
);
|
|
}
|
|
//#endregion
|
|
}
|
|
|
|
export default App |