wip

2019-05-17 21:39:37 -06:00
parent 63e16ee468
commit 4d90f29770
18 changed files with 140 additions and 97 deletions
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -8,3 +8,8 @@ export const wrapRootElement = ({ element }) => (
    <ThemeProvider theme={theme.LIGHT}>{element}</ThemeProvider>
  </FirebaseContext.Provider>
 )
+
+export const onRouteUpdate = ({ location, prevLocation }) => {
+  console.log("new pathname", location.pathname)
+  console.log("old pathname", prevLocation ? prevLocation.pathname : null)
+}
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,5 +1,6 @@
 module.exports = {
  plugins: [
+    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-offline`,
    {
      resolve: `gatsby-plugin-emotion`,
--- a/package.json
+++ b/package.json
@@ -14,9 +14,11 @@
    "gatsby-plugin-emotion": "^4.0.6",
    "gatsby-plugin-offline": "^2.1.0",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.2",
+    "gatsby-plugin-react-helmet": "^3.0.12",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-feather": "^1.1.6",
+    "react-helmet": "^5.2.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "react-spinners": "^0.5.3",
--- a/public/index.html
+++ b/public/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/google-fonts/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2"/><link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/google-fonts/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"/><style type="text/css">@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:local('Montserrat Regular'),local('Montserrat-Regular'),url(/google-fonts/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'),url(/google-fonts/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhzQ.woff) format('woff');font-display: swap;}@font-face{font-family:Montserrat;font-style:normal;font-weight:700;src:local('Montserrat Bold'),local('Montserrat-Bold'),url(/google-fonts/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2'),url(/google-fonts/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD-A.woff) format('woff');font-display: swap;}</style><script src="/socket.io/socket.io.js"></script></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"></div><script src="/commons.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title data-react-helmet="true"></title><link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/google-fonts/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2"/><link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/google-fonts/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2"/><style type="text/css">@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:local('Montserrat Regular'),local('Montserrat-Regular'),url(/google-fonts/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'),url(/google-fonts/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459WlhzQ.woff) format('woff');font-display: swap;}@font-face{font-family:Montserrat;font-style:normal;font-weight:700;src:local('Montserrat Bold'),local('Montserrat-Bold'),url(/google-fonts/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2'),url(/google-fonts/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD-A.woff) format('woff');font-display: swap;}</style><script src="/socket.io/socket.io.js"></script></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"></div><script src="/commons.js"></script></body></html>
--- a/src/App.js
+++ b/src/App.js
@@ -12,9 +12,7 @@ import Day from "./components/screens/Day"
 import Month from "./components/screens/Month"
 import Year from "./components/screens/Year"
 import User from "./components/screens/User"
-import Login from "./components/screens/Login"
 import Search from "./components/screens/Search"
-import Register from "./components/screens/Register"
 import Welcome from "./components/screens/Welcome"
 import PrivateRoute from "./components/PrivateRoute"

@@ -70,19 +68,6 @@ class App extends Component {
    this.setState({ selectedTheme: newTheme })
  }

-  saveUserSettings = newTheme => {
-    const { authUser, firebase } = this.props
-    firebase.db
-      .collection("users")
-      .doc(authUser.uid)
-      .update({
-        theme: newTheme,
-      })
-      .then(function() {
-        console.log("Updated theme settings")
-      })
-  }
-
  render() {
    const { selectedTheme, authUser, online } = this.state
    const { authUser: propAuthUser } = this.props
@@ -95,7 +80,7 @@ class App extends Component {
          <FullscreenLayout>
            <Navbar toggleTheme={this.onChangeTheme} />
            <RouteLayout>
-              <Router>
+              <Router style={{ flex: 1 }}>
                <PrivateRoute
                  authed={authed}
                  path="/app/:year"
@@ -126,15 +111,7 @@ class App extends Component {
                  component={User}
                  exact
                />
-                <PrivateRoute
-                  authed={authed}
-                  path="/app"
-                  component={Welcome}
-                  exact
-                />
-                <Login path="/app/login" />
-                <Register path="/app/register" />
-                {/* <Start path="/app" /> */}
+                <Welcome authed={authed} path="/app" exact />
              </Router>
            </RouteLayout>
          </FullscreenLayout>
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -1,13 +1,19 @@
 import React from "react"
+import { Helmet } from "react-helmet"
 import { Global, css } from "@emotion/core"
 import styled from "@emotion/styled"

+import { SimpleNavbar } from "../Navbar"
+
 export default ({ children }) => (
  <>
+    <Helmet title="Sol Journal" />
    <Global
      styles={css`
        * {
-          transition: 0.2s all ease-in-out;
+          transition: 0.2s border-color ease-in-out, 0.2s fill ease-in-out,
+            0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out,
+            0.2s color ease-in-out;
        }
        h1 {
          font-family: "Montserrat", -apple-system, BlinkMacSystemFont,
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.js
@@ -1,6 +1,6 @@
 import React from "react"
-import { navigate } from "gatsby"
-import { StyledLink as Link } from "../elements"
+import { navigate, Link } from "gatsby"
+import { StyledLink } from "../../components/elements"
 import styled from "@emotion/styled"
 /** @jsx jsx */
 import { jsx } from "@emotion/core"
@@ -73,18 +73,18 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
      <NavIcons>
        {authUser ? (
          <React.Fragment>
-            <Link to={todayUrl()}>
+            <StyledLink to={todayUrl()}>
              <Icon name="Edit2" />
-            </Link>
-            <Link to={yearUrl()}>
+            </StyledLink>
+            <StyledLink to={yearUrl()}>
              <Icon name="Calendar" />
-            </Link>
-            <Link to={"/search"}>
+            </StyledLink>
+            <StyledLink to={"/search"}>
              <Icon name="Search" />
-            </Link>
-            <Link to={"/user"}>
+            </StyledLink>
+            <StyledLink to={"/user"}>
              <Icon name="User" />
-            </Link>
+            </StyledLink>
            <Icon
              tabindex={0}
              onClick={() => toggleTheme()}
@@ -93,19 +93,38 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
            />
          </React.Fragment>
        ) : (
-          <React.Fragment>
-            {/* <Link to={"/"}>Landing</Link> */}
-            <Link to={"/login"}>
-              <Icon name="LogIn" label="Login" />
-            </Link>
-            {/* <Link to={"/register"}>Register</Link> */}
-          </React.Fragment>
+          <Link to={"/login"} style={{ textDecoration: "none" }}>
+            <Icon name="ArrowRight" label="Login" size={20} />
+          </Link>
        )}
      </NavIcons>
    </Nav>
  </Header>
 )

+const SimpleNav = ({ theme, toggleTheme }) => (
+  <Header>
+    <Nav>
+      <LogoSection onClick={() => navigate("/")}>
+        <Logo color={theme.colors.logo} />
+        <LogoText color={theme.colors.primary}>SOL</LogoText>{" "}
+        <LogoText color={theme.colors.secondary}>JOURNAL</LogoText>
+      </LogoSection>
+      <NavIcons>
+        {/* <Tooltip title="Login"> */}
+        <Link to={"/login"} style={{ textDecoration: "none" }}>
+          <Icon name="ArrowRight" label="Login" size={20} />
+        </Link>
+        {/* </Tooltip> */}
+      </NavIcons>
+    </Nav>
+  </Header>
+)
+
+const SimpleNavbar = withTheme(SimpleNav)
+
+export { SimpleNavbar }
+
 export default compose(
  withAuthentication,
  withTheme
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@@ -1,2 +1,3 @@
-import Navbar from "./Navbar"
+import Navbar, { SimpleNavbar } from "./Navbar"
 export default Navbar
+export { SimpleNavbar }
--- a/src/components/PrivateRoute/PrivateRoute.js
+++ b/src/components/PrivateRoute/PrivateRoute.js
@@ -8,7 +8,7 @@ const PrivateRoute = ({ component: Component, authed, ...rest }) => {
        authed === true ? (
          <Component {...rest} />
        ) : (
-          <Redirect to="/app/login" from={location.pathname} />
+          <Redirect to="/login" from={location.pathname} />
        )
      }
    </Location>
--- a/src/components/firebase/fire.js
+++ b/src/components/firebase/fire.js
@@ -43,7 +43,7 @@ class Firebase {

  doSignOut = () => {
    this.auth.signOut()
-    window.location.replace("/app/login")
+    window.location.replace("/login")
  }

  doPasswordReset = email => this.auth.sendPasswordResetEmail(email)
--- a/src/components/screens/Day/Day.js
+++ b/src/components/screens/Day/Day.js
@@ -17,6 +17,12 @@ import { SIZES } from "../../../styles/constants"
 import Seek from "../../Seek"
 import Icon from "../../Icon"

+const Main = styled.main`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`
 const EntryHeading = styled.div`
  display: flex;
  flex-direction: row;
@@ -58,6 +64,7 @@ const JournalEntryArea = styled.textarea`
  background-color: transparent;
  line-height: 1.5;
  letter-spacing: 0.5px;
+  height: calc(100vh - 275px);
  width: 100%;
  border: none;
  resize: none;
--- a/src/components/screens/Login/index.js
+++ b/src/components/screens/Login/index.js
@@ -1,2 +0,0 @@
-import Login from "./Login"
-export default Login
--- a/src/components/screens/Register/index.js
+++ b/src/components/screens/Register/index.js
@@ -1,2 +0,0 @@
-import Register from "./Register"
-export default Register
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +0,0 @@
-* {
-  transition: 0.2s all ease-in-out;
-}
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,10 +1,12 @@
 import React from "react"
+import { SimpleNavbar } from "../components/Navbar"
 import Index from "../components/screens/Start/index"
 import Layout from "../components/Layout"
 import Container from "../components/container"

 export default () => (
  <Layout>
+    <SimpleNavbar />
    <Container>
      <Index />
    </Container>
--- a/src/components/screens/Login/Login.js
+++ b/src/components/screens/Login/Login.js
@@ -1,15 +1,15 @@
 import React, { Component } from "react"
-import { navigate } from "gatsby"
+import { navigate, Link } from "gatsby"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { format } from "date-fns"
 import { withTheme } from "emotion-theming"

-import { Input, Button, P } from "../../elements"
-import { SIZES } from "../../../styles/constants"
-import { StyledLink as Link } from "../../elements"
-
-import { FirebaseContext } from "../../firebase"
+import { SimpleNavbar } from "../components/Navbar"
+import { Input, Button, P } from "../components/elements"
+import { SIZES } from "../styles/constants"
+import Layout from "../components/Layout"
+import { FirebaseContext } from "../components/firebase"

 const LoginGrid = styled.div`
  display: grid;
@@ -19,19 +19,21 @@ const LoginGrid = styled.div`
 const LoginLayout = styled.div`
  max-width: ${SIZES.smallWidth};
  width: 100%;
-  align-self: center;
-  margin-top: 20px;
+  margin: 20px auto;
 `

 const LoginPage = ({ theme }) => (
-  <LoginLayout>
-    <FirebaseContext.Consumer>
-      {firebase => <LoginForm firebase={firebase} />}
-    </FirebaseContext.Consumer>
-    <P colors={theme.colors} style={{ fontStyle: "italic" }}>
-      Don't have an account? <Link to={"/register"}>Sign Up</Link>
-    </P>
-  </LoginLayout>
+  <Layout>
+    <SimpleNavbar />
+    <LoginLayout>
+      <FirebaseContext.Consumer>
+        {firebase => <LoginForm firebase={firebase} />}
+      </FirebaseContext.Consumer>
+      <P colors={theme.colors} style={{ fontStyle: "italic" }}>
+        Don't have an account? <Link to={"/register"}>Sign Up</Link>
+      </P>
+    </LoginLayout>
+  </Layout>
 )

 class LoginFormBase extends Component {
--- a/src/components/screens/Register/Register.js
+++ b/src/components/screens/Register/Register.js
@@ -1,14 +1,14 @@
 import React, { Component } from "react"
 import styled from "@emotion/styled"
-import { navigate } from "gatsby"
+import { navigate, Link } from "gatsby"
 import { compose } from "recompose"
 import { withTheme } from "emotion-theming"

-import { Input, Button, P } from "../../elements"
-import { SIZES } from "../../../styles/constants"
-import { StyledLink as Link } from "../../elements"
-
-import { FirebaseContext } from "../../firebase"
+import { SimpleNavbar } from "../components/Navbar"
+import { Input, Button, P } from "../components/elements"
+import { SIZES } from "../styles/constants"
+import Layout from "../components/Layout"
+import { FirebaseContext } from "../components/firebase"

 const RegisterGrid = styled.div`
  display: grid;
@@ -18,19 +18,21 @@ const RegisterGrid = styled.div`
 const RegisterLayout = styled.div`
  max-width: ${SIZES.smallWidth};
  width: 100%;
-  align-self: center;
-  margin-top: 20px;
+  margin: 20px auto;
 `

 const RegisterPage = ({ theme }) => (
-  <RegisterLayout>
-    <FirebaseContext.Consumer>
-      {firebase => <RegisterForm firebase={firebase} />}
-    </FirebaseContext.Consumer>
-    <P colors={theme.colors} style={{ fontStyle: "italic" }}>
-      Already have an account? <Link to={"/login"}>Login</Link>
-    </P>
-  </RegisterLayout>
+  <Layout>
+    <SimpleNavbar />
+    <RegisterLayout>
+      <FirebaseContext.Consumer>
+        {firebase => <RegisterForm firebase={firebase} />}
+      </FirebaseContext.Consumer>
+      <P colors={theme.colors} style={{ fontStyle: "italic" }}>
+        Already have an account? <Link to={"/login"}>Login</Link>
+      </P>
+    </RegisterLayout>
+  </Layout>
 )

 class RegisterFormBase extends Component {
--- a/yarn.lock
+++ b/yarn.lock
@@ -5501,6 +5501,11 @@ execa@^1.0.0:
    signal-exit "^3.0.0"
    strip-eof "^1.0.0"

+exenv@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exit@^0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -6284,6 +6289,13 @@ gatsby-plugin-prefetch-google-fonts@^1.4.2:
    google-fonts-plugin "2.0.2"
    object-hash "^1.3.0"

+gatsby-plugin-react-helmet@^3.0.12:
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.0.12.tgz#805252b54ea4044d286d2158991429aa4f60aa02"
+  integrity sha512-x1DXKceTuEDePN9HcQymzQ+oBgmT3PKVQLSFbxrOECiC71cQRp03FJK0i/ClAkMJ3IJNLCGJDvi7dKydkc6dvw==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
 gatsby-react-router-scroll@^2.0.7:
  version "2.0.7"
  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.0.7.tgz#b9425e366d4be546036080d85664d60ae76e6c29"
@@ -11176,7 +11188,7 @@ prompts@^2.0.4:
    kleur "^3.0.2"
    sisteransi "^1.0.0"

-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11473,11 +11485,26 @@ react-error-overlay@^5.1.4:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.4.tgz#88dfb88857c18ceb3b9f95076f850d7121776991"
  integrity sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg==

+react-fast-compare@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-feather@^1.1.6:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.6.tgz#2a547e3d5cd5e383d3da0128d593cbdb3c1b32f7"
  integrity sha512-iCofWhTjX+vQwvDmg7o6vg0XrUg1c41yBDZG+l83nz1FiCsleJoUgd3O+kHpOeWMXuPrRIFfCixvcqyOLGOgIg==

+react-helmet@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"
+  integrity sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.5.4"
+    react-fast-compare "^2.0.2"
+    react-side-effect "^1.1.0"
+
 react-hot-loader@^4.6.2:
  version "4.8.4"
  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.8.4.tgz#357ba342e367fd42d6a870a9c0601c23fa0730c6"
@@ -11591,6 +11618,14 @@ react-scripts@2.1.8:
  optionalDependencies:
    fsevents "1.2.4"

+react-side-effect@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
+  integrity sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==
+  dependencies:
+    exenv "^1.2.1"
+    shallowequal "^1.0.1"
+
 react-spinners@^0.5.3:
  version "0.5.3"
  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.5.3.tgz#b4fa956da9674f3300442cef10186de7d749099c"
@@ -12354,7 +12389,7 @@ shallow-compare@^1.2.2:
  resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb"
  integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==

-shallowequal@^1.0.2:
+shallowequal@^1.0.1, shallowequal@^1.0.2:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==