added new methods to sort by columns

Author: GowriKrishnamurthy

src/App.js

@@ -1,23 +1,69 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from "react";
+import "./App.css";
+import Articles from "./components/Articles";
+
+const title = "React Sorting articles";
+
+function App({ articles }) {
+  const [articlesList, setArticlesList] = useState(articles);
+
+  const sortByUpvotes = () => {
+    var newArticles = [];
+    Object.assign(newArticles, articlesList);
+    newArticles.sort((a, b) => {
+      if (a.upvotes > b.upvotes) {
+        return -1;
+      }
+      if (a.upvotes < b.upvotes) {
+        return 1;
+      }
+      return 0;
+    });
+
+    setArticlesList(newArticles);
+  };
+
+  const sortByDates = () => {
+    var newArticles = [];
+    Object.assign(newArticles, articlesList);
+    newArticles.sort((a, b) => {
+      const aDate = new Date(a.date);
+      const bDate = new Date(b.date);
+      if (aDate > bDate) {
+        return -1;
+      }
+      if (aDate < bDate) {
+        return 1;
+      }
+      return 0;
+    });
+
+    setArticlesList(newArticles);
+  };
 
-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"
+      <h1> {title} </h1>
+      <div className="layout-row align-items-center justify-content-center my-20 navigation">
+        <label className="form-hint mb-0 text-uppercase font-weight-light">
+          Sort By
+        </label>
+        <button
+          data-testid="most-upvoted-link"
+          className="small"
+          onClick={() => sortByUpvotes()}
+        >
+          Most Upvoted
+        </button>
+        <button
+          data-testid="most-recent-link"
+          className="small"
+          onClick={() => sortByDates()}
         >
-          Learn React
-        </a>
-      </header>
+          Most Recent
+        </button>
+      </div>
+      <Articles articles={articlesList} />
     </div>
   );
 }