Skip to content

Commit 9bd5e1e

Browse files
author
Carlos Rufo Jimenez
committed
refactor: functional to class components
1 parent e44cbc8 commit 9bd5e1e

File tree

5 files changed

+268
-267
lines changed

5 files changed

+268
-267
lines changed

‎src/components/App.js

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
1-
import React from 'react'
1+
import React, { Component } from 'react'
22
import LinkList from './LinkList'
33
import CreateLink from './CreateLink'
44
import Header from './Header'
55
import Login from './Login'
66
import Search from './Search'
77
import { Switch, Route, Redirect } from 'react-router-dom'
88

9-
export default () => (
10-
<div className="center w85">
11-
<Header />
12-
<div className="ph3 pv1 background-gray">
13-
<Switch>
14-
<Route exact path="/" render={() => <Redirect to="/new/1" />} />
15-
<Route exact path="/create" component={CreateLink} />
16-
<Route exact path="/login" component={Login} />
17-
<Route exact path="/search" component={Search} />
18-
<Route exact path="/top" component={LinkList} />
19-
<Route exact path="/new/:page" component={LinkList} />
20-
</Switch>
21-
</div>
22-
</div>
23-
)
9+
class App extends Component {
10+
render() {
11+
return (
12+
<div className="center w85">
13+
<Header />
14+
<div className="ph3 pv1 background-gray">
15+
<Switch>
16+
<Route exact path="/" render={() => <Redirect to="/new/1" />} />
17+
<Route exact path="/create" component={CreateLink} />
18+
<Route exact path="/login" component={Login} />
19+
<Route exact path="/search" component={Search} />
20+
<Route exact path="/top" component={LinkList} />
21+
<Route exact path="/new/:page" component={LinkList} />
22+
</Switch>
23+
</div>
24+
</div>
25+
)
26+
}
27+
}
28+
29+
export default App

‎src/components/Header.js

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,55 @@
1-
import React from 'react'
1+
import React, { Component } from 'react'
22
import { Link } from 'react-router-dom'
33
import { withRouter } from 'react-router'
44
import { AUTH_TOKEN } from '../constants'
55

6-
const Header = props => {
7-
const authToken = localStorage.getItem(AUTH_TOKEN)
8-
return (
9-
<div className="flex pa1 justify-between nowrap orange">
10-
<div className="flex flex-fixed black">
11-
<div className="fw7 mr1">Hacker News</div>
12-
<Link to="/" className="ml1 no-underline black">
13-
new
14-
</Link>
15-
<div className="ml1">|</div>
16-
<Link to="/top" className="ml1 no-underline black">
17-
top
18-
</Link>
19-
<div className="ml1">|</div>
20-
<Link to="/search" className="ml1 no-underline black">
21-
search
22-
</Link>
23-
{authToken && (
24-
<div className="flex">
25-
<div className="ml1">|</div>
26-
<Link to="/create" className="ml1 no-underline black">
27-
submit
28-
</Link>
29-
</div>
30-
)}
31-
</div>
32-
<div className="flex flex-fixed">
33-
{authToken ? (
34-
<div
35-
className="ml1 pointer black"
36-
onClick={() => {
37-
localStorage.removeItem(AUTH_TOKEN)
38-
props.history.push(`/`)
39-
}}
40-
>
41-
logout
42-
</div>
43-
) : (
44-
<Link to="/login" className="ml1 no-underline black">
45-
login
6+
class Header extends Component {
7+
render() {
8+
const authToken = localStorage.getItem(AUTH_TOKEN)
9+
return (
10+
<div className="flex pa1 justify-between nowrap orange">
11+
<div className="flex flex-fixed black">
12+
<div className="fw7 mr1">Hacker News</div>
13+
<Link to="/" className="ml1 no-underline black">
14+
new
15+
</Link>
16+
<div className="ml1">|</div>
17+
<Link to="/top" className="ml1 no-underline black">
18+
top
4619
</Link>
47-
)}
20+
<div className="ml1">|</div>
21+
<Link to="/search" className="ml1 no-underline black">
22+
search
23+
</Link>
24+
{authToken && (
25+
<div className="flex">
26+
<div className="ml1">|</div>
27+
<Link to="/create" className="ml1 no-underline black">
28+
submit
29+
</Link>
30+
</div>
31+
)}
32+
</div>
33+
<div className="flex flex-fixed">
34+
{authToken ? (
35+
<div
36+
className="ml1 pointer black"
37+
onClick={() => {
38+
localStorage.removeItem(AUTH_TOKEN)
39+
this.props.history.push(`/`)
40+
}}
41+
>
42+
logout
43+
</div>
44+
) : (
45+
<Link to="/login" className="ml1 no-underline black">
46+
login
47+
</Link>
48+
)}
49+
</div>
4850
</div>
49-
</div>
50-
)
51+
)
52+
}
5153
}
5254

5355
export default withRouter(Header)

‎src/components/Link.js

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { Component } from 'react'
22
import { AUTH_TOKEN } from '../constants'
33
import { timeDifferenceForDate } from '../utils'
44
import { Mutation } from 'react-apollo'
@@ -22,39 +22,44 @@ const VOTE_MUTATION = gql`
2222
}
2323
}
2424
`
25+
class Link extends Component {
26+
render() {
27+
const { link, index, updateStoreAfterVote } = this.props
28+
const authToken = localStorage.getItem(AUTH_TOKEN)
2529

26-
export default ({ link, index, updateStoreAfterVote }) => {
27-
const authToken = localStorage.getItem(AUTH_TOKEN)
28-
return (
29-
<div className="flex mt2 items-start">
30-
<div className="flex items-center">
31-
<span className="gray">{index + 1}.</span>
32-
{authToken && (
33-
<Mutation
34-
mutation={VOTE_MUTATION}
35-
variables={{ linkId: link.id }}
36-
update={(cache, { data: { vote } }) =>
37-
updateStoreAfterVote(cache, vote, link.id)
38-
}
39-
>
40-
{voteMutation => (
41-
<div className="ml1 gray f11" onClick={voteMutation}>
42-
▲
43-
</div>
44-
)}
45-
</Mutation>
46-
)}
47-
</div>
48-
<div className="ml1">
49-
<div>
50-
{link.description} ({link.url})
30+
return (
31+
<div className="flex mt2 items-start">
32+
<div className="flex items-center">
33+
<span className="gray">{index + 1}.</span>
34+
{authToken && (
35+
<Mutation
36+
mutation={VOTE_MUTATION}
37+
variables={{ linkId: link.id }}
38+
update={(cache, { data: { vote } }) =>
39+
updateStoreAfterVote(cache, vote, link.id)
40+
}
41+
>
42+
{voteMutation => (
43+
<div className="ml1 gray f11" onClick={voteMutation}>
44+
▲
45+
</div>
46+
)}
47+
</Mutation>
48+
)}
5149
</div>
52-
<div className="f6 lh-copy gray">
53-
{`${link.votes.length} votes | by
50+
<div className="ml1">
51+
<div>
52+
{link.description} ({link.url})
53+
</div>
54+
<div className="f6 lh-copy gray">
55+
{`${link.votes.length} votes | by
5456
${link.postedBy ? link.postedBy.name : 'Unknown'}
5557
${timeDifferenceForDate(link.createdAt)}`}
58+
</div>
5659
</div>
5760
</div>
58-
</div>
59-
)
61+
)
62+
}
6063
}
64+
65+
export default Link

0 commit comments

Comments
 (0)