cleaned up unnecessary props and lines in article and body

mrkyns · Apr 20, 2023 · 11e94be · 11e94be
1 parent 12db0ed
commit 11e94be
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 32 deletions.
diff --git a/src/App.css b/src/App.css
@@ -297,7 +297,7 @@ nav ul li a:hover {
 }
 
 .Article__btn-animation {
-  /* transform: scale(1.1) translate(-3px, -3px) rotate(-5deg); */
+  fill: var(--accent);
   animation: like_animation 0.5s ease-out;
 }
 

diff --git a/src/components/Article.jsx b/src/components/Article.jsx
@@ -8,7 +8,6 @@ export default function Article({
   points,
   author,
   time,
-  visibility,
   comments,
   id,
   setHits,
@@ -22,13 +21,11 @@ export default function Article({
     if (!arePointsIncreased) {
       setArePointsIncreased(true);
       setDisplayedPoints((prev) => prev + 1);
-      button.children[0].style.fill = "var(--accent)";
       button.children[0].style.stroke = "none";
       button.children[0].classList.add("Article__btn-animation");
     } else {
       setArePointsIncreased(false);
       setDisplayedPoints((prev) => prev - 1);
-      button.children[0].style.fill = "none";
       button.children[0].style.stroke = "var(--accent)";
       button.children[0].classList.remove("Article__btn-animation");
     }
@@ -54,7 +51,7 @@ export default function Article({
           target="_blank"
           rel="noreferrer"
         >
-          <h3>{title ? slicedTitle : "Article is removed :("}</h3>
+          <h3>{title ? slicedTitle : "Article has been removed :("}</h3>
         </a>
         <a
           className="Article__source"
@@ -68,7 +65,7 @@ export default function Article({
           <span>{displayedPoints}</span> points | by <span>{author}</span> |{" "}
           <ReactTimeAgo date={time} /> |{" "}
           <span className="Article__hide" onClick={hide}>
-            {visibility ? `hide` : null}
+            hide
           </span>{" "}
           | <span>{comments}</span> Comments
         </p>

diff --git a/src/components/Body.jsx b/src/components/Body.jsx
@@ -1,18 +1,8 @@
 import Search from "./Search";
-import Article from "./Article";
 import Pagination from "./Pagination";
 import { useEffect, useState } from "react";
-// import someDummyData from "./dummy.json";
-// import someDummyData from "./dummy_long.json";
 
-export default function Body({
-  fetchedData,
-  setFetchedData,
-  setQuery,
-  setHitsPerPage,
-  setPageNum,
-}) {
-  // const fetchedData = [...someDummyData.hits];
+export default function Body({ fetchedData, setQuery }) {
   const [hits, setHits] = useState([]);
 
   useEffect(() => {
@@ -21,12 +11,11 @@ export default function Body({
 
   return (
     <div className="Body">
-      <Search  fetchedData={fetchedData} setQuery={setQuery}/>
-      
+      <Search fetchedData={fetchedData} setQuery={setQuery} />
+
       <div className="pagination">
-      <Pagination setHits={setHits} fetchedData={fetchedData} setFetchedData={setFetchedData} itemsPerPage={20} hits={hits} setHitsPerPage={setHitsPerPage} setPageNum={setPageNum}  />
+        <Pagination setHits={setHits} itemsPerPage={20} hits={hits} />
       </div>
-
     </div>
   );
 }
diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
@@ -17,15 +17,7 @@ function Items({ currentItems }) {
   );
 }
 
-export default function Pagination({
-  itemsPerPage,
-  fetchedData,
-  setFetchedData,
-  hits,
-  setHitsPerPage,
-  setPageNum,
-  setHits,
-}) {
+export default function Pagination({ itemsPerPage, hits, setHits }) {
   const items = hits;
 
   function Items({ currentItems }) {
@@ -42,7 +34,7 @@ export default function Pagination({
   }
   // Here we use item offsets; we could also use page offsets
   // following the API or data you're working with.
-  const [itemOffset, setItemOffset] = useState(1);
+  const [itemOffset, setItemOffset] = useState(0);
 
   // Simulate fetching items from another resources.
   // (This could be items from props; or items loaded in a local state
@@ -73,7 +65,6 @@ export default function Pagination({
             points={item.points}
             author={item.author}
             time={Date.parse(item.created_at)}
-            visibility={true}
             comments={item.num_comments}
             key={item.objectID}
             id={item.objectID}