Skip to content

Commit 10e6041

Browse files
author
Carlos Rufo Jimenez
committed
refactor
1 parent 50aeee4 commit 10e6041

File tree

5 files changed

+94
-116
lines changed

5 files changed

+94
-116
lines changed

‎src/components/App.js

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,18 @@ import Login from './Login'
66
import Search from './Search'
77
import { Switch, Route, Redirect } from 'react-router-dom'
88

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="/login" component={Login} />
18-
<Route exact path="/create" component={CreateLink} />
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
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="/login" component={Login} />
16+
<Route exact path="/create" component={CreateLink} />
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+
)

‎src/components/CreateLink.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import gql from 'graphql-tag'
44
import { FEED_QUERY } from './LinkList'
55
import { LINKS_PER_PAGE } from '../constants'
66

7-
// 1
87
const POST_MUTATION = gql`
9-
# 2
108
mutation PostMutation($description: String!, $url: String!) {
119
post(description: $description, url: $url) {
1210
id
@@ -88,5 +86,4 @@ class CreateLink extends Component {
8886
}
8987
}
9088

91-
// 3
9289
export default CreateLink

‎src/components/Header.js

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,51 @@ import { Link } from 'react-router-dom'
33
import { withRouter } from 'react-router'
44
import { AUTH_TOKEN } from '../constants'
55

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
19-
</Link>
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
6+
const Header = () => {
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
4728
</Link>
48-
)}
49-
</div>
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+
this.props.history.push(`/`)
39+
}}
40+
>
41+
logout
42+
</div>
43+
) : (
44+
<Link to="/login" className="ml1 no-underline black">
45+
login
46+
</Link>
47+
)}
5048
</div>
51-
)
52-
}
49+
</div>
50+
)
5351
}
5452

5553
export default withRouter(Header)

‎src/components/Link.js

Lines changed: 33 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -23,49 +23,40 @@ const VOTE_MUTATION = gql`
2323
}
2424
`
2525

26-
class Link extends Component {
27-
render() {
28-
const authToken = localStorage.getItem(AUTH_TOKEN)
29-
const { link: { id: linkId } } = this.props
30-
return (
31-
<div className="flex mt2 items-start">
32-
<div className="flex items-center">
33-
<span className="gray">{this.props.index + 1}.</span>
34-
{authToken && (
35-
<Mutation
36-
mutation={VOTE_MUTATION}
37-
variables={{ linkId }}
38-
update={(cache, { data: { vote } }) =>
39-
this.props.updateStoreAfterVote(cache, vote, linkId)
40-
}
41-
>
42-
{voteMutation => (
43-
<div className="ml1 gray f11" onClick={voteMutation}>
44-
▲
45-
</div>
46-
)}
47-
</Mutation>
48-
)}
26+
export default props => {
27+
const authToken = localStorage.getItem(AUTH_TOKEN)
28+
const {
29+
link: { id: linkId, description, url, votes, postedBy, createdAt },
30+
} = props
31+
return (
32+
<div className="flex mt2 items-start">
33+
<div className="flex items-center">
34+
<span className="gray">{props.index + 1}.</span>
35+
{authToken && (
36+
<Mutation
37+
mutation={VOTE_MUTATION}
38+
variables={{ linkId }}
39+
update={(cache, { data: { vote } }) =>
40+
props.updateStoreAfterVote(cache, vote, linkId)
41+
}
42+
>
43+
{voteMutation => (
44+
<div className="ml1 gray f11" onClick={voteMutation}>
45+
▲
46+
</div>
47+
)}
48+
</Mutation>
49+
)}
50+
</div>
51+
<div className="ml1">
52+
<div>
53+
{description} ({url})
4954
</div>
50-
<div className="ml1">
51-
<div>
52-
{this.props.link.description} ({this.props.link.url})
53-
</div>
54-
<div className="f6 lh-copy gray">
55-
{this.props.link.votes.length} votes | by{' '}
56-
{this.props.link.postedBy
57-
? this.props.link.postedBy.name
58-
: 'Unknown'}{' '}
59-
{timeDifferenceForDate(this.props.link.createdAt)}
60-
</div>
55+
<div className="f6 lh-copy gray">
56+
{votes.length} votes | by {postedBy ? postedBy.name : 'Unknown'}
57+
{timeDifferenceForDate(createdAt)}
6158
</div>
6259
</div>
63-
)
64-
}
65-
66-
_voteForLink = async () => {
67-
// ... you'll implement this in chapter 6
68-
}
60+
</div>
61+
)
6962
}
70-
71-
export default Link

‎src/components/LinkList.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,11 +122,9 @@ class LinkList extends Component {
122122
render() {
123123
return (
124124
<Query query={FEED_QUERY} variables={this.getQueryVariables()}>
125-
{result => {
126-
if (result.loading) return <div>Loading</div>
127-
if (result.error) return <div>Error</div>
128-
129-
const { data, subscribeToMore } = result
125+
{({ loading, error, data, subscribeToMore }) => {
126+
if (loading) return <div>Loading</div>
127+
if (error) return <div>Error</div>
130128

131129
const isNewPage = this.props.location.pathname.includes('new')
132130
const linksToRender = this._getLinksToRender(isNewPage, data)

0 commit comments

Comments
 (0)