User provider

UserProvider.re

module Provider = {
  let make = React.Context.provider(UserContext.context);

  let makeProps = (~value, ~children, ()) => {
    "value": value,
    "children": children,
  };
};

type state = {user: UserTypes.user};

let reducer = (_, action) => {
  switch (action) {
  | UserTypes.UserLoggedIn(userDetails) => {
      user: Authenticated(userDetails),
    }
  | UserTypes.UserLoggedOut => {user: Guest}
  };
};

let initialState = {user: Guest};

[@react.component]
let make = (~children) => {
  let (state, dispatch) = React.useReducer(reducer, initialState);

  let listenAuthEvents = () => {
    Amplify.Hub.listen("auth", eventData => {
      switch (eventData##payload##event) {
      | "signIn" =>
        let userDetails: UserTypes.userDetails = {
          id: eventData##payload##data##attributes##sub,
          username: eventData##payload##data##username,
        };
        dispatch(UserTypes.UserLoggedIn(userDetails));
      | "signOut" => dispatch(UserTypes.UserLoggedOut)
      | other => Js.log("Unhandled auth event: " ++ other)
      }
    });
  };

  let fetchUserData = () => {
    Amplify.Auth.currentAuthenticatedUser()
    |> Js.Promise.then_(authData => {
         let userDetails: UserTypes.userDetails = {
           id: authData##attributes##sub,
           username: authData##username,
         };
         dispatch(UserTypes.UserLoggedIn(userDetails));
         Js.Promise.resolve();
       });
  };

  React.useEffect0(() => {
    listenAuthEvents();
    ignore(fetchUserData());
    Some(() => {Amplify.Hub.remove("auth")});
  });

  <Provider value=(state.user, dispatch)> children </Provider>;
};