Prototype threaded comments rendering

apps/comments-ui/src/actions.ts

@@ -2,6 +2,7 @@ import {AddComment, Comment, CommentsOptions, DispatchActionType, EditableAppCon
 import {AdminApi} from './utils/admin-api';
 import {GhostApi} from './utils/api';
 import {Page} from './pages';
+import {hydrateVisibleReplies} from './utils/reply-hydration';
 
 async function loadMoreComments({state, api, options, order}: {state: EditableAppContext, api: GhostApi, options: CommentsOptions, order?:string}): Promise<Partial<EditableAppContext>> {
     let page = 1;
@@ -15,7 +16,13 @@ async function loadMoreComments({state, api, options, order}: {state: EditableAp
         data = await api.comments.browse({page, postId: options.postId, order: order || state.order});
     }
 
-    const updatedComments = [...state.comments, ...data.comments];
+    const hydratedComments = await hydrateVisibleReplies({
+        comments: data.comments,
+        api,
+        adminApi: state.admin ? state.adminApi : null,
+        memberUuid: state.member?.uuid
+    });
+    const updatedComments = [...state.comments, ...hydratedComments];
     const dedupedComments = updatedComments.filter((comment, index, self) => self.findIndex(c => c.id === comment.id) === index);
 
     // Note: we store the comments from new to old, and show them in reverse order
@@ -42,8 +49,15 @@ async function setOrder({state, data: {order}, options, api, dispatchAction}: {s
             data = await api.comments.browse({page: 1, postId: options.postId, order});
         }
 
+        const hydratedComments = await hydrateVisibleReplies({
+            comments: data.comments,
+            api,
+            adminApi: state.admin ? state.adminApi : null,
+            memberUuid: state.member?.uuid
+        });
+
         return {
-            comments: [...data.comments],
+            comments: hydratedComments,
             pagination: data.meta.pagination,
             order,
             commentsIsLoading: false

apps/comments-ui/src/app.tsx

@@ -9,6 +9,7 @@ import setupGhostApi from './utils/api';
 import {ActionHandler, SyncActionHandler, isSyncAction} from './actions';
 import {AppContext, Comment, DispatchActionType, EditableAppContext} from './app-context';
 import {CommentsFrame} from './components/frame';
+import {hydrateVisibleReplies} from './utils/reply-hydration';
 import {setupAdminAPI} from './utils/admin-api';
 import {useOptions} from './utils/options';
 
@@ -141,6 +142,11 @@ const App: React.FC<AppProps> = ({scriptTag, initialCommentId, pageUrl}) => {
                 if (admin) {
                     // this is a bit of a hack, but we need to fetch the comments fully populated if the user is an admin
                     const adminComments = await adminApi.browse({page: 1, postId: options.postId, order: state.order, memberUuid: state.member?.uuid});
+                    const hydratedAdminComments = await hydrateVisibleReplies({
+                        comments: adminComments.comments,
+                        adminApi,
+                        memberUuid: state.member?.uuid
+                    });
                     setState((currentState) => {
                         // Don't overwrite comments when initSetup loaded extra data
                         // for permalink scrolling (multiple pages or expanded replies)
@@ -155,7 +161,7 @@ const App: React.FC<AppProps> = ({scriptTag, initialCommentId, pageUrl}) => {
                             adminApi,
                             admin,
                             isAdmin: true,
-                            comments: adminComments.comments,
+                            comments: hydratedAdminComments,
                             pagination: adminComments.meta.pagination
                         };
                     });
@@ -183,9 +189,13 @@ const App: React.FC<AppProps> = ({scriptTag, initialCommentId, pageUrl}) => {
         const countPromise = api.comments.count({postId: options.postId});
 
         const [data, count] = await Promise.all([dataPromise, countPromise]);
+        const comments = await hydrateVisibleReplies({
+            comments: data.comments,
+            api
+        });
 
         return {
-            comments: data.comments,
+            comments,
             pagination: data.meta.pagination,
             count: count
         };
@@ -227,7 +237,11 @@ const App: React.FC<AppProps> = ({scriptTag, initialCommentId, pageUrl}) => {
                 postId: options.postId,
                 order: state.order
             });
-            comments = [...comments, ...nextPage.comments];
+            const nextComments = await hydrateVisibleReplies({
+                comments: nextPage.comments,
+                api
+            });
+            comments = [...comments, ...nextComments];
             pagination = nextPage.meta.pagination;
         }