Reason Tutorial Mashup using Context Part 1

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

Via @rita_krutikova

ReasonReact context explained in action

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:

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:

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:

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:

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)

That's it folks. Working demo here.

Blog

Reason Tutorial Mashup using Context Part 1

Alain

Join Our Newsletter. No Spam, Only the good stuff.

Related