redesign

[pradel]

Here is a first try as discussed in #42.

• AccountsProvider
• withCurrentUser
• login + signup form for material-ui

Related pr for client accounts-js/accounts#104
Related pr for example accounts-js/examples#7

Right now the example is working well, the signup + login form is working and the tokens are stored and consumed when the app start.

I limited the dependencies for the packages to try to be lighter as possible.

withCurrentUser:
Pass down a currentUser + loading prop (when the app is starting)

const Home = withCurrentUser(({ currentUser, loading }) => (
  <div style={{ textAlign: 'center' }}>
    {loading && <CircularProgress />}
    {!loading && <AppBar
      title="js-accounts rest example"
      showMenuIconButton={false}
      iconElementRight={
        !currentUser
          ? <FlatButton label="Login" onTouchTap={() => history.push('/login')} />
          : <FlatButton label="Logout" onTouchTap={() => accountsClient.logout()} />
      }
    />}
    {!loading &&
      !currentUser &&
      <div style={{ marginTop: 40 }}>
        <p>Hey you are not logged in</p>
      </div>}
    {!loading &&
      currentUser &&
      <div style={{ marginTop: 40 }}>
        <p>Signed in user info:</p>
        <p>id : {currentUser.id}</p>
        <p>email : {currentUser.emails[0].address}</p>
      </div>}
  </div>
));

[davidyaha]

So I really like the fact that this new implementation is much much more compact :)
One issue I have in general is that we've tried to push the state back to the accounts package but instead we moved it to the components.. It seems like we should figure out a way to get rid of the stateful components altogether... not sure if there is a good way but maybe if we expose the store from the accounts client, and just use the react-redux Provider as the returned value from AccountsProvider we can use connect for the signUp and logIn forms.
Also we are missing the reset password still right?

[davidyaha]

So this is the default layout right? but then, I don't see any way of overriding it in a comfortable way

[pradel]

• We can add a LayoutStyle prop
• We can add a Layout prop that can overwrite the package Layout with a user Component

[davidyaha]

I think that loginWithPassword already handles validation isn't it?

[TimMikeladze]

Yes it should handle validation. All validation should be handled by @accounts/client

[pradel]

Okay will take a look

[davidyaha]

The route thing should really be part of the base react package I think..

[davidyaha]

There is no way to make the subscribe callback more specific? like only try to set state if an action with user or loading was dispatched?
I think that this way we will cause a re-render for each component that uses that for every action..

[pradel]

You are right I really don't know I will take a look at that

[pradel]

Or if we use react-redux this can be done easily

[TimMikeladze]

Yes it should handle validation. All validation should be handled by @accounts/client

[TimMikeladze]

This logic can be moved to the core react package.

[pradel]

?

[TimMikeladze]

Thanks for the PR @pradel

I've been thinking about the redesign of both this package and the core accounts package. Before beginning any redesigns I think we should get our typing and building straightened out. See accounts-js/accounts#44 for discussion about moving to TS.

Also, I think the react packages can be written in such a way that they never depend on @accounts/client but instead are passed in functions as props (which probably come from @accounts/client).

[davidyaha]

Also, I think the react packages can be written in such a way that they never depend on @accounts/client but instead are passed in functions as props (which probably come from @accounts/client).

It is great for modularity but It will (probably, or at least the way I think of possible implementation) also complicate the usage by a lot.
One possible way to approach it will be with using object spreading

<LogInForm {...accountClient} />

This will probably render the provider useless..