shared context

.eslintcache

@@ -1 +1 @@
-[{"/Users/salvatore/Mohole/mmdb-react/src/index.js":"1","/Users/salvatore/Mohole/mmdb-react/src/components/Alert/index.js":"2","/Users/salvatore/Mohole/mmdb-react/src/App.js":"3","/Users/salvatore/Mohole/mmdb-react/src/reportWebVitals.js":"4","/Users/salvatore/Mohole/mmdb-react/src/components/Add/index.js":"5","/Users/salvatore/Mohole/mmdb-react/src/utils/state.js":"6","/Users/salvatore/Mohole/mmdb-react/src/components/Home/index.js":"7","/Users/salvatore/Mohole/mmdb-react/src/components/View/index.js":"8"},{"size":589,"mtime":1607426675669,"results":"9","hashOfConfig":"10"},{"size":433,"mtime":1607082426716,"results":"11","hashOfConfig":"10"},{"size":1331,"mtime":1607426703455,"results":"12","hashOfConfig":"10"},{"size":362,"mtime":1606758586977,"results":"13","hashOfConfig":"10"},{"size":113,"mtime":1607081468127,"results":"14","hashOfConfig":"10"},{"size":629,"mtime":1607426092580,"results":"15","hashOfConfig":"10"},{"size":743,"mtime":1607425295221,"results":"16","hashOfConfig":"10"},{"size":542,"mtime":1607425979791,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"gg5kjx",{"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},{"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},"/Users/salvatore/Mohole/mmdb-react/src/index.js",[],"/Users/salvatore/Mohole/mmdb-react/src/components/Alert/index.js",[],"/Users/salvatore/Mohole/mmdb-react/src/App.js",[],"/Users/salvatore/Mohole/mmdb-react/src/reportWebVitals.js",[],"/Users/salvatore/Mohole/mmdb-react/src/components/Add/index.js",[],"/Users/salvatore/Mohole/mmdb-react/src/utils/state.js",[],"/Users/salvatore/Mohole/mmdb-react/src/components/Home/index.js",[],"/Users/salvatore/Mohole/mmdb-react/src/components/View/index.js",[]]
+[{"/Users/salvatore/Mohole/mmdb-react/src/index.js":"1","/Users/salvatore/Mohole/mmdb-react/src/components/Alert/index.js":"2","/Users/salvatore/Mohole/mmdb-react/src/App.js":"3","/Users/salvatore/Mohole/mmdb-react/src/reportWebVitals.js":"4","/Users/salvatore/Mohole/mmdb-react/src/components/Add/index.js":"5","/Users/salvatore/Mohole/mmdb-react/src/utils/state.js":"6","/Users/salvatore/Mohole/mmdb-react/src/components/Home/index.js":"7","/Users/salvatore/Mohole/mmdb-react/src/components/View/index.js":"8","/Users/salvatore/Mohole/mmdb-react/src/utils/api.js":"9"},{"size":713,"mtime":1611078513604,"results":"10","hashOfConfig":"11"},{"size":433,"mtime":1607082426716,"results":"12","hashOfConfig":"11"},{"size":1459,"mtime":1611078372148,"results":"13","hashOfConfig":"11"},{"size":362,"mtime":1606758586977,"results":"14","hashOfConfig":"11"},{"size":113,"mtime":1607081468127,"results":"15","hashOfConfig":"11"},{"size":809,"mtime":1611075829015,"results":"16","hashOfConfig":"11"},{"size":743,"mtime":1607425295221,"results":"17","hashOfConfig":"11"},{"size":773,"mtime":1611078895901,"results":"18","hashOfConfig":"11"},{"size":145,"mtime":1607423291240,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"gg5kjx",{"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,"usedDeprecatedRules":"28"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/salvatore/Mohole/mmdb-react/src/index.js",[],"/Users/salvatore/Mohole/mmdb-react/src/components/Alert/index.js",[],"/Users/salvatore/Mohole/mmdb-react/src/App.js",[],"/Users/salvatore/Mohole/mmdb-react/src/reportWebVitals.js",[],["39","40"],"/Users/salvatore/Mohole/mmdb-react/src/components/Add/index.js",[],"/Users/salvatore/Mohole/mmdb-react/src/utils/state.js",[],"/Users/salvatore/Mohole/mmdb-react/src/components/Home/index.js",[],"/Users/salvatore/Mohole/mmdb-react/src/components/View/index.js",["41"],"/Users/salvatore/Mohole/mmdb-react/src/utils/api.js",[],{"ruleId":"42","replacedBy":"43"},{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","severity":1,"message":"47","line":14,"column":6,"nodeType":"48","endLine":14,"endColumn":8,"suggestions":"49"},"no-native-reassign",["50"],"no-negated-in-lhs",["51"],"react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'dispatch' and 'id'. Either include them or remove the dependency array.","ArrayExpression",["52"],"no-global-assign","no-unsafe-negation",{"desc":"53","fix":"54"},"Update the dependencies array to be: [dispatch, id]",{"range":"55","text":"56"},[385,387],"[dispatch, id]"]

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "12.2.2",
     "normalize.css": "8.0.1",
     "react": "17.0.1",
+    "react-context-devtool": "2.0.2",
     "react-dom": "17.0.1",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.1",

src/App.js

@@ -6,7 +6,7 @@ import {
   useLocation
 } from "react-router-dom";
 
-import { INIT_STATE, reducer } from './utils/state';
+import { INIT_STATE, reducer, AppContext } from './utils/state';
 
 import { Alert } from './components/Alert';
 import { Home } from './components/Home';
@@ -30,30 +30,32 @@ function App() {
   });
 
   useEffect(() => {
-    dispatch({ type: 'clear-current' });
+    // dispatch({ type: 'clear-current' });
   }, [location]);
 
   return (
-    <div className="App">
-      <Alert visible={state.alert.visible} dismiss={hideAlert} />
-
-      <Link to="/">
-        <h1>Mohole Movie Database</h1>
-      </Link>
-
-      <Switch>
-        <Route path="/add">
-          <Add />
-        </Route>
-        <Route path="/view/:id">
-          <View />
-        </Route>
-        <Route path="/">
-          <Home items={state.filters} dataReady={updateData} />
-        </Route>
-      </Switch>
-
-    </div>
+    <AppContext.Provider value={{state, dispatch}}>
+      <div className="App">
+        <Alert visible={state.alert.visible} dismiss={hideAlert} />
+
+        <Link to="/">
+          <h1>Mohole Movie Database</h1>
+        </Link>
+
+        <Switch>
+          <Route path="/add">
+            <Add />
+          </Route>
+          <Route path="/view/:id">
+            <View />
+          </Route>
+          <Route path="/">
+            <Home items={state.filters} dataReady={updateData} />
+          </Route>
+        </Switch>
+
+      </div>
+    </AppContext.Provider>
   );
 }
 

src/components/View/index.js

@@ -1,10 +1,18 @@
 
+import { useContext, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { BASE_URL, getData } from './../../utils/api';
+import { AppContext } from './../../utils/state';
 
 const View = (props) => {
+  const { dispatch } = useContext(AppContext);
   const { id } = useParams();
+
+  useEffect(() => {
+    dispatch({ type: 'update-current', payload: id });
+  }, []);
+
   const dataReady = props.dataReady || function () {
     console.warn('MMDB: no dataReady callback has been passed to the <View /> component!')
   };

src/index.js

@@ -4,14 +4,19 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { debugContextDevtool } from 'react-context-devtool';
+
+const container = document.getElementById('root');
+
+debugContextDevtool(container);
 
 ReactDOM.render(
   <React.StrictMode>
     <Router>
       <App />
     </Router>
   </React.StrictMode>,
-  document.getElementById('root')
+  container
 );
 
 // If you want to start measuring performance in your app, pass a function

src/utils/state.js

@@ -1,3 +1,7 @@
+import React from 'react';
+
+const AppContext = React.createContext();
+
 const INIT_STATE = {
   alert: {
     visible: false,
@@ -22,12 +26,15 @@ const reducer = (state, action) => {
       return newData;
     case 'clear-current':
       return Object.assign({}, state, { current: undefined });
+    case 'update-current':
+      return Object.assign({}, state, { current: action.payload });
     default:
       return state;
   }
 }
 
 export {
   INIT_STATE,
-  reducer
+  reducer,
+  AppContext
 }