Suthesh/fix-dots-nextline (#2077)

suthesank · Suthesan · Sean Ho · web-flow · commit 02c7efbc297f · 2021-09-08T15:21:16.000+08:00
* fix dots

* added comment

* split featured and non featured video query

* Update src/pages/academy/components/video-banner/_DBanner.js

Co-authored-by: Sean Ho &lt;72253841+sean-binary@users.noreply.github.com&gt;

Co-authored-by: Suthesan &lt;suthesan@Suthesans-MacBook-Pro.local&gt;
Co-authored-by: Sean Ho &lt;72253841+sean-binary@users.noreply.github.com&gt;
diff --git a/src/common/utility.js b/src/common/utility.js
@@ -287,5 +287,13 @@ export const getVideoObject = (video_data) => {
     }
 }
 
+// remove spaces before appending "..." on truncated strings
+const getLimit = (input, limit) => {
+    if (input[limit - 1] === ' ') {
+        return limit - 1
+    }
+    return limit
+}
+
 export const truncateString = (input, limit) =>
-    input.length > limit ? `${input.substring(0, limit)}...` : input
+    input.length > limit ? `${input.substring(0, getLimit(input, limit))}...` : input
diff --git a/src/pages/academy/_video-banner.js b/src/pages/academy/_video-banner.js
@@ -3,16 +3,22 @@ import PropTypes from 'prop-types'
 import Dbanner from './components/video-banner/_DBanner'
 import { Flex } from 'components/containers'
 
-const DVideoBanner = ({ video_list_data }) => {
+const DVideoBanner = ({ featured_video_list_data, non_featured_video_list_data }) => {
     return (
         <Flex>
-            {video_list_data && video_list_data.length && <Dbanner video_list={video_list_data} />}
+            {non_featured_video_list_data && non_featured_video_list_data.length && (
+                <Dbanner
+                    featured_video_list={featured_video_list_data}
+                    non_featured_video_list={non_featured_video_list_data}
+                />
+            )}
         </Flex>
     )
 }
 
 DVideoBanner.propTypes = {
-    video_list_data: PropTypes.array,
+    featured_video_list_data: PropTypes.array,
+    non_featured_video_list_data: PropTypes.array,
 }
 
 export default DVideoBanner
diff --git a/src/pages/academy/components/video-banner/_DBanner.js b/src/pages/academy/components/video-banner/_DBanner.js
@@ -70,12 +70,18 @@ const StyledDot = styled.img`
     margin: 0 10px 4px;
 `
 
-const Dbanner = ({ video_list }) => {
+const Dbanner = ({ featured_video_list, non_featured_video_list }) => {
     const [show, setShow] = useState(false)
     const handleCloseVideo = () => setShow(false)
     const handleOpenVideo = () => setShow(true)
-    const featured_video = video_list.find((v) => v.featured)
-    const filtered_video = video_list.filter((v) => v !== featured_video)
+
+    let featured_video
+    if (featured_video_list && featured_video_list.length) {
+        featured_video = featured_video_list[0]
+    } else {
+        featured_video = non_featured_video_list[0]
+        non_featured_video_list.shift()
+    }
 
     const {
         published_date,
@@ -158,7 +164,7 @@ const Dbanner = ({ video_list }) => {
                             </Header>
                         </Flex>
                     </Flex>
-                    <VideoCarousel carousel_items={filtered_video} />
+                    <VideoCarousel carousel_items={non_featured_video_list} />
                 </Container>
             </ParentWrapper>
             {show && <VideoPlayer video_src={video_url} closeVideo={handleCloseVideo} />}
@@ -167,7 +173,8 @@ const Dbanner = ({ video_list }) => {
 }
 
 Dbanner.propTypes = {
-    video_list: PropTypes.array,
+    featured_video_list: PropTypes.array,
+    non_featured_video_list: PropTypes.array,
 }
 
 export default Dbanner
diff --git a/src/pages/academy/index.js b/src/pages/academy/index.js
@@ -79,6 +79,29 @@ export const query = graphql`
                     }
                 }
             }
+            featured_video: videos(
+                filter: { status: { _eq: "published" }, featured: { _eq: true } }
+                sort: "-published_date"
+                limit: 1
+            ) {
+                video_title
+                published_date
+                video_description
+                video_duration
+                featured
+                video_thumbnail {
+                    id
+                    title
+                }
+                video_file {
+                    id
+                }
+                tags {
+                    tags_id {
+                        tag_name
+                    }
+                }
+            }
             recent: blog(
                 filter: { status: { _eq: "published" } }
                 sort: "-published_date"
@@ -161,7 +184,8 @@ const DerivBlog = ({ data }) => {
 
     const recent_data = data.directus.recent
     const featured_data = data.directus.featured
-    const video_list_data = data.directus.videos
+    const non_featured_video_list_data = data.directus.videos
+    const featured_video_list_data = data.directus.featured_video
 
     return (
         <Layout type="academy" is_ppc_redirect={true}>
@@ -196,7 +220,10 @@ const DerivBlog = ({ data }) => {
                 </Carousel>
             </MainWrapper>
             <RecentFeaturedPosts recent_data={recent_data} featured_data={featured_data} />
-            <DVideoBanner video_list_data={video_list_data} />
+            <DVideoBanner
+                featured_video_list_data={featured_video_list_data}
+                non_featured_video_list_data={non_featured_video_list_data}
+            />
             <MarketNews data={market_news_data} />
             <Container>
                 <Flex

Original file line number	Diff line number	Diff line change
`@@ -287,5 +287,13 @@ export const getVideoObject = (video_data) => {`
`287`	`287`	`}`
`288`	`288`	`}`
`289`	`289`
	`290`	`+// remove spaces before appending "..." on truncated strings`
	`291`	`+const getLimit = (input, limit) => {`
	`292`	`+ if (input[limit - 1] === ' ') {`
	`293`	`+ return limit - 1`
	`294`	`+ }`
	`295`	`+ return limit`
	`296`	`+}`
	`297`	`+`
`290`	`298`	`export const truncateString = (input, limit) =>`
`291`		- input.length > limit ? `${input.substring(0, limit)}...` : input
	`299`	+ input.length > limit ? `${input.substring(0, getLimit(input, limit))}...` : input