added context-related data forwarding

src/App.js

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { Home } from "./pages/Home";
 import { About } from "./pages/About";
@@ -5,19 +6,44 @@ import { Users } from "./pages/Users";
 import { NotFound } from "./pages/NotFound";
 import Logo from "./components/Logo";
 import { CreateEvent } from "./pages/CreateEvent";
+import { Event } from "./pages/Event";
+import { EVENT_CONTEXT } from "./constants";
+
+export const App = (props) => {
+    const [context, setContext] = useState({
+        events: props.events,
+        updateEvents: function (events = []) {
+            if (!Array.isArray(events)) throw new TypeError("Events must come in array");
+            setContext({
+                events: events,
+                updateEvents: this.updateEvents,
+            });
+        },
+    });
 
-export const App = () => {
     return (
-        <Router>
-            <Logo />
-            <Switch>
-                <Route exact path="/about" component={About} />
-                <Route exact path="/users" component={Users} />
-                <Route exact path="/" component={Home} />
-                <Route exact path="/create" component={CreateEvent} />
-                <Route component={NotFound} />
-            </Switch>
-        </Router>
+        <EVENT_CONTEXT.Provider value={context}>
+            <Router>
+                <Logo />
+                <Switch>
+                    <Route exact path="/about" component={About} />
+                    <Route exact path="/users" component={Users} />
+                    <Route exact path="/">
+                        <Home />
+                    </Route>
+                    <Route exact path="/create" component={CreateEvent} />
+                    {Array.isArray(props.events) &&
+                        props.events.map((e) => {
+                            return (
+                                <Route key={e._id} exact path={`/${e._id}`}>
+                                    <Event id={e._id}></Event>
+                                </Route>
+                            );
+                        })}
+                    <Route component={NotFound} />
+                </Switch>
+            </Router>
+        </EVENT_CONTEXT.Provider>
     );
 };
 

src/constants.js

@@ -2,5 +2,5 @@ import { createContext } from "react";
 import { APIClient } from "./utils/APIClient";
 
 export const BACKEND_URL = "http://localhost:3000";
-export const EVENT_CONTEXT = createContext([]);
+export const EVENT_CONTEXT = createContext();
 export const API_CLIENT = new APIClient(BACKEND_URL);

src/index.js

@@ -3,10 +3,15 @@ import ReactDOM from "react-dom";
 import "./index.scss";
 import { App } from "./App.js";
 import "bootstrap/dist/css/bootstrap.min.css";
+import { API_CLIENT } from "./constants";
 
-ReactDOM.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-    document.getElementById("root")
-);
+(async () => {
+    const dbEvents = await API_CLIENT.getEvents();
+
+    ReactDOM.render(
+        <React.StrictMode>
+            <App events={dbEvents} />
+        </React.StrictMode>,
+        document.getElementById("root")
+    );
+})();