Merge pull request #42 from whysosaket/newsletter

Newsletter

Author: whysosaket

my-app/src/App.jsx

@@ -8,7 +8,7 @@ import Events from "./pages/Events";
 import Base from "./layouts/Base";
 import Subscribe from "./components/Subscribe";
 import { useState } from "react";
-import NewsletterPage from "./pages/NewsletterPage";
+// import NewsletterPage from "./pages/NewsletterPage";
 
 export default function App() {
   const [isVisible, setIsVisible] = useState(false);  
@@ -28,7 +28,7 @@ export default function App() {
             <Route path="/community" element={<Community />} />
             <Route path="/events" element={<Events />} />
             <Route path="/contact-us" element={<ContactForm />} />
-            <Route path="/newsletter" element={<NewsletterPage />} />
+            {/* <Route path="/newsletter" element={<NewsletterPage />} /> */}
             <Route path="*" element={<NotFound />} />
           </Routes>
         </Base>

my-app/src/data.js

@@ -2,7 +2,8 @@ const navigation = [
   { name: "Home", to: "/" },
   { name: "Community", to: "/community" },
   { name: "Events", to: "/events" },
-  { name: "Newsletter", to: "/newsletter" },
+  // { name: "Newsletter", to: "/newsletter" },
   { name: "About us", to: "about-us" },
+  { name: "Contact us", to: "/contact-us" },
 ];
 export { navigation };

my-app/src/pages/NewsletterPage.jsx

@@ -6,6 +6,7 @@ import "react-pdf/dist/esm/Page/AnnotationLayer.css";
 import "react-pdf/dist/esm/Page/TextLayer.css";
 import { IoChevronBack, IoChevronForward } from "react-icons/io5";
 import { API_URL } from "../lib/constants"; 
+import { FaRegEye } from "react-icons/fa";
 
 import "../styles/newsletter.css";
 import Newsletter from "../components/Newsletter";
@@ -22,6 +23,7 @@ const NewsletterPage = () => {
   const [containerRef, setContainerRef] = useState(null);
   const [containerWidth, setContainerWidth] = useState();
   const [loading, setLoading] = useState(true);
+  const [views, setViews] = useState(0);
 
   // Memoize the options object to prevent unnecessary reloads
   const options = useMemo(
@@ -75,6 +77,7 @@ const NewsletterPage = () => {
 
       const data = await response.json();
       if(data.success){
+        setViews(data.newsletter.views);
         const pdfResponse = await fetch(data.newsletter.link);
         const blob = await pdfResponse.blob();
         const fileUrl = URL.createObjectURL(blob);
@@ -112,7 +115,7 @@ const NewsletterPage = () => {
       <h1 className="text-4xl tracking-tight my-2 font-extrabold text-pastel text-center sm:text-5xl md:text-6xl">
           Newsletters
       </h1>
-      <div className="flex justify-center mt-4 mb-8">
+      <div className="flex justify-center mt-4">
       <div className="mx-auto">
       <label htmlFor="dropdown" className="mb-2 text-lg font-medium text-gray-300 text-center">
         Select an edition:
@@ -137,6 +140,13 @@ const NewsletterPage = () => {
           asda
         </div>
       }
+      {
+        !loading&&file&&
+          <div className="w-full flex gap-2 justify-center align-middle text-gray-400/60 my-4">
+            <FaRegEye size={25} className="my-auto" />
+            <span className="my-auto font-semibold">{views}</span>
+          </div>
+      }
       {!loading&&file&&
       <div>
       <div className="flex justify-center">