Update post list when create or delete post.

3 files changed, 55 insertions, 44 deletions

diff --git a/Timeline/ClientApp/src/app/data/timeline.ts b/Timeline/ClientApp/src/app/data/timeline.ts
index 88a13381..84eb3764 100644
--- a/Timeline/ClientApp/src/app/data/timeline.ts
+++ b/Timeline/ClientApp/src/app/data/timeline.ts
@@ -450,14 +450,33 @@ export class TimelineService {
   ): Observable<TimelinePostInfo> {

     const user = checkLogin();

     return from(

-      getHttpTimelineClient().postPost(timelineName, request, user.token)

+      getHttpTimelineClient()

+        .postPost(timelineName, request, user.token)

+        .then((res) => {

+          this._postListSubscriptionHub.update(timelineName, (_, old) => {

+            return Promise.resolve({

+              ...old,

+              posts: [...old.posts, { ...res, timelineName }],

+            });

+          });

+          return res;

+        })

     ).pipe(map((post) => ({ ...post, timelineName })));

   }

 

   deletePost(timelineName: string, postId: number): Observable<unknown> {

     const user = checkLogin();

     return from(

-      getHttpTimelineClient().deletePost(timelineName, postId, user.token)

+      getHttpTimelineClient()

+        .deletePost(timelineName, postId, user.token)

+        .then(() => {

+          this._postListSubscriptionHub.update(timelineName, (_, old) => {

+            return Promise.resolve({

+              ...old,

+              posts: old.posts.filter((post) => post.id != postId),

+            });

+          });

+        })

     );

   }

 

diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx
index 88066b76..a68d08c6 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplate.tsx
@@ -14,7 +14,7 @@ import {
   usePostList,

 } from '../data/timeline';

 

-import { TimelinePostInfoEx, TimelineDeleteCallback } from './Timeline';

+import { TimelineDeleteCallback } from './Timeline';

 import { TimelineMemberDialog } from './TimelineMember';

 import TimelinePropertyChangeDialog from './TimelinePropertyChangeDialog';

 import { TimelinePageTemplateUIProps } from './TimelinePageTemplateUI';

@@ -55,7 +55,7 @@ export default function TimelinePageTemplate<
     undefined

   );

 

-  const rawPosts = usePostList(timeline?.name);

+  const postListState = usePostList(timeline?.name);

 

   const [error, setError] = React.useState<string | undefined>(undefined);

 

@@ -182,43 +182,19 @@ export default function TimelinePageTemplate<
 

   const onDelete: TimelineDeleteCallback = React.useCallback(

     (index, id) => {

-      service.deletePost(name, id).subscribe(

-        () => {

-          // TODO: Remove this.

-          setPosts((oldPosts) =>

-            without(

-              oldPosts as TimelinePostInfoEx[],

-              (oldPosts as TimelinePostInfoEx[])[index]

-            )

-          );

-        },

-        () => {

-          pushAlert({

-            type: 'danger',

-            message: t('timeline.deletePostFailed'),

-          });

-        }

-      );

+      service.deletePost(name, id).subscribe(null, () => {

+        pushAlert({

+          type: 'danger',

+          message: t('timeline.deletePostFailed'),

+        });

+      });

     },

     [service, name, t]

   );

 

   const onPost: TimelinePostSendCallback = React.useCallback(

     (req) => {

-      return service

-        .createPost(name, req)

-        .pipe(

-          map((newPost) => {

-            // TODO: Remove this.

-            setPosts((oldPosts) =>

-              concat(oldPosts as TimelinePostInfoEx[], {

-                ...newPost,

-                deletable: true,

-              })

-            );

-          })

-        )

-        .toPromise();

+      return service.createPost(name, req).toPromise().then();

     },

     [service, name]

   );

@@ -245,7 +221,7 @@ export default function TimelinePageTemplate<
       <UiComponent

         error={error}

         timeline={timeline}

-        posts={posts}

+        postListState={postListState}

         onDelete={onDelete}

         onPost={

           timeline != null && service.hasPostPermission(user, timeline)

diff --git a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
index 4b3b3096..3c8e312c 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelinePageTemplateUI.tsx
@@ -8,6 +8,13 @@ import arrowsAngleContractIcon from 'bootstrap-icons/icons/arrows-angle-contract
 import arrowsAngleExpandIcon from 'bootstrap-icons/icons/arrows-angle-expand.svg';

 

 import { getAlertHost } from '../common/alert-service';

+import { useEventEmiiter } from '../common';

+import {

+  TimelineInfo,

+  TimelinePostListState,

+  timelineService,

+} from '../data/timeline';

+import { userService } from '../data/user';

 

 import Timeline, {

   TimelinePostInfoEx,

@@ -15,8 +22,6 @@ import Timeline, {
 } from './Timeline';

 import AppBar from '../common/AppBar';

 import TimelinePostEdit, { TimelinePostSendCallback } from './TimelinePostEdit';

-import { useEventEmiiter } from '../common';

-import { TimelineInfo } from '../data/timeline';

 

 export interface TimelineCardComponentProps<TManageItems> {

   timeline: TimelineInfo;

@@ -29,7 +34,7 @@ export interface TimelineCardComponentProps<TManageItems> {
 export interface TimelinePageTemplateUIProps<TManageItems> {

   avatarKey?: string | number;

   timeline?: TimelineInfo;

-  posts?: TimelinePostInfoEx[] | 'forbid';

+  postListState?: TimelinePostListState;

   CardComponent: React.ComponentType<TimelineCardComponentProps<TManageItems>>;

   onMember: () => void;

   onManage?: (item: TManageItems | 'property') => void;

@@ -41,7 +46,7 @@ export interface TimelinePageTemplateUIProps<TManageItems> {
 export default function TimelinePageTemplateUI<TManageItems>(

   props: TimelinePageTemplateUIProps<TManageItems>

 ): React.ReactElement | null {

-  const { timeline } = props;

+  const { timeline, postListState } = props;

 

   const { t } = useTranslation();

 

@@ -116,7 +121,7 @@ export default function TimelinePageTemplateUI<TManageItems>(
         subscriptions.forEach((s) => s.unsubscribe());

       };

     }

-  }, [getResizeEvent, triggerResizeEvent, timeline, props.posts]);

+  }, [getResizeEvent, triggerResizeEvent, timeline, postListState]);

 

   const [cardHeight, setCardHeight] = React.useState<number>(0);

 

@@ -142,16 +147,27 @@ export default function TimelinePageTemplateUI<TManageItems>(
   } else {

     if (timeline != null) {

       let timelineBody: React.ReactElement;

-      if (props.posts != null) {

-        if (props.posts === 'forbid') {

+      if (postListState != null) {

+        if (postListState.state === 'forbid') {

           timelineBody = (

             <p className="text-danger">{t('timeline.messageCantSee')}</p>

           );

         } else {

+          const posts: TimelinePostInfoEx[] = postListState.posts.map(

+            (post) => ({

+              ...post,

+              deletable: timelineService.hasModifyPostPermission(

+                userService.currentUser,

+                timeline,

+                post

+              ),

+            })

+          );

+

           timelineBody = (

             <Timeline

               containerRef={timelineRef}

-              posts={props.posts}

+              posts={posts}

               onDelete={props.onDelete}

               onResize={triggerResizeEvent}

             />