query articles by category

SilverCareOrg · Mar 2, 2024 · cbdfe00 · cbdfe00
1 parent 2106244
commit cbdfe00
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 15 deletions.
diff --git a/src/components/ArticlesOption.jsx b/src/components/ArticlesOption.jsx
@@ -56,7 +56,7 @@ min-[1300px]:block hidden max-w-[250px] `}
       <p className="text-2xl pb-4">Categorii</p>
       <div className="flex flex-col gap-2">
         {categories.map((category) => (
-          <a key={category} href={`/articles?${category[0]}`} className="text-lg">
+          <a key={category} href={`/articles?category=${category[0]}`} className="text-lg">
             {category[1]}
           </a>
         ))}

diff --git a/src/components/DisplayArticle.jsx b/src/components/DisplayArticle.jsx
@@ -15,25 +15,15 @@ const DisplayArticle = ({ article }) => {
       <div className="w-full flex items-center lg:max-w-[1450px] justify-center lg:justify-start md:px-14 lg:px-28 ">
         <div className="flex flex-col justify-center items-center">
           <img
-            // style={{
-            //   transition: "transform 0.2s", // Add a smooth transition effect
-            // }}
-            // onMouseEnter={(e) => {
-            //   e.currentTarget.style.transform = "scale(1.0025)"; // Increase the scale when hovering
-            // }}
-            // onMouseLeave={(e) => {
-            //   e.currentTarget.style.transform = "scale(1)"; // Reset the scale on mouse leave
-            // }}
             onClick={() => navigate(`/article-page/${article?.id}`)}
             className="cursor-pointer object-cover lg:w-[850px] lg:h-[364px] sm:w-[550px] sm:h-[235px]  w-[335px] h-[143px]"
-            src={article?.main_image} // Replace with your image URL
+            src={article?.main_image}
             alt="article"
           />
           <div className="flex flex-col lg:w-[850px] sm:w-[550px] w-[335px]">
             <div className="flex items-center gap-12 pt-1">
-              <p>autor</p>
-              <p>data</p>
-              <p>timp de citire?</p>
+              <p>{article?.author}</p>
+              <p>{article?.reading_time} min</p>
             </div>
             <div className="pt-1">
               <p

diff --git a/src/pages/Articles.jsx b/src/pages/Articles.jsx
@@ -1,18 +1,21 @@
 import { useState, useEffect } from "react";
+import { useLocation } from 'react-router-dom';
 import axios_api from "../api/axios_api";
 import { ArticleBar } from "../components/ArticleBar";
 import ArticlesOption from "../components/ArticlesOption";
 import DisplayArticle from "../components/DisplayArticle";
 
 const Articles = () => {
+  const searchParams = new URLSearchParams(window.location.search);
+  const category = searchParams.get('category');
   const [articles, setArticles] = useState([]);
   const [articleLimit, setArticleLimit] = useState(10);
   const [totalArticles, setTotalArticles] = useState();
   const get_all_articles = (articleLimit) => {
     try {
       axios_api
         .get("/get_articles", {
-          params: { inf_limit: articleLimit - 10, sup_limit: articleLimit },
+          params: { inf_limit: articleLimit - 10, sup_limit: articleLimit, category: category },
           withCredentials: true,
         })
         .then((response) => {
@@ -33,6 +36,7 @@ const Articles = () => {
   }
 
   useEffect(() => {
+    console.log(category)
     get_all_articles(articleLimit);
   }, [articleLimit]);