> npx create-react-app my-awesome-app
    > cd my-awesome-app
    > npm start

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>{/* This component will notify us of potential problems */}
      <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react';
import {Link} from 'react-router-dom';//npm install react-router-dom

function Navbar({query, onChange}) {
    return (
        <header className="flex header justify-between items-center p-2 px-3 m:p-0 m:px-0 m:pb-2">
            <h1 className="crayons-subtitle-2">Posts</h1>

            <nav className="crayons-tabs hidden s:flex" aria-label="View posts by">
                <ul className="crayons-tabs__list">
                    <li>
                        <Link data-text="Feed" to="/" className={"crayons-tabs__item" + (query === "/" ? ' crayons-tabs__item--current' : '')}>Feed</Link>
                    </li>
                    <li>
                        <Link data-text="Week" to="/top/week" className={"crayons-tabs__item" + (query === "/top/week" ? ' crayons-tabs__item--current' : '')}>Week</Link>
                    </li>
                    <li>
                        <Link data-text="Month" to="/top/month" className={"crayons-tabs__item" + (query === "/top/month" ? ' crayons-tabs__item--current' : '')}>Month</Link>
                    </li>
                    <li>
                        <Link data-text="Year" to="/top/year" className={"crayons-tabs__item" + (query === "/top/year" ? ' crayons-tabs__item--current' : '')}>Year</Link>
                    </li>
                    <li>
                    <Link data-text="Infinity" to="/top/infinity" className={"crayons-tabs__item" + (query === "/top/infinity" ? ' crayons-tabs__item--current' : '')}>Infinity</Link>
                    </li>
                    <li>
                        <Link data-text="Latest" to="/latest" className={"crayons-tabs__item" + (query === "/latest" ? ' crayons-tabs__item--current' : '')}>Latest</Link>
                    </li>
                </ul>
            </nav>

            <select className="right s:hidden f-16 pd5 b-r5 sh-focus" value={query} onChange={onChange}>
                <option value="/">Feed</option>
                <option value="/top/week">Week</option>
                <option value="/top/month">Month</option>
                <option value="/top/year">Year</option>
                <option value="/top/infinity">Infinity</option>
                <option value="/latest">Latest</option>
            </select>
        </header>
    )
}

export default Navbar;

*, *:before, *:after {
    /* Your general styles here */
    /* Styles for extra small devices */
}

@media screen and (min-width: 640px) {
    /* Takes care of small to medium devices */
}

@media screen and (min-width: 768px) {
    /* Takes care of tablet devices */
}

@media screen and (min-width: 1024px) {
    /* Takes care of laptop devices */
}

import React, {useState, useEffect} from 'react';
import {Route, Switch, useHistory, useLocation} from 'react-router-dom';
// import Home from './Home';
// import Article from './Article';
// import Search from './Search';

function App() {
  const location = useLocation();// provided by the router bundle
  const history = useHistory();// provided by the router bundle

  const [posts, setPosts] = useState([]);
  const [failure, setFailure] = useState(false);
  const [query, setQuery] = useState(location.pathname);
  const [isShowing, setIsShowing] = useState(false);// for the Hamburger
  //
  function handleChange(event) {
    history.push(event.target.value); // adds a new entry to the history object
    // event.target.value could be one of "/, /top/week, /top/month, /top/year, /top/infinity, /latest"
  }
  function SideNavToggler() {// Hamburger Menu is the Side Navigator
    setIsShowing(isShowing => !isShowing);
  } // we use this state to decide whether the side menu should be revealed or hidden during the next click of the trigger element.
            //
  useEffect(() => {
    // 1. to avoid creating new object each time the component re-renders, we have to define this within the useEffect.
    // 2. if it was passed in a dependency, React will create new object each time, causing the effect hook to run repeatedly for every effect.
    // 3a. We are transforming the location pathname to something that the dev.to API understands, but we need to keep the path name SEO friendly.
    // 3b. dev.to/api/articles?top=7 gets us the articles created over the week, but we want to make it appear as https://dev-to-blog/top/week => https://dev.to/top/week - hence, the need for this mapping.
    const mymap = {
      '/': 0,
      '/top/week': 7,
      '/top/month': 30,
      '/top/year': 365,
      '/top/infinity': 366,
      '/latest': 1
    }
    const qpath = mymap[location.pathname]; // returns 0 for / and 7 for week...
    const fetchArticles = async () => {
      try {
        setFailure(false);
        setPosts([]);
        //
        const url = 'https://dev.to/api/articles' + (qpath ? '?top=' + qpath : '');
        const api_response = await fetch(url);
        const data = await api_response.json();

        if (api_response.status !== 200) {
          throw Error(api_response.error);
        }
        // console.log(data);
        setQuery(location.pathname); // update this after a successful API request
        setPosts(data);
      } catch (error) {
        // console.log(error);
        setFailure(true);
        setQuery(''); // do this to allow new request without change in location
      }
    }
    !isNaN(qpath) && fetchArticles();
  }, [location]) // the effect hook will only run when there is a change in the location's pathname, or after a failed request

  const navState = {SideNavToggler, isShowing};
  const data = {query, failure, posts, handleChange, ...navState};

  return (
    <div className="App">
      {/* <Switch>
        <Route path="/" render={() => <Home data={data} />} exact />
        <Route path="/top" render={() => <Home data={data} />} />
        <Route path="/latest" render={() => <Home data={data} />} />
        <Route path="/search" component={Search} />

        <Route render={() => <Article data={navState} />} />
      </Switch> */}
    </div>
  );
}

export default App;