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

|

21 Discussions

|

  • Movindu_Lochana
     + 0 comments

    Easy Answer

    App

    function App({ articles }) {

  const [rows, setRows] = useState(articles.toSorted((a, b) => b.upvotes - a.upvotes));

  const handleMostUpvoted = () => {
    setRows(rows.toSorted((a, b) => b.upvotes - a.upvotes))
  };

  const handleMostRecent = () => {
    setRows(rows.toSorted((a, b) => Date.parse(b.date) - Date.parse(a.date)))
  };

// snip
}

    Artciles

    // snip
	<tbody>
          {articles.map(i => (
            <tr data-testid="article" key={i.title}>
              <td data-testid="article-title">{i.title}</td>
              <td data-testid="article-upvotes">{i.upvotes}</td>
              <td data-testid="article-date">{ i.date }</td>
            </tr>
          ))}
        </tbody>
// snip
}

  • chandrakant21
     + 0 comments
    import "h8k-components";

import Articles from "./components/Articles";

import React, { useState, useEffect } from 'react';

import "./App.css";

function App({ articles }) {
  const [articlList, setArticleList] = useState(articles);
  useEffect(() => {
    handleMostUpvoted();
  }, []);


  const handleMostUpvoted = () => {
     // Logic for most upvotes
    const tempArr = [...articlList];
    tempArr.sort((a, b) => b.upvotes - a.upvotes);
    setArticleList(tempArr);
  };

  const handleMostRecent = () => {
    // Logic for most recent articles
    const tempArr = [...articlList];
    tempArr.sort((a, b) => new Date(b.date) - new Date(a.date));
    setArticleList(tempArr);
  };


  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 articlList={articlList} />
      </div>
    </>
  );
}

export default App;

  • muhammadmujtaba6
     + 0 comments

    all testcases are passed

    App.jsx

    import "h8k-components";
import Articles from "./components/Articles";
import "./App.css";
import { useState } from "react";

function App({ articles = [] }) {
  const [orderBy, setOrderBy] = useState(null)

  const handleMostUpvoted = () => setOrderBy("upvotes")
  const handleMostRecent = () => setOrderBy("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={articles} orderBy={orderBy} />
      </div>
    </>
  );
}

export default App;

    Article,jsx

    import React from "react";

function Articles({ articles = [], orderBy }) {
  const sortArticle = (data) => {
    if (orderBy) {
      if (orderBy === "upvotes") {
        return data.sort((a, b) => b.upvotes - a.upvotes)
      } else if (orderBy === 'date') {
        return data.sort((a, b) => new Date(b.date) - new Date(a.date))
      }
    } else return data.sort((a, b) => b.upvotes - a.upvotes)

  }
  return (
    <div className="card w-50 mx-auto">
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Upvotes</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          {sortArticle(articles)?.map((article, index) => (
            <tr data-testid="article" key={`article-${index}`}>
              <td data-testid="article-title">{article.title}</td>
              <td data-testid="article-upvotes">{article.upvotes}</td>
              <td data-testid="article-date">{article.date}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Articles;

  • ravijaiswalu9v
     + 0 comments

    //App.jsx

    import "h8k-components";

    import Articles from "./components/Articles"; import {useState} from "react"; import {useEffect} from "react";

    import "./App.css";

    function App({ articles }) { // first method // const initialState = ()=>{ // const sorted = [...articles].sort(function(b, a){ // if(a.upvotes > b.upvotes) return 1; // else if (a.upvotes < b.upvotes) return -1; // else return 0; // });

    // return sorted; // }

    // const [sortedArticle, setSortedArticle] = useState(initialState());

    //second method useEffect

    const [sortedArticle, setSortedArticle] = useState(articles);

    useEffect(()=> {

    console.log("use effect");
const sorted = [...sortedArticle].sort(function(b, a){
  if(a.upvotes > b.upvotes) return 1;
  else if (a.upvotes < b.upvotes) return -1;
  else return 0;
});

setSortedArticle(sorted);

    } , []);

    const handleMostUpvoted = () => { // Logic for most upvoted articles

    const sorted = [...sortedArticle].sort(function(b, a){
  if(a.upvotes > b.upvotes) return 1;
  else if (a.upvotes < b.upvotes) return -1;
  else return 0;
});

setSortedArticle(sorted);

    };

    const handleMostRecent = () => { // Logic for most recent articles const sortDate = [...sortedArticle].sort((a, b)=>{ if(a.date < b.date) return 1; else if (a.date > b.date) return -1; else return 0; });

    setSortedArticle(sortDate);

    }; return ( <> Sort By Most Upvoted Most Recent ); }

    export default App;

    //Articles.jsx

    import React from "react";

    function Articles({ articles = [] }) { return ( {articles.map((article, index) => ( ))}

    Title Upvotes Date
    {article.title} {article.upvotes} {article.date}

    Make sure not to change "data-testid" leave as it is ); } ma export default Articles;

  • cute_n_charming
     + 0 comments

    All tests passed:

    import "h8k-components";

    import Articles from "./components/Articles";

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

    function App({ articles }) { const [sortedArticles, setSortedArticles] = useState( [...articles].sort((a, b) => b.upvotes - a.upvotes) );

    const handleMostUpvoted = () => { // Logic for most upvoted articles const updated = [...sortedArticles].sort((a, b) => b.upvotes - a.upvotes); setSortedArticles(updated); };

    const handleMostRecent = () => { // Logic for most recent articles const updated = [...sortedArticles].sort( (a, b) => new Date(b.date) - new Date(a.date) ); setSortedArticles(updated); }; return ( <> Sort By Most Upvoted Most Recent ); }

    export default App;

    import React from "react";

    function Articles({ articles }) { return ( Title Upvotes Date 

          {articles.map((article,index) =><tr data-testid="article" key={article.id}>
        <td  data-testid="article-title">{article.title}</td>
        <td data-testid="article-upvotes">{article.upvotes}</td>
        <td data-testid="article-date">{article.date}</td>
      </tr> )}

    </tbody>
  </table>
</div>

    ); }

    export default Articles;