Skip to content

Commit cedf8e1

Browse files
committed
small additions and wireframe example
1 parent 29c1fe1 commit cedf8e1

File tree

8 files changed

+237
-19
lines changed

8 files changed

+237
-19
lines changed

.eslintrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"no-console": "off",
1212
"react/no-children-prop": "off",
1313
"jsx-quotes": ["error", "prefer-double"],
14-
"react/no-unescaped-entities": "off"
14+
"react/no-unescaped-entities": "off",
15+
"no-unused-vars": "off"
1516
}
1617
}

src/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { AuthUserProvider } from './utils/AuthUser'
66
import AuthorizedRoute from './utils/AuthorizedRoute'
77
import UnauthorizedLayout from './layouts/UnauthorizedLayout'
88
import AuthorizedLayout from './layouts/AuthorizedLayout'
9-
109
import './styles/main.scss'
1110

1211
const App = () => (

src/layouts/AccountSubLayout.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@ const AccountSubLayout = ({ history }) => {
99
const [projects, setProjects] = useState(false)
1010

1111
useEffect(() => {
12-
getProjects().then(setProjects)
12+
let isCurrent = true
13+
getProjects().then(projects => {
14+
if (isCurrent) {
15+
setProjects(projects)
16+
}
17+
})
18+
return () => (isCurrent = false)
1319
}, [])
1420

1521
return (
@@ -42,15 +48,12 @@ const AccountSubLayout = ({ history }) => {
4248
</Card>
4349
{Array.isArray(projects) &&
4450
projects.map(project => (
45-
<Card
46-
key={project.id}
47-
className="card-recent-project spacing-small"
48-
style={{ height: '14em', cursor: 'pointer' }}
49-
role="link"
50-
onClick={() => history.push(`/projects/${project.id}`)}>
51-
<h1 className="heading-3">{project.name}</h1>
52-
<div>{project.id}</div>
53-
</Card>
51+
<div role="link" key={project.id} onClick={() => history.push(`/projects/${project.id}`)}>
52+
<Card className="card-recent-project spacing-small" style={{ height: '14em', cursor: 'pointer' }}>
53+
<h1 className="heading-3">{project.name}</h1>
54+
<div>{project.id}</div>
55+
</Card>
56+
</div>
5457
))}
5558
</Tiles>
5659
</div>

src/layouts/ProjectSubLayout.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ const ProjectSubLayout = ({ match }) => {
1313
const { projectId } = match.params
1414

1515
useEffect(() => {
16-
getProject(projectId).then(setProject)
16+
let isCurrent = true
17+
getProject(projectId).then(project => {
18+
if (isCurrent) {
19+
setProject(project)
20+
}
21+
})
22+
return () => (isCurrent = false)
1723
}, [projectId])
1824

1925
return (

src/ui/AuthorizedPrimaryHeader.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AuthUserContext } from '../utils/AuthUser'
55

66
const AuthorizedPrimaryHeader = () => {
77
const { logout } = useContext(AuthUserContext)
8+
89
return (
910
<header className="authorized-primary-header">
1011
<Route

src/utils/AuthorizedRoute.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import React, { useContext } from 'react'
2-
import { Route, withRouter } from 'react-router-dom'
2+
import { Route, Redirect } from 'react-router-dom'
33
import { AuthUserContext } from './AuthUser'
44

55
const AuthorizedRoute = ({ component, history, ...rest }) => {
66
const { logged } = useContext(AuthUserContext)
77

88
if (logged === null) return <div>Loading...</div>
9-
if (logged !== true) {
10-
history.push('/auth')
11-
return null
12-
}
9+
if (logged !== true) return <Redirect push to="/auth" />
1310
return <Route component={component} {...rest} />
1411
}
1512

16-
export default withRouter(AuthorizedRoute)
13+
export default AuthorizedRoute

src/wireframes/App.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react'
2+
import { BrowserRouter, Switch, Route, Redirect, Link } from 'react-router-dom'
3+
4+
import './wireframes.scss'
5+
6+
const App = () => (
7+
<BrowserRouter>
8+
<div className="app">
9+
<Switch>
10+
<Route path="/auth" component={UnauthorizedLayout} />
11+
<Route path="/" component={AuthorizedLayout} />
12+
</Switch>
13+
</div>
14+
</BrowserRouter>
15+
)
16+
17+
const AuthorizedLayout = () => (
18+
<div className="authorized-layout">
19+
<header>
20+
<Link to="/dashboard">Dashboard</Link>
21+
<Link to="/products">Products</Link>
22+
<Link to="/auth">Logout</Link>
23+
</header>
24+
<div className="content">
25+
<Route path="/dashboard" component={DashboardLayout} />
26+
<Route path="/products" component={ProductsLayout} />
27+
</div>
28+
<footer />
29+
</div>
30+
)
31+
32+
const UnauthorizedLayout = () => (
33+
<div className="unauthorized-layout">
34+
<main>
35+
<Link to="/">Login</Link>
36+
</main>
37+
</div>
38+
)
39+
40+
const DashboardLayout = () => (
41+
<div className="dashboard-layout">
42+
<aside />
43+
<div className="content">
44+
<nav>
45+
<Link to="/dashboard/settings">Settings</Link>
46+
<Link to="/dashboard/search">Search</Link>
47+
</nav>
48+
<main>
49+
<Route path="/dashboard/settings" component={SettingsPage} />
50+
<Route path="/dashboard/search" component={SearchResultsPage} />
51+
</main>
52+
</div>
53+
</div>
54+
)
55+
56+
const ProductsLayout = () => (
57+
<div className="products-layout">
58+
<main>
59+
<div />
60+
<div />
61+
<div />
62+
<div />
63+
<div />
64+
</main>
65+
</div>
66+
)
67+
68+
const SettingsPage = () => (
69+
<div className="settings-page">
70+
<div />
71+
<div />
72+
</div>
73+
)
74+
75+
const SearchResultsPage = () => (
76+
<div className="search-results-page">
77+
<div />
78+
<div />
79+
<div />
80+
</div>
81+
)
82+
83+
export default App

src/wireframes/wireframes.scss

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
.app {
2+
background-image: linear-gradient(45deg, #fafafa 25%, transparent 25%),
3+
linear-gradient(-45deg, #fafafa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #fafafa 75%),
4+
linear-gradient(-45deg, transparent 75%, #fafafa 75%);
5+
background-size: 40px 40px;
6+
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
7+
8+
padding: 2em 5em;
9+
}
10+
11+
$blue: #0099e8;
12+
$green: #1cd41c;
13+
14+
@mixin box($color, $top: true, $right: true, $bottom: true, $left: true) {
15+
@if $top {
16+
border-top: 5px dashed $color;
17+
}
18+
@if $right {
19+
border-right: 5px dashed $color;
20+
}
21+
@if $bottom {
22+
border-bottom: 5px dashed $color;
23+
}
24+
@if $left {
25+
border-left: 5px dashed $color;
26+
}
27+
}
28+
29+
.authorized-layout {
30+
min-height: 50vh;
31+
> header {
32+
@include box($blue);
33+
padding: 2em;
34+
}
35+
> footer {
36+
@include box($blue);
37+
padding: 2em;
38+
margin-top: 1em;
39+
}
40+
> .content {
41+
@include box($blue);
42+
display: flex;
43+
min-height: 100px;
44+
padding: 1em;
45+
margin-top: 1em;
46+
}
47+
a + a {
48+
margin-left: 2em;
49+
}
50+
}
51+
52+
.unauthorized-layout {
53+
display: flex;
54+
padding: 3em;
55+
main {
56+
@include box($blue);
57+
margin: auto;
58+
width: 50%;
59+
height: 200px;
60+
padding: 1em;
61+
}
62+
}
63+
64+
.dashboard-layout {
65+
display: flex;
66+
width: 100%;
67+
a {
68+
color: red;
69+
}
70+
> aside {
71+
width: 12em;
72+
@include box(red);
73+
}
74+
> .content {
75+
flex: 1;
76+
@include box(red, true, true, true, false);
77+
> nav {
78+
@include box(red, false, false, true, false);
79+
padding: 1em;
80+
}
81+
> main {
82+
padding: 1em;
83+
min-height: 10em;
84+
}
85+
}
86+
}
87+
88+
.products-layout {
89+
width: 100%;
90+
main {
91+
@include box(red);
92+
padding: 1em;
93+
overflow: hidden;
94+
> div {
95+
@include box(red);
96+
width: 100px;
97+
height: 100px;
98+
float: left;
99+
margin-right: 1em;
100+
}
101+
}
102+
}
103+
104+
.settings-page {
105+
display: flex;
106+
padding: 1em;
107+
@include box($green);
108+
> div {
109+
flex: 1;
110+
min-height: 10em;
111+
}
112+
> :first-child {
113+
@include box($green);
114+
}
115+
> :last-child {
116+
@include box($green, true, true, true, false);
117+
}
118+
}
119+
120+
.search-results-page {
121+
> div + div {
122+
margin-top: 1em;
123+
}
124+
> div {
125+
padding: 2em;
126+
@include box($green);
127+
}
128+
}

0 commit comments

Comments
 (0)