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;

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

import "./App.css";

function App({ articles }) {
  const [filteredArticles, setFilteredArticles] = useState(articles || []);

  const handleMostUpvoted = () => {
    // Logic for most upvoted articles
    setFilteredArticles([...articles]?.sort((a, b) => (b?.upvotes || 0) - (a?.upvotes || 0)));
  };

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

  useEffect(() => {
    handleMostUpvoted();
  }, [])
  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={filteredArticles} />
      </div>
    </>
  );
}

export default 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
}

// 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
}

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;

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;

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;