{"size": 2655, "ext": "js", "max_stars_repo_path": "src/App/index.js", "max_stars_repo_name": "ddustin/lightning-poker", "max_stars_repo_stars_event_min_datetime": "2020-03-27T14:06:29.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-27T09:13:20.000Z", "max_issues_repo_path": "src/App/index.js", "max_issues_repo_name": "ddustin/lightning-poker", "max_issues_repo_issues_event_min_datetime": "2020-03-28T09:34:28.000Z", "max_issues_repo_issues_event_max_datetime": "2021-09-02T04:16:55.000Z", "max_forks_repo_path": "src/App/index.js", "max_forks_repo_name": "ddustin/lightning-poker", "max_forks_repo_forks_event_min_datetime": "2020-03-27T14:06:34.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-14T04:13:07.000Z"}
{"max_stars_count": 37, "max_issues_count": 13, "max_forks_count": 12, "avg_line_length": 24.1363636364, "max_line_length": 77, "alphanum_fraction": 0.5947269303}
import React, { useEffect, createContext, useReducer } from "react";
import Menu from "../Menu";
import Nav from "../Nav";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Games from "../Games";
import ToggleButton from "./ToggleButton";
import Room from "../Room";
import Lobby from "../Lobby";
import reducer, { addHandler } from "./reducer";
import mobile from "is-mobile";
import { Helmet } from "react-helmet";
import ErrorMessage from "./ErrorMessage";
import useProfile from "./use-profile";
import "./styles.scss";

export const AppContext = createContext();

export const PORTRAIT = "portrait";
export const LANDSCAPE = "landscape";
export const TOGGLE_ORIENTATION = "TOGGLE_ORIENTATION";
export const SHOW_ERROR = "SHOW_ERROR";
export const CLEAR_ERROR = "CLER_ERROR";

addHandler(TOGGLE_ORIENTATION, action => {
  if (!mobile()) {
    return;
  }
  return {
    orientation:
      action.orientation === 0 || action.orientation === 180
        ? PORTRAIT
        : LANDSCAPE
  };
});

addHandler(SHOW_ERROR, action => {
  return {
    errorMessage: action.error
  };
});

addHandler(CLEAR_ERROR, action => {
  return {
    errorMessage: null
  };
});

const initialState = {
  orientation: LANDSCAPE,
  showRooms: false,
  mobile: mobile()
};

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const profile = useProfile(dispatch);

  useEffect(() => {
    dispatch({
      type: TOGGLE_ORIENTATION,
      orientation: window.orientation
    });
    window.addEventListener(
      "orientationchange",
      function() {
        dispatch({
          type: TOGGLE_ORIENTATION,
          orientation: window.orientation
        });
      },
      false
    );
  }, []);

  return (
    <AppContext.Provider
      value={{
        state,
        dispatch,
        ...profile
      }}
    >
      <Router>
        <Helmet>
          <body data-games={state.showRooms ? "visible" : "hidden"} />
        </Helmet>
        <Nav />
        <div
          className={`app${mobile ? " mobile" : ""}${
            state.orientation === PORTRAIT ? " portrait" : ""
          }`}
        >
          <Route path="/:tableId" component={Room} />
          <Route path="/" exact component={Lobby} />
        </div>
        <Menu />
        {!state.mobile && (
          <aside className="games-drawer">
            <Route path="/:tableId" component={ToggleButton} />
            <Route path="/:tableId" component={Games} />
          </aside>
        )}
        {state.errorMessage && <ErrorMessage message={state.errorMessage} />}
      </Router>
    </AppContext.Provider>
  );
}

export default App;
