Upadate emailprovider

lecture5/email-client-context/app/contexts/EmailsContext.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { fetchEmails } from '../actions';
+const { Provider, Consumer } = React.createContext();
+
+class EmailsProvider extends React.Component {
+    state = {
+        emails: [],
+    };
+
+    fetchEmails = async () => {
+        const {emails} = await fetchEmails();
+        return this.setState(state => ({
+            emails: [...state.emails, ...emails],
+        }));
+    };
+    render(){
+        return(
+            <Provider
+            value = {{
+                state: this.state,
+                actions:{
+                    fetchEmails: this.fetchEmails,
+                },
+            }}>
+            {this.props.children}
+            </Provider>
+        );
+    }
+}
+
+export { EmailsProvider, Consumer as EmailsConsumer };

lecture5/email-client-context/app/index.jsx

@@ -3,55 +3,45 @@ import { render } from 'react-dom';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 import { AuthProvider, UserProvider, EmailsProvider } from './contexts';
-import { HomePage, LoginPage } from './containers';
+import { HomePage, LoginPage, EmailPage } from './containers';
+import { EntryController } from './controllers';
 import { login, fetchEmails } from './actions';
 
 class App extends React.Component {
   state = {
     user: undefined,
-    emails: [],
+    //emails: [],
   };
 
   updateUser = user => this.setState({ user });
 
-  fetchEmails = async () => {
-    const { emails } = await fetchEmails();
-
-    return this.setState(state => ({
-      emails: [...state.emails, ...emails],
-    }));
-  };
 
   render() {
-    const { user, emails } = this.state;
+    const { user } = this.state;
 
     return (
       <Router>
         <AuthProvider updateUser={this.updateUser}>
-          <Route
-            path="/"
-            exact
-            render={props => (
-              <UserProvider
-                value={{
-                  state: { user },
-                  actions: {},
-                }}>
-                <EmailsProvider
-                  value={{
-                    state: {
-                      emails,
-                    },
-                    actions: {
-                      fetchEmails: this.fetchEmails,
-                    },
-                  }}>
-                  <HomePage />
-                </EmailsProvider>
-              </UserProvider>
-            )}
-          />
-          <Route path="/login" exact component={LoginPage} />
+          <Switch>
+            <Route path="/login" exact component={LoginPage} />
+            <Route
+              render={() => (
+                <EntryController>
+
+                    <UserProvider
+                      value={{
+                        state: { user },
+                        actions: {},
+                      }}>
+
+                    </UserProvider>
+                    <EmailsProvider>
+                      <HomePage />
+                  </EmailsProvider>
+                </EntryController>
+              )}
+            />
+          </Switch>
         </AuthProvider>
       </Router>
     );