wip migration

src/components/Layout/Layout.js

@@ -9,6 +9,11 @@ export default ({ children }) => (
         * {
           transition: 0.2s all ease-in-out;
         }
+        h1 {
+          font-family: "Montserrat", -apple-system, BlinkMacSystemFont,
+            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+            "Droid Sans", "Helvetica Neue", sans-serif;
+        }
         body {
           margin: 0;
           padding: 0;

src/components/Navbar/Navbar.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { withRouter } from "react-router-dom"
+import { navigate } from "gatsby"
 import { StyledLink as Link } from "../elements"
 import styled from "@emotion/styled"
 /** @jsx jsx */
@@ -62,10 +62,10 @@ const NavIcons = styled.div`
   }
 `
 
-const Navbar = ({ authUser, theme, toggleTheme, history }) => (
+const Navbar = ({ authUser, theme, toggleTheme }) => (
   <Header>
     <Nav>
-      <LogoSection onClick={() => history.push("/")}>
+      <LogoSection onClick={() => navigate("/app")}>
         <Logo color={theme.colors.logo} />
         <LogoText color={theme.colors.primary}>SOL</LogoText>{" "}
         <LogoText color={theme.colors.secondary}>JOURNAL</LogoText>
@@ -96,7 +96,7 @@ const Navbar = ({ authUser, theme, toggleTheme, history }) => (
           <React.Fragment>
             {/* <Link to={"/"}>Landing</Link> */}
             <Link to={"/login"}>
-              <Icon name="LogIn" label="Get Started" />
+              <Icon name="LogIn" label="Login" />
             </Link>
             {/* <Link to={"/register"}>Register</Link> */}
           </React.Fragment>
@@ -108,6 +108,5 @@ const Navbar = ({ authUser, theme, toggleTheme, history }) => (
 
 export default compose(
   withAuthentication,
-  withTheme,
-  withRouter
+  withTheme
 )(Navbar)

src/components/PrivateRoute/PrivateRoute.js

@@ -1,20 +1,17 @@
 import React from "react"
-import { Route, Redirect } from "react-router-dom"
+import { Redirect, Location } from "@reach/router"
 
 const PrivateRoute = ({ component: Component, authed, ...rest }) => {
   return (
-    <Route
-      {...rest}
-      render={props =>
+    <Location>
+      {({ location }) =>
         authed === true ? (
-          <Component {...props} />
+          <Component {...rest} />
         ) : (
-          <Redirect
-            to={{ pathname: "/login", state: { from: props.location } }}
-          />
+          <Redirect to="/app/login" from={location.pathname} />
         )
       }
-    />
+    </Location>
   )
 }
 

src/components/container.js

@@ -0,0 +1,17 @@
+import React from "react"
+import styled from "@emotion/styled"
+
+import { SIZES } from "../styles/constants"
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 10px;
+  max-width: ${SIZES.maxWidth};
+  min-height: calc(100vh - 60px);
+  background-color: ${props => props.theme.colors.bodyBackground};
+`
+
+export default Container

src/components/elements/elements.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { withTheme } from "emotion-theming"
-import { Link } from "react-router-dom"
+import { Link } from "gatsby"
 import styled from "@emotion/styled"
 
 import { SIZES } from "../../styles/constants"

src/components/firebase/fire.js

@@ -43,7 +43,7 @@ class Firebase {
 
   doSignOut = () => {
     this.auth.signOut()
-    window.location.replace("/login")
+    window.location.replace("/app/login")
   }
 
   doPasswordReset = email => this.auth.sendPasswordResetEmail(email)

src/components/screens/Day/Day.js

@@ -4,7 +4,7 @@ import styled from "@emotion/styled"
 import { jsx, css, keyframes } from "@emotion/core"
 import { compose } from "recompose"
 import { Prompt } from "react-router"
-import { withRouter } from "react-router-dom"
+import { createHistory } from "@reach/router"
 import { withTheme } from "emotion-theming"
 import { withFirebase } from "../../firebase"
 import { withAuthentication } from "../../session"
@@ -106,19 +106,15 @@ class Day extends React.Component {
     lastEditedAt: new Date(),
   }
   timeout = 0
-  retrievedFromServer = false
 
   static contextType = OnlineContext
 
   componentDidMount() {
-    const {
-      history,
-      match: {
-        params: { year, month, day },
-      },
-    } = this.props
-    history.listen((location, action) => {
-      const [, year, month, day] = location.pathname.split("/")
+    const { year, month, day } = this.props
+    const history = createHistory(window)
+    history.listen(({ location }) => {
+      console.log(location)
+      const [, , year, month, day] = location.pathname.split("/")
       this.onRouteChanged(year, month, day)
     })
     this.getDocRef(year, month, day, false)
@@ -168,11 +164,7 @@ class Day extends React.Component {
   onChangeText = e => {
     if (this.timeout) clearTimeout(this.timeout)
     const text = e.target.value
-    const {
-      match: {
-        params: { year, month, day },
-      },
-    } = this.props
+    const { year, month, day } = this.props
 
     this.setState({ text, lastEditedAt: new Date() })
     this.timeout = setTimeout(() => {
@@ -184,11 +176,7 @@ class Day extends React.Component {
     const entryTextArea = document.getElementById("entry-text-area")
     const cursorIndex = entryTextArea.selectionStart
     const { text } = this.state
-    const {
-      match: {
-        params: { year, month, day },
-      },
-    } = this.props
+    const { year, month, day } = this.props
     const insertAt = (str, sub, pos) =>
       `${str.slice(0, pos)}${sub}${str.slice(pos)}`
     const newText = insertAt(text, format(new Date(), "h:mma "), cursorIndex)
@@ -227,12 +215,7 @@ class Day extends React.Component {
   }
 
   render() {
-    const {
-      match: {
-        params: { year, month, day },
-      },
-      theme,
-    } = this.props
+    const { year, month, day, theme } = this.props
     const online = this.context
     const { text, loading, saving, lastSavedAt, lastEditedAt } = this.state
     const currentDay = new Date(year, month - 1, day)
@@ -241,10 +224,10 @@ class Day extends React.Component {
 
     return (
       <>
-        <Prompt
+        {/* <Prompt
           when={!hasSavedChanges}
           message="You have unsaved changes, are you sure you want to leave?"
-        />
+        /> */}
         <Seek
           title={format(currentDay, "YYYY MMM DD - dddd")}
           prev={format(subDays(currentDay, 1), "/YYYY/MM/DD")}
@@ -318,6 +301,5 @@ class Day extends React.Component {
 export default compose(
   withFirebase,
   withTheme,
-  withAuthentication,
-  withRouter
+  withAuthentication
 )(Day)

src/components/screens/Login/Login.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { withRouter } from "react-router-dom"
+import { navigate } from "gatsby"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { format } from "date-fns"
@@ -23,10 +23,10 @@ const LoginLayout = styled.div`
   margin-top: 20px;
 `
 
-const LoginPage = ({ history, theme }) => (
+const LoginPage = ({ theme }) => (
   <LoginLayout>
     <FirebaseContext.Consumer>
-      {firebase => <LoginForm history={history} firebase={firebase} />}
+      {firebase => <LoginForm firebase={firebase} />}
     </FirebaseContext.Consumer>
     <P colors={theme.colors} style={{ fontStyle: "italic" }}>
       Don't have an account? <Link to={"/register"}>Sign Up</Link>
@@ -49,7 +49,7 @@ class LoginFormBase extends Component {
       .doSignInWithEmailAndPassword(email, password)
       .then(() => {
         this.setState({ email: "", password: "", error: null })
-        this.props.history.push(format(new Date(), "/"))
+        navigate(`app/${format(new Date(), "/")}`)
       })
       .catch(error => {
         this.setState({ error })
@@ -95,10 +95,7 @@ class LoginFormBase extends Component {
   }
 }
 
-const LoginForm = compose(
-  withTheme,
-  withRouter
-)(LoginFormBase)
+const LoginForm = compose(withTheme)(LoginFormBase)
 
 export default withTheme(LoginPage)
 

src/components/screens/Month/Month.js

@@ -38,11 +38,7 @@ const YearCard = styled.div`
 
 class Month extends Component {
   render() {
-    const {
-      match: {
-        params: { year, month },
-      },
-    } = this.props
+    const { year, month } = this.props
     const currentDay = new Date(year, month - 1)
 
     // include all months unless it's this year

src/components/screens/Privacy/Privacy.js

@@ -1,93 +0,0 @@
-import React, { Component } from "react"
-import { withRouter } from "react-router-dom"
-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"
-
-const Terms = ({}) => (
-  <>
-    <h1>Privacy Policy</h1>
-    <em>Last update: April 30, 2019</em>
-    <P>
-      Sol Journal supports the following browsers: Chrome (latest), Safari
-      (latest), Firefox (50+)
-    </P>
-    <h2>Rights</h2>
-    <P>
-      You don't have to provide your real name when you register to an account,
-      but you need to use a valid/verifiable email address.
-      <br />
-      <br />
-      You have the right to export your data at any time, in JSON format.
-      <br />
-      <br />
-      Your data will not be intentionally shown to other users or shared with
-      third parties.
-      <br />
-      <br />
-      Your personal data will not be shared with anyone without your consent.
-      <br />
-      <br />
-      Data saved on the hosted version of Sol Journal is encrypted as it is
-      transmitted and stored. However, data is not salted or hashed when it is
-      stored on Google servers so database administrators (me) can view the data
-      as plaintext. I won't view or use the data of other users for any reason
-      but if you would like to have more ownership of your data you can setup
-      the code on your own.
-      <br />
-      <br />
-      If the site ceases operation, you will receive an opportunity to export
-      all your data before the site dies.
-      <br />
-      <br />
-      Any new features that affect privacy will be strictly opt-in.
-    </P>
-    <h2>Responsibilites</h2>
-    <P>
-      You will not use the site to store illegal information or data under
-      United States law (or any law).
-      <br />
-      <br />
-      You have to be at least 18+ to create an account and use the site.
-      <br />
-      <br />
-      You must not abuse the site by knowingly posting malicious code that could
-      harm you or the other users.
-      <br />
-      <br />
-      You may not make automated requests to the site.
-      <br />
-      <br />
-      You may not abuse the registration system.
-      <br />
-      <br />
-      You are responsible for keeping your account secure.
-      <br />
-      <br />I reserve the right to close accounts that abuse the system
-      (millions of entries or overloading services with requests) or use it in
-      an unreasonable manner.
-    </P>
-    <h2>Other</h2>
-    <P>
-      Other important legal stuff Though I want to provide a great service,
-      there are certain things about the service I cannot promise. For example,
-      the services and software are provided “as-is”, at your own risk, without
-      express or implied warranty or condition of any kind. I also disclaim any
-      warranties of merchantability, fitness for a particular purpose or
-      non-infringement. Sol Journal will have no responsibility for any harm to
-      your computer system, loss or corruption of data, or other harm that
-      results from your access to or use of the Services or Software.
-      <br />
-      <br />
-      These Terms can change at any time, but I'll try to be reasonable. This is
-      a service I've always and hope to be able to run it for a long time.
-    </P>
-  </>
-)
-
-export default withTheme(Terms)

src/components/screens/Privacy/index.js

@@ -1,2 +0,0 @@
-import Privacy from "./Privacy"
-export default Privacy

src/components/screens/Register/Register.js

@@ -1,5 +1,4 @@
 import React, { Component } from "react"
-import { withRouter } from "react-router-dom"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { withTheme } from "emotion-theming"
@@ -137,10 +136,7 @@ class RegisterFormBase extends Component {
   }
 }
 
-const RegisterForm = compose(
-  withTheme,
-  withRouter
-)(RegisterFormBase)
+const RegisterForm = compose(withTheme)(RegisterFormBase)
 
 export default withTheme(RegisterPage)
 

src/components/screens/Start/Start.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { AppLink as Link } from "../../elements"
+import { Link } from "gatsby"
 import styled from "@emotion/styled"
 import { withTheme } from "emotion-theming"
 
@@ -11,12 +11,14 @@ import Logo from "../../Logo"
 
 const StartGrid = styled.div`
   margin-top: 30px;
+  text-align: center;
   line-height: 1.5;
   color: ${props => props.theme.colors.primary};
   height: 100%;
 `
 const FeatureGrid = styled.div`
   display: grid;
+  text-align: left;
   grid-template-rows: 1fr;
   grid-gap: 30px;
 `
@@ -97,7 +99,7 @@ class Start extends Component {
           to record thoughts and events from the day.
         </P>
         <Link to={`/app${todayUrl()}`} style={{ textDecoration: "none" }}>
-          <Button colors={theme.colors}>Write about today</Button>
+          <Button colors={theme.colors}>Start Writing</Button>
         </Link>
         <div
           style={{

src/components/screens/Terms/Terms.js

@@ -1,80 +0,0 @@
-import React from "react"
-
-import { P } from "../../elements"
-
-const Terms = () => (
-  <>
-    <h1>Terms of Service</h1>
-    <em>Last update: April 30, 2019</em>
-    <h2>Scope of Service</h2>
-    <P>
-      Sol Journal supports the following browsers: Chrome (latest), Safari
-      (latest), Firefox (50+)
-    </P>
-    <h2>Rights</h2>
-    <P>
-      You don't have to provide your real name when you register to an account,
-      but you need to use a valid/verifiable email address.
-      <br />
-      <br />
-      You have the right to export your data at any time, in JSON format.
-      <br />
-      <br />
-      Your data will not be intentionally shown to other users or shared with
-      third parties.
-      <br />
-      <br />
-      Your personal data will not be shared with anyone without your consent.
-      <br />
-      <br />
-      We reserve the right to discontinue any feature of the service at any
-      time. If the site ceases operation, you will receive an opportunity to
-      export all your data before the site dies.
-      <br />
-      <br />
-      Any new features that affect privacy will be strictly opt-in.
-    </P>
-    <h2>Responsibilites</h2>
-    <P>
-      You will not use the site to store illegal information or data under
-      United States law (or any law).
-      <br />
-      <br />
-      You have to be at least 18+ to create an account and use the site.
-      <br />
-      <br />
-      You must not abuse the site by knowingly posting malicious code that could
-      harm you or the other users.
-      <br />
-      <br />
-      You may not make automated requests to the site.
-      <br />
-      <br />
-      You may not abuse the registration system.
-      <br />
-      <br />
-      You are responsible for keeping your account secure.
-      <br />
-      <br />I reserve the right to close accounts that abuse the system
-      (millions of entries or overloading services with requests) or use it in
-      an unreasonable manner.
-    </P>
-    <h2>Other</h2>
-    <P>
-      Other important legal stuff Though I want to provide a great service,
-      there are certain things about the service I cannot promise. For example,
-      the services and software are provided “as-is”, at your own risk, without
-      express or implied warranty or condition of any kind. I also disclaim any
-      warranties of merchantability, fitness for a particular purpose or
-      non-infringement. Sol Journal will have no responsibility for any harm to
-      your computer system, loss or corruption of data, or other harm that
-      results from your access to or use of the Services or Software.
-      <br />
-      <br />
-      These Terms can change at any time, but I'll try to be reasonable. This is
-      a service I've always and hope to be able to run it for a long time.
-    </P>
-  </>
-)
-
-export default Terms

src/components/screens/Terms/index.js

@@ -1,2 +0,0 @@
-import Terms from "./Terms"
-export default Terms

src/components/screens/Welcome/Welcome.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react"
+import { Link } from "gatsby"
+import styled from "@emotion/styled"
+import { withTheme } from "emotion-theming"
+
+import { SIZES } from "../../../styles/constants"
+import { Button, P } from "../../elements"
+import { todayUrl } from "../../../utils/date"
+import Logo from "../../Logo"
+
+const WelcomeGrid = styled.div`
+  margin-top: 30px;
+  line-height: 1.5;
+  color: ${props => props.theme.colors.primary};
+  height: 100%;
+`
+const Footer = styled.footer`
+  margin-top: 120px;
+  padding: 30px 0px;
+  text-align: center;
+  color: ${props => props.theme.colors.secondary};
+`
+const FooterLink = styled(Link)`
+  cursor: pointer;
+  color: ${props => props.theme.colors.secondary};
+  text-decoration: none;
+  margin: 10px;
+  &:hover {
+    color: ${props => props.theme.colors.tertiary};
+  }
+`
+
+class Welcome extends Component {
+  render() {
+    const { theme } = this.props
+    return (
+      <WelcomeGrid>
+        <h1>Your Space for Wandering Thoughts and Ideas</h1>
+        <P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
+          Journaling can improve your health and help you take inventory of your
+          day. Sol Journal works offline and from any device. Use it as a place
+          to record thoughts and events from the day.
+        </P>
+        <Link to={`/app${todayUrl()}`} style={{ textDecoration: "none" }}>
+          <Button colors={theme.colors}>Write about today</Button>
+        </Link>
+        <Footer>
+          <div>
+            <Logo color={theme.colors.logo} />
+          </div>
+          <div>
+            <FooterLink>View on GitHub</FooterLink>
+            <FooterLink to="terms">Terms of Service</FooterLink>
+            <FooterLink to="privacy">Privacy Policy</FooterLink>
+          </div>
+          <div>&copy; 2019</div>
+        </Footer>
+      </WelcomeGrid>
+    )
+  }
+}
+
+export default withTheme(Welcome)

src/components/screens/Welcome/index.js

@@ -0,0 +1,2 @@
+import Welcome from "./Welcome"
+export default Welcome

src/components/screens/Year/Year.js

@@ -31,11 +31,7 @@ const MonthCard = styled.div`
 
 class Year extends Component {
   render() {
-    const {
-      match: {
-        params: { year },
-      },
-    } = this.props
+    const { year } = this.props
     const currentDate = new Date(year, 0, 1)
 
     // include all months unless it's this year