Initial project

jkettmann · Jun 22, 2020 · 3922ba7 · 3922ba7
1 parent 6efc8ec
commit 3922ba7
Show file tree

Hide file tree

Showing 23 changed files with 455 additions and 231 deletions.
diff --git a/package.json b/package.json
@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "normalize.css": "^8.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link href="https://fonts.googleapis.com/css?family=Bitter|Montserrat:400,500,600&display=swap" rel="stylesheet">
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,29 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Switch, Route } from 'react-router-dom';
+import GlobalStyle from './GlobalStyle';
+import Header from './components/Header';
+import Home from './pages/Home';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <GlobalStyle />
+      <Header />
+
+      <main>
+        <Switch>
+          <Route path="/how-it-works">
+            <h1>How it works</h1>
+          </Route>
+          <Route path="/about">
+            <h1>About</h1>
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
+      </main>
+    </>
   );
 }
 

diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js
@@ -0,0 +1,35 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: "Montserrat", sans-serif;
+    font-size: 16px;
+    line-height: 1.69;
+    color: #93918f;
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #000000;
+      font-family: "Bitter", serif;
+      font-weight: normal;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 2.375em;
+    }
+
+    h2 {
+      font-size: 1.5em;
+    }
+
+    a {
+      color: #0087ff;
+    }
+  }
+`;
+
+export default GlobalStyle;
diff --git a/src/components/Button/Button.style.js b/src/components/Button/Button.style.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Button = styled.button`
+  height: 36px;
+  line-height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #fdb755;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-transform: uppercase;
+`;
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -0,0 +1 @@
+export { Button as default } from './Button.style';
diff --git a/src/components/Container/Container.style.js b/src/components/Container/Container.style.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  max-width: 778px;
+  margin: auto;
+  padding: 0 20px;
+`;
diff --git a/src/components/Container/index.js b/src/components/Container/index.js
@@ -0,0 +1 @@
+export { Container as default } from './Container.style';
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Container, Logo, NavLink } from './Header.style';
+
+function Header() {
+  return (
+    <Container as="header">
+      <Link to="/">
+        <Logo />
+      </Link>
+
+      <nav>
+        <NavLink to="/how-it-works">
+          How it works
+        </NavLink>
+
+        <NavLink to="/about">
+          About
+        </NavLink>
+      </nav>
+    </Container>
+  );
+}
+
+export default Header;
diff --git a/src/components/Header/Header.style.js b/src/components/Header/Header.style.js
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { ReactComponent } from './logo.svg';
+
+export const Container = styled.header`
+  width: 100%;
+  height: 100px;
+  margin: 0 auto;
+  padding: 0 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const Logo = styled(ReactComponent)`
+  margin-top: 8px;
+`;
+
+export const NavLink = styled(Link)`
+  margin-left: 26px;
+  text-decoration: none;
+  color: #636363;
+`;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -0,0 +1 @@
+export { default } from './Header';
diff --git a/src/components/Header/logo.svg b/src/components/Header/logo.svg
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,14 @@
+import 'normalize.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/Home/Form.js b/src/pages/Home/Form.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import Button from '../../components/Button';
+import { FormContainer, Label, Input } from './Form.style';
+
+function Form({ onSearch }) {
+  const [subreddit, setSubreddit] = useState('javascript');
+
+  const onSubmit = (event) => {
+    event.preventDefault();
+    onSearch(subreddit);
+  };
+
+  return (
+    <FormContainer onSubmit={onSubmit}>
+      <Label>
+        r /
+        <Input
+          type="text"
+          name="subreddit"
+          value={subreddit}
+          onChange={(event) => setSubreddit(event.target.value)}
+        />
+      </Label>
+
+      <Button type="submit">
+        Search
+      </Button>
+    </FormContainer>
+  );
+}
+
+export default Form;
diff --git a/src/pages/Home/Form.style.js b/src/pages/Home/Form.style.js
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const FormContainer = styled.form`
+  margin: 20px 0 0;
+  display: flex;
+  align-items: center;
+`;
+
+export const Label = styled.label`
+  font-size: 18px;
+`;
+
+export const Input = styled.input`
+  width: 370px;
+  height: 36px;
+  margin: 0 10px;
+  padding: 0 15px;
+  font-size: 14px;
+  color: #000000;
+  border: 1px solid #d5d5d5;
+
+  :focus, :active {
+    border: 1px solid #d5d5d5;
+  }
+`;
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import Container from '../../components/Container';
+import { Section, Headline, Status, TopPosts } from './Home.style';
+import Form from './Form';
+
+function Home() {
+  const [posts, setPosts] = useState([]);
+  const [status, setStatus] = useState('idle')
+
+  const onSearch = async (subreddit) => {
+    setStatus('loading');
+    const url = `https://www.reddit.com/r/${subreddit}/top.json`;
+    const response = await fetch(url);
+    const { data } = await response.json();
+    setPosts(data.children);
+    setStatus('resolved');
+  };
+
+  return (
+    <Container>
+      <Section>
+        <Headline>
+          Find the best time for a subreddit
+        </Headline>
+
+        <Form onSearch={onSearch} />
+      </Section>
+
+      {
+        status === 'loading' && (
+          <Status>
+            Is loading
+          </Status>
+        )
+      }
+      {
+        status === 'resolved' && (
+          <TopPosts>
+            Number of top posts: {posts.length}
+          </TopPosts>
+        )
+      }
+    </Container>
+  );
+}
+
+export default Home;