Skip to content

Commit 049b453

Browse files
rwieruchrwieruch
committed
adjust readme
1 parent 38175d5 commit 049b453

22 files changed

+440
-1901
lines changed

‎.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

‎README.md

Lines changed: 6 additions & 1901 deletions
Large diffs are not rendered by default.

‎package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "react-redux-hackernews",
3+
"version": "0.1.0",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "1.0.7"
7+
},
8+
"dependencies": {
9+
"react": "^15.5.4",
10+
"react-dom": "^15.5.4"
11+
},
12+
"scripts": {
13+
"start": "react-scripts start",
14+
"build": "react-scripts build",
15+
"test": "react-scripts test --env=jsdom",
16+
"eject": "react-scripts eject"
17+
}
18+
}

‎public/favicon.ico

24.3 KB
Binary file not shown.

‎public/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React App</title>
23+
</head>
24+
<body>
25+
<noscript>
26+
You need to enable JavaScript to run this app.
27+
</noscript>
28+
<div id="root"></div>
29+
<!--
30+
This HTML file is a template.
31+
If you open it directly in the browser, you will see an empty page.
32+
33+
You can add webfonts, meta tags, or analytics to this file.
34+
The build step will place the bundled scripts into the <body> tag.
35+
36+
To begin the development, run `npm start` or `yarn start`.
37+
To create a production bundle, use `npm run build` or `yarn build`.
38+
-->
39+
</body>
40+
</html>

‎public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎src/actions/index.js

Whitespace-only changes.

‎src/components/App.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.app {
2+
margin: 20px;
3+
}
4+
5+
.interactions {
6+
text-align: center;
7+
}

‎src/components/App.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { Component } from 'react';
2+
import './App.css';
3+
4+
import Stories from './Stories';
5+
6+
class App extends Component {
7+
render() {
8+
return (
9+
<div className="app">
10+
<Stories
11+
stories={this.props.stories}
12+
onDismiss={() => {}}
13+
/>
14+
</div>
15+
);
16+
}
17+
}
18+
19+
export default App;

‎src/components/Buttons.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
3+
const ButtonInline = ({
4+
onClick,
5+
type = 'button',
6+
children
7+
}) =>
8+
<Button
9+
type={type}
10+
className="button-inline"
11+
onClick={onClick}
12+
>
13+
{children}
14+
</Button>
15+
16+
const Button = ({
17+
onClick,
18+
className,
19+
type = 'button',
20+
children
21+
}) =>
22+
<button
23+
type={type}
24+
className={className}
25+
onClick={onClick}
26+
>
27+
{children}
28+
</button>
29+
30+
export default Button;
31+
32+
export {
33+
ButtonInline,
34+
};

‎src/components/Stories.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.stories {
2+
margin: 20px 0;
3+
}
4+
5+
.stories-header {
6+
display: flex;
7+
line-height: 24px;
8+
font-size: 16px;
9+
padding: 0 10px;
10+
justify-content: space-between;
11+
}
12+
13+
.stories-header > span {
14+
overflow: hidden;
15+
text-overflow: ellipsis;
16+
padding: 0 5px;
17+
}

‎src/components/Stories.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React, { Component } from 'react';
2+
import './Stories.css';
3+
4+
import Story from './Story';
5+
6+
const COLUMNS = {
7+
title: {
8+
label: 'Title',
9+
width: '40%',
10+
},
11+
author: {
12+
label: 'Author',
13+
width: '30%',
14+
},
15+
comments: {
16+
label: 'Comments',
17+
width: '10%',
18+
},
19+
points: {
20+
label: 'Points',
21+
width: '10%',
22+
},
23+
dismiss: {
24+
width: '10%',
25+
},
26+
};
27+
28+
class Stories extends Component {
29+
render() {
30+
const {
31+
stories,
32+
onDismiss,
33+
} = this.props;
34+
35+
return (
36+
<div className="stories">
37+
<StoriesHeader columns={COLUMNS} />
38+
39+
{(stories || []).map(story =>
40+
<Story
41+
key={story.objectID}
42+
story={story}
43+
columns={COLUMNS}
44+
onDismiss={onDismiss}
45+
/>
46+
)}
47+
</div>
48+
);
49+
}
50+
}
51+
52+
const StoriesHeader = ({ columns }) =>
53+
<div className="stories-header">
54+
{Object.keys(columns).map(key =>
55+
<span
56+
key={key}
57+
style={{ width: columns[key].width }}
58+
>
59+
{columns[key].label}
60+
</span>
61+
)}
62+
</div>
63+
64+
export default Stories;

‎src/components/Story.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.story {
2+
display: flex;
3+
line-height: 24px;
4+
white-space: nowrap;
5+
margin: 10px 0;
6+
padding: 10px;
7+
background: #ffffff;
8+
border: 1px solid #e3e3e3;
9+
}
10+
11+
.story > span {
12+
overflow: hidden;
13+
text-overflow: ellipsis;
14+
padding: 0 5px;
15+
}

‎src/components/Story.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { Component } from 'react';
2+
import './Story.css';
3+
4+
import { ButtonInline } from './Buttons';
5+
6+
class Story extends Component {
7+
render() {
8+
const {
9+
story,
10+
columns,
11+
onDismiss,
12+
} = this.props;
13+
14+
const {
15+
title,
16+
url,
17+
author,
18+
num_comments,
19+
points,
20+
objectID,
21+
} = story;
22+
23+
return (
24+
<div className="story">
25+
<span style={{ width: columns.title.width }}>
26+
<a href={url}>{title}</a>
27+
</span>
28+
<span style={{ width: columns.author.width }}>
29+
{author}
30+
</span>
31+
<span style={{ width: columns.comments.width }}>
32+
{num_comments}
33+
</span>
34+
<span style={{ width: columns.points.width }}>
35+
{points}
36+
</span>
37+
<span style={{ width: columns.dismiss.width }}>
38+
<ButtonInline onClick={() => onDismiss(objectID)}>
39+
Dismiss
40+
</ButtonInline>
41+
</span>
42+
</div>
43+
);
44+
}
45+
}
46+
47+
export default Story;

‎src/constants/actionTypes.js

Whitespace-only changes.

‎src/constants/index.js

Whitespace-only changes.

‎src/index.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body {
2+
color: #222;
3+
background: #f4f4f4;
4+
font: 400 14px CoreSans, Arial,sans-serif;
5+
}
6+
7+
a {
8+
color: #222;
9+
}
10+
11+
a:hover {
12+
text-decoration: underline;
13+
}
14+
15+
ul, li {
16+
list-style: none;
17+
padding: 0;
18+
margin: 0;
19+
}
20+
21+
input {
22+
padding: 10px;
23+
border-radius: 5px;
24+
outline: none;
25+
margin-right: 10px;
26+
border: 1px solid #dddddd;
27+
}
28+
29+
button {
30+
padding: 10px;
31+
border-radius: 5px;
32+
border: 1px solid #dddddd;
33+
background: transparent;
34+
color: #808080;
35+
cursor: pointer;
36+
}
37+
38+
button:hover {
39+
color: #222;
40+
}
41+
42+
.button-inline {
43+
border-width: 0;
44+
background: transparent;
45+
color: inherit;
46+
text-align: inherit;
47+
-webkit-font-smoothing: inherit;
48+
padding: 0;
49+
font-size: inherit;
50+
cursor: pointer;
51+
}
52+
53+
.button-active {
54+
border-radius: 0;
55+
border-bottom: 1px solid #38BB6C;
56+
}
57+
58+
*:focus {
59+
outline: none;
60+
}

0 commit comments

Comments
 (0)