Readme (#10)

* 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

* load-the-data: initial commit: added LoadTheData.js

* load-the-data: fetching data implemented. But unit test and e2e test filing

* load-the-data: troubleshooting tests

* load-the-data: continue troubleshooting tests

* load-the-data: fix linting error

* load-the-data: fix the code to fetch top 500 posts

* load-the-data: troubleshooting unit test - 'invalid json response body at  reason: Unexpected end of JSON input'

* load-the-data: integration test passing

* load-the-data: refactor code after review. still 1 test to fix in SearchPage.js

* laod-the-data: all tests pass

* heatmap: first commit: setup heatmap table

* heatmap: implemented heatmap architecture

* heatmap: implemented user timezone

* heatmap: implemented hover, highlit and timezone

* heatmap: completed implementation - start testing

* heatmap: refactor component structure - set test skeleton

* heatmap: complete integration tests

* heatmap: complete. fix user timezone in tests

* heatmap: refactor code after review

* heatmap: fix all test errors. ready to merge pr

* heatmap: fix last test errors. ready to merge pr

* posts-table: e2e tests passing

* posts-table: 2 integration tests remaining

* posts-table: resolved conflicts

* posts-table: fix lint issue

* posts-table: fix lint issue

* posts-table: implemented posts sorted by time created

* post-table: refactor after review

* Final refactor: cleaned up tests and set background color to white

* readme: add project readme

* readme: made header menu responsive on mobile device

* readme: made header menu responsive on mobile device: fixe error

* readme: implemented cell with deleted author and cell background colr scheme selection

* readme: implemented postsTable display in modal window

README.md

@@ -1,68 +1,116 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+<!-- I use this template: https://github.com/dbader/readme-template/blob/master/README.md -->
+# Reddit Timer
+### or How to find the best time to post your subreddit
+Use historical posts data to determine the best time to post a subreddit.
 
-## Available Scripts
+This project is the result of a course by ooloo.io.
+The project goal is to build a professional web app with professional tools and methods.
 
-In the project directory, you can run:
+The lead developer at ooloo.io provided the project designs in Zeplin and tasks managed in Clickup management tool.
+One of the requirements is that each taks be implemented within its own pull request(PR). And the PR is reviewed by the lead developer before it's merged.
 
-### `yarn start`
+Beside the project being implemented with the React library, additional tools and packages nesesary to deliver the project to plan were free to choose.
+And on on occasion, I used TDD methodology to implement some tasks, such as header, footer, form tasks.
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+To ensure code quality and conformity an end to end (e2e) Cypress test suite was provided.
+I implemented the integragration tests using React Testing-Library to meet the project's acceptance criteria (AC).
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+## Tech Stack used:
+1. React/React Hooks
+2. Styled-components
+3. Cypress
+4. React Testing-Library
 
-### `yarn test`
+## Tools
+1. ClickUp
+2. Zeplin
+3. Perfect Pixel
+4. GitHub
+5. Slack
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## I Proposed Added Features
+In addition to the original AC, I proposed and implemented these features:
 
-### `yarn build`
+1. highlights for cells containing posts with deleted author
+2. display the posts table in modal mode
+3. choose the heatmap color theme
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+[![NPM Version][npm-image]][npm-url]
+[![Build Status][travis-image]][travis-url]
+[![Downloads Stats][npm-downloads]][npm-url]
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+One to two paragraph statement about your product and what it does.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+![](header.png)
 
-### `yarn eject`
+## Highlights
+Use of styled-components makes it easy to solve css issues for the heatmap color scheme.
+Tags are components that offer flexibility and ease of stiling
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+Efficient multiple fetch call using recursion
+Effective use of function compositing to simplify code readability
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+Testing using snapshot for the table that has 168 cells.
+Avoid data mutation on a parameter passed by reference
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+## Take Away from this Project:
 
-## Learn More
+1. Work as Pro frontend developer using Pro methodology and Tools:
+- Agile project management with ClickUp
+- Slack Team collaboration platform
+- E2E testing with Cypress
+- Jest and React Testing-library (with hooks and mocks)
+- Team linting style
+2. Professional Git pull request (PR) workflow:
+- pull requests (PR)
+- code review
+- branch merge
+3. Production Deployment
+- Live app deployed to Netlify with CC/CI webhook
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+## Installation
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+OS X & Linux:
+```sh
+yarn install
+```
 
-### Code Splitting
+## Usage
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+After all the packages have been successfully installed, you can run:
 
-### Analyzing the Bundle Size
+```sh
+yarn start
+```
+## Test
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+Run the tests with:
 
-### Making a Progressive Web App
+```sh
+yarn test
+```
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+## Meta
 
-### Advanced Configuration
+Your Name – [@YourTwitter](https://twitter.com/dbader_org) – YourEmail@example.com
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+Distributed under the XYZ license. See ``LICENSE`` for more information.
 
-### Deployment
+[https://github.com/yourname/github-link](https://github.com/dbader/)
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+## Contributing
 
-### `yarn build` fails to minify
+1. Fork it (<https://github.com/yourname/yourproject/fork>)
+2. Create your feature branch (`git checkout -b feature/fooBar`)
+3. Commit your changes (`git commit -am 'Add some fooBar'`)
+4. Push to the branch (`git push origin feature/fooBar`)
+5. Create a new Pull Request
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+<!-- Markdown link & img dfn's -->
+[npm-image]: https://img.shields.io/npm/v/datadog-metrics.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/datadog-metrics
+[npm-downloads]: https://img.shields.io/npm/dm/datadog-metrics.svg?style=flat-square
+[travis-image]: https://img.shields.io/travis/dbader/node-datadog-metrics/master.svg?style=flat-square
+[travis-url]: https://travis-ci.org/dbader/node-datadog-metrics
+[wiki]: https://github.com/yourname/yourproject/wiki

START_README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

src/__tests__/Footer.js

@@ -26,11 +26,12 @@ const setup = (initialPath = '/') => {
 
 describe('footer', () => {
   it('navigates to the home page when the logo is clicked', () => {
-    setup('/search/javascript');
+    const { history } = setup('/search/javascript');
     const logoLink = screen.getByRole('link', { name: /sign.svg/i });
     userEvent.click(logoLink);
 
-    expect(screen.getByText(/home page/i)).toBeInTheDocument();
+    expect(history.location.pathname).toEqual('/');
+    // expect(screen.getByText(/home page/i)).toBeInTheDocument();
   });
 
   it('navigates to terms page when terms link is clicked', () => {

src/__tests__/Header.js

@@ -26,11 +26,12 @@ const setup = (initialPath = '/') => {
 
 describe('Header', () => {
   test('navigates to home page when logo is clicked', () => {
-    setup('/search/javascript');
+    const { history } = setup('/search/javascript');
     const logoLink = screen.getByRole('link', { name: /logo\.svg/i });
     userEvent.click(logoLink);
 
-    expect(screen.getByText(/home page/i)).toBeInTheDocument();
+    expect(history.location.pathname).toEqual('/');
+    // expect(screen.getByText(/home page/i)).toBeInTheDocument();
   });
 
   test('navigates to search page when search link is clicked', () => {
@@ -39,7 +40,7 @@ describe('Header', () => {
     const searchLink = screen.getByRole('link', { name: /search/i });
     userEvent.click(searchLink);
 
-    expect(screen.getByText(/search page/i)).toBeInTheDocument();
+    // expect(screen.getByText(/search page/i)).toBeInTheDocument();
     expect(history.location.pathname).toEqual('/search/javascript');
   });
 
@@ -53,7 +54,7 @@ describe('Header', () => {
   const hashLink = screen.getByRole('link', { name: link });
   userEvent.click(hashLink);
 
-  expect(screen.getByText(/home page/i)).toBeInTheDocument();
+  // expect(screen.getByText(/home page/i)).toBeInTheDocument();
   expect(history.location.hash).toEqual(hash);
 });
 });

src/__tests__/HomePage.js

@@ -32,7 +32,7 @@ describe('homepage', () => {
     const ctaButton = screen.getByRole('link', { name: /show me the best time/i });
     userEvent.click(ctaButton);
 
-    expect(screen.getByText(/search page/i)).toBeInTheDocument();
+    // expect(screen.getByText(/search page/i)).toBeInTheDocument();
     expect(history.location.pathname).toEqual('/search/javascript');
   });
 
@@ -41,7 +41,7 @@ describe('homepage', () => {
     const heatmapImage = screen.getByAltText(/Screenshots of heatmap/i);
     userEvent.click(heatmapImage);
 
-    expect(screen.getByText(/search page/i)).toBeInTheDocument();
+    // expect(screen.getByText(/search page/i)).toBeInTheDocument();
     expect(history.location.pathname).toEqual('/search/javascript');
   });
 });

src/__tests__/SearchPage.js

@@ -84,7 +84,7 @@ describe('heatmap', () => {
 describe('subreddit form', () => {
   it('updates the URL when submitting the form', async () => {
     const { history } = setup('/search/python');
-    const searchInput = screen.getByLabelText('r /');
+    const searchInput = screen.getByLabelText('r/');
 
     expect(searchInput.value).toBe('python');
 

src/__tests__/__snapshots__/SearchPage.js.snap

@@ -179,7 +179,7 @@ Array [
     "author": "jherr2016",
     "authorLink": "https://reddit.com/u/jherr2016",
     "href": "https://reddit.com/r/reactjs/comments/ff55gz/intro_to_federated_modules_in_webpack_5/",
-    "numComments": "<a href=\\"https://reddit.com/u/jherr2016\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" class=\\"sc-efHXLn fIzpBR\\">jherr2016</a>",
+    "numComments": "<a href=\\"https://reddit.com/u/jherr2016\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" class=\\"sc-bBjRzc VnJMF\\">jherr2016</a>",
     "score": "127",
     "time": "2 am",
     "title": "Intro to Federated Modules in Webpack 5",
@@ -188,7 +188,7 @@ Array [
     "author": "albaneso",
     "authorLink": "https://reddit.com/u/albaneso",
     "href": "https://reddit.com/r/reactjs/comments/du50op/reactinteractivepaycard/",
-    "numComments": "<a href=\\"https://reddit.com/u/albaneso\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" class=\\"sc-efHXLn fIzpBR\\">albaneso</a>",
+    "numComments": "<a href=\\"https://reddit.com/u/albaneso\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" class=\\"sc-bBjRzc VnJMF\\">albaneso</a>",
     "score": "2070",
     "time": "2 am",
     "title": "react-interactive-paycard",
@@ -197,7 +197,7 @@ Array [
     "author": "Fizaraz",
     "authorLink": "https://reddit.com/u/Fizaraz",
     "href": "https://reddit.com/r/reactjs/comments/gpg5xq/i_redesigned_my_personal_website_from_scratch_and/",
-    "numComments": "<a href=\\"https://reddit.com/u/Fizaraz\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" class=\\"sc-efHXLn fIzpBR\\">Fizaraz</a>",
+    "numComments": "<a href=\\"https://reddit.com/u/Fizaraz\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\" class=\\"sc-bBjRzc VnJMF\\">Fizaraz</a>",
     "score": "179",
     "time": "2 am",
     "title": "I redesigned my personal website from scratch, and it is great!",

src/app/App.js

@@ -19,12 +19,12 @@ function App() {
         <Switch>
           <Route path="/search/:subreddit">
             <SearchPage />
-            <p>Search Page</p>
+            {/* <p>Search Page</p> */}
           </Route>
           <Route path="/terms">Terms Page</Route>
           <Route path="/">
             <HomePage />
-            <p>Home Page</p>
+            {/* <p>Home Page</p> */}
           </Route>
           <Redirect to="/" />
         </Switch>

src/common/header/Header.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { Container, HeaderLink, Logo } from './Header.style';
+import {
+  Container, HeaderLink, Logo, Nav,
+} from './Header.style';
 import { defaultSubReddit } from '../../config';
 
 function Header() {
@@ -14,11 +16,11 @@ function Header() {
       <Link to="/">
         <Logo />
       </Link>
-      <nav>
+      <Nav>
         <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>
+      </Nav>
     </Container>
   );
 }