Extract providers

client/App/App.tsx

@@ -19,44 +19,30 @@ import Header from "./Header/Header"
 import Login from "./Auth/Login"
 import styled from "@emotion/styled"
 
-const httpLink = new HttpLink({
-  uri: "/graphql"
-})
-
-const graphqlClient = new ApolloClient({
-  connectToDevTools: true,
-  link: httpLink,
-  cache: new InMemoryCache()
-}) as ApolloClient<any>
 
 const App = () => (
-  <ApolloProvider client={graphqlClient}>
-    <AppContextProvider>
-          <Router>
-            <Header />
-            <Content>
-
-            <Switch>
-              <Route path="/create" component={CreateEvent} />
-              <Route
-                path="/event/:eventId/edit"
-                render={(
-                  routeProps: RouteComponentProps<{ eventId: string }>
-                ) => <EditEvent eventId={routeProps.match.params.eventId} />}
-              />
-              <Route path="/login" component={Login} />
-              <Route path="/" component={Calendar} />
-              <Redirect to="/" />
-            </Switch>
-            </Content>
-
-          </Router>
-
-    </AppContextProvider>
-  </ApolloProvider>
+  <Root>
+    <Header />
+    <Content>
+      <Switch>
+        <Route path="/create" component={CreateEvent} />
+        <Route
+          path="/event/:eventId/edit"
+          render={(
+            routeProps: RouteComponentProps<{ eventId: string }>
+          ) => <EditEvent eventId={routeProps.match.params.eventId} />}
+        />
+        <Route path="/login" component={Login} />
+        <Route path="/" component={Calendar} />
+        <Redirect to="/" />
+      </Switch>
+    </Content>
+  </Root>
 )
 
+const Root = styled.div`
 
+`
 const Content = styled.div`
   display: flex;
   justify-content: center;

client/App/Providers.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import {AppContextProvider} from "./Context/AppContext"
+import {BrowserRouter as Router, Redirect, Route, Switch} from "react-router-dom"
+import {ApolloProvider} from "react-apollo"
+import {HttpLink} from "apollo-link-http"
+import {ApolloClient} from "apollo-client"
+import {InMemoryCache} from "apollo-cache-inmemory"
+
+interface Props {
+  children: React.ReactChild | React.ReactChildren
+}
+
+const httpLink = new HttpLink({
+  uri: "/graphql"
+})
+
+const graphqlClient = new ApolloClient({
+  connectToDevTools: true,
+  link: httpLink,
+  cache: new InMemoryCache()
+}) as ApolloClient<any>
+
+
+const Providers = (props: Props) => (
+  <ApolloProvider client={graphqlClient}>
+    <AppContextProvider>
+      <Router>
+        { props.children }
+      </Router>
+    </AppContextProvider>
+  </ApolloProvider>
+)
+
+
+export default Providers

client/App/index.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import App from './App'
+import Providers from "./Providers"
 
 const appWrapper = document.createElement('div')
 document.body.appendChild(appWrapper)
 
-ReactDOM.render(<App />, appWrapper)
+ReactDOM.render((
+  <Providers><App /></Providers>
+), appWrapper)
 
 export default App