Skip to content

Commit ec2811d

Browse files
theevilheadtheevilhead
committed
Follow standard js styleguide
1 parent ccd0896 commit ec2811d

File tree

8 files changed

+520
-4822
lines changed

8 files changed

+520
-4822
lines changed

‎App.js‎

Lines changed: 77 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,90 @@
1-
import React, { Component } from 'react';
2-
import axios from 'axios';
1+
import React, { Component } from 'react'
2+
import axios from 'axios'
33

4-
import './styles/App.scss';
4+
import './styles/App.scss'
55

6-
import PostCard from './components/PostCard';
7-
import Loader from './components/Loader';
6+
import PostCard from './components/PostCard'
7+
import Loader from './components/Loader'
88

9-
const baseURL = 'https://hashnode.com';
9+
const baseURL = 'https://hashnode.com'
1010

1111
class App extends Component {
12+
constructor (props) {
13+
super(props)
14+
this.state = {
15+
context: 'hot',
16+
posts: [],
17+
isLoading: false
18+
}
19+
}
1220

13-
constructor(props) {
14-
super(props);
15-
this.state = {
16-
context: 'hot',
17-
posts: [],
18-
isLoading: false
19-
}
20-
}
21+
fetchHotPosts () {
22+
window.scrollTo(0, 0)
23+
let _this = this
24+
this.setState({ isLoading: true })
25+
axios.get(`${baseURL}/ajax/posts/hot`)
26+
.then(function (result) {
27+
_this.setState({
28+
posts: result.data.posts,
29+
context: 'hot',
30+
isLoading: false
31+
})
32+
})
33+
}
2134

22-
fetchHotPosts() {
23-
window.scrollTo(0,0)
24-
let _this = this;
25-
this.setState({ isLoading: true });
26-
axios.get(`${baseURL}/ajax/posts/hot`)
27-
.then(function (result) {
28-
_this.setState({
29-
posts: result.data.posts,
30-
context: 'hot',
31-
isLoading: false
32-
})
33-
})
34-
}
35+
fetchTrendingPosts () {
36+
window.scrollTo(0, 0)
37+
let _this = this
38+
this.setState({ isLoading: true })
39+
axios.get(`${baseURL}/ajax/posts/stories/trending`)
40+
.then(function (result) {
41+
_this.setState({
42+
posts: result.data.posts,
43+
context: 'trending',
44+
isLoading: false
45+
})
46+
})
47+
}
3548

36-
fetchTrendingPosts() {
37-
window.scrollTo(0,0)
38-
let _this = this;
39-
this.setState({ isLoading: true });
40-
axios.get(`${baseURL}/ajax/posts/stories/trending`)
41-
.then(function (result) {
42-
_this.setState({
43-
posts: result.data.posts,
44-
context: 'trending',
45-
isLoading: false
46-
})
47-
})
48-
}
49+
componentDidMount () {
50+
this.fetchHotPosts()
51+
}
4952

50-
componentDidMount() {
51-
this.fetchHotPosts();
52-
}
53+
render () {
54+
const posts = this.state.posts
5355

54-
render() {
56+
const postsRender = posts.map((post, index) => {
57+
return <li className='post' key={index}>
58+
<PostCard post={post} />
59+
</li>
60+
})
5561

56-
const posts = this.state.posts;
57-
58-
const postsRender = posts.map((post, index) => {
59-
return <li className="post" key={index}>
60-
<PostCard post={post} />
61-
</li>
62-
})
63-
64-
return (
65-
<div id="app">
66-
<div className="header">
67-
<a href="https://hashnode.com?utm_source=chrome_extension&utm_medium=extension" className="logo" target="_blank">
68-
<img src={require('./images/hn-logo.png')} />
69-
</a>
70-
<div className="nav">
71-
<button className={this.state.context === 'hot' && 'active' || ''} onClick={() => this.fetchHotPosts()}> Hot discussions </button>
72-
<button className={this.state.context === 'trending' && 'active' || ''} onClick={() => this.fetchTrendingPosts()}> Trending stories </button>
73-
</div>
74-
</div>
75-
<div className="content">
76-
{
77-
(this.state.isLoading && <Loader />) ||
78-
(this.state.posts.length > 0 && <ul>{postsRender}</ul> || <small>Error in loading posts</small>)
79-
}
80-
</div>
81-
<div className="footer">
82-
<div>
83-
<a href="https://hashnode.com?utm_source=chrome_extension&utm_medium=extension" target="_blank" rel="noopener">My feed</a> · <span>&copy; 2019</span>
84-
</div>
85-
<a href="https://l.hshno.de/chrome-extension-feedback" target="_blank" rel="noopener">Feedback</a>
86-
</div>
87-
</div>
88-
);
89-
}
62+
return (
63+
<div id='app'>
64+
<div className='header'>
65+
<a href='https://hashnode.com?utm_source=chrome_extension&utm_medium=extension' className='logo' target='_blank'>
66+
<img src={require('./images/hn-logo.png')} />
67+
</a>
68+
<div className='nav'>
69+
<button className={this.state.context === 'hot' ? 'active' : ''} onClick={() => this.fetchHotPosts()}> Hot discussions </button>
70+
<button className={this.state.context === 'trending' ? 'active' : ''} onClick={() => this.fetchTrendingPosts()}> Trending stories </button>
71+
</div>
72+
</div>
73+
<div className='content'>
74+
{
75+
(this.state.isLoading && <Loader />) ||
76+
(this.state.posts.length > 0 ? <ul>{postsRender}</ul> : <small>Error in loading posts</small>)
77+
}
78+
</div>
79+
<div className='footer'>
80+
<div>
81+
<a href='https://hashnode.com?utm_source=chrome_extension&utm_medium=extension' target='_blank' rel='noopener'>My feed</a> · <span>&copy 2019</span>
82+
</div>
83+
<a href='https://l.hshno.de/chrome-extension-feedback' target='_blank' rel='noopener'>Feedback</a>
84+
</div>
85+
</div>
86+
)
87+
}
9088
}
9189

92-
export default App;
90+
export default App

‎components/Loader.js‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import React, { Component } from 'react'
1+
import React from 'react'
22

33
const Loader = () => {
4-
return (
5-
<div className="loading-wrapper">
6-
<div className="loading-card">
7-
<div className="rect big"></div>
8-
<div className="rect"></div>
9-
{/* <div className="rect"></div>
10-
<div className="rect"></div> */}
11-
</div>
12-
<div className="loading-card">
13-
<div className="rect big"></div>
14-
<div className="rect"></div>
15-
{/* <div className="rect"></div>
16-
<div className="rect"></div> */}
17-
</div>
18-
<div className="loading-card">
19-
<div className="rect big"></div>
20-
<div className="rect"></div>
21-
{/* <div className="rect"></div>
22-
<div className="rect"></div> */}
23-
</div>
24-
</div>
25-
)
4+
return (
5+
<div className='loading-wrapper'>
6+
<div className='loading-card'>
7+
<div className='rect big' />
8+
<div className='rect' />
9+
{/* <div className='rect'></div>
10+
<div className='rect'></div> */}
11+
</div>
12+
<div className='loading-card'>
13+
<div className='rect big' />
14+
<div className='rect' />
15+
{/* <div className='rect'></div>
16+
<div className='rect'></div> */}
17+
</div>
18+
<div className='loading-card'>
19+
<div className='rect big' />
20+
<div className='rect' />
21+
{/* <div className='rect'></div>
22+
<div className='rect'></div> */}
23+
</div>
24+
</div>
25+
)
2626
}
2727

28-
export default Loader;
28+
export default Loader

‎components/PostCard.js‎

Lines changed: 88 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,98 @@
11
import React, { Component } from 'react'
22

3-
const thumbsImage = require('../images/thumbs.png');
4-
const commentsImage = require('../images/comments.png');
5-
const dummyUserImage = require('../images/dummyUser.png');
3+
const thumbsImage = require('../images/thumbs.png')
4+
const commentsImage = require('../images/comments.png')
5+
const dummyUserImage = require('../images/dummyUser.png')
66

77
export class PostCard extends Component {
8-
constructor(props) {
9-
super(props);
10-
}
8+
getReplacedImage (src) {
9+
var newSrc = 'https://cdn.hashnode.com/res/hashnode/image/upload/'
10+
var parts = src.split('/upload/')
11+
var format = parts[1].substring(parts[1].lastIndexOf('.') + 1)
12+
var imageNameParts = parts[1].substring(1, src.split('/upload/')[1].length).split('/')
13+
newSrc +=
14+
imageNameParts[1].split('.')[0] + '/' + imageNameParts[0] + '.' + format
15+
return newSrc
16+
}
1117

12-
getReplacedImage(src) {
13-
var newSrc = 'https://cdn.hashnode.com/res/hashnode/image/upload/';
14-
var parts = src.split('/upload/');
15-
var format = parts[1].substring(parts[1].lastIndexOf('.') + 1);
16-
var imageNameParts = parts[1].substring(1, src.split('/upload/')[1].length).split('/');
17-
newSrc += (imageNameParts[1].split('.')[0] + '/' + imageNameParts[0] + '.' + format);
18-
return newSrc;
19-
}
18+
loadProfileImage (src) {
19+
if (!src) {
20+
return
21+
}
22+
if (src.indexOf('//res.cloudinary.com') !== -1 && src.indexOf('/upload/') !== -1) {
23+
return this.getReplacedImage(src)
24+
}
25+
return src
26+
}
2027

21-
loadProfileImage(src) {
22-
if (!src) {
23-
return;
24-
}
25-
if (src.indexOf('//res.cloudinary.com') !== -1 && src.indexOf('/upload/') !== -1) {
26-
return this.getReplacedImage(src);
27-
}
28-
return src;
29-
}
28+
render () {
29+
const post = this.props.post
3030

31-
render() {
32-
33-
const post = this.props.post;
34-
35-
return (
36-
<div>
37-
{post.coverImage && <img className="post-cover" src={post.coverImage} width="100%" />}
38-
<div className="post-details">
39-
<a href={`https://hashnode.com/post/${post.slug}-${post.cuid}?utm_source=chrome_extension&utm_medium=extension`} target="_blank">
40-
<h3 className="post-title">{post.title}</h3>
41-
<p className="post-desc">
42-
{post.brief.substring(0, 140)}...
43-
</p>
44-
</a>
45-
<div className="post-footer">
46-
<a href={`${post.author ? 'https://hashnode.com/@' + post.author.username + '?utm_source=chrome_extension&utm_medium=extension' : ''}`} target="_blank" className="author"
47-
style={{
48-
backgroundImage: 'url("' + ((post.author && post.author.photo && this.loadProfileImage(post.author.photo)) || dummyUserImage) + '")'
49-
}}
50-
>
51-
{/* <img src={((post.author && post.author.photo && this.loadProfileImage(post.author.photo)) || dummyUserImage)} /> */}
52-
</a>
53-
<div className="post-activity">
54-
<a href={`https://hashnode.com/post/${post.slug}-${post.cuid}?utm_source=chrome_extension&utm_medium=extension`} target="_blank" className="reactions">
55-
<img src={thumbsImage} />
56-
{post.totalReactions}
57-
</a>
58-
<a href={`https://hashnode.com/post/${post.slug}-${post.cuid}?utm_source=chrome_extension&utm_medium=extension`} target="_blank" className="comments">
59-
<img src={commentsImage} />
60-
{post.responseCount}
61-
</a>
62-
</div>
63-
</div>
64-
</div>
65-
</div>
66-
)
67-
}
31+
return (
32+
<div>
33+
{post.coverImage && (
34+
<img className='post-cover' src={post.coverImage} width='100%' />
35+
)}
36+
<div className='post-details'>
37+
<a
38+
href={`https://hashnode.com/post/${post.slug}-${
39+
post.cuid
40+
}?utm_source=chrome_extension&utm_medium=extension`}
41+
target='_blank'
42+
>
43+
<h3 className='post-title'>{post.title}</h3>
44+
<p className='post-desc'>{post.brief.substring(0, 140)}...</p>
45+
</a>
46+
<div className='post-footer'>
47+
<a
48+
href={`${
49+
post.author
50+
? 'https://hashnode.com/@' +
51+
post.author.username +
52+
'?utm_source=chrome_extension&utm_medium=extension'
53+
: ''
54+
}`}
55+
target='_blank'
56+
className='author'
57+
style={{
58+
backgroundImage:
59+
'url("' +
60+
((post.author &&
61+
post.author.photo &&
62+
this.loadProfileImage(post.author.photo)) ||
63+
dummyUserImage) +
64+
'")'
65+
}}
66+
>
67+
{/* <img src={((post.author && post.author.photo && this.loadProfileImage(post.author.photo)) || dummyUserImage)} /> */}
68+
</a>
69+
<div className='post-activity'>
70+
<a
71+
href={`https://hashnode.com/post/${post.slug}-${
72+
post.cuid
73+
}?utm_source=chrome_extension&utm_medium=extension`}
74+
target='_blank'
75+
className='reactions'
76+
>
77+
<img src={thumbsImage} />
78+
{post.totalReactions}
79+
</a>
80+
<a
81+
href={`https://hashnode.com/post/${post.slug}-${
82+
post.cuid
83+
}?utm_source=chrome_extension&utm_medium=extension`}
84+
target='_blank'
85+
className='comments'
86+
>
87+
<img src={commentsImage} />
88+
{post.responseCount}
89+
</a>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
)
95+
}
6896
}
6997

7098
export default PostCard

0 commit comments

Comments
 (0)