chore: add comments, setup instructions

src/components/Layout.js

@@ -8,6 +8,7 @@ import { withTheme } from "emotion-theming"
 const Layout = ({ children, theme }) => (
   <>
     <Helmet title="Sol Journal" />
+    {/* some styles should applied globally via the layout */}
     <Global
       styles={css`
         * {

src/components/Navbar.js

@@ -111,6 +111,7 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
   </Header>
 )
 
+// on langing page and simple pages outside the app, simplify link options
 const SimpleNav = ({ authUser, theme }) => (
   <Header>
     <Nav>

src/components/PrivateRoute.js

@@ -1,6 +1,7 @@
 import React from "react"
 import { Redirect, Location } from "@reach/router"
 
+// when a user isn't logged in, force a redirect
 const PrivateRoute = ({ component: Component, authed, ...rest }) => {
   return (
     <Location>

src/components/context/online.js

@@ -1,5 +1,6 @@
 import React from "react"
 
+// when navigator is available outside of the build phase, provide it through Context
 export const OnlineContext = React.createContext({
   online: typeof window !== "undefined" && navigator && navigator.onLine,
 })

src/components/context/theme.js

@@ -2,6 +2,8 @@ import React from "react"
 import { Helmet } from "react-helmet"
 import theme from "styles/theme"
 
+// create an app-wide context for the theme being used as
+// well as a function to toggle it back and forth
 const ThemeTogglerContext = React.createContext({
   themeName: "LIGHT",
   toggle: () => {},

src/components/elements.js

@@ -71,6 +71,7 @@ export const P = styled.p`
   color: ${props => props.theme.colors.secondary};
 `
 
+// prepend links used within the app section with app
 export const AppLink = props => <Link {...props} to={"/app" + props.to} />
 
 export const StyledLink = withTheme(styled(AppLink)`

src/components/firebase/context.js

@@ -1,5 +1,6 @@
 import React from "react"
 
+// create context of firebase instance
 const FirebaseContext = React.createContext(null)
 
 export const withFirebase = Component => props => (

src/components/firebase/fire.js

@@ -2,6 +2,8 @@ import app from "firebase/app"
 import "firebase/auth"
 import "firebase/firestore"
 
+// store private keys in .env file
+// the prefix GATSBY_ is necessary here
 const config = {
   apiKey: process.env.GATSBY_FIREBASE_API_KEY,
   authDomain: process.env.GATSBY_DEV_AUTH_DOMAIN,
@@ -13,6 +15,8 @@ const config = {
 
 class Firebase {
   constructor() {
+    // protect with conditional so gatsby build doesn't have
+    // issues trying to access the window object
     if (typeof window !== "undefined") {
       app.initializeApp(config)
       this.auth = app.auth()
@@ -34,20 +38,25 @@ class Firebase {
     }
   }
 
-  // Auth
+  // authentication
+  // create user in the database
   doCreateUserWithEmailAndPassword = (email, password) =>
     this.auth.createUserWithEmailAndPassword(email, password)
 
+  // login already existing user
   doSignInWithEmailAndPassword = (email, password) =>
     this.auth.signInWithEmailAndPassword(email, password)
 
+  // sign out user
   doSignOut = () => {
     this.auth.signOut()
     window.location.replace("/login")
   }
 
+  // send email reset to email provided
   doPasswordReset = email => this.auth.sendPasswordResetEmail(email)
 
+  // change password to password provided
   doPasswordUpdate = password => this.auth.currentUser.updatePassword(password)
 }
 

src/components/session/withAuthentication.js

@@ -3,11 +3,14 @@ import React from "react"
 import AuthUserContext from "./context"
 import { withFirebase } from "components/firebase"
 
+// use context to provide all app components with information about
+// the authUser if it's been put in localStorage
 const withAuthentication = Component => {
   class WithAuthentication extends React.Component {
     constructor(props) {
       super(props)
 
+      // protect browser API's like localStorage so Gatsby builds don't fail
       if (typeof window !== "undefined") {
         this.state = {
           authUser: JSON.parse(localStorage.getItem("authUser")),
@@ -20,6 +23,7 @@ const withAuthentication = Component => {
     componentDidMount() {
       this.listener = this.props.firebase.auth.onAuthStateChanged(
         authUser => {
+          // accessing localStorage in componentDidMount is fine in Gatsby
           localStorage.setItem("authUser", JSON.stringify(authUser))
           if (authUser) {
             this.setState({

src/pages/app.js

@@ -3,6 +3,11 @@ import React from "react"
 import App from "../App"
 import Layout from "components/Layout"
 
+/* similar to create-react-app, the App.js is like the 
+   entrypoint to the protected/client only content,
+   Context providers are moved to gatsby-browser.js
+   to wrap the root element with necessary providers
+   and context */
 export default () => (
   <Layout>
     <App />

src/pages/index.js

@@ -4,6 +4,9 @@ import Index from "routes/Start"
 import Layout from "components/Layout"
 import Container from "components/container"
 
+// the landing page is generated like other Gatsby pages
+// other unprotected routes like /login, /privacy, etc
+// are completely server side rendered by gatsby build
 export default () => (
   <Layout>
     <SimpleNavbar />

src/routes/Day.js

@@ -116,6 +116,7 @@ class Day extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
+    // check if a new route was hit, to save the entry and load the next one
     if (this.props.uri !== prevProps.uri) {
       const [
         ,

src/routes/Search.js

@@ -79,6 +79,8 @@ class Search extends Component {
     }
   }
 
+  // all entries for a user are fetched this scales poorly but is much
+  // simpler than an API key and setting up an index for Algolia
   getEntries = async _ => {
     const { firebase, authUser } = this.props
     const entriesRef = await firebase.db
@@ -86,13 +88,7 @@ class Search extends Component {
       .where("userId", "==", authUser.uid)
       .get()
     const entries = entriesRef.docs.map(doc => doc.data()).reverse()
-    // const sortedEntries = entries.sort((a, b) => {
-    //   return (
-    //     new Date(b.year, b.month - 1, b.day) -
-    //     new Date(a.year, a.month - 1, a.day)
-    //   )
-    // })
-    // console.log(sortedEntries)
+
     this.setState({ entries, allEntries: entries, loading: false })
   }
 

src/styles/theme.js

@@ -1,3 +1,6 @@
+// standardized role-based design tokens used throughout the whole app
+// a name like lightGray doesn't make sense with themese when light
+// and dark are possibile
 const theme = {
   LIGHT: {
     name: "LIGHT",