diff --git a/gatsby-browser.js b/gatsby-browser.js index 4cba3d0..a096421 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -8,3 +8,8 @@ export const wrapRootElement = ({ element }) => ( {element} ) + +export const onRouteUpdate = ({ location, prevLocation }) => { + console.log("new pathname", location.pathname) + console.log("old pathname", prevLocation ? prevLocation.pathname : null) +} diff --git a/gatsby-config.js b/gatsby-config.js index 766912e..bce3fc4 100644 --- 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`, diff --git a/package.json b/package.json index 20c995c..5952cbf 100644 --- 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", diff --git a/public/index.html b/public/index.html index 3c2e2db..870e20c 100644 --- a/public/index.html +++ b/public/index.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/App.js b/src/App.js index b6e7dd0..d0e91b0 100644 --- 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 { - + - - - - {/* */} + diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index 9af8b9c..9eba965 100644 --- 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 }) => ( <> + ( {authUser ? ( - + - - + + - - + + - - + + - + toggleTheme()} @@ -93,19 +93,38 @@ const Navbar = ({ authUser, theme, toggleTheme }) => ( /> ) : ( - - {/* Landing */} - - - - {/* Register */} - + + + )} ) +const SimpleNav = ({ theme, toggleTheme }) => ( +
+ +
+) + +const SimpleNavbar = withTheme(SimpleNav) + +export { SimpleNavbar } + export default compose( withAuthentication, withTheme diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 27f2a37..ed07819 100644 --- 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 } diff --git a/src/components/PrivateRoute/PrivateRoute.js b/src/components/PrivateRoute/PrivateRoute.js index 041f1f9..d878013 100644 --- a/src/components/PrivateRoute/PrivateRoute.js +++ b/src/components/PrivateRoute/PrivateRoute.js @@ -8,7 +8,7 @@ const PrivateRoute = ({ component: Component, authed, ...rest }) => { authed === true ? ( ) : ( - + ) } diff --git a/src/components/firebase/fire.js b/src/components/firebase/fire.js index 194bc6e..b7fb9e2 100644 --- 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) diff --git a/src/components/screens/Day/Day.js b/src/components/screens/Day/Day.js index d810c64..6ac14cf 100644 --- 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; diff --git a/src/components/screens/Login/index.js b/src/components/screens/Login/index.js deleted file mode 100644 index d114a4d..0000000 --- a/src/components/screens/Login/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Login from "./Login" -export default Login diff --git a/src/components/screens/Register/index.js b/src/components/screens/Register/index.js deleted file mode 100644 index ebb6976..0000000 --- a/src/components/screens/Register/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import Register from "./Register" -export default Register diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 134cd0a..0000000 --- a/src/index.css +++ /dev/null @@ -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; -} diff --git a/src/pages/index.js b/src/pages/index.js index 31876a8..8090515 100644 --- 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 () => ( + diff --git a/src/components/screens/Login/Login.js b/src/pages/login.js similarity index 75% rename from src/components/screens/Login/Login.js rename to src/pages/login.js index c3866eb..18b107c 100644 --- a/src/components/screens/Login/Login.js +++ b/src/pages/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 }) => ( - - - {firebase => } - -

- Don't have an account? Sign Up -

- + + + + + {firebase => } + +

+ Don't have an account? Sign Up +

+ + ) class LoginFormBase extends Component { diff --git a/src/components/screens/Register/Register.js b/src/pages/register.js similarity index 81% rename from src/components/screens/Register/Register.js rename to src/pages/register.js index 142398c..fd1ea72 100644 --- a/src/components/screens/Register/Register.js +++ b/src/pages/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 }) => ( - - - {firebase => } - -

- Already have an account? Login -

- + + + + + {firebase => } + +

+ Already have an account? Login +

+ + ) class RegisterFormBase extends Component { diff --git a/yarn.lock b/yarn.lock index ccf8949..0adab9d 100644 --- 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==