Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Sean/change preview to rest api #2052

Merged
6 commits merged into from Aug 27, 2021
Merged

Sean/change preview to rest api #2052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f4988f2
add OG image to published articles
seanho96 Aug 27, 2021
790dfd2
update social sharing link to use current href
seanho96 Aug 27, 2021
f5cb4bb
fetch preview blog post with REST api
seanho96 Aug 27, 2021
3d72efb
fix: sonar cloud bugs
seanho96 Aug 27, 2021
1bdebf7
apply code suggestions
seanho96 Aug 27, 2021
8a711a9
update preview container styles
seanho96 Aug 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/common/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,4 @@ export const linkedin_url_career = 'https://www.linkedin.com/company/derivdotcom
export const twitter_non_eu_url = 'https://twitter.com/derivdotcom/'
export const twitter_uk_url = 'https://www.twitter.com/deriv_uk/'
export const twitter_eu_url = 'https://www.twitter.com/deriv_eu/'
export const cms_assets_end_point = 'https://cms.deriv.cloud/assets/'
6 changes: 3 additions & 3 deletions src/pages/academy/blog/components/side-subscription-banner/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ const ArticleEmailBanner = () => {
return setIsSubmitting(false)
}

customerioData(formattedEmail)
customerioData()
submit_status && setSubmitStatus('success')
clearName()
clearEmail()
Expand Down Expand Up @@ -295,7 +295,7 @@ const ArticleEmailBanner = () => {
src={CrossIcon}
alt="error icon"
onClick={() => {
clearName(name)
clearName()
}}
/>
</>
Expand Down Expand Up @@ -324,7 +324,7 @@ const ArticleEmailBanner = () => {
src={CrossIcon}
alt="error icon"
onClick={() => {
clearEmail(email)
clearEmail()
}}
/>
</>
Expand Down
5 changes: 3 additions & 2 deletions src/pages/academy/blog/posts/_style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export const PreviewContainer = styled(Box)`
font-size: 16px;
max-width: 792px;
width: 100%;
padding-bottom: 16px;
margin-bottom: 40px;

& br {
display: none;
Expand Down Expand Up @@ -214,7 +214,8 @@ export const PreviewContainer = styled(Box)`
}
}
& img {
max-width: 100%;
max-width: 610px;
width: 100%;
height: auto;
display: block;
margin: auto;
Expand Down
182 changes: 57 additions & 125 deletions src/pages/academy/blog/posts/preview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { graphql, useStaticQuery } from 'gatsby'
import {
Background,
HeroContainer,
Expand Down Expand Up @@ -28,105 +27,49 @@ import SocialSharing from '../../../../blog/_social-sharing'
import { localize, WithIntl } from 'components/localization'
import Layout from 'components/layout/layout'
import { SEO, Show, Box, Flex, SectionContainer } from 'components/containers'
import { Header, QueryImage } from 'components/elements'
import { Header } from 'components/elements'
import { convertDate, isBrowser } from 'common/utility'
import { cms_assets_end_point } from 'common/constants'

const query_preview = graphql`
query Preview {
directus {
blog {
id
slug
blog_title
published_date
read_time_in_minutes
blog_post
author {
id
name
image {
id
imageFile {
childImageSharp {
gatsbyImageData
}
}
}
}
main_image {
id
imageFile {
childImageSharp {
gatsbyImageData
}
}
}
tags {
id
tags_id {
id
tag_name
}
}
footer_banners {
id
cta_url
name
desktop_banner_image {
id
imageFile {
childImageSharp {
gatsbyImageData
}
}
}
mobile_banner_image {
id
imageFile {
childImageSharp {
gatsbyImageData
}
}
}
}
side_banners {
id
cta_url
name
banner_image {
id
imageFile {
childImageSharp {
gatsbyImageData
}
}
}
const BlogPreview = () => {
const [data, setData] = useState(null)
const [id, setId] = useState(null)
const end_point_url = 'https://cms.deriv.cloud/items/blog/'

useEffect(() => {
const getPreviewId = () => {
if (isBrowser()) {
const query_string = window.location.search
const url_params = new URLSearchParams(query_string)
const params = url_params.get('id')
if (params) {
setId(params)
}
}
}
}
`

const BlogPreview = (props) => {
const data = useStaticQuery(query_preview)
const pathname = props.pageContext.pathname
const [post_data, setPostData] = useState()
const [isMounted, setMounted] = useState(false)
const fetchBlogPreview = async () => {
const url = `${end_point_url}${id}?fields=*.*.*.*.*`
const res = await fetch(url, { cache: 'no-store' })
const data = await res.json()
return data
}

useEffect(() => {
setMounted(true)
const getPreviews = async () => {
const dataFromServer = await fetchBlogPreview()
setData(dataFromServer)
if (dataFromServer) {
window.scrollTo(0, 0)
}
}

if (isMounted && isBrowser()) {
const query_string = window.location.search
const url_params = new URLSearchParams(query_string)
const params = url_params.get('id')
const item_data = data.directus.blog.find((items) => {
return items.id == params
})
setPostData(item_data)
window.scrollTo(0, 0)
getPreviewId()
if (id) {
getPreviews()
}
}, [isMounted])
}, [id])

const post_data = data?.data

const footer_banner_data = post_data?.footer_banners
const side_banner_data = post_data?.side_banners
Expand All @@ -136,43 +79,39 @@ const BlogPreview = (props) => {
max_w_tablet: '320px',
isExternal: true,
redirectLink: side_banner_data?.cta_url,
imgSrcDesktop: side_banner_data?.banner_image?.imageFile,
imgSrcDesktop: side_banner_data?.banner_image?.id,
}

const footer_banner_details = {
max_w_value: '792px',
max_w_tablet: '580px',
isExternal: true,
redirectLink: footer_banner_data?.cta_url,
imgSrcDesktop: footer_banner_data?.desktop_banner_image?.imageFile,
imgSrcMobile: footer_banner_data?.mobile_banner_image?.imageFile,
imgSrcDesktop: footer_banner_data?.desktop_banner_image?.id,
imgSrcMobile: footer_banner_data?.mobile_banner_image?.id,
}

return (
<Layout>
<SEO
description={
'Checkout latest trading news, market updates, useful tips, and how-to guides for Deriv products and online trading platforms on our official blog.'
}
title={'Blog Post Preview | Deriv Academy'}
no_index
/>
<SEO description={post_data?.meta_description} title={post_data?.meta_title} no_index />
<>
{isMounted && (
{post_data && (
<SectionContainer padding="0" position="relative">
<Background>
<HeroContainer>
<HeroLeftWrapper width="100%">
<InfoText mb="16px" size="14px">
{post_data?.published_date &&
localize(convertDate(post_data?.published_date))}
convertDate(post_data?.published_date)}
</InfoText>
<Header as="h1" type="page-title">
{post_data?.blog_title}
</Header>
<InfoText size="14px" mt="16px">
{post_data?.read_time_in_minutes &&
localize(post_data?.read_time_in_minutes + ' min read')}
post_data?.read_time_in_minutes +
' ' +
localize('min read')}
</InfoText>
<Show.Mobile min_width="laptop">
<SideBarContainer fd="column" mr="126px" height="auto">
Expand Down Expand Up @@ -203,11 +142,8 @@ const BlogPreview = (props) => {
<>
{post_data?.author?.image && (
<WriterImage>
<QueryImage
data={
post_data?.author?.image
?.imageFile
}
<img
src={`${cms_assets_end_point}${post_data?.author?.image.id}`}
alt=""
/>
</WriterImage>
Expand All @@ -218,18 +154,16 @@ const BlogPreview = (props) => {
<WrittenbyText color="grey-5" size="12px">
{localize('Written by')}
</WrittenbyText>
<InfoText>
{localize(post_data?.author?.name)}
</InfoText>
<InfoText>{post_data?.author?.name}</InfoText>
</Box>
</Flex>
)}
</Show.Desktop>
</HeroLeftWrapper>
<HeroRightWrapper>
<HeroImageContainer tabletL={{ mt: '24px' }}>
<QueryImage
data={post_data?.main_image?.imageFile}
<img
src={`${cms_assets_end_point}${post_data?.main_image?.id}`}
alt=""
/>
</HeroImageContainer>
Expand All @@ -245,10 +179,8 @@ const BlogPreview = (props) => {
<>
{post_data?.author?.image && (
<WriterImage>
<QueryImage
data={
post_data?.author?.image?.imageFile
}
<img
src={`${cms_assets_end_point}${post_data?.author?.image.id}`}
alt=""
/>
</WriterImage>
Expand All @@ -259,9 +191,7 @@ const BlogPreview = (props) => {
<WrittenbyText color="grey-5" size="12px">
{localize('Written by')}
</WrittenbyText>
<InfoText>
{localize(post_data?.author?.name)}
</InfoText>
<InfoText>{post_data?.author?.name}</InfoText>
</Box>
</Flex>
)}
Expand All @@ -288,7 +218,7 @@ const BlogPreview = (props) => {
})}
</Flex>
{side_banner_data_details && (
<Banner detailsObj={side_banner_data_details} />
<Banner detailsPreviewObj={side_banner_data_details} />
)}
<DesktopWrapper>
<ArticleEmailBanner />
Expand All @@ -307,19 +237,21 @@ const BlogPreview = (props) => {
/>

{footer_banner_details && (
<Banner detailsObj={footer_banner_details} />
<Banner detailsPreviewObj={footer_banner_details} />
)}
<SocialComponentsWrapper>
<LeftSocialComponents />
<RightSocialComponents>
<SocialSharing pathname={pathname} />
<SocialSharing />
</RightSocialComponents>
</SocialComponentsWrapper>

{side_banner_data_details && (
<Show.Mobile>
<Flex mt="24px">
<Banner detailsObj={side_banner_data_details} />
<Banner
detailsPreviewObj={side_banner_data_details}
/>
</Flex>
</Show.Mobile>
)}
Expand Down
Loading