...

3 files changed, 31 insertions, 36 deletions

diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index 32cbf8c8..e2ab5c71 100644
--- a/FrontEnd/src/pages/timeline/Timeline.tsx
+++ b/FrontEnd/src/pages/timeline/Timeline.tsx
@@ -15,7 +15,7 @@ import {
 
 import { getTimelinePostUpdate$ } from "~src/services/timeline";
 
-import { useScrollToBottom } from "~src/components/hooks";
+import { useReloadKey, useScrollToBottom } from "~src/components/hooks";
 
 import TimelinePostList from "./TimelinePostList";
 import TimelineInfoCard from "./TimelineInfoCard";
@@ -44,11 +44,8 @@ export function Timeline(props: TimelineProps) {
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPage, setTotalPage] = useState(0);
 
-  const [timelineReloadKey, setTimelineReloadKey] = useState(0);
-  const [postsReloadKey, setPostsReloadKey] = useState(0);
-
-  const updateTimeline = (): void => setTimelineReloadKey((o) => o + 1);
-  const updatePosts = (): void => setPostsReloadKey((o) => o + 1);
+  const [timelineKey, reloadTimeline] = useReloadKey();
+  const [postsKey, reloadPosts] = useReloadKey();
 
   useEffect(() => {
     setTimeline(null);
@@ -77,7 +74,7 @@ export function Timeline(props: TimelineProps) {
           }
         },
       );
-  }, [timelineOwner, timelineName, timelineReloadKey]);
+  }, [timelineOwner, timelineName, timelineKey]);
 
   useEffect(() => {
     getHttpTimelineClient()
@@ -102,7 +99,7 @@ export function Timeline(props: TimelineProps) {
           }
         },
       );
-  }, [timelineOwner, timelineName, postsReloadKey]);
+  }, [timelineOwner, timelineName, postsKey]);
 
   useEffect(() => {
     const timelinePostUpdate$ = getTimelinePostUpdate$(
@@ -111,7 +108,7 @@ export function Timeline(props: TimelineProps) {
     );
     const subscription = timelinePostUpdate$.subscribe(({ update, state }) => {
       if (update) {
-        setPostsReloadKey((o) => o + 1);
+        reloadPosts();
       }
       setSignalrState(state);
     });
@@ -162,15 +159,15 @@ export function Timeline(props: TimelineProps) {
         <TimelineInfoCard
           timeline={timeline}
           connectionStatus={signalrState}
-          onReload={updateTimeline}
+          onReload={reloadTimeline}
         />
       )}
       {posts && (
         <div className={classNames("timeline", className)}>
           {timeline?.postable && (
-            <TimelinePostEdit timeline={timeline} onPosted={updatePosts} />
+            <TimelinePostEdit timeline={timeline} onPosted={reloadPosts} />
           )}
-          <TimelinePostList posts={posts} onReload={updatePosts} />
+          <TimelinePostList posts={posts} onReload={reloadPosts} />
         </div>
       )}
     </div>
diff --git a/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
index 9bb9f980..d0a43f7d 100644
--- a/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
+++ b/FrontEnd/src/pages/timeline/view/MarkdownPostView.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { marked } from "marked";
 import classNames from "classnames";
 
@@ -7,7 +7,7 @@ import {
   getHttpTimelineClient,
 } from "~src/http/timeline";
 
-import { useAutoUnsubscribePromise } from "~src/components/hooks";
+import { subscribePromise } from "~src/components/utilities";
 import Skeleton from "~src/components/Skeleton";
 
 import "./MarkdownPostView.css";
@@ -23,19 +23,18 @@ export default function MarkdownPostView({
 }: MarkdownPostViewProps) {
   const [markdown, setMarkdown] = useState<string | null>(null);
 
-  useAutoUnsubscribePromise(
-    () => {
-      if (post) {
-        return getHttpTimelineClient().getPostDataAsString(
+  useEffect(() => {
+    if (post) {
+      return subscribePromise(
+        getHttpTimelineClient().getPostDataAsString(
           post.timelineOwnerV2,
           post.timelineNameV2,
           post.id,
-        );
-      }
-    },
-    setMarkdown,
-    [post],
-  );
+        ),
+        setMarkdown,
+      );
+    }
+  }, [post]);
 
   const markdownHtml = useMemo<string | null>(() => {
     if (markdown == null) return null;
diff --git a/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx b/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
index b964187d..d66bf05b 100644
--- a/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
+++ b/FrontEnd/src/pages/timeline/view/PlainTextPostView.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import classNames from "classnames";
 
 import {
@@ -6,8 +6,8 @@ import {
   getHttpTimelineClient,
 } from "~src/http/timeline";
 
+import { subscribePromise } from "~src/components/utilities";
 import Skeleton from "~src/components/Skeleton";
-import { useAutoUnsubscribePromise } from "~src/components/hooks";
 
 import "./PlainTextPostView.css";
 
@@ -22,19 +22,18 @@ export default function PlainTextPostView({
 }: PlainTextPostViewProps) {
   const [text, setText] = useState<string | null>(null);
 
-  useAutoUnsubscribePromise(
-    () => {
-      if (post) {
-        return getHttpTimelineClient().getPostDataAsString(
+  useEffect(() => {
+    if (post) {
+      return subscribePromise(
+        getHttpTimelineClient().getPostDataAsString(
           post.timelineOwnerV2,
           post.timelineNameV2,
           post.id,
-        );
-      }
-    },
-    setText,
-    [post],
-  );
+        ),
+        setText,
+      );
+    }
+  }, [post]);
 
   return (
     <div