Skip to content

Commit 3922ba7

Browse files
jkettmannjkettmann
committed
Initial project
1 parent 6efc8ec commit 3922ba7

23 files changed

+455
-231
lines changed

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@
66
"@testing-library/jest-dom": "^4.2.4",
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
9+
"normalize.css": "^8.0.1",
910
"react": "^16.13.1",
1011
"react-dom": "^16.13.1",
11-
"react-scripts": "3.4.1"
12+
"react-router-dom": "^5.2.0",
13+
"react-scripts": "3.4.1",
14+
"styled-components": "^5.1.1"
1215
},
1316
"scripts": {
1417
"start": "react-scripts start",

‎public/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27+
<link href="https://fonts.googleapis.com/css?family=Bitter|Montserrat:400,500,600&display=swap" rel="stylesheet">
2728
<title>React App</title>
2829
</head>
2930
<body>

‎src/App.css

-38
This file was deleted.

‎src/App.js

+22-18
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
2+
import { Switch, Route } from 'react-router-dom';
3+
import GlobalStyle from './GlobalStyle';
4+
import Header from './components/Header';
5+
import Home from './pages/Home';
46

57
function App() {
68
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
9+
<>
10+
<GlobalStyle />
11+
<Header />
12+
13+
<main>
14+
<Switch>
15+
<Route path="/how-it-works">
16+
<h1>How it works</h1>
17+
</Route>
18+
<Route path="/about">
19+
<h1>About</h1>
20+
</Route>
21+
<Route path="/">
22+
<Home />
23+
</Route>
24+
</Switch>
25+
</main>
26+
</>
2327
);
2428
}
2529

‎src/GlobalStyle.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { createGlobalStyle } from 'styled-components';
2+
3+
const GlobalStyle = createGlobalStyle`
4+
*, *::before, *::after {
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: "Montserrat", sans-serif;
10+
font-size: 16px;
11+
line-height: 1.69;
12+
color: #93918f;
13+
14+
h1, h2, h3, h4, h5, h6 {
15+
color: #000000;
16+
font-family: "Bitter", serif;
17+
font-weight: normal;
18+
text-align: center;
19+
}
20+
21+
h1 {
22+
font-size: 2.375em;
23+
}
24+
25+
h2 {
26+
font-size: 1.5em;
27+
}
28+
29+
a {
30+
color: #0087ff;
31+
}
32+
}
33+
`;
34+
35+
export default GlobalStyle;

‎src/components/Button/Button.style.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import styled from 'styled-components';
2+
3+
export const Button = styled.button`
4+
height: 36px;
5+
line-height: 36px;
6+
padding: 0 16px;
7+
font-size: 14px;
8+
font-weight: 500;
9+
color: #ffffff;
10+
background: #fdb755;
11+
border: none;
12+
border-radius: 4px;
13+
cursor: pointer;
14+
text-transform: uppercase;
15+
`;

‎src/components/Button/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Button as default } from './Button.style';

‎src/components/Container/Container.style.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import styled from 'styled-components';
2+
3+
export const Container = styled.div`
4+
width: 100%;
5+
max-width: 778px;
6+
margin: auto;
7+
padding: 0 20px;
8+
`;

‎src/components/Container/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Container as default } from './Container.style';

‎src/components/Header/Header.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { Container, Logo, NavLink } from './Header.style';
4+
5+
function Header() {
6+
return (
7+
<Container as="header">
8+
<Link to="/">
9+
<Logo />
10+
</Link>
11+
12+
<nav>
13+
<NavLink to="/how-it-works">
14+
How it works
15+
</NavLink>
16+
17+
<NavLink to="/about">
18+
About
19+
</NavLink>
20+
</nav>
21+
</Container>
22+
);
23+
}
24+
25+
export default Header;

‎src/components/Header/Header.style.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import styled from 'styled-components';
2+
import { Link } from 'react-router-dom';
3+
import { ReactComponent } from './logo.svg';
4+
5+
export const Container = styled.header`
6+
width: 100%;
7+
height: 100px;
8+
margin: 0 auto;
9+
padding: 0 80px;
10+
display: flex;
11+
align-items: center;
12+
justify-content: space-between;
13+
`;
14+
15+
export const Logo = styled(ReactComponent)`
16+
margin-top: 8px;
17+
`;
18+
19+
export const NavLink = styled(Link)`
20+
margin-left: 26px;
21+
text-decoration: none;
22+
color: #636363;
23+
`;

‎src/components/Header/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './Header';

‎src/components/Header/logo.svg

+1
Loading

‎src/index.css

-13
This file was deleted.

‎src/index.js

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
1+
import 'normalize.css';
12
import React from 'react';
23
import ReactDOM from 'react-dom';
3-
import './index.css';
4+
import { BrowserRouter as Router } from 'react-router-dom';
45
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
66

77
ReactDOM.render(
88
<React.StrictMode>
9-
<App />
9+
<Router>
10+
<App />
11+
</Router>
1012
</React.StrictMode>,
1113
document.getElementById('root')
1214
);
13-
14-
// If you want your app to work offline and load faster, you can change
15-
// unregister() to register() below. Note this comes with some pitfalls.
16-
// Learn more about service workers: https://bit.ly/CRA-PWA
17-
serviceWorker.unregister();

‎src/logo.svg

-7
This file was deleted.

‎src/pages/Home/Form.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { useState } from 'react';
2+
import Button from '../../components/Button';
3+
import { FormContainer, Label, Input } from './Form.style';
4+
5+
function Form({ onSearch }) {
6+
const [subreddit, setSubreddit] = useState('javascript');
7+
8+
const onSubmit = (event) => {
9+
event.preventDefault();
10+
onSearch(subreddit);
11+
};
12+
13+
return (
14+
<FormContainer onSubmit={onSubmit}>
15+
<Label>
16+
r /
17+
<Input
18+
type="text"
19+
name="subreddit"
20+
value={subreddit}
21+
onChange={(event) => setSubreddit(event.target.value)}
22+
/>
23+
</Label>
24+
25+
<Button type="submit">
26+
Search
27+
</Button>
28+
</FormContainer>
29+
);
30+
}
31+
32+
export default Form;

‎src/pages/Home/Form.style.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import styled from 'styled-components';
2+
3+
export const FormContainer = styled.form`
4+
margin: 20px 0 0;
5+
display: flex;
6+
align-items: center;
7+
`;
8+
9+
export const Label = styled.label`
10+
font-size: 18px;
11+
`;
12+
13+
export const Input = styled.input`
14+
width: 370px;
15+
height: 36px;
16+
margin: 0 10px;
17+
padding: 0 15px;
18+
font-size: 14px;
19+
color: #000000;
20+
border: 1px solid #d5d5d5;
21+
22+
:focus, :active {
23+
border: 1px solid #d5d5d5;
24+
}
25+
`;

‎src/pages/Home/Home.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { useState } from 'react';
2+
import Container from '../../components/Container';
3+
import { Section, Headline, Status, TopPosts } from './Home.style';
4+
import Form from './Form';
5+
6+
function Home() {
7+
const [posts, setPosts] = useState([]);
8+
const [status, setStatus] = useState('idle')
9+
10+
const onSearch = async (subreddit) => {
11+
setStatus('loading');
12+
const url = `https://www.reddit.com/r/${subreddit}/top.json`;
13+
const response = await fetch(url);
14+
const { data } = await response.json();
15+
setPosts(data.children);
16+
setStatus('resolved');
17+
};
18+
19+
return (
20+
<Container>
21+
<Section>
22+
<Headline>
23+
Find the best time for a subreddit
24+
</Headline>
25+
26+
<Form onSearch={onSearch} />
27+
</Section>
28+
29+
{
30+
status === 'loading' && (
31+
<Status>
32+
Is loading
33+
</Status>
34+
)
35+
}
36+
{
37+
status === 'resolved' && (
38+
<TopPosts>
39+
Number of top posts: {posts.length}
40+
</TopPosts>
41+
)
42+
}
43+
</Container>
44+
);
45+
}
46+
47+
export default Home;

0 commit comments

Comments
 (0)