Skip to content

Commit cc6b6eb

Browse files
nikolasburknikolasburk
committed
added Header component
1 parent 21e624a commit cc6b6eb

File tree

17 files changed

+2304
-309
lines changed

17 files changed

+2304
-309
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
.env.development.local
1616
.env.test.local
1717
.env.production.local
18+
project.graphcool
1819

1920
# webstorm
2021
.idea

‎README.md

Lines changed: 1897 additions & 4 deletions
Large diffs are not rendered by default.

‎package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
{
2-
"name": "hackernews",
2+
"name": "hackernews-react-apollo",
33
"version": "0.1.0",
44
"private": true,
55
"devDependencies": {
6-
"react-scripts": "1.0.7"
6+
"react-scripts": "1.0.7",
7+
"tachyons": "^4.7.4"
78
},
89
"dependencies": {
9-
"react": "^15.5.4",
10+
"react": "^15.6.1",
1011
"react-apollo": "^1.4.2",
11-
"react-dom": "^15.5.4",
12+
"react-dom": "^15.6.1",
1213
"react-router-dom": "^4.1.1",
13-
"subscriptions-transport-ws": "0.6.0"
14+
"subscriptions-transport-ws": "^0.7.3"
1415
},
1516
"scripts": {
1617
"start": "react-scripts start",

‎project.graphcool

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
-->
1111
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
1212
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
1314
<!--
1415
Notice the use of %PUBLIC_URL% in the tags above.
1516
It will be replaced with the URL of the `public` folder during the build.

‎src/components/App.js

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
1-
import React, {Component} from 'react'
1+
import React, { Component } from 'react'
22
import LinkList from './LinkList'
3-
import Login from './Login'
43
import CreateLink from './CreateLink'
4+
import Login from './Login'
55
import Search from './Search'
6-
import {Switch, Route, Redirect} from 'react-router-dom'
6+
import { Switch, Route, Redirect } from 'react-router-dom'
7+
import Header from './Header'
8+
79

810
class App extends Component {
911

1012
render() {
1113
return (
12-
<Switch>
13-
<Route exact path='/' render={() => <Redirect to='/new/1' />} />
14-
<Route exact path='/login' component={Login}/>
15-
<Route exact path='/create' component={CreateLink}/>
16-
<Route exact path='/search' component={Search}/>
17-
<Route exact path='/top' component={LinkList}/>
18-
<Route exact path='/new/:page' component={LinkList}/>
19-
</Switch>
14+
<div className='center w85'>
15+
<Header />
16+
<div className='ph3 pv1'>
17+
<Switch>
18+
<Route exact path='/' render={() => <Redirect to='/new/1' />} />
19+
<Route exact path='/login' component={Login}/>
20+
<Route exact path='/create' component={CreateLink}/>
21+
<Route exact path='/search' component={Search}/>
22+
<Route exact path='/top' component={LinkList}/>
23+
<Route exact path='/new/:page' component={LinkList}/>
24+
</Switch>
25+
</div>
26+
</div>
2027
)
2128
}
2229

‎src/components/CreateLink.js

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react'
22
import { gql, graphql } from 'react-apollo'
33
import { GC_USER_ID, LINKS_PER_PAGE } from '../constants'
4-
import {ALL_LINKS_QUERY } from './LinkList'
4+
import { ALL_LINKS_QUERY } from './LinkList'
55

66
class CreateLink extends Component {
77

@@ -14,25 +14,28 @@ class CreateLink extends Component {
1414

1515
return (
1616
<div>
17-
<div>
17+
<div className='flex flex-column mt3'>
1818
<input
19+
className='mb2'
1920
value={this.state.description}
2021
onChange={(e) => this.setState({ description: e.target.value })}
2122
type='text'
2223
placeholder='A description for the link'
2324
/>
2425
<input
26+
className='mb2'
2527
value={this.state.url}
2628
onChange={(e) => this.setState({ url: e.target.value })}
2729
type='text'
2830
placeholder='The URL for the link'
2931
/>
3032
</div>
31-
<button
33+
<div
34+
className='button'
3235
onClick={() => this._createLink()}
3336
>
34-
Create Link
35-
</button>
37+
submit
38+
</div>
3639
</div>
3740
)
3841

@@ -88,12 +91,6 @@ const CREATE_LINK_MUTATION = gql`
8891
id
8992
name
9093
}
91-
votes {
92-
id
93-
user {
94-
id
95-
}
96-
}
9794
}
9895
}
9996
`

‎src/components/Header.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { Component } from 'react'
2+
import { Link } from 'react-router-dom'
3+
import { GC_USER_ID, GC_AUTH_TOKEN } from '../constants'
4+
import { withRouter } from 'react-router'
5+
6+
class Header extends Component {
7+
8+
render() {
9+
const userId = localStorage.getItem(GC_USER_ID)
10+
return (
11+
<div className='flex pa1 justify-between nowrap orange'>
12+
<div className='flex flex-fixed black'>
13+
<div className='fw7 mr1'>Hacker News</div>
14+
<Link to='/new/1' className='ml1 no-underline black'>new</Link>
15+
<div className='ml1'>|</div>
16+
<Link to='/top' className='ml1 no-underline black'>top</Link>
17+
<div className='ml1'>|</div>
18+
<Link to='/search' className='ml1 no-underline black'>search</Link>
19+
{userId &&
20+
<div className='flex'>
21+
<div className='ml1'>|</div>
22+
<Link to='/create' className='ml1 no-underline black'>submit</Link>
23+
</div>
24+
}
25+
</div>
26+
<div className='flex flex-fixed'>
27+
{userId ?
28+
<div className='ml1 pointer black' onClick={() => {
29+
localStorage.removeItem(GC_USER_ID)
30+
localStorage.removeItem(GC_AUTH_TOKEN)
31+
this.props.history.push(`/new/1`)
32+
}}>logout</div>
33+
:
34+
<Link to='/login' className='ml1 no-underline black'>login</Link>
35+
}
36+
</div>
37+
</div>
38+
)
39+
}
40+
41+
}
42+
43+
export default withRouter(Header)

‎src/components/Link.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import React, { Component } from 'react'
2-
import { gql, graphql } from 'react-apollo'
32
import { GC_USER_ID } from '../constants'
3+
import { gql, graphql } from 'react-apollo'
4+
import { timeDifferenceForDate } from '../utils'
45

56
class Link extends Component {
67

78
render() {
8-
99
const userId = localStorage.getItem(GC_USER_ID)
1010
return (
11-
<div>
12-
{userId && <div onClick={() => this._voteForLink()}>▲</div>}
13-
<div>{this.props.link.description} ({this.props.link.url})</div>
14-
<div>{this.props.link.votes.length} votes | by {this.props.link.postedBy.name} {this.props.link.createdAt}</div>
11+
<div className='flex mt2 items-start'>
12+
<div className='flex items-center'>
13+
<span className='gray'>{this.props.index + 1}.</span>
14+
{userId && <div className='ml1 gray f11' onClick={() => this._voteForLink()}>▲</div>}
15+
</div>
16+
<div className='ml1'>
17+
<div>{this.props.link.description} ({this.props.link.url})</div>
18+
<div className='f6 lh-copy gray'>{this.props.link.votes.length} votes | by {this.props.link.postedBy ? this.props.link.postedBy.name : 'Unknown'} {timeDifferenceForDate(this.props.link.createdAt)}</div>
19+
</div>
1520
</div>
1621
)
1722
}
@@ -59,5 +64,4 @@ const CREATE_VOTE_MUTATION = gql`
5964

6065
export default graphql(CREATE_VOTE_MUTATION, {
6166
name: 'createVoteMutation'
62-
})(Link)
63-
67+
})(Link)

0 commit comments

Comments
 (0)