feat: add routing

src/App.css

@@ -1,7 +1,3 @@
-.App {
-  text-align: center;
-}
-
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
@@ -10,7 +6,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,10 +15,6 @@
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,28 +1,40 @@
 import React, { Component } from "react";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+
 import logo from "./logo.svg";
 import "./App.css";
-import User from "./components/User.js";
+import Navbar from "./components/Navbar";
+import Day from "./components/screens/Day";
+import Month from "./components/screens/Month";
+import Year from "./components/screens/Year";
+import User from "./components/screens/User";
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          <User />
-        </header>
-      </div>
+      <Router>
+        <Navbar />
+        <div className="App">
+          <header className="App-header">
+            <img src={logo} className="App-logo" alt="logo" />
+            <p>
+              Edit <code>src/App.js</code> and save to reload.
+            </p>
+            <a
+              className="App-link"
+              href="https://reactjs.org"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Learn React
+            </a>
+          </header>
+        </div>
+        <Route path="/:year" component={Year} />
+        <Route path="/:year/:month" component={Month} />
+        <Route path="/:year/:month/:day" component={Day} />
+        <Route path="/user" component={User} />
+      </Router>
     );
   }
 }

src/components/Navbar/Navbar.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Navbar = () => (
+  <div>
+    <ul>
+      <li>
+        <Link to={"/"}>Landing</Link>
+      </li>
+      <li>
+        <Link to={"/signin"}>Sign In</Link>
+      </li>
+      <li>
+        <Link to={"/user"}>Account</Link>
+      </li>
+    </ul>
+  </div>
+);
+
+export default Navbar;

src/components/Navbar/index.js

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

src/components/screens/Day/Day.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Day = () => <div>Day</div>;
+
+export default Day;

src/components/screens/Day/index.js

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

src/components/screens/Month/Month.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Month = () => <div>Month</div>;
+
+export default Month;

src/components/screens/Month/index.js

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

src/components/screens/User/User.js

@@ -1,5 +1,5 @@
 import React from "react";
-import fire from "../fire.js";
+import fire from "../../../fire.js";
 
 class User extends React.Component {
   state = {

src/components/screens/User/index.js

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

src/components/screens/Year/Year.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Year = () => <div>Year</div>;
+
+export default Year;

src/components/screens/Year/index.js

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