Auth0_V1 (#1)

* created: index.js as landingpage

created: AuthPage.js w/ initial sign in component

* added: TestPage / StudyPage / AuthPage / HomePage with initial layouts and styling structure

* added: GraphQL query to siteMetadata in getaby-config.js to render the app subTitle on the index.js page

* using GraphQL to access markdown data

* added: initial connection to Contentful CMS

weird issue around gatsby-source-contentful needing an img saved in media in order to work
gatsbyjs/gatsby#15397

* debug: structure of <HomePage /> & GraphQL Query

<HomePage /> is now dynamically rendering the <StudySetOption /> cards for each studySet recieved from the GraphQL query

* Refactored: <SidebarLayout />

component now accepts type prop
component is dyncamically rendering JSX for appropraite type
deleated individual component implementations of the SidebarLayout

* Updated: <StudySetOption />

styled updated to be rendering a stack of cards

* updated: <SidebarLayout /> css

* initial commit: auth branch

* step: initial app.js routing and rendering appropraite data

* Updated: Project file structure

broke Views our of Pages

* authReset // STUCK: cant resolve service worker

look into implementation of auth0 & gatsby without a typical react src/index.js

* auth: reset

* stage: basic rendering of <HomePage /> (src > app > views > HomePage.js) inside of <GATSBY_INDEX /> (src > pages > index.js)

* Updated: nodes.md

* auth0-gatsby starter project

* reNamed: account functionality to app

* auth0: V1 of integration working

started from a simple auth0-gatsby starter (https://github.com/auth0-blog/gatsby-auth0) project & adapted what I had previously done to integrate the contentful CMS into gatsby

* updated: ReadMe.md

* bug: .js.js changed to .js on a few pages

* updated: license

README.md

@@ -1,4 +1,7 @@
 # NoteCards
 
 # Copyright
+This code is not open source.
+Please contact [email protected] if you are interesting in acquiring a license.
+
 All code is owned by Reed Turgeon.

client/.gitignore

@@ -51,8 +51,10 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
-# dotenv environment variable files
-.env*
+# dotenv environment variables file
+.env
+.env.*
+!.env.EXAMPLE
 
 # gatsby files
 .cache/

client/README.md

@@ -0,0 +1,43 @@
+# React
+Plugins & Packages: </br>
+
+    1. react
+    2. react-dom
+    3. react-helmet
+    4. @react/router
+
+# Gatsby
+- [Main Docs](https://www.gatsbyjs.org/docs/)
+- [Search Plugins](https://www.gatsbyjs.org/plugins/)
+
+Plugins & Packages: </br>
+
+    1. gatsby
+    2. gatsby-plugin-react-helmet
+    3. "gatsby-source-filesystem
+
+# Styling
+Plugins & Packages: </br>
+
+    1. gatsby-plugin-sass
+
+# Auth0
+- [Starter Repo Title: auth0-blog / gatsby-auth0](https://github.com/auth0-blog/gatsby-auth0)
+
+Plugins & Packages: </br>
+
+    1. auth0-js
+
+# Contentful
+Plugins & Packages: </br>
+
+    1. @contentful/rich-text-react-renderer
+    2. gatsby-source-contentful
+
+# Markdown
+Plugins & Packages: </br>
+
+    1. gatsby-source-filesystem
+    2. gatsby-transformer-remark
+
+

client/gatsby-browser.js

@@ -1,7 +1,31 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
+import React from "react"
+import { silentAuth } from "./src/utils/auth"
 
-// You can delete this file if you're not using it
+class SessionCheck extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      loading: true,
+    }
+  }
+
+  handleCheckSession = () => {
+    this.setState({ loading: false })
+  }
+
+  componentDidMount() {
+    silentAuth(this.handleCheckSession)
+  }
+
+  render() {
+    return (
+      this.state.loading === false && (
+        <React.Fragment>{this.props.children}</React.Fragment>
+      )
+    )
+  }
+}
+
+export const wrapRootElement = ({ element }) => {
+  return <SessionCheck>{element}</SessionCheck>
+}

client/gatsby-config.js

@@ -1,32 +1,72 @@
+// configure options for a Gatsby site, with metadata for project title, description, plugins, etc.
+
+// -- //
+require('dotenv').config()
+console.log(process.env)
+console.log('Space ID:',process.env.CONTENTFUL_SPACE_ID)
+console.log('Access Token:',process.env.CONTENTFUL_ACCESS_TOKEN)
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    // title: `Gatsby Default Starter`,
+    title: `NoteCards`,
+    subTitle: `The Proving Ground`,
+    description: `Description`,
+    author: `Reed Turgeon`,
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
+    // ACCESS: Markdown Data Plugin
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
+        name: 'src',
+        path: `${__dirname}/src/`
+      }
     },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+
+    // TRANSFORM: Markdown File into usefull html
+    `gatsby-transformer-remark`,
+
+    // SASS Plugin
+    `gatsby-plugin-sass`,
+
+    // Images
+    // `gatsby-plugin-sharp`,
+    // `gatsby-transformer-sharp`,
+
     {
-      resolve: `gatsby-plugin-manifest`,
+      resolve: `gatsby-source-contentful`,
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        // Learn about environment variables: https://gatsby.dev/env-vars
+
+        // spaceId: process.env.CONTENTFUL_SPACE_ID,
+        spaceId: 'dr9akv6vk3ki',
+
+        // accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
+        accessToken: 'wagOJCJBBQCL7W2km6YGHl8Sph1UkVdr490kY3VXed8',
       },
     },
+
+
+    `gatsby-plugin-react-helmet`,
+    // {
+    //   resolve: `gatsby-source-filesystem`,
+    //   options: {
+    //     name: `images`,
+    //     path: `${__dirname}/src/images`,
+    //   },
+    // },
+    // {
+    //   resolve: `gatsby-plugin-manifest`,
+    //   options: {
+    //     name: `gatsby-starter-default`,
+    //     short_name: `starter`,
+    //     start_url: `/`,
+    //     background_color: `#663399`,
+    //     theme_color: `#663399`,
+    //     display: `minimal-ui`,
+    //     icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+    //   },
+    // },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

client/gatsby-node.js

@@ -1,7 +1,37 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
+// ./gatsby-node.js
+// Implement the Gatsby API “onCreatePage”. This is
+// called after every page is created.
+exports.onCreatePage = async ({ page, actions }) => {
+  const { createPage } = actions
 
-// You can delete this file if you're not using it
+  // page.matchPath is a special key that's used for matching pages
+  // only on the client.
+  if (page.path.match(/^\/app/)) {
+    page.matchPath = "/app/*"
+
+    // Update the page.
+    createPage(page)
+  }
+}
+
+exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
+  if (stage === "build-html") {
+    /*
+     * During the build step, `auth0-js` will break because it relies on
+     * browser-specific APIs. Fortunately, we don’t need it during the build.
+     * Using Webpack’s null loader, we’re able to effectively ignore `auth0-js`
+     * during the build. (See `src/utils/auth.js` to see how we prevent this
+     * from breaking the app.)
+     */
+    actions.setWebpackConfig({
+      module: {
+        rules: [
+          {
+            test: /auth0-js/,
+            use: loaders.null(),
+          },
+        ],
+      },
+    })
+  }
+}