added logic to get other details about post

src/components/blog/BlogCard/index.js

@@ -11,7 +11,8 @@ export default function BlogCard({
   image,
   excerpt,
   name,
-  views
+  views,
+  replies
 }) {
 
   return (
@@ -20,11 +21,11 @@ export default function BlogCard({
 
         <span className={styles.cardData}>
           <img className={styles.cardEye} src={useBaseUrl('/blog/eye-regular.svg')}></img>
-          <span className={styles.cardDataTextAlign}><div>100</div></span>
+          <span className={styles.cardDataTextAlign}><div>{views}</div></span>
-          <span className={styles.cardDataText}>100</span>
+          <span className={styles.cardDataText}>{views}</span>
           <img className={styles.cardComment} src={useBaseUrl('/blog/comment-light.svg')}></img>
-          <span className={styles.cardDataTextAlign}><div>8</div></span>
+          <span className={styles.cardDataTextAlign}><div>{replies}</div></span>
-          <span className={styles.cardDataText}>8</span>
+          <span className={styles.cardDataText}>{replies}</span>
         </span>
 
         <img className={styles.cardFace} src={useBaseUrl(image)}></img>

src/components/blog/BlogCards/index.js

@@ -2,17 +2,19 @@ import React from 'react';
 import styles from './styles.module.css';
 import BlogCard from '../BlogCard';
 
-import {getBlogPosts} from '../../../services/DiscourseService';
+import {getBlogPosts, getTopic} from '../../../services/DiscourseService';
 export default function BlogCards() {
   const [ans, setAns] = React.useState();
 
   const getPosts = async () => {
     const data = await getBlogPosts();
-    console.log(data)
+    console.log(data.topics)
-    const resultset = [
+    const resultset = []
-      getPostList(data, 0),
+    let i = 0;
-      getPostList(data, 1),
+    for (const topic of data.topics) {
-    ];
+      resultset.push(await getPostList(topic))
+      i++
+    }
     setAns(resultset);
   };
 
@@ -33,6 +35,7 @@ export default function BlogCards() {
             link={a.link}
             title={a.title}
             views={a.views}
+            replies={a.replies}
             image={a.image}></BlogCard>
           })}
         </div>
@@ -43,21 +46,24 @@ export default function BlogCards() {
   }
 }
 
-function getPostList(posts, index) {
+async function getPostList(topic) {
+  const fullTopic = await getTopic(topic.id);
+  console.log(fullTopic)
   return {
-    name: posts.posts[index].name,
+    name: fullTopic.details.created_by.name,
-    excerpt: styleExcerpt(posts.topics[index].excerpt),
+    excerpt: styleExcerpt(topic.excerpt),
-    image: getavatarURL(posts.posts[index].avatar_template),
+    image: getavatarURL(fullTopic.details.created_by.avatar_template),
-    tags: posts.topics[index].tags,
+    tags: topic.tags,
     link:
       'https://developer.sailpoint.com/discuss/t/' +
-      posts.topics[index].slug +
+      topic.slug +
       '/' +
-      posts.topics[index].id,
+      topic.id,
-    title: posts.topics[index].title,
+    title: topic.title,
-    views: posts.topics[index].views,
+    views: fullTopic.views,
-    liked: posts.topics[index].like_count,
+    liked: topic.like_count,
-    solution: posts.topics[index].has_accepted_answer,
+    replies: fullTopic.posts_count,
+    solution: topic.has_accepted_answer,
   };
 }
 

src/services/DiscourseService.js

@@ -19,3 +19,14 @@ export async function getBlogPosts() {
     return [];
   }
 }
+
+export async function getTopic(id) {
+  try {
+    const response = await fetch(
+      'https://developer.sailpoint.com/discuss/t/' + id + '.json',
+    );
+    return await response.json();
+  } catch (error) {
+    return [];
+  }
+}

static/blog/comment-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 64C125.8 64 32 148.6 32 240c0 37.1 15.5 70.6 40 100c5.2 6.3 8.4 14.8 7.4 23.9c-3.1 27-11.4 52.5-25.7 76.3c-.5 .9-1.1 1.8-1.6 2.6c11.1-2.9 22.2-7 32.7-11.5L91.2 446l-6.4-14.7c17-7.4 33-16.7 48.4-27.4c8.5-5.9 19.4-7.5 29.2-4.2C193 410.1 224 416 256 416c130.2 0 224-84.6 224-176s-93.8-176-224-176zM0 240C0 125.2 114.5 32 256 32s256 93.2 256 208s-114.5 208-256 208c-36 0-70.5-6.7-103.8-17.9c-.2-.1-.5 0-.7 .1c-16.9 11.7-34.7 22.1-53.9 30.5C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.8s-1.1-12.8 3.4-17.4c8.1-8.2 15.2-18.2 21.7-29c11.7-19.6 18.7-40.6 21.3-63.1c0 0-.1-.1-.1-.2C19.6 327.1 0 286.6 0 240z"/></svg>

static/blog/comment-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M123.6 391.3c12.9-9.4 29.6-11.8 44.6-6.4c26.5 9.6 56.2 15.1 87.8 15.1c124.7 0 208-80.5 208-160s-83.3-160-208-160S48 160.5 48 240c0 32 12.4 62.8 35.7 89.2c8.6 9.7 12.8 22.5 11.8 35.5c-1.4 18.1-5.7 34.7-11.3 49.4c17-7.9 31.1-16.7 39.4-22.7zM21.2 431.9c1.8-2.7 3.5-5.4 5.1-8.1c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208s-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6c-15.1 6.6-32.3 12.6-50.1 16.1c-.8 .2-1.6 .3-2.4 .5c-4.4 .8-8.7 1.5-13.2 1.9c-.2 0-.5 .1-.7 .1c-5.1 .5-10.2 .8-15.3 .8c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c4.1-4.2 7.8-8.7 11.3-13.5c1.7-2.3 3.3-4.6 4.8-6.9c.1-.2 .2-.3 .3-.5z"/></svg>

static/blog/eye-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>