{"size": 1050, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "miguelslima/manipulae-music", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "miguelslima/manipulae-music", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "miguelslima/manipulae-music", "max_forks_repo_forks_event_min_datetime": "2021-01-12T14:20:53.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-12T14:20:53.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 24.4186046512, "max_line_length": 64, "alphanum_fraction": 0.6419047619}
import React from "react";

import { Provider } from "react-redux";
import { BrowserRouter, Switch } from "react-router-dom";

import { ThemeProvider, DefaultTheme } from "styled-components";
import usePersistedState from "./utils/usePersistedState";

import GlobalStyle from "./styles/GlobalStyles";

import light from "./styles/themes/light";
import dark from "./styles/themes/dark";

import Routes from "./routes";
import Header from "./components/Header";
import store from "./store";
import Footer from "./components/Footer";

function App() {
  const [theme, setTheme] = usePersistedState("theme", dark);

  const toggleTheme = () => {
    setTheme(theme.title === "light" ? dark : light);
  };

  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <GlobalStyle />
          <Header toggleTheme={toggleTheme} />
          <Switch>
            <Routes />
          </Switch>
          <Footer />
        </BrowserRouter>
      </ThemeProvider>
    </Provider>
  );
}

export default App;
