From aa89b6cce7701a57b0c377d938788b4c940013d6 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 1 Sep 2020 02:32:06 +0800
Subject: ...

---
 Timeline/ClientApp/src/app/views/user/index.tsx | 72 +++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 Timeline/ClientApp/src/app/views/user/index.tsx

(limited to 'Timeline/ClientApp/src/app/views/user/index.tsx')

diff --git a/Timeline/ClientApp/src/app/views/user/index.tsx b/Timeline/ClientApp/src/app/views/user/index.tsx
new file mode 100644
index 00000000..7c0b1563
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/user/index.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { useParams } from "react-router";
+
+import { UiLogicError } from "@/common";
+import { useUser, userInfoService } from "@/services/user";
+
+import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
+
+import UserPageUI from "./UserPageUI";
+import { PersonalTimelineManageItem } from "./UserInfoCard";
+import ChangeNicknameDialog from "./ChangeNicknameDialog";
+import ChangeAvatarDialog from "./ChangeAvatarDialog";
+
+const UserPage: React.FC = (_) => {
+  const { username } = useParams<{ username: string }>();
+
+  const user = useUser();
+
+  const [dialog, setDialog] = useState<null | PersonalTimelineManageItem>(null);
+
+  let dialogElement: React.ReactElement | undefined;
+
+  const closeDialogHandler = (): void => {
+    setDialog(null);
+  };
+
+  if (dialog === "nickname") {
+    if (user == null) {
+      throw new UiLogicError("Change nickname without login.");
+    }
+
+    dialogElement = (
+      <ChangeNicknameDialog
+        open
+        close={closeDialogHandler}
+        onProcess={(newNickname) =>
+          userInfoService.setNickname(username, newNickname)
+        }
+      />
+    );
+  } else if (dialog === "avatar") {
+    if (user == null) {
+      throw new UiLogicError("Change avatar without login.");
+    }
+
+    dialogElement = (
+      <ChangeAvatarDialog
+        open
+        close={closeDialogHandler}
+        process={(file) => userInfoService.setAvatar(username, file)}
+      />
+    );
+  }
+
+  const onManage = React.useCallback((item: PersonalTimelineManageItem) => {
+    setDialog(item);
+  }, []);
+
+  return (
+    <>
+      <TimelinePageTemplate
+        name={`@${username}`}
+        UiComponent={UserPageUI}
+        onManage={onManage}
+        notFoundI18nKey="timeline.userNotExist"
+      />
+      {dialogElement}
+    </>
+  );
+};
+
+export default UserPage;
-- 
cgit v1.2.3