2020-04-21 20:32:53 -07:00
|
|
|
import React from "react";
|
2020-07-31 23:10:34 -07:00
|
|
|
import { ApolloProvider } from "@apollo/client";
|
2020-09-02 03:06:09 -07:00
|
|
|
import { Auth0Provider } from "@auth0/auth0-react";
|
2020-07-20 21:32:42 -07:00
|
|
|
import { CSSReset, ChakraProvider } from "@chakra-ui/core";
|
2020-08-12 00:37:31 -07:00
|
|
|
import defaultTheme from "@chakra-ui/theme";
|
2020-05-10 00:21:04 -07:00
|
|
|
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
|
2020-05-18 00:20:48 -07:00
|
|
|
import loadable from "@loadable/component";
|
2020-09-04 05:59:35 -07:00
|
|
|
import { useAuth0 } from "@auth0/auth0-react";
|
2020-04-21 17:49:52 -07:00
|
|
|
|
2020-09-04 05:59:35 -07:00
|
|
|
import buildApolloClient from "./apolloClient";
|
2020-05-18 00:20:48 -07:00
|
|
|
|
2020-09-04 05:59:35 -07:00
|
|
|
const ItemsPage = loadable(() => import("./ItemsPage"));
|
2020-05-18 00:20:48 -07:00
|
|
|
const HomePage = loadable(() => import("./HomePage"));
|
2020-09-04 05:59:35 -07:00
|
|
|
const WardrobePage = loadable(() => import("./WardrobePage"));
|
2020-04-22 14:02:23 -07:00
|
|
|
|
2020-08-12 00:37:31 -07:00
|
|
|
const theme = {
|
|
|
|
...defaultTheme,
|
|
|
|
styles: {
|
|
|
|
...defaultTheme.styles,
|
|
|
|
global: ({ colorMode, ...rest }) => ({
|
|
|
|
...defaultTheme.styles.global({ colorMode, ...rest }),
|
|
|
|
color: colorMode === "light" ? "green.800" : "green.50",
|
2020-08-12 01:46:27 -07:00
|
|
|
transition: "all 0.25s",
|
2020-08-12 00:37:31 -07:00
|
|
|
}),
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2020-04-25 23:55:39 -07:00
|
|
|
/**
|
|
|
|
* App is the entry point of our application. There's not a ton of exciting
|
|
|
|
* stuff happening here, mostly just setting up some globals and theming!
|
|
|
|
*
|
|
|
|
* To really dive into the code, try going down into a page component!
|
|
|
|
*/
|
2020-04-21 17:49:52 -07:00
|
|
|
function App() {
|
|
|
|
return (
|
2020-05-10 00:21:04 -07:00
|
|
|
<Router>
|
2020-09-02 03:06:09 -07:00
|
|
|
<Auth0Provider
|
|
|
|
domain="openneo.us.auth0.com"
|
|
|
|
clientId="8LjFauVox7shDxVufQqnviUIywMuuC4r"
|
|
|
|
redirectUri={window.location.origin}
|
2020-09-02 23:00:16 -07:00
|
|
|
audience="https://impress-2020.openneo.net/api"
|
|
|
|
scope=""
|
2020-09-02 03:06:09 -07:00
|
|
|
>
|
2020-09-04 05:59:35 -07:00
|
|
|
<ApolloProviderWithAuth0>
|
2020-09-02 03:06:09 -07:00
|
|
|
<ChakraProvider theme={theme}>
|
|
|
|
<CSSReset />
|
|
|
|
<Switch>
|
|
|
|
<Route path="/outfits/new">
|
|
|
|
<WardrobePage />
|
|
|
|
</Route>
|
2020-09-04 05:59:35 -07:00
|
|
|
<Route path="/user/:userId/items">
|
|
|
|
<ItemsPage />
|
|
|
|
</Route>
|
2020-09-02 03:06:09 -07:00
|
|
|
<Route path="/">
|
|
|
|
<HomePage />
|
|
|
|
</Route>
|
|
|
|
</Switch>
|
|
|
|
</ChakraProvider>
|
2020-09-04 05:59:35 -07:00
|
|
|
</ApolloProviderWithAuth0>
|
2020-09-02 03:06:09 -07:00
|
|
|
</Auth0Provider>
|
2020-05-10 00:21:04 -07:00
|
|
|
</Router>
|
2020-04-21 17:49:52 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-04 05:59:35 -07:00
|
|
|
function ApolloProviderWithAuth0({ children }) {
|
|
|
|
const auth0 = useAuth0();
|
|
|
|
const auth0Ref = React.useRef(auth0);
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
auth0Ref.current = auth0;
|
|
|
|
}, [auth0]);
|
|
|
|
|
|
|
|
const client = React.useMemo(
|
|
|
|
() => buildApolloClient(() => auth0Ref.current),
|
|
|
|
[]
|
|
|
|
);
|
|
|
|
return <ApolloProvider client={client}>{children}</ApolloProvider>;
|
|
|
|
}
|
|
|
|
|
2020-04-21 17:49:52 -07:00
|
|
|
export default App;
|