Reason Tutorial Mashup using Context Part 1
Tags: reason, react, learning, tutorial
Published: 2019-11-12 16:18:15

---
title: Reason Tutorial Mashup using Context Part 1

published: true
description: Music Player in Reason With The useContext Hook + ReasonReact context explained In Action
tags: #reason #react #learning #tutorial 
series: Reason-Context-Mashup
---

We are going iterate on two very helpful tutorials by adding Ms. Krutikova's auth context to Ms. Brandts reason-music app.

Follow these tutorials then come back when you are done.

Via [@hisophiabrandt]

- [How To Create a Music Player in Reason With The useContext Hook Part 1](https://dev.to/sophiabrandt/how-to-create-a-music-player-in-reason-with-the-usecontext-hook-part-1-59dj)
- [How To Create a Music Player in Reason With The useContext Hook Part 2](https://dev.to/sophiabrandt/how-to-create-a-music-player-in-reason-with-the-usecontext-hook-part-2-3f4a)
- [How To Create a Music Player in Reason With The useContext Hook Part 3](https://dev.to/sophiabrandt/how-to-create-a-music-player-in-reason-with-the-usecontext-hook-part-3-2f0g)
- [How To Create a Music Player in Reason With The useContext Hook Part 4](https://dev.to/sophiabrandt/how-to-create-a-music-player-in-reason-with-the-usecontext-hook-part-4-2c9d)

Via [@rita_krutikova]

- [ReasonReact context explained in action](https://dev.to/margaretkrutikova/reason-react-context-explained-in-action-5eki)


Now that you have done that, you can look at the mashup and see how simple it is to add simple auth to the music app. The mashup is here: https://github.com/idkjs/brandt-plus-krutikova-simple.

Basically, I added Bulma css to the auth demo then changed the entry point to use the auth context that Ms. Krutikova graciously taught us.

We add auth without ever touching the music app. 

We change the `App.re` in the music app from:

```ocaml
open ReactUtils;

[@react.component]
let make = () =>
  <div className="section is-fullheignt">
    <div className="container">
      <div className="column is-6 is-offset-4">
        <h1 className="is-size-2 has-text-centered">
          {s("Reason Music Player")}
        </h1>
        <br />
        <MusicPlayer> <TrackList /> <PlayerControls /> </MusicPlayer>
      </div>
    </div>
  </div>;
```
To: 

```ocaml
open ReactUtils;

[@react.component]
let make = () => {
  let (user, _) = UserContext.useUser();
  let isLoggedIn =
    switch (user) {
    | LoggedIn(_string) => true
    | Anonymous => false
    };
  <div className="section is-fullheignt">
    <div className="container">
      <div className="column is-6 is-offset-4">
        <h1 className="is-size-2 has-text-centered">
          {s("Reason Music Player")}
        </h1>
        <br />
        <Header />
        {!isLoggedIn
           ? <div>
               <span className="user-message">
                 {React.string("Sneaky, you are browsing anonymously!")}
                 <br />
                 {React.string("Sign in to see the track list.")}
               </span>

             </div>
           : <div>
               <MusicPlayer> <TrackList /> <PlayerControls /> </MusicPlayer>
             </div>}
      </div>
    </div>
  </div>;
};
```
Here we add access to the User's auth state with this snippet at the top of the `App.re` component:

```ocaml
let (user, _) = UserContext.useUser();
  let isLoggedIn =
    switch (user) {
    | LoggedIn(_string) => true
    | Anonymous => false
    };

```
Then we add a new entry file where we wrap Ms.Brandt's `App.re` in Ms.Krutikova's `UserContext.Provider` to give what ever is passed in access to the user's auth state. Since `Header.re` is also accessing the auth state, it know whether to render a `login` or `logout` button:

```ocaml
open Types;
type state = {user};

let reducer = (_, action) =>
  switch (action) {
  | UserLoggedIn(userName) => {user: LoggedIn(userName)}
  | UserLoggedOut => {user: Anonymous}
  };

[@react.component]
let make = () => {
  let (state, dispatch) = React.useReducer(reducer, {user: Anonymous});
  <UserContext.Provider value=(state.user, dispatch)>
    <Home />
  </UserContext.Provider>;
};

```

(incidentally, if you want to get some colors in your reason code snippit, just annotate your backticks that start you snippet with `ocaml`. This works here and in the [reason-discord channel](https://discordapp.com/invite/reasonml))

That's it folks. Working demo [here](https://idkjs.github.io/brandt-plus-krutikova-simple/).

[@hisophiabrandt]: https://twitter.com/hisophiabrandt
[@rita_krutikova]: https://twitter.com/rita_krutikova