[SESSION CONTEXT] - Added SessionContext

__tests__/components/Layout.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Layout from '../../components/Layout'
+import SessionContext from '../../helpers/contexts/session'
+
+describe('Layout Component', () => {
+  test('Should render correctly when no user in session', () => {
+    const session = { data: null }
+    const tree = (
+      <SessionContext.Provider value={session}>
+        <Layout />
+      </SessionContext.Provider>
+    )
+
+    const { container } = render(tree)
+    expect(container).toMatchSnapshot()
+  })
+
+  test('Should render correctly when user session found', () => {
+    const session = { data: { userInfo: { name:'tester', username: 'tester' } } }
+    const tree = (
+      <SessionContext.Provider value={session}>
+        <Layout />
+      </SessionContext.Provider>
+    )
+
+    const { container } = render(tree)
+    expect(container).toMatchSnapshot()
+  })
+
+  test('Should render correct with no session context', () => {
+    const { container } = render(<Layout />)
+    expect(container).toMatchSnapshot()
+  })
+})

__tests__/components/__snapshots__/Layout.js.snap

@@ -0,0 +1,259 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout Component Should render correct with no session context 1`] = `
+<div>
+  <nav
+    class="navbar navbar-expand-lg navbar-light justify-content-between bg-white"
+  >
+    <div
+      class="container"
+    >
+      <a
+        class="navbar-brand text-primary font-weight-bold"
+        href="/"
+      >
+        C0D3
+      </a>
+      <div
+        id="navbarNav"
+      >
+        <div
+          class="navbar-nav collapse navbar-collapse"
+        >
+          <div
+            class="navbar-nav collapse navbar-collapse"
+          >
+            <a
+              class="nav-item nav-link active"
+              href="/"
+            >
+              Home 
+              <span
+                class="sr-only"
+              >
+                (current)
+              </span>
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="/#learning"
+            >
+              Learning Process
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="https://c0d3.com/book"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Resources
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="https://chat.c0d3.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Help
+            </a>
+          </div>
+        </div>
+      </div>
+      <div>
+        <a
+          class="btn btn-secondary border mr-3"
+          href="/login"
+        >
+          Login
+        </a>
+        <a
+          class="btn btn-secondary border mr-3"
+          href="/signup"
+        >
+          Signup
+        </a>
+      </div>
+    </div>
+  </nav>
+  <div
+    class="container"
+  />
+  <footer
+    class="mt-5 font-weight-light text-center pb-5 text-muted"
+  >
+    © Copyright 2020 GarageScript
+    <br />
+    All Rights Reserved
+  </footer>
+</div>
+`;
+
+exports[`Layout Component Should render correctly when no user in session 1`] = `
+<div>
+  <nav
+    class="navbar navbar-expand-lg navbar-light justify-content-between bg-white"
+  >
+    <div
+      class="container"
+    >
+      <a
+        class="navbar-brand text-primary font-weight-bold"
+        href="/"
+      >
+        C0D3
+      </a>
+      <div
+        id="navbarNav"
+      >
+        <div
+          class="navbar-nav collapse navbar-collapse"
+        >
+          <div
+            class="navbar-nav collapse navbar-collapse"
+          >
+            <a
+              class="nav-item nav-link active"
+              href="/"
+            >
+              Home 
+              <span
+                class="sr-only"
+              >
+                (current)
+              </span>
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="/#learning"
+            >
+              Learning Process
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="https://c0d3.com/book"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Resources
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="https://chat.c0d3.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Help
+            </a>
+          </div>
+        </div>
+      </div>
+      <div>
+        <a
+          class="btn btn-secondary border mr-3"
+          href="/login"
+        >
+          Login
+        </a>
+        <a
+          class="btn btn-secondary border mr-3"
+          href="/signup"
+        >
+          Signup
+        </a>
+      </div>
+    </div>
+  </nav>
+  <div
+    class="container"
+  />
+  <footer
+    class="mt-5 font-weight-light text-center pb-5 text-muted"
+  >
+    © Copyright 2020 GarageScript
+    <br />
+    All Rights Reserved
+  </footer>
+</div>
+`;
+
+exports[`Layout Component Should render correctly when user session found 1`] = `
+<div>
+  <nav
+    class="navbar navbar-expand-lg navbar-light justify-content-between bg-white"
+  >
+    <div
+      class="container"
+    >
+      <a
+        class="navbar-brand text-primary font-weight-bold"
+        href="/"
+      >
+        C0D3
+      </a>
+      <div
+        id="navbarNav"
+      >
+        <div
+          class="navbar-nav collapse navbar-collapse"
+        >
+          <div
+            class="navbar-nav collapse navbar-collapse"
+          >
+            <a
+              class="nav-item nav-link active"
+              href="/curriculum"
+            >
+              Curriculum 
+              <span
+                class="sr-only"
+              >
+                (current)
+              </span>
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="#"
+            >
+              Repo
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="#"
+            >
+              Journey
+            </a>
+            <a
+              class="nav-item nav-link"
+              href="https://chat.c0d3.com"
+            >
+              Help
+            </a>
+          </div>
+        </div>
+      </div>
+      <div>
+        <button
+          class="btn border btn-secondary overflow-hidden p-2 text-truncate"
+        >
+          tester
+        </button>
+        <button
+          class="btn border btn-secondary ml-2"
+        >
+          Logout
+        </button>
+      </div>
+    </div>
+  </nav>
+  <div
+    class="container"
+  />
+  <footer
+    class="mt-5 font-weight-light text-center pb-5 text-muted"
+  >
+    © Copyright 2020 GarageScript
+    <br />
+    All Rights Reserved
+  </footer>
+</div>
+`;

__tests__/pages/index.js

@@ -1,36 +1,39 @@
-jest.mock('../../helpers/useSession')
 jest.mock('../../pages/curriculum')
 jest.mock('../../components/LandingPage')
 import React from 'react'
 import { render } from '@testing-library/react'
 import Curriculum from '../../pages/curriculum'
-import IndexPage, {fetcher} from '../../pages/index'
+import IndexPage from '../../pages/index'
 import LandingPage from '../../components/LandingPage'
-import useSession from '../../helpers/useSession'
+import SessionContext from '../../helpers/contexts/session'
 
 describe('Index Page', () => {
   test('Should render curriculum if user is identified', async () => {
-    useSession.mockReturnValue({
-      data: { userInfo: { name:'tester', username: 'tester' } }
-    })
+    const session = { data: { userInfo: { name:'tester', username: 'tester' } } }
+    const tree = (
+      <SessionContext.Provider value={session}>
+        <IndexPage />
+      </SessionContext.Provider>
+    )
     Curriculum.mockReturnValue( <h1>Hello Curriculum</h1> )
 
-    const { getByText } = render(<IndexPage />)
+    const { getByText } = render(tree)
     getByText('Hello Curriculum')
   })
   test('Should render landing page if user is not identified', async () => {
-    useSession.mockReturnValue({
-      error: undefined,
-      data: { success: false, errorMessage: 'unauthorized' }
-    })
+    const session = { data: { success: false, errorMessage: 'unauthorized' } }
+    const tree = (
+      <SessionContext.Provider value={session}>
+        <IndexPage />
+      </SessionContext.Provider>
+    )
     LandingPage.mockReturnValue(<h1>Hello Landing</h1>)
 
-    const { getByText } = render(<IndexPage />)
+    const { getByText } = render(tree)
     getByText('Hello Landing')
   })
   test('Should not render while page is loading', async () => {
-    useSession.mockReturnValue({})
-
+    // SessionContext default value is { data: null, error: null }
     const { container } = render(<IndexPage />)
     expect(container).toMatchSnapshot()
   })

components/Layout.tsx

@@ -1,12 +1,25 @@
 import React from 'react'
 import AppNav from './AppNav'
 import Footer from './Footer'
+import SessionContext from '../helpers/contexts/session'
 
 type Props = {
   children: React.ReactElement
 }
 
 const Layout: React.FC<Props> = ({ children }) => {
+  const { data } = React.useContext(SessionContext)
+
+  if (data && data.userInfo) {
+    return (
+      <>
+        <AppNav username={data.userInfo.username} loggedIn />
+        <div className="container">{children}</div>
+        <Footer />
+      </>
+    )
+  }
+
   return (
     <>
       <AppNav />

helpers/contexts/session.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+import { SessionData } from '../useSession'
+
+const SessionContext = createContext<SessionData>({
+  data: null,
+  error: null
+})
+
+export default SessionContext