Skip to content

Refactored some UI components #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 8 additions & 46 deletions src/layouts/AccountSubLayout.js
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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>
)
Expand Down
11 changes: 2 additions & 9 deletions src/layouts/ProjectSubLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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} />
Expand Down
19 changes: 19 additions & 0 deletions src/projects/FirebaseInfo.js
Original file line number Diff line number Diff line change
@@ -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
32 changes: 32 additions & 0 deletions src/projects/ProjectList.js
Original file line number Diff line number Diff line change
@@ -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
1 change: 0 additions & 1 deletion src/projects/authentication/AuthenticationLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/projects/database/DatabaseLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
18 changes: 18 additions & 0 deletions src/ui/ProjectNavbar.js
Original file line number Diff line number Diff line change
@@ -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
16 changes: 4 additions & 12 deletions src/ui/ProjectSidebar.js
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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>
)

Expand Down
10 changes: 10 additions & 0 deletions src/ui/SidebarNavItem.js
Original file line number Diff line number Diff line change
@@ -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
Loading