We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. Data Handling
  4. Article Sorting
  5. Discussions

Article Sorting

Sort by

recency

|

27 Discussions

|

  • helenadcruz9
     + 0 comments

    I see many music app. But Recently i see app which do multiple task. Blackhole apk is open sourse music app. Which provide free spotify and youtube wiithout troubleshoot. Amazing experience...

  • hernandezn_artu1
     + 1 comment

    test are not working. My solutions is working but when I run test it always fail.

  • devildjoseph666
     + 0 comments

    this is hard?

  • harshraydev
     + 0 comments

    I solved the problem but on run tests I am getting Tests not defined and Submitting solution does not lead anywhere. In the Submissions it says wrong answer. what am I missing?

  • arpittiwari_in
     + 2 comments

    Easy and optimized soln

    import "h8k-components";

import Articles from "./components/Articles";

import "./App.css";
import {useState} from "react";

function App({ articles }) {

 const [sortBy, setSortBy] = useState("upvotes");

  const sortedArticles = [...articles].sort((a, b) => {
    if (sortBy === "upvotes") return b.upvotes - a.upvotes;
    if (sortBy === "date") return new Date(b.date) - new Date(a.date);
    return 0;
  });

  const handleMostUpvoted = () => {
    setSortBy("upvotes");
  }

  const handleMostRecent = () => {
    setSortBy("date");
  }

  return (
    <>
      <h8k-navbar header="Sorting Articles"></h8k-navbar>
      <div className="App">
        <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={handleMostUpvoted}
          >
            Most Upvoted
          </button>
          <button
            data-testid="most-recent-link"
            className="small"
            onClick={handleMostRecent}
          >
            Most Recent
          </button>
        </div>
        <Articles articles={sortedArticles} />
      </div>
    </>
  );
}

export default App;