Refactored some UI components

src/layouts/AccountSubLayout.js

@@ -1,10 +1,10 @@
-import React, { useEffect, useState, Fragment } from 'react'
-import { Link, Route } from 'react-router-dom'
+import React, { useEffect, useState } from 'react'
+import { Route } from 'react-router-dom'
 import Panel from '../ui/Panel'
-import Tiles from '../ui/Tiles'
-import Card from '../ui/Card'
 import AddProject from '../projects/AddProject'
 import { getProjects } from '../utils/api'
+import ProjectList from '../projects/ProjectList'
+import FirebaseInfo from '../projects/FirebaseInfo'
 
 const AccountSubLayout = ({ match, history }) => {
   const [projects, setProjects] = useState(false)
@@ -19,54 +19,16 @@ const AccountSubLayout = ({ match, history }) => {
     return () => (isCurrent = false)
   }, [])
 
+  const renderProjectList = () => <ProjectList projects={projects} history={history} />
+
   return (
     <div className="account-sub-layout">
       <Panel className="panel-welcome-to-firebase">
-        <h1 className="heading-1">Almost Firebase!</h1>
-        <p>
-          Tools from Google for developing great apps, engaging with
-          <br />
-          your users, and earning more through mobile ads.
-        </p>
-        <p className="horizontal-spacing">
-          <a href="#">Learn More</a>
-          <a href="#">Documentation</a>
-          <a href="#">Support</a>
-        </p>
+        <FirebaseInfo />
       </Panel>
       <Panel className="panel-recent-projects">
+        <Route path="/projects" exact render={renderProjectList} />
         <Route path="/projects/add" component={AddProject} />
-        <Route
-          path="/projects"
-          exact
-          render={() => {
-            return (
-              <Fragment>
-                <p>Recent projects</p>
-                <div>
-                  <Tiles>
-                    <Card className="card-recent-project center-blocks" style={{ height: '14em', cursor: 'pointer' }}>
-                      <Link className="block" to="/projects/add">
-                        Add Project
-                      </Link>
-                    </Card>
-                    {Array.isArray(projects) &&
-                      projects.map(project => (
-                        <div role="link" key={project.id} onClick={() => history.push(`/projects/${project.id}`)}>
-                          <Card
-                            className="card-recent-project spacing-small"
-                            style={{ height: '14em', cursor: 'pointer' }}>
-                            <h1 className="heading-3">{project.name}</h1>
-                            <div>{project.id}</div>
-                          </Card>
-                        </div>
-                      ))}
-                  </Tiles>
-                </div>
-              </Fragment>
-            )
-          }}
-        />
       </Panel>
     </div>
   )

src/layouts/ProjectSubLayout.js

@@ -7,6 +7,7 @@ import { getProject } from '../utils/api'
 import AuthenticationLayout from '../projects/authentication/AuthenticationLayout'
 import DatabaseHome from '../projects/database/DatabaseHome'
 import DatabaseLayout from '../projects/database/DatabaseLayout'
+import ProjectNavbar from '../ui/ProjectNavbar'
 
 const ProjectSubLayout = ({ match, pathname }) => {
   const [project, setProject] = useState(false)
@@ -27,15 +28,7 @@ const ProjectSubLayout = ({ match, pathname }) => {
       <div className="project-sub-layout">
         <ProjectSidebar />
         <div className="project-primary-content">
-          <nav className="project-nav horizontal-spacing" style={{ color: 'white' }}>
-            <span className="text-light-tint">{project.name}</span>
-            <span> : </span>
-            <Link
-              to={{ pathname: '/projects/add', state: { cancelPathname: location.pathname } }}
-              className="text-light-tint">
-              Add Project
-            </Link>
-          </nav>
+          <ProjectNavbar projectName={project.name} />
           <main>
             <Switch>
               <Route path={`${match.path}/overview`} component={Overview} />

src/projects/FirebaseInfo.js

@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react'
+
+const FirebaseInfo = () => (
+  <Fragment>
+    <h1 className="heading-1">Almost Firebase!</h1>
+    <p>
+      Tools from Google for developing great apps, engaging with
+      <br />
+      your users, and earning more through mobile ads.
+    </p>
+    <p className="horizontal-spacing">
+      <a href="#">Learn More</a>
+      <a href="#">Documentation</a>
+      <a href="#">Support</a>
+    </p>
+  </Fragment>
+)
+
+export default FirebaseInfo

src/projects/ProjectList.js

@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react'
+import Tiles from '../ui/Tiles'
+import Card from '../ui/Card'
+import { Link } from 'react-router-dom'
+
+const ProjectList = ({ projects, history }) => {
+  return (
+    <Fragment>
+      <p>Recent projects</p>
+      <div>
+        <Tiles>
+          <Card className="card-recent-project center-blocks" style={{ height: '14em', cursor: 'pointer' }}>
+            <Link className="block" to="/projects/add">
+              Add Project
+            </Link>
+          </Card>
+          {Array.isArray(projects) &&
+            projects.map(project => (
+              <div role="link" key={project.id} onClick={() => history.push(`/projects/${project.id}`)}>
+                <Card className="card-recent-project spacing-small" style={{ height: '14em', cursor: 'pointer' }}>
+                  <h1 className="heading-3">{project.name}</h1>
+                  <div>{project.id}</div>
+                </Card>
+              </div>
+            ))}
+        </Tiles>
+      </div>
+    </Fragment>
+  )
+}
+
+export default ProjectList

src/projects/authentication/AuthenticationLayout.js

@@ -26,7 +26,6 @@ const AuthenticationLayout = ({ match, location }) => {
               <Route path={`${match.path}/users`} component={Users} />
               <Route path={`${match.path}/signin-method`} component={SigninMethods} />
               <Route path={`${match.path}/templates`} component={Templates} />
-              <Route component={() => null} />
             </Switch>
           </CSSTransition>
         </TransitionGroup>

src/projects/database/DatabaseLayout.js

@@ -9,9 +9,11 @@ import Rules from './Rules'
 import DataIndexes from './DataIndexes'
 
 const DatabaseLayout = ({ match, location }) => {
+  const shouldRedirect = match.url === location.pathname
+
   return (
     <Fragment>
-      {match.url === location.pathname && <Redirect to={`${match.url}/data`} />}
+      {shouldRedirect && <Redirect to={`${match.url}/data`} />}
       <PageHeader title="Database" useMaxWidth={false}>
         <PageHeaderTabs>
           <Tab to={`${match.url}/data`}>Data</Tab>

src/ui/ProjectNavbar.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const ProjectNavbar = ({ projectName }) => {
+  const linkTo = { pathname: '/projects/add', state: { cancelPathname: location.pathname } }
+
+  return (
+    <nav className="project-nav horizontal-spacing" style={{ color: 'white' }}>
+      <span className="text-light-tint">{projectName}</span>
+      <span> : </span>
+      <Link to={linkTo} className="text-light-tint">
+        Add Project
+      </Link>
+    </nav>
+  )
+}
+
+export default ProjectNavbar

src/ui/ProjectSidebar.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { NavLink, withRouter } from 'react-router-dom'
+import SidebarNavItem from './SidebarNavItem'
 
 const ProjectSidebar = ({ match }) => (
   <aside className="project-sidebar">
@@ -31,18 +32,9 @@ const ProjectSidebar = ({ match }) => (
         </NavLink>
       </div>
     </nav>
-    <nav className="spacing-small">
-      <h1 className="heading-4">Quality</h1>
-      <p>Crashlytics, Performance, Test Lab</p>
-    </nav>
-    <nav className="spacing-small">
-      <h1 className="heading-4">Analytics</h1>
-      <p>Dashboard, Events, Conversions, Audiences</p>
-    </nav>
-    <nav className="spacing-small">
-      <h1 className="heading-4">Grow</h1>
-      <p>Predictions, A/B Testing, Cloud Messaging</p>
-    </nav>
+    <SidebarNavItem title="Quality" description="Crashlytics, Performance, Test Lab"></SidebarNavItem>
+    <SidebarNavItem title="Analytics" description="Dashboard, Events, Conversions, Audiences"></SidebarNavItem>
+    <SidebarNavItem title="Grow" description="Predictions, A/B Testing, Cloud Messaging"></SidebarNavItem>
   </aside>
 )
 

src/ui/SidebarNavItem.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+const SidebarNavItem = ({ title, description }) => (
+  <nav className="spacing-small">
+    <h1 className="heading-4">{title}</h1>
+    <p>{description}</p>
+  </nav>
+)
+
+export default SidebarNavItem