diff --git a/src/components/ArticlePage/ArticlePage.jsx b/src/components/ArticlePage/ArticlePage.jsx new file mode 100644 index 0000000..43c191d --- /dev/null +++ b/src/components/ArticlePage/ArticlePage.jsx @@ -0,0 +1,299 @@ +/* eslint-disable no-unused-vars */ +import React, { useEffect } from "react"; +import { Box, Text, Image } from "@chakra-ui/react"; +import { Avatar, AvatarBadge, AvatarGroup } from "@chakra-ui/react"; +import Chip from "../Chip/Chip"; +import Footer from "../Footer/Footer"; +import { ChevronRightIcon } from "@chakra-ui/icons"; +import profile from "../../assets/images/profile.png"; +import x from "../../assets/images/x.png"; +import linked from "../../assets/images/linked.png"; +import github from "../../assets/images/github.png"; +import tele from "../../assets/images/tele.png"; +import reddit from "../../assets/images/reddit.png"; +import fb from "../../assets/images/fb.png"; +import { useGetBlogQuery } from "../../Redux/slice/blogsSlice"; +import { Link, useParams } from "react-router-dom"; +import NotFound from "../../pages/NotFound"; +import Loader from "../Loader/Loader"; + +const ArticlePage = () => { + const { title_slug } = useParams(); + const { data, error, isLoading } = useGetBlogQuery(); + const blogPosts = data?.data?.rows; + console.log(blogPosts); + + useEffect(() => { + window.scrollTo(0, 0); + }, []); + + if (isLoading) { + return ( +
+ +
+ ); + } + + const matchingArticles = blogPosts + ? blogPosts.find((item) => item.title_slug === title_slug) + : null; + + console.log(matchingArticles); + console.log(matchingArticles.content); + return ( + <> + {matchingArticles ? ( + + + + {matchingArticles.title} + + + + {matchingArticles.category.blog_category} + {(function () { + const createdAtDate = new Date(matchingArticles.createdAt); + const formattedDate = createdAtDate + .toLocaleDateString("en-Us", { + day: "numeric", + month: "long", + year: "numeric", + }) + .replace(/\//g, "-"); + return ( + + {formattedDate} + + ); + })()} + + + + + + + {matchingArticles.author_name} + {matchingArticles.author_designation} + + + + {/* ========[ Banner ]======= */} + + + + + + + + Share + + + + + + + + + + + + + + + + + + + + {matchingArticles.tags.map((tag, index) => ( + + ))} + + + + + {/* {matchingBlogPost.content} + */} + + + + + ) : ( + + )} + + ); +}; + +export default ArticlePage; diff --git a/src/components/BlogPost/BlogPost.jsx b/src/components/BlogPost/BlogPost.jsx index f2acafc..0e90d1e 100644 --- a/src/components/BlogPost/BlogPost.jsx +++ b/src/components/BlogPost/BlogPost.jsx @@ -104,14 +104,13 @@ const BlogPost = () => { {matchingBlogPost.category.blog_category} {(function () { const createdAtDate = new Date(matchingBlogPost.createdAt); - const formattedDate = createdAtDate.toLocaleDateString( - "en-GB", - { - day: "2-digit", - month: "2-digit", - year: "2-digit", - } - ); + const formattedDate = createdAtDate + .toLocaleDateString("en-Us", { + day: "numeric", + month: "long", + year: "numeric", + }) + .replace(/\//g, "-"); return ( { {(function () { const createdAtDate = new Date(card.createdAt); - const formattedDate = createdAtDate.toLocaleDateString( - "en-GB", - { - day: "2-digit", - month: "2-digit", - year: "2-digit", - } - ); + const formattedDate = createdAtDate + .toLocaleDateString("en-Us", { + day: "numeric", + month: "long", + year: "numeric", + }) + .replace(/\//g, "-"); return ( {formattedDate} diff --git a/src/components/ResourcesPage/NewestEvents.jsx b/src/components/ResourcesPage/NewestEvents.jsx index c8ebe7f..6c2d008 100644 --- a/src/components/ResourcesPage/NewestEvents.jsx +++ b/src/components/ResourcesPage/NewestEvents.jsx @@ -32,17 +32,18 @@ const tabsBtn = [ const NewestEvents = () => { const [selectedTab, setSelectedTab] = useState(tabsBtn[0].btn); - const [selectedIndex, setSelectedIndex] = useState(0); + useEffect(() => { - const storedIndex = sessionStorage.getItem("selectedTabIndex"); - if (storedIndex) { - setSelectedIndex(parseInt(storedIndex, 10)); + // Retrieve the saved tab index from localStorage + const savedIndex = localStorage.getItem("selectedTabIndex"); + if (savedIndex !== null) { + setSelectedTab(tabsBtn[parseInt(savedIndex, 10)].btn); } }, []); - const handleTabChange = (tab) => { - setSelectedIndex(tab); - setSelectedTab("setSelectedIndex", tab); + const handleTabChange = (index) => { + setSelectedTab(tabsBtn[index].btn); + localStorage.setItem("selectedTabIndex", index); }; return ( @@ -74,6 +75,7 @@ const NewestEvents = () => { tab.btn === selectedTab)} onChange={handleTabChange} > { const [currentPage, setCurrentPage] = useState(1); @@ -55,52 +56,54 @@ const TabsArticles = () => { > {articles?.slice(0, 3).map((item) => ( - - - + + + + + + + + Video : {item.read_time} + + + {item.title} + + {item.summary} + - - - Video : {item.read_time} - - - {item.title} - - {item.summary} - - + ))} diff --git a/src/components/ResourcesPage/tableContent/ArticlesTable.jsx b/src/components/ResourcesPage/tableContent/ArticlesTable.jsx index ffaba89..e766558 100644 --- a/src/components/ResourcesPage/tableContent/ArticlesTable.jsx +++ b/src/components/ResourcesPage/tableContent/ArticlesTable.jsx @@ -167,7 +167,7 @@ const ArticlesTable = () => { zIndex: "2", }} > - +