From 8211994b7175f2ad04663abc0c2605eb96143841 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 13 Feb 2021 16:18:50 +0800
Subject: ...

---
 .../views/timeline-common/TimelinePageTemplate.tsx | 157 ++++++++-------------
 1 file changed, 60 insertions(+), 97 deletions(-)

(limited to 'FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx')

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
index 9b76635e..caab1768 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplate.tsx
@@ -1,21 +1,13 @@
 import React from "react";
 
 import { UiLogicError } from "@/common";
-import { useUser } from "@/services/user";
-import {
-  TimelinePostInfo,
-  timelineService,
-  usePosts,
-  useTimeline,
-} from "@/services/timeline";
-import { mergeDataStatus } from "@/services/DataHub2";
+
+import { HttpNetworkError, HttpNotFoundError } from "@/http/common";
+import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
 
 import { TimelineMemberDialog } from "./TimelineMember";
 import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
-import {
-  TimelinePageTemplateUIOperations,
-  TimelinePageTemplateUIProps,
-} from "./TimelinePageTemplateUI";
+import { TimelinePageTemplateUIProps } from "./TimelinePageTemplateUI";
 
 export interface TimelinePageTemplateProps<TManageItem> {
   name: string;
@@ -31,95 +23,58 @@ export default function TimelinePageTemplate<TManageItem>(
 ): React.ReactElement | null {
   const { name } = props;
 
-  const service = timelineService;
-
-  const user = useUser();
-
   const [dialog, setDialog] = React.useState<null | "property" | "member">(
     null
   );
 
-  const [scrollBottomKey, setScrollBottomKey] = React.useState<number>(0);
-
-  React.useEffect(() => {
-    if (scrollBottomKey > 0) {
-      window.scrollTo(0, document.body.scrollHeight);
-    }
-  }, [scrollBottomKey]);
+  // TODO: Auto scroll.
+  // const [scrollBottomKey, _setScrollBottomKey] = React.useState<number>(0);
 
-  const timelineAndStatus = useTimeline(name);
-  const postsAndState = usePosts(name);
+  // React.useEffect(() => {
+  //   if (scrollBottomKey > 0) {
+  //     window.scrollTo(0, document.body.scrollHeight);
+  //   }
+  // }, [scrollBottomKey]);
 
-  const [
-    scrollToBottomNextSyncKey,
-    setScrollToBottomNextSyncKey,
-  ] = React.useState<number>(0);
-
-  const scrollToBottomNextSync = (): void => {
-    setScrollToBottomNextSyncKey((old) => old + 1);
-  };
+  const [timeline, setTimeline] = React.useState<
+    HttpTimelineInfo | "loading" | "offline" | "notexist" | "error"
+  >("loading");
 
   React.useEffect(() => {
+    setTimeline("loading");
+
     let subscribe = true;
-    void timelineService.syncPosts(name).then(() => {
-      if (subscribe) {
-        setScrollBottomKey((old) => old + 1);
-      }
-    });
+    void getHttpTimelineClient()
+      .getTimeline(name)
+      .then(
+        (data) => {
+          if (subscribe) {
+            setTimeline(data);
+          }
+        },
+        (error) => {
+          if (subscribe) {
+            if (error instanceof HttpNetworkError) {
+              setTimeline("offline");
+            } else if (error instanceof HttpNotFoundError) {
+              setTimeline("notexist");
+            } else {
+              console.error(error);
+              setTimeline("error");
+            }
+          }
+        }
+      );
     return () => {
       subscribe = false;
     };
-  }, [name, scrollToBottomNextSyncKey]);
-
-  const uiTimelineProp = ((): TimelinePageTemplateUIProps<TManageItem>["timeline"] => {
-    const { status, data: timeline } = timelineAndStatus;
-    if (timeline == null) {
-      if (status === "offline") {
-        return "offline";
-      } else {
-        return undefined;
-      }
-    } else if (timeline === "notexist") {
-      return "notexist";
-    } else {
-      const operations: TimelinePageTemplateUIOperations<TManageItem> = {
-        onPost: service.hasPostPermission(user, timeline)
-          ? (req) =>
-              service.createPost(name, req).then(() => scrollToBottomNextSync())
-          : undefined,
-        onManage: service.hasManagePermission(user, timeline)
-          ? (item) => {
-              if (item === "property") {
-                setDialog(item);
-              } else {
-                props.onManage(item);
-              }
-            }
-          : undefined,
-        onMember: () => setDialog("member"),
-      };
-
-      const posts = ((): TimelinePostInfo[] | "forbid" | undefined => {
-        const { data: postsInfo } = postsAndState;
-        if (postsInfo === "forbid") {
-          return "forbid";
-        } else if (postsInfo == null || postsInfo === "notexist") {
-          return undefined;
-        } else {
-          return postsInfo.posts;
-        }
-      })();
-
-      return { ...timeline, operations, posts };
-    }
-  })();
+  }, [name]);
 
-  const timeline = timelineAndStatus?.data;
   let dialogElement: React.ReactElement | undefined;
   const closeDialog = (): void => setDialog(null);
 
   if (dialog === "property") {
-    if (timeline == null || timeline === "notexist") {
+    if (typeof timeline !== "object") {
       throw new UiLogicError(
         "Timeline is null but attempt to open change property dialog."
       );
@@ -130,23 +85,17 @@ export default function TimelinePageTemplate<TManageItem>(
         open
         close={closeDialog}
         timeline={timeline}
-        onProcess={(req) => service.changeTimelineProperty(name, req)}
       />
     );
   } else if (dialog === "member") {
-    if (timeline == null || timeline === "notexist") {
+    if (typeof timeline !== "object") {
       throw new UiLogicError(
         "Timeline is null but attempt to open change property dialog."
       );
     }
 
     dialogElement = (
-      <TimelineMemberDialog
-        open
-        onClose={closeDialog}
-        timeline={timeline}
-        editable={service.hasManagePermission(user, timeline)}
-      />
+      <TimelineMemberDialog open onClose={closeDialog} timeline={timeline} />
     );
   }
 
@@ -155,11 +104,25 @@ export default function TimelinePageTemplate<TManageItem>(
   return (
     <>
       <UiComponent
-        timeline={uiTimelineProp}
-        syncStatus={mergeDataStatus([
-          timelineAndStatus.status,
-          postsAndState.status,
-        ])}
+        timeline={
+          typeof timeline === "object"
+            ? {
+                ...timeline,
+                operations: {
+                  onManage: timeline.manageable
+                    ? (item) => {
+                        if (item === "property") {
+                          setDialog(item);
+                        } else {
+                          props.onManage(item);
+                        }
+                      }
+                    : undefined,
+                  onMember: () => setDialog("member"),
+                },
+              }
+            : timeline
+        }
         notExistMessageI18nKey={props.notFoundI18nKey}
       />
       {dialogElement}
-- 
cgit v1.2.3

