DOC-3251: Update mentions demos

Author: MitchC1999

modules/ROOT/examples/live-demos/comments-callback-with-mentions/index.js

@@ -51,7 +51,12 @@ const mentions_fetch = async (query, success) => {
   const searchPhrase = query.term.toLowerCase();
   await fetch(`${API_URL}?q=${encodeURIComponent(searchPhrase)}`)
     .then((response) => response.json())
-    .then((users) => success(users.data))
+    .then((users) => success(users.data.map((userInfo) => ({
+      id: userInfo.id,
+      name: userInfo.name,
+      image: userInfo.avatar,
+      description: userInfo.custom.role
+    }))))
     .catch((error) => console.log(error));
 };
 
@@ -80,14 +85,19 @@ const mentions_select = async (mention, success) => {
   await fetch(`${API_URL}/${id}`)
     .then((response) => response.json())
     .then((userInfo) => {
-      const card = createCard(userInfo);
+      const card = createCard({
+        id: userInfo.id,
+        name: userInfo.name,
+        image: userInfo.avatar,
+        description: userInfo.custom.role
+      });
       success(card);
     })
     .catch((error) => console.error(error));
 };
 
 const mentions_menu_hover = async (userInfo, success) => {
-  const card = createCard(userInfo)
+  const card = createCard(userInfo);
   success(card);
 };
 

modules/ROOT/examples/live-demos/comments-embedded-with-mentions/index.js

@@ -4,7 +4,12 @@ const mentions_fetch = async (query, success) => {
   const searchPhrase = query.term.toLowerCase();
   await fetch(`${API_URL}?q=${encodeURIComponent(searchPhrase)}`)
     .then((response) => response.json())
-    .then((users) => success(users.data))
+    .then((users) => success(users.data.map((userInfo) => ({
+      id: userInfo.id,
+      name: userInfo.name,
+      image: userInfo.avatar,
+      description: userInfo.custom.role
+    }))))
     .catch((error) => console.log(error));
 };
 
@@ -33,14 +38,19 @@ const mentions_select = async (mention, success) => {
   await fetch(`${API_URL}/${id}`)
     .then((response) => response.json())
     .then((userInfo) => {
-      const card = createCard(userInfo);
+      const card = createCard({
+        id: userInfo.id,
+        name: userInfo.name,
+        image: userInfo.avatar,
+        description: userInfo.custom.role
+      });
       success(card);
     })
     .catch((error) => console.error(error));
 };
 
 const mentions_menu_hover = async (userInfo, success) => {
-  const card = createCard(userInfo)
+  const card = createCard(userInfo);
   success(card);
 };
 

modules/ROOT/examples/live-demos/mentions/index.js

@@ -1,10 +1,15 @@
-const API_URL = 'https://demouserdirectory.tiny.cloud/users';
+const API_URL = 'https://demouserdirectory.tiny.cloud/v1/users';
 
 const mentions_fetch = async (query, success) => {
   const searchPhrase = query.term.toLowerCase();
   await fetch(`${API_URL}?q=${encodeURIComponent(searchPhrase)}`)
     .then((response) => response.json())
-    .then((users) => success(users.data))
+    .then((users) => success(users.data.map((userInfo) => ({
+      id: userInfo.id,
+      name: userInfo.name,
+      image: userInfo.avatar,
+      description: userInfo.custom.role
+    }))))
     .catch((error) => console.log(error));
 };
 
@@ -33,14 +38,19 @@ const mentions_select = async (mention, success) => {
   await fetch(`${API_URL}/${id}`)
     .then((response) => response.json())
     .then((userInfo) => {
-      const card = createCard(userInfo);
+      const card = createCard({
+        id: userInfo.id,
+        name: userInfo.name,
+        image: userInfo.avatar,
+        description: userInfo.custom.role
+      });
       success(card);
     })
     .catch((error) => console.error(error));
 };
 
 const mentions_menu_hover = async (userInfo, success) => {
-  const card = createCard(userInfo)
+  const card = createCard(userInfo);
   success(card);
 };