Integrate react-blockstack package

[njordhov]

I am very excited about your gitix project. It's one of the most promising Blockstack projects by far.

I hope you're open to pull requests? I've submitted PR #3, which takes a first stab at integrating the react-blockstack package, providing react hooks for the Blockstack SDK.

[friedger]

I have merge the PR, but now I am stuck with the question how to add radiks. See njordhov/react-blockstack#3
@njordhov If you want to help fix it, the work to save a relationship between two gitix users (followship) was started in feature/radiks

[njordhov]

Radiks should be initialized when the user has been authenticated, right? You can initialize Radiks when userData is determined to be available. In App.js there is a watch/effect triggered by changes to userData, so you may initialize Radiks there just like in the callback to handlePendingSignIn:

useEffect(() => {
      if (userData) {
       /* Initialize Radiks here */
        setSignIn({ checking: false, user: userData, isSignedIn: true });
      } else {
        setSignIn(NotSignedIn);
      }
  }, [userData]);

You can alternatively create a separate watch/effect for Radiks initialization like the one above.

[friedger]

@njordhov I have added radiks, it looks like it works.

Do you have any ideas how to use react-blockstack in Nav.js?

[njordhov]

I take you'd like to avoid passing the UserStateContext from Nav.js. Here are some suggestions.

A) As Nav is a react class component, useBlockstack() can't be called from the render function. You may rewrite it to be a function component. Alternatively, factor out the relevant parts from render into function components, specifically those conditioned on signIn.isSignedIn.

B) Note that userData from useBlockstack only is truthy when authenticated, so you can use that to test for isSignedIn. As userData is available in App-Container where the Nav component is used, consider adding an isSignedIn prop to Nav that is set to !!userData, and you should be able to eliminate UserStateContext from Nav by using the isSignedIn prop in place of signIn.isSignedIn from the context.