🍎🪐 ↣ [STA-13 HDASH-5] Attempting to fix inheritance issues with layouts

client/src/App.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
+import { Switch, Route, BrowserRouter as Router, BrowserRouter } from "react-router-dom";
 import { UserContext } from "./lib/UserContext";
 import { LifetimeContext } from "./lib/LifetimeContext";
 import { LifetimeAccessRequestStatusContext } from "./lib/LifetimeAccessRequestStatusContext";
@@ -15,6 +15,7 @@ import PaymentForm from "./components/payment-form";
 import Layout from "./components/layout";
 
 import Dashboard from "./pages/Dashboard";
+import dbLayout from "./components/db-layout";
 
 // Import Magic-related things
 import { magic } from "./lib/magic";
@@ -51,6 +52,7 @@ function App() {
   }, []);
 
   return (
+
     <Router>
       <Switch>
         <UserContext.Provider value={[user, setUser]}>
@@ -81,6 +83,8 @@ function App() {
                   }}
                 />
               </Layout>
+              <div>
+              </div>
             </LifetimeAccessRequestStatusContext.Provider>
           </LifetimeContext.Provider>
         </UserContext.Provider>

client/src/components/Home.js

@@ -1,6 +1,9 @@
+import Header from "./header";
+
 const Home = () => {
   return (
     <>
+
       <h3 className="h3-header">Welcome to the Star Sailors DAO.</h3>
       <div>Read up on development news</div>
       <div>Connect with the team and fellow Star Sailors</div>

client/src/components/db-layout.js

@@ -0,0 +1,13 @@
+import Header from "./header";
+import Dashboard from "../pages/Dashboard";
+
+const dbLayout = ({}) => (
+  <>
+    <Header />
+    <main>
+      <Dashboard />
+    </main>
+  </>
+);
+
+export default dbLayout;

client/src/components/profile.js

@@ -2,6 +2,7 @@ import { useEffect, useContext } from "react";
 import { useHistory } from "react-router-dom";
 import { UserContext } from "../lib/UserContext";
 import Loading from "./loading";
+import Header from "./header";
 
 const Profile = () => {
   const history = useHistory();
@@ -19,6 +20,7 @@ const Profile = () => {
       ) : (
         user?.issuer && (
           <>
+            <Header />
             <div className="label">Email</div>
             <div className="profile-info">{user.email}</div>