rubix/src/components/ArticlePage/ArticlePage.jsx

/* 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 (
      <div>
        <Loader />
      </div>
    );
  }

  const matchingArticles = blogPosts
    ? blogPosts.find((item) => item.title_slug === title_slug)
    : null;

  return (
    <>
      {matchingArticles ? (
        <Box
          bg="#000000"
          height={"auto"}
          display={"flex"}
          gap={7}
          justifyContent={"center"}
          alignItems={"center"}
          flexDirection={"column"}
          color="white"
          key={matchingArticles.id}
        >
          <Box
            bg="#000000"
            minHeight={"60vh"}
            width={"70vw"}
            display={"flex"}
            gap={5}
            marginTop={10}
            justifyContent={"end"}
            alignItems={"center"}
            flexDirection={"column"}
            color="white"
            sx={{
              "@media (max-width: 600px)": {
                minHeight: "inherit",
                width: "100vw",
                marginTop: "6rem",
              },
            }}
          >
            <Text
              textAlign={"center"}
              className="rubix-fw-600"
              fontSize={"40px"}
              color={"#fff"}
              sx={{
                "@media (max-width: 600px)": {
                  fontSize: "28px",
                  lineHeight: "45px",
                  padding: "0px 1rem",
                },
              }}
            >
              {matchingArticles.title}
            </Text>

            <Text
              textAlign={"center"}
              className="rubix-text-xsmall rubix-fw-500"
              sx={{
                "@media (max-width: 600px)": {
                  fontSize: "35px",
                },
              }}
            >
              {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 (
                  <Text
                    as={"span"}
                    textAlign={"center"}
                    className="rubix-text-xsmall rubix-fw-500"
                    marginLeft={"10px"}
                    sx={{
                      "@media (max-width: 600px)": {
                        fontSize: "35px",
                      },
                    }}
                  >
                    {formattedDate}
                  </Text>
                );
              })()}
            </Text>

            <Box display={"flex"} gap={3} textAlign={"center"}>
              <Avatar
                size="lg"
                name="Dan Abrahmov"
                src={`https://rubix.betadelivery.com/${matchingArticles.profile_image}`}
              />

              <Box
                textAlign={"start"}
                display={"flex"}
                flexDirection={"column"}
                alignItems={"start"}
                justifyContent={"center"}
                className="rubix-text-xsmall rubix-fw-500"
              >
                <Text>{matchingArticles.author_name}</Text>
                <Text>{matchingArticles.author_designation}</Text>
              </Box>
            </Box>
          </Box>
          {/* ========[ Banner ]======= */}
          <Box
            height={"70vh"}
            width={"85vw"}
            backgroundImage={`url(https://rubix.betadelivery.com/${matchingArticles.content_image_large})`}
            backgroundRepeat={"no-repeat"}
            backgroundSize={"cover"}
            position="relative"
            sx={{
              "@media (max-width: 600px)": {
                height: "215px",
                width: "100%",
              },
            }}
          >
            <Box
              position="absolute"
              top={0}
              left={0}
              width="100%"
              height="100%"
              backgroundColor="rgba(0, 0, 0, 0.5)"
            />
          </Box>

          <Box
            bg="#000000"
            width={"85vw"}
            height={"auto"}
            display={"flex"}
            pb={"60px"}
            gap={5}
            justifyContent={"center"}
            alignItems={"center"}
            flexDirection={"column"}
            color="white"
            position={"relative"}
            sx={{
              "@media (max-width: 600px)": {
                display: "block",
                top: "inherit",
              },
            }}
          >
            <Box
              position={"absolute"}
              top={0}
              left={0}
              display={"flex"}
              flexDirection={"column"}
              alignItems={"center"}
              gap={2}
              sx={{
                "@media (max-width: 600px)": {
                  bottom: "0px",
                  top: "inherit",
                  display: "block",
                  width: "100%",
                  marginBottom: "20px",
                  marginTop: "20px",
                },
              }}
            >
              <Text
                className="rubix-text-xsmall"
                sx={{
                  "@media (max-width: 600px)": {
                    marginBottom: "15px",
                  },
                }}
              >
                Share
              </Text>

              <Text
                sx={{
                  "@media (max-width: 600px)": {
                    display: "flex",
                    justifyContent: "space-between",
                    width: "60%",
                  },
                }}
              >
                <Link to="https://t.me/rubixblockchain" target="_blank">
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={tele} />
                </Link>
                <Link to="https://twitter.com/rubixchain" target="_blank">
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={x} />
                </Link>
                <Link to="https://www.facebook.com/RubixChain" target="_blank">
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={fb} />
                </Link>
                <Link
                  to="https://www.linkedin.com/company/rubixnet/"
                  target="_blank"
                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={linked} />
                </Link>
              </Text>
            </Box>
            <Box
              bg="#000000"
              width={"68vw"}
              height={"auto"}
              display={"flex"}
              flexDirection={"column"}
              gap={5}
              justifyContent={"start"}
              color="white"
              sx={{
                "@media (max-width: 600px)": {
                  width: "100%",
                },
              }}
            >
              <Box display={"flex"} gap={5} justifyContent={"start"}>
                {matchingArticles.tags.map((tag, index) => (
                  <Chip key={index} title={tag.tag} />
                ))}
              </Box>

              <Box
                className="blog-post"
                pt={5}
                pb={5}
                sx={{
                  "@media (max-width: 600px)": {
                    marginBottom: "3rem",
                  },
                }}
              >
                <Text
                  pb={5}
                  className="rubix-text-small"
                  dangerouslySetInnerHTML={{ __html: matchingArticles.content }}
                />
                {/* {matchingBlogPost.content}
                </Text> */}
              </Box>
            </Box>
          </Box>
        </Box>
      ) : (
        <NotFound />
      )}
    </>
  );
};

export default ArticlePage;