fixed API calls

src/components/ambassador/AmbassadorCard/index.js

@@ -8,7 +8,6 @@ export default function AmbassadorCard({
   data
 }) {
 
-  console.log(data)
   return (
     <Link to={data.link}>
 
@@ -19,7 +18,8 @@ export default function AmbassadorCard({
         </div>
         <div className={styles.cardText}>{data.name}</div>
         <div className={styles.titleText}>{data.title}</div>
-        <div className={styles.expertiseText}>Ambassador</div>
+        <div className={styles.location}>{data.location}</div>
+        <div className={styles.bio} dangerouslySetInnerHTML={{__html: data.bio}}></div>
       </div>
 
     </Link>

src/components/ambassador/AmbassadorCard/styles.module.css

@@ -2,7 +2,7 @@
 .card {
   position: relative;
   margin-top: 20px;
-  height: 300px;
+  height: 500px;
   /* max-width: 420px; */
   /* UI Properties */
   background: var(--dev-card-background);
@@ -22,10 +22,10 @@
   position: absolute;
   margin: 22px auto;
   text-align: center;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
   width: 100%;
-  top: 116px;
+  top: 124px;
   left: 0;
   color: var(--dev-text-color-normal);
 }
@@ -43,7 +43,7 @@
   color: var(--dev-text-color-normal);
 }
 
-.expertiseText {
+.location {
   position: absolute;
   margin: 22px auto;
   text-align: center;
@@ -51,7 +51,7 @@
   font-weight: 500;
   width: 100%;
   letter-spacing: 2px;
-  top: 160px;
+  top: 141px;
   left: 0;
   color: var(--ifm-color-primary);
   padding: 30px;
@@ -75,6 +75,19 @@
   justify-content: center;
   display: flex;
   margin: auto;
-  height: 80px;
+  height: 100px;
-  width: 80px;
+  width: 100px;
 }
+
+.bio {
+  position: absolute;
+  margin: 22px auto;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+  width: 100%;
+  top: 174px;
+  left: 0;
+  color: var(--ifm-color-primary);
+  padding: 30px;
+}

src/components/ambassador/AmbassadorCards/index.js

@@ -12,12 +12,15 @@ export default function AmbassadorCards({
 
   const getPosts = async () => {
     const data = await getAmbassadors(expert);
+
     const resultset = []
     if (data.members) {
+      const memberDetails = await getAmbassadorDetails(data.members.map(item => item.id))
       for (const member of data.members) {
-          resultset.push(await getMemberList(member))
+          resultset.push(await getMemberList(member, memberDetails.users.filter(item => item.id === member.id)[0]))
       }
       setCardData(resultset);
+      
     } else {
       setCardData(undefined);
     }
@@ -64,16 +67,16 @@ export default function AmbassadorCards({
   }
 }
 
-async function getMemberList(member) {
+async function getMemberList(member, details) {
-  const details = await getAmbassadorDetails(member.username)
+  
   return {
     name: member.name,
     creatorImage: getavatarURL(member.avatar_template),
     title: member.title,
     bio: details.bio_excerpt,
     answers: details.accepted_answers,
-    views: details.profile_view_count,
     location: details.location,
+    website: details.website_name,
     link:
     'https://developer.sailpoint.com/discuss/u/' +
     member.username +

src/components/ambassador/AmbassadorCards/styles.module.css

@@ -2,7 +2,7 @@
 .gridContainer {
   display: grid;
   place-content: center;
-  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   grid-gap: 40px;
   margin-left: 40px;
   margin-right: 40px;

src/services/DiscourseService.js

@@ -30,7 +30,7 @@ export async function getAmbassadors(expert) {
 export async function getAmbassadorDetails(id) {
   try {
     const response = await fetch(
-      'https://developer.sailpoint.com/discuss/u/' + id + '.json',
+      'https://developer.sailpoint.com/discuss/user-cards.json?user_ids=' + id.join(','),
     );
     return await response.json();
   } catch (error) {