//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) => ( ))}

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