Merge pull request #95 from SilverCareOrg/ion-stefan

Ion stefan
SilverCareOrg · Mar 2, 2024 · 7f23c6a · 7f23c6a
2 parents a125d7d + 39313d2
commit 7f23c6a
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 50 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -14,6 +14,7 @@ import Notfound from "./pages/404";
 import Cart from "./pages/Cart";
 import Signup from "./pages/Signup";
 import Navbar from "./components/Navbar";
+import TermsAndConditions from "./pages/TermsAndConditions";
 import Footer from "./components/Footer";
 import AdminUpdateServiceProduct from "./pages/AdminUpdateServiceProduct";
 import ProductDetails from "./components/ProductDetails";
@@ -37,8 +38,7 @@ const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY);
 const App = () => {
   return (
     <section className="flex flex-col min-h-screen overflow-x-hidden overflow-hidden">
-      {/* TODO: uncomment this */}
-       <Navbar /> 
+      <Navbar />
       <ScrollOnTopOnRefresh />
       <Routes>
         <Route path="/" element={<Home />} />
@@ -85,9 +85,9 @@ const App = () => {
           element={<AdminUpdateServiceProduct />}
         />
         <Route path="paymentCartPanel" element={<PaymentCartPanel />} />
+        <Route path="TermeniSiConditii" element={<TermsAndConditions />} />
         <Route path="*" element={<Notfound />} />
       </Routes>
-      {/* TODO: uncomment this */}
       <Footer />
     </section>
   );

diff --git a/src/components/ArticleHead.jsx b/src/components/ArticleHead.jsx
@@ -7,7 +7,7 @@ const ArticleHead = ({ article }) => {
               src={article?.main_image} // Replace with your image URL
               alt="main article"
           />
-          <div className="flex px-4 md:px-0 flex-col min-[1300px]:w-[1200px] lg:w-[848px] md:max-w-full max-[768px]:px-[4.5rem] xl:px-[0rem] xl:mr-[8px] md:w-[750px] sm:w-[625px] sm:max-w-full max-w-[500px]">
+          <div className="flex md:px-0 flex-col min-[1300px]:w-[1200px] lg:w-[848px] md:max-w-full max-[768px]:px-[16px] xl:px-[0rem] xl:mr-[8px] md:w-[750px] sm:w-[625px] sm:max-w-full max-w-[500px]">
             <div className="flex items-center gap-12 pt-1">
               <p>{article?.author}</p>
               <p>{article?.reading_time} min</p>

diff --git a/src/components/ArticlesOption.jsx b/src/components/ArticlesOption.jsx
@@ -56,21 +56,21 @@ 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>
         ))}
       </div>
-      <p className="text-2xl pt-8 pb-4">Articole populare</p>
-      <div key='articole-populare' className="flex flex-col gap-2">
-        <p className="text-lg">articol1</p>
-        <p className="text-lg">articol2</p>
-        <p className="text-lg">articol3</p>
-        <p className="text-lg">articol4</p>
-        <p className="text-lg">articol5</p>
-        <p className="text-lg">articol6</p>
-        <p className="text-lg">articol7</p>
-      </div>
+      {/* <p className="text-2xl pt-8 pb-4">Articole populare</p> */}
+      {/* <div key='articole-populare' className="flex flex-col gap-2"> */}
+      {/*   <p className="text-lg">articol1</p> */}
+      {/*   <p className="text-lg">articol2</p> */}
+      {/*   <p className="text-lg">articol3</p> */}
+      {/*   <p className="text-lg">articol4</p> */}
+      {/*   <p className="text-lg">articol5</p> */}
+      {/*   <p className="text-lg">articol6</p> */}
+      {/*   <p className="text-lg">articol7</p> */}
+      {/* </div> */}
       {/* <p className="text-2xl pt-8 pb-4">Arhive</p> */}
       {/* <div key='arhive' className="flex flex-col gap-2"> */}
       {/*   <a href="/articles" className="text-lg"> */}

diff --git a/src/components/DisplayArticle.jsx b/src/components/DisplayArticle.jsx
@@ -1,41 +1,40 @@
-import findmore_sport from "../images/findmore_sport.png";
+import { useEffect } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 const DisplayArticle = ({ article }) => {
+
+  const [shortDescription, setShortDescription] = useState("");
+
+  useEffect(() => {
+    setShortDescription(article.description.slice(0,135))
+  }, []);
+
   const navigate = useNavigate();
   return (
     <div className=" flex items-center justify-center md:my-14 py-6">
       <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}`)}
+            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
-                onClick={() => navigate(`/article-page/${article.id}`)}
+                onClick={() => navigate(`/article-page/${article?.id}`)}
                 className="text-2xl lg:text-3xl cursor-pointer"
               >
-                {article.title}
+                {article?.title}
               </p>
               <p className="text-md md:text-lg lg:text-xl mt-3 lg:mt-6">
-                {article.description}
+                {shortDescription} 
+                <a className="text-midnightblue italic" href={`/article-page/${article?.id}`}> citeste mai mult...</a>
               </p>
             </div>
           </div>

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -167,7 +167,7 @@ const TermsSection = () => {
         </div>
         <img className="relative w-[1rem] h-[1rem]" alt="" src={slash_svg} />
         <div className="relative tracking-[0.05em] leading-[24px] max-lg:font-small lg:font-medium">
-          Termeni și conditii
+          <a href="/TermeniSiConditii">Termeni și conditii</a>
         </div>
         <img
           className="max-lg:hidden relative w-[1rem] h-[1rem]"

diff --git a/src/docs/TermeniSiConditii.pdf b/src/docs/TermeniSiConditii.pdf
diff --git a/src/pages/AdminUpdateArticleTable.jsx b/src/pages/AdminUpdateArticleTable.jsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 function AdminUpdateArticleTable() {
   const [articles, setArticles] = useState([]);
   const [articleLimit, setArticleLimit] = useState(10);
+  const [totalArticles, setTotalArticles] = useState();
   const get_all_articles = (articleLimit) => {
     try {
       axios_api
@@ -15,7 +16,30 @@ function AdminUpdateArticleTable() {
         .then((response) => {
           if (response.status === 200) {
             const json = response.data;
-            setArticles([...articles.concat(json)]);
+            setTotalArticles(json.total);
+            setArticles([...articles.concat(json.articles)]);
+          }
+        })
+        .catch((error) => {
+          console.log("Error:", error);
+        });
+    } catch (err) { }
+  };
+
+  const setArticleVisibility = (article) => {
+    try {
+      axios_api
+        .post("/set_article_visibility",
+          {
+            id: article.id,
+            hidden: !article.hidden,
+          },
+          {
+            withCredentials: true,
+          })
+        .then((response) => {
+          if (response.status === 200) {
+            console.log('Article visibility updated');
           }
         })
         .catch((error) => {
@@ -36,7 +60,7 @@ function AdminUpdateArticleTable() {
   useEffect(() => {
     const onScroll = () => {
       // if articles.length = articles.total
-      if (articles.length % 10 === 0) {
+      if (totalArticles < articles.length) {
         if (window.innerHeight + window.scrollY >= window.document.body.offsetHeight - 150) {
           handleArticleChange();
         }
@@ -49,6 +73,11 @@ function AdminUpdateArticleTable() {
     window.location.href = `/adminUpdateArticle/${id}`;
   }
 
+  function handleArticleVisibility(article) {
+    console.log(article?.title)
+    setArticleVisibility(article);
+  }
+
   return (
     <>
       <div className="w-[25wh] pb-32 pt-16">
@@ -72,6 +101,17 @@ function AdminUpdateArticleTable() {
             >
               Update Article with ID:{article.id}
             </button>
+            <div className="flex align-center items-center ml-16 mt-2">
+              <p className="text-red-600 text-xl">Hide Article</p>
+              <input
+                type="checkbox"
+                id="common_location"
+                name="common_location"
+                checked={article?.hidden}
+                onChange={() => handleArticleVisibility(article)}
+                className="w-10 h-10 ml-2 mr-2"
+              />
+            </div>
           </div>
         ))}
       </div>

diff --git a/src/pages/Articles.jsx b/src/pages/Articles.jsx
@@ -1,23 +1,28 @@
 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) => {
           if (response.status === 200) {
             const json = response.data;
-            setArticles([...articles.concat(json)]);
+            setTotalArticles(json.total);
+            setArticles([...articles.concat(json.articles)]);
           }
         })
         .catch((error) => {
@@ -31,14 +36,15 @@ const Articles = () => {
   }
 
   useEffect(() => {
+    console.log(category)
     get_all_articles(articleLimit);
   }, [articleLimit]);
 
 
   useEffect(() => {
     const onScroll = () => {
       // if articles.length = articles.total
-      if (articles.length % 10 === 0) {
+      if (totalArticles < articles.length) {
         if (window.innerHeight + window.scrollY >= window.document.body.offsetHeight - 1350) {
           handleArticleChange();
         }
@@ -51,8 +57,9 @@ const Articles = () => {
   return (
     <div>
       <ArticleBar />
-      <div className="">
-        <div>
+      <div>
+        <div className="lg: min-h-[725px]">
+          {articles.length === 0 ? <NoArticles/> : null}
           {articles?.map((article) => (
             <DisplayArticle key={article._id} article={article} />
           ))}
@@ -63,4 +70,12 @@ const Articles = () => {
   );
 };
 
+const NoArticles = () => {
+  return (
+  <div className="flex items-center justify-center absolute top-[50%] left-[10%] lg:left-[25%]">
+      <p className="text-3xl">Nu exista articole cu aceasta categorie</p>
+  </div>
+  )
+}
+
 export default Articles;
diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -23,16 +23,16 @@ const Bar = () => {
 const Home = () => {
   return (
     <div className="home overflow-x-hidden overflow-hidden">
-      {/* <HomeSearch /> */}
-      {/* <Hero /> */}
-      {/* <Bar /> */}
-      {/* <FindMore /> */}
-      {/* <Bar /> */}
-      {/* <Whyme /> */}
-      {/* <Bar /> */}
-      {/* <ArticlesTab /> */}
+      <HomeSearch />
+      <Hero />
+      <Bar />
+      <FindMore />
+      <Bar />
+      <Whyme />
+      <Bar />
+      <ArticlesTab />
 
-      <WorkInProgress />
+      {/* <WorkInProgress /> */}
     </div>
   );
 };

diff --git a/src/pages/TermsAndConditions.jsx b/src/pages/TermsAndConditions.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+import TermeniSiConditii from "../docs/TermeniSiConditii.pdf"
+const TermsAndConditions = () => {
+  return (
+    <div className="flex justify-center items-center pt-12">
+      <iframe src={TermeniSiConditii} height="1500" frameborder="0" width="1200" />
+    </div>
+  );
+}
+
+export default TermsAndConditions;