Provider React and NextJS providers and hooks

[peterpeterparker]

To ease the integration in React and NextJS app, it would be interesting to provide providers and hooks.

render(
  <JunoProvider satelliteId={satelliteId}>
    <App />
  </JunoProvider>,
  document.getElementById('root'),
);

For example I think Solana does that in their WalletProvider. Another example is the Cleck auth.

[Suitec9]

hey peterpeterparker , if possible I will would like to work on this issue if it's still an open issue.

[peterpeterparker]

That would be great! It's a pretty vague task, the idea is to make easier to work with React with context and hooks.

Where do you suggest that we start?

[Suitec9]

I think we should start with the hooks, then move to the provider, and would be nice to hear how you planned on solving it. Since you said yourself, it's pretty vague.

[peterpeterparker]

I was thinking that starting with the authentication can be handy because it is provided with a subscriber pattern.

const [user, setUser] = useState<User | undefined | null>(undefined);

  useEffect(() => {
    const sub = authSubscribe((user) => setUser(user));

    return () => sub();
  }, []);

That way one use a hook in they React app to simplify this. So agree with you, starting with a hook.

Then, it would be nice to add a provider to make the initialization initJuno and initAnalytics easy.

[peterpeterparker]

Tthere isn't a project yet so maybe as a first step we can setup a project?

If yes, I was also thinking that we can move this feature requests to the new repo plugins as it feels more like an add-ons that a core library. WDYT?

[Suitec9]

It worried me for days whether or not a project was necessary separate from this repo. I think moving this feature request to the repo is a great first step.

[peterpeterparker]

Let's do it! Done. ✅

As a next, do you want to instantiate the sub-folder/project for this feature?

[Suitec9]

Let's do it. I think I can initialize the folder and set up the basic package structure:

• src/
  • components/
  • JunoProvider.tsx
    • useAuth.tsx
  • useJuno.ts
  • contexts/
  • JunoContext.ts
  • hooks/
  • useCollection.ts
  • useDoc.ts
• test/
  • components.test.tsx
  • hooks.test.tsx
• README.md
• package.json
• tsconfig.json Let me know, if this is still in line with the vision.

[peterpeterparker]

Sounds good to me!

Given that this repo is a npm workspace I would just not initiate the src at the root but in plugins/react-hooks or any better idea?

[Suitec9]

Plugin/react-hooks is way better, I just moved in the plugins folder. Currently reading the Juno documentation, I want to see all the functions and propably use the dependencies if necessary.

[peterpeterparker]

Coolio. Ping me any time if you ever got questions.