Sort by

recency

|

15 Discussions

|

  • + 0 comments

    all test cases are failing for this import "h8k-components"; import React, {useState} from "react"; import Articles from "./components/Articles";

    import "./App.css";

    function App({ articles }) { const [ articlesData, setArticles] = useState([...articles].sort((a, b)=> b.upvotes - a.upvotes)); const handleMostUpvoted = () => { // Logic for most upvoted articles const sortedList = [...articlesData].sort((a, b)=> b.upvotes - a.upvotes); setArticles(sortedList); };

    const handleMostRecent = () => { const sortedList = [...articlesData].sort((a, b)=> new Date(b.date) - new Date(a.date)); setArticles(sortedList); }; return ( <> Sort By Most Upvoted Most Recent ); }

    export default App;

  • + 0 comments

    Articles.js

    import React from "react";
    
    function Articles({ articles = [] }) {
      return (
        <div className="card w-50 mx-auto">
          <table>
    
            <thead>
              <tr>
                <th>Title</th>
                <th>Upvotes</th>
                <th>Date</th>
              </tr>
            </thead>
    
            <tbody>
              {articles.map((item, index) => 
                <tr data-testid="article" key={index}>
                  <td data-testid="article-title">
                    {item.title}
                  </td>
                  <td data-testid="article-upvotes">
                    {item.upvotes}
                  </td>
                  <td data-testid="article-date">
                    {item.date}
                  </td>
                </tr>
              )}
            </tbody>
            
          </table>
          </div>
      );
    }
    
    export default Articles;
    

    App.js

    import "h8k-components";
    import {useState} from 'react'
    import Articles from "./components/Articles";
    import "./App.css";
    
    function App({ articles }) {
      const [orderedBy, setOrderedBy] = useState('upvotes')
    
      if(orderedBy == 'recent') {
        articles.sort((a,b) => 
          new Date(b.date) - new Date(a.date))
      }
    
      if(orderedBy == 'upvotes') {
        articles.sort((a,b) => 
          new Date(b.upvotes) - new Date(a.upvotes))
      }
        
      const handleMostUpvoted = () => setOrderedBy('upvotes');
      const handleMostRecent = () => setOrderedBy('recent');
    
      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} />
          </div>
        </>
      );
    }
    
    export default App;
    
  • + 0 comments

    I believe there is a problem with the initial test case.

    Note that the articles are tested against the mostUpvotedArticles. If we do not fireEvent.click(mostUpvotedLink), articles will never equal to mostUpvotedLink.

    Correct me if I am wrong?

    test("Initial articles render correctly", () => {
      const { queryAllByTestId } = renderApp();
    
      const articles = queryAllByTestId(testIds.article);
      expectArticles(articles, mostUpvotedArticles);
    });
    
  • + 0 comments

    import "h8k-components"; import { useState, useEffect } from "react"

    import Articles from "./components/Articles";

    import "./App.css";

    function App({ articles }) {

    const [sortArtiles, setSortArticles] = useState([]) const handleMostUpvoted = () => { // Logic for most upvoted articles let nexsortArtiles = [...articles]?.sort((a, b) => (b.upvotes) - (a.upvotes)) setSortArticles(nexsortArtiles) };

    const handleMostRecent = () => { // Logic for most recent articles let nexsortArtiles = [...articles]?.sort((a, b) => new Date(b.date) - new Date(a.date)) setSortArticles(nexsortArtiles) };

    useEffect(() => { if (articles.length) { setSortArticles([...articles].sort((a, b) => b.upvotes - a.upvotes)); } }, [articles]) return ( <> Sort By Most Upvoted Most Recent ); }

    export default App;

  • + 0 comments

    WHY ALL THE TEST CASES ARE FAILING FOR THIS SOLUTION import "h8k-components"; import Articles from "./components/Articles"; import { useState, useEffect } from "react"; import "./App.css";

    function App({ articles }) { console.log("🔍 Initial Articles:", articles); // Debugging

    // State for sorted articles const [sortedArticles, setSortedArticles] = useState([]);

    useEffect(() => { // Ensure initial articles are sorted correctly by upvotes if (articles.length) { setSortedArticles([...articles].sort((a, b) => b.upvotes - a.upvotes)); } }, [articles]);

    const handleMostUpvoted = () => { console.log("🔼 Sorting by upvotes..."); setSortedArticles([...articles].sort((a, b) => b.upvotes - a.upvotes)); };

    const handleMostRecent = () => { console.log("📅 Sorting by date..."); setSortedArticles([...articles].sort((a, b) => new Date(b.date) - new Date(a.date))); };

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

    export default App;