Dev

.eslintcache

@@ -1 +1 @@
-[{"C:\\Users\\hugop\\Projets\\react\\context\\src\\index.js":"1","C:\\Users\\hugop\\Projets\\react\\context\\src\\App.js":"2","C:\\Users\\hugop\\Projets\\react\\context\\src\\reportWebVitals.js":"3","C:\\Users\\hugop\\Projets\\react\\context\\src\\components\\Navbar.js":"4","C:\\Users\\hugop\\Projets\\react\\context\\src\\components\\BookList.js":"5","C:\\Users\\hugop\\Projets\\react\\context\\src\\context\\ThemeContext.js":"6"},{"size":500,"mtime":499162500000,"results":"7","hashOfConfig":"8"},{"size":367,"mtime":1610902424666,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":697,"mtime":1610903018938,"results":"11","hashOfConfig":"8"},{"size":745,"mtime":1610903196989,"results":"12","hashOfConfig":"8"},{"size":560,"mtime":1610902480140,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"9mbukd",{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\hugop\\Projets\\react\\context\\src\\index.js",[],"C:\\Users\\hugop\\Projets\\react\\context\\src\\App.js",[],"C:\\Users\\hugop\\Projets\\react\\context\\src\\reportWebVitals.js",[],"C:\\Users\\hugop\\Projets\\react\\context\\src\\components\\Navbar.js",[],"C:\\Users\\hugop\\Projets\\react\\context\\src\\components\\BookList.js",[],"C:\\Users\\hugop\\Projets\\react\\context\\src\\context\\ThemeContext.js",[]]
+[{"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\index.js":"1","C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\App.js":"2","C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\reportWebVitals.js":"3","C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\components\\Navbar.js":"4","C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\components\\BookList.js":"5","C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\context\\AuthContext.js":"6","C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\components\\ThemeToggle.js":"7","C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\context\\ThemeContext.js":"8","C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\context\\BookContext.js":"9"},{"size":500,"mtime":499162500000,"results":"10","hashOfConfig":"11"},{"size":716,"mtime":1610925213251,"results":"12","hashOfConfig":"11"},{"size":362,"mtime":499162500000,"results":"13","hashOfConfig":"11"},{"size":2140,"mtime":1610924908953,"results":"14","hashOfConfig":"11"},{"size":1418,"mtime":1610925680336,"results":"15","hashOfConfig":"11"},{"size":575,"mtime":1610923933974,"results":"16","hashOfConfig":"11"},{"size":684,"mtime":1610924908955,"results":"17","hashOfConfig":"11"},{"size":693,"mtime":1610905381577,"results":"18","hashOfConfig":"11"},{"size":565,"mtime":1610925185818,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1mdbcas",{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\index.js",[],"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\App.js",[],"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\reportWebVitals.js",[],"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\components\\Navbar.js",[],"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\components\\BookList.js",[],"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\context\\AuthContext.js",[],"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\components\\ThemeToggle.js",[],"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\context\\ThemeContext.js",[],"C:\\Users\\hugop\\Projets\\react\\react-context\\context-class\\src\\context\\BookContext.js",["38"],{"ruleId":"39","severity":1,"message":"40","line":6,"column":19,"nodeType":"41","messageId":"42","endLine":6,"endColumn":27},"no-unused-vars","'setBooks' is assigned a value but never used.","Identifier","unusedVar"]

src/App.js

@@ -1,14 +1,22 @@
 import React from 'react';
 import BookList from './components/BookList';
 import Navbar from './components/Navbar';
+import ThemeToggle from './components/ThemeToggle';
+import AuthContextProvider from './context/AuthContext';
+import BookContextProvider from './context/BookContext';
 import ThemeContextProvider from './context/ThemeContext';
 
 function App() {
   return (
     <div className="App">
       <ThemeContextProvider>
-        <Navbar />
-        <BookList />
+        <AuthContextProvider>
+          <Navbar />
+          <BookContextProvider>
+            <BookList />
+          </BookContextProvider>
+          <ThemeToggle />
+        </AuthContextProvider>
       </ThemeContextProvider>
     </div>
   );

src/components/BookList.js

@@ -1,23 +1,42 @@
-import React, { Component } from 'react'
+import React, { useContext } from 'react'
+import { BookContext } from '../context/BookContext';
 import { ThemeContext } from '../context/ThemeContext';
 
-class BookList extends Component {
-    static contextType = ThemeContext;
 
-    render() {
-        const { isLightTheme, light, dark } = this.context;
-        const theme = isLightTheme ? light : dark;
+// class context version
+// class BookList extends Component {
+//     static contextType = ThemeContext;
+//     render() {
+//         const { isLightTheme, light, dark } = this.context;
+//         const theme = isLightTheme ? light : dark;
 
-        return (
-            <div className="book-list" style={{ background: theme.bg, color: theme.syntax }}>
-                <ul>
-                    <li style={{ background: theme.ui }}>kings</li>
-                    <li style={{ background: theme.ui }}>queens</li>
-                    <li style={{ background: theme.ui }}>final</li>
-                </ul>
-            </div>
-        )
-    }
+//         return (
+//             <div className="book-list" style={{ background: theme.bg, color: theme.syntax }}>
+//                 <ul>
+//                     <li style={{ background: theme.ui }}>kings</li>
+//                     <li style={{ background: theme.ui }}>queens</li>
+//                     <li style={{ background: theme.ui }}>final</li>
+//                 </ul>
+//             </div>
+//         )
+//     }
+// }
+
+const BookList = () => {
+    const { isLightTheme, light, dark } = useContext(ThemeContext);
+    const { books } = useContext(BookContext);
+    const theme = isLightTheme ? light : dark;
+    console.log(books)
+
+    return (
+        <div className="book-list" style={{ background: theme.bg, color: theme.syntax }}>
+            <ul>
+                {books.map(book => {
+                    return <li key={book.id} style={{ background: theme.ui }}>{book.title}</li>
+                })}
+            </ul>
+        </div>
+    )
 }
 
 export default BookList;

src/components/Navbar.js

@@ -1,26 +1,64 @@
-import React, { Component } from 'react';
+import React, { useContext } from 'react';
+import { AuthContext } from '../context/AuthContext';
 import { ThemeContext } from '../context/ThemeContext';
 
-class Navbar extends Component {
-    static contextType = ThemeContext;
 
-    render() {
-        console.log(this.context);
-        const { isLightTheme, light, dark } = this.context;
-        const theme = isLightTheme ? light : dark;
+// class context version
+// class Navbar extends Component {
+//     render() {
+//         return (
+//             <AuthContext.Consumer>{(authContext) => (
+//                 <ThemeContext.Consumer>{(themeContext) => {
+//                     const { isAuthenticated, toggleAuth } = authContext;
+//                     const { isLightTheme, light, dark } = themeContext;
+//                     const theme = isLightTheme ? light : dark;
 
-        return (
+//                     return (
+//                         <nav style={{ background: theme.ui, color: theme.syntax }}>
+//                             <h1>Context App</h1>
+
+//                             <div onClick={toggleAuth}>
+//                                 { isAuthenticated ? 'Logged in' : 'Logged out' }
+//                             </div>
+
+//                             <ul>
+//                                 <li>Home</li>
+//                                 <li>About</li>
+//                                 <li>Contact</li>
+//                             </ul>
+//                         </nav>
+//                     )
+//                 }}
+//                 </ThemeContext.Consumer>
+//             )}
+//             </AuthContext.Consumer>
+//         )
+//     }
+// }
+
+const Navbar = () => {
+    const { isLightTheme, light, dark } = useContext(ThemeContext);
+    const { isAuthenticated, toggleAuth } = useContext(AuthContext);
+    const theme = isLightTheme ? light : dark;
+
+    return (
+        <div>
             <nav style={{ background: theme.ui, color: theme.syntax }}>
                 <h1>Context App</h1>
 
+                <div onClick={toggleAuth}>
+                    { isAuthenticated ? 'Logged in' : 'Logged out' }
+                </div>
+
                 <ul>
                     <li>Home</li>
                     <li>About</li>
                     <li>Contact</li>
                 </ul>
             </nav>
-        )
-    }
+        </div>
+    )
 }
 
+
 export default Navbar;

src/components/ThemeToggle.js

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react'
+import { ThemeContext } from '../context/ThemeContext';
+
+// class context version
+// class ThemeToggle extends Component {
+//     static contextType = ThemeContext;
+
+//     render() {
+//         const { toggleTheme } = this.context;
+
+//         return (
+//             <div>
+//                 <button onClick={toggleTheme}>Theme</button>
+//             </div>
+//         )
+//     }
+// }
+
+const ThemToggle = () => {
+    const { toggleTheme } = useContext(ThemeContext);
+
+    return ( 
+        <div>
+            <button onClick={toggleTheme}>Theme</button>
+        </div>
+    );
+}
+
+export default ThemToggle;

src/context/AuthContext.js

@@ -0,0 +1,21 @@
+import React, { Component, createContext } from 'react'
+
+export const AuthContext = createContext();
+
+class AuthContextProvider extends Component {
+    state = {
+        isAuthenticated: false
+    }
+    toggleAuth = () => {
+        this.setState({ isAuthenticated: !this.state.isAuthenticated });
+    }
+    render() {
+        return (
+            <AuthContext.Provider value={{...this.state, toggleAuth: this.toggleAuth}}>
+                { this.props.children }
+            </AuthContext.Provider>
+        )
+    }
+}
+
+export default AuthContextProvider;

src/context/BookContext.js

@@ -0,0 +1,19 @@
+import React, { createContext, useState } from 'react';
+
+export const BookContext = createContext();
+
+const BookContextProvider = (props) => {
+    const [books, setBooks] = useState([
+        { title: 'name of the wind', id: 1 },
+        { title: 'the way of kings', id: 2 },
+        { title: 'the final empire', id: 3 },
+        { title: 'the hero of ages', id: 4 }
+    ])
+    return (
+        <BookContext.Provider value={{ books }}>
+            { props.children }
+        </BookContext.Provider>
+    );
+}
+
+export default BookContextProvider;

src/context/ThemeContext.js

@@ -8,9 +8,12 @@ class ThemeContextProvider extends Component {
         light: { syntax: '#555', ui: '#ddd', bg: '#eee'},
         dark: { syntax: '#ddd', ui: '#333', bg: '#555'}
     }
+    toggleTheme = () => {
+        this.setState({ isLightTheme: !this.state.isLightTheme });
+    }
     render() { 
         return (
-            <ThemeContext.Provider value={{...this.state}}>
+            <ThemeContext.Provider value={{...this.state, toggleTheme: this.toggleTheme}}>
                 { this.props.children }
             </ThemeContext.Provider>
         );