NikitaK/Add new share buttons on preview page (#2734)

NikitaK-deriv · web-flow · commit f02f3bf1727f · 2022-03-10T12:41:20.000+08:00
* add new share button in preview in Deriv Academy

* deploy issue fix

* return back...

* refactoring size check function
diff --git a/src/pages/academy/blog/posts/preview/index.tsx b/src/pages/academy/blog/posts/preview/index.tsx
@@ -16,9 +16,6 @@ import {
     SideBarContainer,
     Tag,
     PreviewContainer,
-    SocialComponentsWrapper,
-    LeftSocialComponents,
-    RightSocialComponents,
     DesktopWrapper,
     MobileWrapper,
     StickyBreadCrumbsWrapper,
@@ -36,9 +33,17 @@ import { convertDate, isBrowser, getMinRead, truncateString } from 'common/utili
 import { useBrowserResize } from 'components/hooks/use-browser-resize'
 import { cms_assets_end_point, cms_end_point } from 'common/constants'
 import RightArrow from 'images/svg/tools/black-right-arrow.svg'
+import { useWindowSize } from 'components/hooks/use-window-size'
+
+export const getTruncateLength = () => {
+    const size = useWindowSize()
+    if (size.width < 400) return 15
+    else if (size.width < 475) return 30
+    else return 60
+}
 
 const BlogPreview = () => {
-    const [is_mobile] = useBrowserResize(992)
+    const [is_mobile] = useBrowserResize(972)
     const [prevScrollPos, setPrevScrollPos] = useState(0)
     const [visible, setVisible] = useState(true)
     const [isMounted, setMounted] = useState(false)
@@ -136,9 +141,10 @@ const BlogPreview = () => {
                                         <StyledImg src={RightArrow} height="16" width="16" />
                                         <StyledBreadcrumbsTitle>
                                             {is_mobile
-                                                ? truncateString(article_title, 30)
+                                                ? truncateString(article_title, getTruncateLength())
                                                 : article_title}
                                         </StyledBreadcrumbsTitle>
+                                        <SocialSharing />
                                     </Flex>
                                 </BreadcrumbsWrapper>
                             </StickyBreadCrumbsWrapper>
@@ -283,13 +289,6 @@ const BlogPreview = () => {
                                     {footer_banner_details?.imgSrcDesktop && (
                                         <Banner detailsPreviewObj={footer_banner_details} />
                                     )}
-                                    <SocialComponentsWrapper>
-                                        <LeftSocialComponents />
-                                        <RightSocialComponents>
-                                            <SocialSharing />
-                                        </RightSocialComponents>
-                                    </SocialComponentsWrapper>
-
                                     {side_banner_data_details && (
                                         <Show.Mobile>
                                             <Flex mt="24px">
diff --git a/src/templates/article.tsx b/src/templates/article.tsx
@@ -39,14 +39,14 @@ import { convertDate, getMinRead, truncateString } from 'common/utility'
 import { useBrowserResize } from 'components/hooks/use-browser-resize'
 import { usePageLoaded } from 'components/hooks/use-page-loaded'
 import RightArrow from 'images/svg/tools/black-right-arrow.svg'
+import { getTruncateLength } from 'pages/academy/blog/posts/preview'
 
 type ArticlesTemplateProps = {
     data: ArticleQuery
 }
 
 const ArticlesTemplate = ({ data }: ArticlesTemplateProps) => {
-    const [is_mobile] = useBrowserResize(475)
-    const [is_little_mobile] = useBrowserResize(400)
+    const [is_mobile] = useBrowserResize(992)
     const [prevScrollPos, setPrevScrollPos] = useState(0)
     const [visible, setVisible] = useState(true)
     const [is_mounted] = usePageLoaded()
@@ -127,12 +127,6 @@ const ArticlesTemplate = ({ data }: ArticlesTemplateProps) => {
         og_description: og_description ? og_description : meta_description,
     }
 
-    const getTruncateLength = () => {
-        if (is_little_mobile) return 15
-        else if (is_mobile) return 30
-        else return 60
-    }
-
     return (
         <Layout type="academy" margin_top={'14.4'}>
             <SEO
