Merge pull request #20 from mrkyns/feature/item-count

added item count to articles
mrkyns · Apr 20, 2023 · 02b7e59 · 02b7e59
2 parents f4a19df + 5279704
commit 02b7e59
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 42 deletions.
diff --git a/src/App.css b/src/App.css
@@ -180,7 +180,7 @@ nav ul li a:hover {
   background-color: var(--article_bg);
   color: var(--text);
   text-indent: 15px;
-  outline:none;
+  outline: none;
 }
 
 @media (max-width: 800px) {
@@ -240,21 +240,24 @@ nav ul li a:hover {
   border-radius: 1.5rem;
   position: relative;
   list-style: none;
+  display: flex;
+  align-items: center;
 }
 
 .Article {
-  padding: 0.75rem 1rem;
-  margin: 0.25rem 3.5rem;
-  position: relative;
+  padding: 0.75rem 0rem;
+  /* max-width: 1080px; */
+  min-width: 1000px;
+  display: inline-block;
 }
 
-.Article::before {
-  content: counter(list-item) ".";
+.Article__num {
+  display: inline-block;
   font-size: 2rem;
   font-weight: 900;
-  position: absolute;
-  inset: 1rem auto 1rem -2rem;
+  margin: 0 0.75rem 0 1rem;
   color: var(--text);
+  text-align: center;
 }
 
 .Article__btn-up {
@@ -355,26 +358,24 @@ nav ul li a:hover {
 
 #root > div > div.Body > div.pagination > ul {
   display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 50px;
-    list-style: none;
-    flex-direction: row;
-    cursor: pointer;
-
-    width: fit-content;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 50px;
+  list-style: none;
+  flex-direction: row;
+  cursor: pointer;
+
+  width: fit-content;
   min-height: 15px;
   border: none;
   border-radius: 10px 10px 10px 10px;
   background-color: var(--article_bg);
   color: var(--text);
-  outline:none;
+  outline: none;
   margin: 40px;
   padding: 10px;
 }
 
-
-
 /* ==============================
             Footer
 ============================== */

diff --git a/src/components/Article.jsx b/src/components/Article.jsx
@@ -3,6 +3,7 @@ import ReactTimeAgo from "react-time-ago";
 
 export default function Article({
   title,
+  articleNum,
   url,
   points,
   author,
@@ -39,18 +40,21 @@ export default function Article({
     });
   };
 
+  const slicedTitle = title.length > 60 ? `${title.slice(0, 60)} ...` : title;
+
   const urlText = url?.split("/")[2];
 
   return (
     <li className="Article__wrapper">
+      <span className="Article__num">{articleNum}.</span>
       <div className="Article">
         <a
           href={url}
           className="Article__title"
           target="_blank"
           rel="noreferrer"
         >
-          <h3>{title ? title : "Article is removed :("}</h3>
+          <h3>{title ? slicedTitle : "Article is removed :("}</h3>
         </a>
         <a
           className="Article__source"

diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
@@ -1,28 +1,34 @@
-import React, { useEffect, useState } from 'react';
-import ReactPaginate from 'react-paginate';
-import Article from './Article';
+import React, { useEffect, useState } from "react";
+import ReactPaginate from "react-paginate";
+import Article from "./Article";
 
 const hits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
 
 function Items({ currentItems }) {
-    return (
-      <>
-        {currentItems &&
-          currentItems.map((item) => (
-            <div>
-              <h3>Item #{item}</h3>
-            </div>
-          ))}
-      </>
-    );
-  }
-
-
-export default function Pagination({ itemsPerPage, fetchedData, setFetchedData, hits, setHitsPerPage, setPageNum, setHits }) {
+  return (
+    <>
+      {currentItems &&
+        currentItems.map((item) => (
+          <div>
+            <h3>Item #{item}</h3>
+          </div>
+        ))}
+    </>
+  );
+}
 
-    const items = hits
+export default function Pagination({
+  itemsPerPage,
+  fetchedData,
+  setFetchedData,
+  hits,
+  setHitsPerPage,
+  setPageNum,
+  setHits,
+}) {
+  const items = hits;
 
-function Items({ currentItems }) {
+  function Items({ currentItems }) {
     return (
       <>
         {currentItems &&
@@ -59,8 +65,9 @@ function Items({ currentItems }) {
     <>
       {/* <Items currentItems={currentItems} /> */}
       <ol>
-        {currentItems.map((item) => (
+        {currentItems.map((item, index) => (
           <Article
+            articleNum={+itemOffset + index + 1}
             title={item.title}
             url={item.url}
             points={item.points}
@@ -93,6 +100,4 @@ function Items({ currentItems }) {
 //   document.getElementById('container')
 // );
 
-
-
 // Example items, to simulate fetching from another resources.