Set up basic react web app scaffolding

[michaelsena]

No description provided.

[kamescg]

What's required here exactly in terms of scaffolding?

Do y'all need application state management i.e. Redux (Actions, Reducers) and Sagas, like in the the MobileApp? Should I include boilerplate for communicating with a Blockchain and IPFS via Infura? Want to use ethers.js or web3.js 1.0.x for the latest and greatest? Need a set of atomic design components for rapid UI/UX prototyping using styled-components?

Is this for a contact list app? Something else?

What's the short-term objective? And perhaps a little insight into the more long-term objective, so I can know what to do or not do in this scaffolding?

I have questions :)

[oed]

From the technical standpoint you only need to provide a way of getting the ethereum address from MM. Then everything that relates to getting data from ipfs/ethereum would be preformed by the 3box client library. I don't think we need very complicated state management, but I'm sure @michaelsena can fill you in on the design details.

The short term objective is to create a dapp where you can manage your public profile, your private data, and your public activity.

[kamescg]

Perfect.

Regarding MM, I know their planning to stop injecting Web3 natively soon, which might effect getting the Ethereum address easily, so I'll see what it might require to future proof the scaffolding from such a change.

For the rest of the scaffolding, just let me know what you need in terms of components i.e. avatar (blockies?), form components (redux form?) and maybe wireframe outline of any important pages?

@oed I like to use recompose and pure functional components, but that might be a bit much here?

/* --- External Dependencies --- */
import React from 'react'
import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose'
/* --- Module Package --- */
import { databaseReadRequest } from 'store/departments/actions'

/* ------ Module ------*/
const QueryLifecycle = lifecycle(
{
  componentDidMount()
  {
    if (this.props.branch && this.props.delta ) {
      this.props.loadImage({
        metadata: {
          branch: this.props.branch,
          delta: this.props.delta,
        }
      })
    }
  }
})


const mapDispatchToProps = dispatch => ({
  loadImage: (action)=>dispatch(databaseReadRequest(action)),
})

const Component = ()=> <div></div>

export default compose(
  connect(null, mapDispatchToProps),
  QueryLifecycle,
)(Component);

Since you'll most likely maintain long-term should I stick with the standard Class orientated component development for the scaffolding?

[oed]

Sounds good re MM.

We need a way to set and display avatar, name, email, and maybe some more fields. I think @michaelsena is working on a wireframe that he will give you.
I usually like that type of functional components, I think it makes sense to use if it isn't too much additional work. We are planning on keeping this dapp for longer term.

[michaelsena]

@kamescg I saw you pushed this code to 3box-dapp repo, thanks! What do we need to do to properly handoff to @oznekenzo ?