Added react Share to blogs and Articles page

2026-04-27 17:25:50 +00:00 · 2024-05-27 13:54:30 +05:30
parent 00dc372897
commit fbcf53d5d1
8 changed files with 104 additions and 30 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
        "react-phone-input-2": "^2.15.1",
        "react-redux": "^9.1.1",
        "react-router-dom": "^6.22.3",
+        "react-share": "^5.1.0",
        "swiper": "^11.1.0"
      },
      "devDependencies": {
@@ -7267,6 +7268,27 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "node_modules/jsonp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz",
+      "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==",
+      "dependencies": {
+        "debug": "^2.1.3"
+      }
+    },
+    "node_modules/jsonp/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/jsonp/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -8713,6 +8735,18 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/react-share": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.1.0.tgz",
+      "integrity": "sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==",
+      "dependencies": {
+        "classnames": "^2.3.2",
+        "jsonp": "^0.2.1"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
    "react-phone-input-2": "^2.15.1",
    "react-redux": "^9.1.1",
    "react-router-dom": "^6.22.3",
+    "react-share": "^5.1.0",
    "swiper": "^11.1.0"
  },
  "devDependencies": {
--- a/src/components/ArticlePage/ArticlePage.jsx
+++ b/src/components/ArticlePage/ArticlePage.jsx
@@ -1,6 +1,13 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect } from "react";
 import { Box, Text, Image } from "@chakra-ui/react";
+import {
+  FacebookShareButton,
+  TwitterShareButton,
+  LinkedinShareButton,
+  WhatsappShareButton,
+  TelegramShareButton,
+} from "react-share";
 import { Avatar, AvatarBadge, AvatarGroup } from "@chakra-ui/react";
 import Chip from "../Chip/Chip";
 import Footer from "../Footer/Footer";
@@ -220,6 +227,7 @@ const ArticlePage = () => {
              </Text>

              <Text
+                display={"grid"}
                sx={{
                  "@media (max-width: 600px)": {
                    display: "flex",
@@ -228,21 +236,30 @@ const ArticlePage = () => {
                  },
                }}
              >
-                <Link to="https://t.me/rubixblockchain" target="_blank">
+                <TelegramShareButton
+                  url={`https://rubix.betadelivery.com/blogs/${matchingArticles.title_slug}`}
+                  quote={matchingArticles.title}
+                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={tele} />
-                </Link>
-                <Link to="https://twitter.com/rubixchain" target="_blank">
+                </TelegramShareButton>
+                <TwitterShareButton
+                  url={`https://rubix.betadelivery.com/blogs/${matchingArticles.title_slug}`}
+                  quote={matchingArticles.title}
+                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={x} />
-                </Link>
-                <Link to="https://www.facebook.com/RubixChain" target="_blank">
+                </TwitterShareButton>
+                <FacebookShareButton
+                  url={`https://rubix.betadelivery.com/blogs/${matchingArticles.title_slug}`}
+                  quote={matchingArticles.title}
+                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={fb} />
-                </Link>
-                <Link
-                  to="https://www.linkedin.com/company/rubixnet/"
-                  target="_blank"
+                </FacebookShareButton>
+                <LinkedinShareButton
+                  url={`https://rubix.betadelivery.com/blogs/${matchingArticles.title_slug}`}
+                  quote={matchingArticles.title}
                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={linked} />
-                </Link>
+                </LinkedinShareButton>
              </Text>
            </Box>
            <Box
--- a/src/components/BlogPost/BlogPost.jsx
+++ b/src/components/BlogPost/BlogPost.jsx
@@ -3,6 +3,18 @@
 import React, { useEffect } from "react";
 import { Box, Text, Image } from "@chakra-ui/react";
 import { Avatar, AvatarBadge, AvatarGroup } from "@chakra-ui/react";
+import {
+  FacebookShareButton,
+  TwitterShareButton,
+  LinkedinShareButton,
+  WhatsappShareButton,
+  FacebookIcon,
+  TwitterIcon,
+  LinkedinIcon,
+  WhatsappIcon,
+  TelegramShareButton,
+} from "react-share";
+
 import Chip from "../Chip/Chip";
 import Footer from "../Footer/Footer";
 import { ChevronRightIcon } from "@chakra-ui/icons";
@@ -40,7 +52,7 @@ const BlogPost = () => {
    ? blogPosts.find((item) => item.title_slug === title_slug)
    : null;

-  // console.log(matchingBlogPost);
+  console.log(matchingBlogPost);
  // console.log(matchingBlogPost.content);

  return (
@@ -224,6 +236,7 @@ const BlogPost = () => {
              </Text>

              <Text
+                display={"grid"}
                sx={{
                  "@media (max-width: 600px)": {
                    display: "flex",
@@ -232,21 +245,30 @@ const BlogPost = () => {
                  },
                }}
              >
-                <Link to="https://t.me/rubixblockchain" target="_blank">
+                <TelegramShareButton
+                  url={`https://rubix.betadelivery.com/blogs/${matchingBlogPost.title_slug}`}
+                  quote={matchingBlogPost.title}
+                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={tele} />
-                </Link>
-                <Link to="https://twitter.com/rubixchain" target="_blank">
+                </TelegramShareButton>
+                <TwitterShareButton
+                  url={`https://rubix.betadelivery.com/blogs/${matchingBlogPost.title_slug}`}
+                  quote={matchingBlogPost.title}
+                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={x} />
-                </Link>
-                <Link to="https://www.facebook.com/RubixChain" target="_blank">
+                </TwitterShareButton>
+                <FacebookShareButton
+                  url={`https://rubix.betadelivery.com/blogs/${matchingBlogPost.title_slug}`}
+                  quote={matchingBlogPost.title}
+                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={fb} />
-                </Link>
-                <Link
-                  to="https://www.linkedin.com/company/rubixnet/"
-                  target="_blank"
+                </FacebookShareButton>
+                <LinkedinShareButton
+                  url={`https://rubix.betadelivery.com/blogs/${matchingBlogPost.title_slug}`}
+                  quote={matchingBlogPost.title}
                >
                  <Image cursor={"pointer"} mb={4} w={6} h={6} src={linked} />
-                </Link>
+                </LinkedinShareButton>
              </Text>
            </Box>
            <Box
--- a/src/components/Card/HomeCard.jsx
+++ b/src/components/Card/HomeCard.jsx
@@ -52,7 +52,7 @@ const HomeCard = ({ cardkey, date, text, link }) => {
              src={`https://rubix.betadelivery.com/${card.content_image_large}`}
            />
            <Box padding={"1rem"}>
-              {blogCards.tags.map((tag, index) => (
+              {blogCards?.tags?.map((tag, index) => (
                <Chip key={index} title={tag.tag} />
              ))}

--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -654,7 +654,7 @@ const NavBar = () => {
                          marginBottom={"1rem"}
                        >
                          <Image src={nodeIcon} width={`${iconwidth}`} />
-                          News & Articles
+                          News
                        </Box>
                      </Link>
                    </PopoverBody>
--- a/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx
+++ b/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx
@@ -69,7 +69,7 @@ const WhitepaperDocs = () => {
              src={`https://rubix.betadelivery.com/${item.bannerImage}`}
              maxHeight={"215px"}
              width={"100%"}
-              objectFit={"cover"}
+              objectFit={"contain"}
              objectPosition={"center"}
            />
            <Box padding={"1rem"}>
--- a/src/components/VideoInternal/VideoInternal.jsx
+++ b/src/components/VideoInternal/VideoInternal.jsx
@@ -59,7 +59,7 @@ const VideoInternal = () => {
  return (
    <>
      <Box
-        key={matchingvideos.id}
+        key={matchingvideos?.id}
        bg="#000000"
        height={"auto"}
        display={"flex"}
@@ -103,7 +103,7 @@ const VideoInternal = () => {
              },
            }}
          >
-            {matchingvideos.title}
+            {matchingvideos?.title}
          </Text>

          <Text
@@ -115,7 +115,7 @@ const VideoInternal = () => {
              },
            }}
          >
-            Video duration : {matchingvideos.duration} min
+            Video duration : {matchingvideos?.duration} min
          </Text>

          <Text
@@ -127,7 +127,7 @@ const VideoInternal = () => {
              },
            }}
          >
-            {matchingvideos.description}
+            {matchingvideos?.description}
          </Text>
        </Box>

@@ -161,7 +161,7 @@ const VideoInternal = () => {
              }}
            >
              <iframe
-                src={`${matchingvideos.embeddedCode}`}
+                src={`${matchingvideos?.embeddedCode}`}
                title="YouTube video player"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
@@ -188,7 +188,7 @@ const VideoInternal = () => {
              }}
            >
              <iframe
-                src={`${matchingvideos.embeddedCode}`}
+                src={`${matchingvideos?.embeddedCode}`}
                title="YouTube video player"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen