Subreddit form (#6)

* header task: first commit

* header task: fixed missing default 'javascript'

* header task: fixed default link: '/search/javascript'

* header after first review

* header fixing test

* implemented unit test

* header: before rebase after app-skeleton-review

* resolved conflicts. Fixed unit tests

* footer: initial commit

* implemented Footer.js and Footer.style.js

* footer: completed unit tests

* hero-section: initial commit with with fixes from previous PR

* hero-section: completed unit tests

* hero-section: fixed linting issues in unit tests

* hero-section: fixed Apps to have all unit tests pass

* hero-section: added missing test descriptions in footer.js

* hero-section: refactor components and file structure after review

* info-section: initial commit

* info-section: implemented About and How it works sections

* info-section: fix link to https://ooloo.io/employers

* info-section: implemented react-router-hash-link

* info-section: fixed ooloo.io link

* info-section: implemented unit tests

* info-section: fixed linting errors

* info-section: fixed linting errors

* info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment)

* info-section: commit after review

* subreddit-form: initial commit. Setup folder structure

* subreddit-form: implement tests

* subreddit-form: fix lint error in Header.js

* subreddit-form: completed unit and e2e tests

* subreddit-form: fixes and cleanup after review

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^10.4.5",
     "@testing-library/user-event": "^12.0.11",
     "eslint-plugin-styled-components-a11y": "^0.0.16",
+    "history": "^5.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

src/__tests__/SearchPage.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+
+import App from '../app';
+import { defaultSubReddit } from '../config';
+
+const setup = (initialPath = '/') => {
+  let history;
+
+  render(
+    <MemoryRouter initialEntries={[initialPath]}>
+      <App />
+      <Route
+        path="*"
+        render={(props) => {
+          history = props.history;
+          return null;
+        }}
+      />
+    </MemoryRouter>,
+  );
+  return { history };
+};
+
+describe('subreddit form', () => {
+  it('updates the URL when submitting the form', () => {
+    const { history } = setup('/search/python');
+    const searchInput = screen.getByLabelText('r /');
+
+    expect(searchInput.value).toBe('python');
+
+    userEvent.clear(searchInput);
+    userEvent.type(searchInput, 'Gatsbyjs');
+
+    expect(searchInput.value).toBe('Gatsbyjs');
+
+    const submitButton = screen.getByRole('button', { name: /search/i });
+    userEvent.click(submitButton);
+
+    expect(history.location.pathname).toEqual('/search/Gatsbyjs');
+  });
+
+  it('input value changes to default subredit when seach link in header is clicked', () => {
+    setup('/search/reactjs');
+    const searchInput = screen.getByRole('textbox');
+    const header = screen.getByRole('banner');
+    const searchLink = within(header).getByRole('link', { name: /search/i });
+
+    userEvent.click(searchLink);
+
+    expect(searchInput.value).toBe(defaultSubReddit);
+  });
+});

src/app/App.js

@@ -7,6 +7,7 @@ import { ContentContainer } from './App.style';
 import Header from '../common/header';
 import Footer from '../common/footer';
 import HomePage from '../page-home';
+import SearchPage from '../page-search';
 
 function App() {
   return (
@@ -16,7 +17,10 @@ function App() {
       <ContentContainer>
 
         <Switch>
-          <Route path="/search">Search Page</Route>
+          <Route path="/search/:subreddit">
+            <SearchPage />
+            <p>Search Page</p>
+          </Route>
           <Route path="/terms">Terms Page</Route>
           <Route path="/">
             <HomePage />

src/common/button/Button.style.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+// eslint-disable-next-line import/prefer-default-export
+export const Button = styled.button`
+  height:36px;
+  line-height: 36px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  font-size: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.color.primary};
+  cursor: pointer;
+  text-transform: uppercase;
+`;

src/common/button/index.js

@@ -0,0 +1 @@
+export { Button as default } from './Button.style';

src/common/container/Container.style.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+// eslint-disable-next-line import/prefer-default-export
+export const Container = styled.div`
+  width: 100%;
+  max-width: 778px;
+  margin: 0 auto;
+  padding: 0 20px;
+`;

src/common/container/index.js

@@ -0,0 +1 @@
+export { Container as default } from './Container.style';

src/common/header/Header.js

@@ -5,13 +5,17 @@ import { Container, HeaderLink, Logo } from './Header.style';
 import { defaultSubReddit } from '../../config';
 
 function Header() {
+  function handleClick() {
+    window.dispatchEvent(new Event('popstate'));
+  }
+
   return (
     <Container>
       <Link to="/">
         <Logo />
       </Link>
       <nav>
-        <HeaderLink to={`/search/${defaultSubReddit}`}>Search</HeaderLink>
+        <HeaderLink to={`/search/${defaultSubReddit}`} onClick={handleClick}>Search</HeaderLink>
         <HeaderLink smooth to="/#how-it-works">How it works</HeaderLink>
         <HeaderLink smooth to="/#about">About</HeaderLink>
       </nav>

src/page-home/HeroSection.js

@@ -15,7 +15,7 @@ function HeroSection() {
       <Subline>
         Great timing, great results! Find the best times to post on your subreddit.
       </Subline>
-      <Button to={`/search/${defaultSubReddit}`}>Show me the best time</Button>
+      <Button as={Link} to={`/search/${defaultSubReddit}`}>Show me the best time</Button>
       <DefaultSubreddit>
         r/
         {defaultSubReddit}

src/page-home/HeroSection.style.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
+// import { Link } from 'react-router-dom';
+
+import UnstyledButton from '../common/button';
 
 export const Section = styled.section`
   display: flex;
@@ -19,20 +21,9 @@ export const Subline = styled.h2`
   letter-spacing: ${(props) => props.theme.letterSpacing.default};
 `;
 
-export const Button = styled(Link)`
-  height: 36px;
-  line-height: 36px;
+export const Button = styled(UnstyledButton)`
   margin-top: 42px;
-  padding: 0 16px;
-  font-size: ${(props) => props.theme.font.size.small};
-  font-weight: 500;
-  color: ${(props) => props.theme.color.light};
-  background: ${(props) => props.theme.color.primary};
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
   text-decoration: none;
-  text-transform: uppercase;
 `;
 
 export const DefaultSubreddit = styled.div`

src/page-home/Info.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { string, node } from 'prop-types';
 
-import { Article, Content, Headline } from './Info.style';
+import { Container, Content, Headline } from './Info.style';
 
 function Info({ id, headline, children }) {
   return (
-    <Article id={id}>
+    <Container as="article" id={id}>
       <Headline>{headline}</Headline>
       <Content>
         {children}
       </Content>
-    </Article>
+    </Container>
   );
 }
 

src/page-home/Info.style.js

@@ -1,15 +1,14 @@
 import styled from 'styled-components';
 
+import UnstyledContainer from '../common/container';
+
 export const Content = styled.div`
   margin: 0 20px;
   
 `;
 
-export const Article = styled.article`
-  width: 100%;
-max-width: 778px;
-margin: 0 auto;
-  padding: 0 20px;
+export const Container = styled(UnstyledContainer)`
+  margin: 100px auto;
 `;
 
 export const Headline = styled.h2`

src/page-home/InfoSection.js

@@ -21,8 +21,8 @@ function InfoSection() {
         with the goal to implement pixel-perfect real-world application
         with professional workflows and tools like Kanban, Clickup,
         {' '}
-        Zeplin, GitHub, pull requests and code reviews.
-        <a href="https://ooloo.io/employers"> &nbsp;Click here for more information</a>
+        Zeplin, GitHub, pull requests and code reviews.&nbsp;
+        <a href="https://ooloo.io/employers">Click here for more information</a>
       </Info>
     </Section>
   );

src/page-search/SearchPage.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Container, Headline } from './SearchPage.style';
+import SubredditForm from './SubredditForm';
+
+function SearchPage() {
+  return (
+    <Container>
+      <Headline>Find the best time for a subreddit</Headline>
+      <SubredditForm />
+    </Container>
+  );
+}
+
+export default SearchPage;

src/page-search/SearchPage.style.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+import UnstyledContainer from '../common/container';
+
+export const Container = styled(UnstyledContainer)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const Headline = styled.h1`
+  margin-top: 18px 0 0; 
+`;

src/page-search/SubredditForm.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+
+import {
+  Form, Input, Label,
+} from './SubredditForm.style';
+import Button from '../common/button';
+
+function SubredditForm() {
+  const { subreddit: initialSubreddit } = useParams();
+  const [subreddit, setSubreddit] = useState(initialSubreddit);
+
+  function handleChange(event) {
+    setSubreddit(event.target.value);
+  }
+
+  const history = useHistory();
+
+  function handleSubmit(evt) {
+    evt.preventDefault();
+    history.push(`/search/${subreddit}`);
+  }
+
+  // update input value when URL is updated externally
+  // (e.g. when user clicks on search link in header)
+  useEffect(() => {
+    setSubreddit(initialSubreddit);
+  }, [initialSubreddit]);
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Label>
+        r /
+        <Input
+          type="text"
+          value={subreddit}
+          name="subreddit"
+          onChange={handleChange}
+        />
+      </Label>
+      <Button>Search</Button>
+    </Form>
+  );
+}
+
+export default SubredditForm;

src/page-search/SubredditForm.style.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Form = 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: ${(props) => props.theme.font.size.small};
+  color: ${(props) => props.theme.color.dark};
+  border: 1px solid ${(props) => props.theme.color.midLight};
+`;

src/page-search/index.js

@@ -0,0 +1 @@
+export { default } from './SearchPage';

yarn.lock

@@ -1122,7 +1122,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -6184,6 +6184,13 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
+history@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
+  integrity sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"