From 7c3ce5214ff89bef6180f42a68b8b237e989452b Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 15 Feb 2021 01:23:24 +0800
Subject: feat: Move change avatar and nickname to settings.

---
 FrontEnd/src/app/views/user/ChangeAvatarDialog.tsx | 302 ---------------------
 .../src/app/views/user/ChangeNicknameDialog.tsx    |  27 --
 FrontEnd/src/app/views/user/UserCard.tsx           |  52 +---
 3 files changed, 4 insertions(+), 377 deletions(-)
 delete mode 100644 FrontEnd/src/app/views/user/ChangeAvatarDialog.tsx
 delete mode 100644 FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx

(limited to 'FrontEnd/src/app/views/user')

diff --git a/FrontEnd/src/app/views/user/ChangeAvatarDialog.tsx b/FrontEnd/src/app/views/user/ChangeAvatarDialog.tsx
deleted file mode 100644
index ffa2218b..00000000
--- a/FrontEnd/src/app/views/user/ChangeAvatarDialog.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { AxiosError } from "axios";
-import { Modal, Row, Button } from "react-bootstrap";
-
-import { UiLogicError } from "@/common";
-
-import ImageCropper, { Clip, applyClipToImage } from "../common/ImageCropper";
-
-export interface ChangeAvatarDialogProps {
-  open: boolean;
-  close: () => void;
-  process: (blob: Blob) => Promise<void>;
-}
-
-const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => {
-  const { t } = useTranslation();
-
-  const [file, setFile] = React.useState<File | null>(null);
-  const [fileUrl, setFileUrl] = React.useState<string | null>(null);
-  const [clip, setClip] = React.useState<Clip | null>(null);
-  const [
-    cropImgElement,
-    setCropImgElement,
-  ] = React.useState<HTMLImageElement | null>(null);
-  const [resultBlob, setResultBlob] = React.useState<Blob | null>(null);
-  const [resultUrl, setResultUrl] = React.useState<string | null>(null);
-
-  const [state, setState] = React.useState<
-    | "select"
-    | "crop"
-    | "processcrop"
-    | "preview"
-    | "uploading"
-    | "success"
-    | "error"
-  >("select");
-
-  const [message, setMessage] = useState<
-    string | { type: "custom"; text: string } | null
-  >("userPage.dialogChangeAvatar.prompt.select");
-
-  const trueMessage =
-    message == null
-      ? null
-      : typeof message === "string"
-      ? t(message)
-      : message.text;
-
-  const closeDialog = props.close;
-
-  const close = React.useCallback((): void => {
-    if (!(state === "uploading")) {
-      closeDialog();
-    }
-  }, [state, closeDialog]);
-
-  useEffect(() => {
-    if (file != null) {
-      const url = URL.createObjectURL(file);
-      setClip(null);
-      setFileUrl(url);
-      setState("crop");
-      return () => {
-        URL.revokeObjectURL(url);
-      };
-    } else {
-      setFileUrl(null);
-      setState("select");
-    }
-  }, [file]);
-
-  React.useEffect(() => {
-    if (resultBlob != null) {
-      const url = URL.createObjectURL(resultBlob);
-      setResultUrl(url);
-      setState("preview");
-      return () => {
-        URL.revokeObjectURL(url);
-      };
-    } else {
-      setResultUrl(null);
-    }
-  }, [resultBlob]);
-
-  const onSelectFile = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>): void => {
-      const files = e.target.files;
-      if (files == null || files.length === 0) {
-        setFile(null);
-      } else {
-        setFile(files[0]);
-      }
-    },
-    []
-  );
-
-  const onCropNext = React.useCallback(() => {
-    if (
-      cropImgElement == null ||
-      clip == null ||
-      clip.width === 0 ||
-      file == null
-    ) {
-      throw new UiLogicError();
-    }
-
-    setState("processcrop");
-    void applyClipToImage(cropImgElement, clip, file.type).then((b) => {
-      setResultBlob(b);
-    });
-  }, [cropImgElement, clip, file]);
-
-  const onCropPrevious = React.useCallback(() => {
-    setFile(null);
-    setState("select");
-  }, []);
-
-  const onPreviewPrevious = React.useCallback(() => {
-    setResultBlob(null);
-    setState("crop");
-  }, []);
-
-  const process = props.process;
-
-  const upload = React.useCallback(() => {
-    if (resultBlob == null) {
-      throw new UiLogicError();
-    }
-
-    setState("uploading");
-    process(resultBlob).then(
-      () => {
-        setState("success");
-      },
-      (e: unknown) => {
-        setState("error");
-        setMessage({ type: "custom", text: (e as AxiosError).message });
-      }
-    );
-  }, [resultBlob, process]);
-
-  const createPreviewRow = (): React.ReactElement => {
-    if (resultUrl == null) {
-      throw new UiLogicError();
-    }
-    return (
-      <Row className="justify-content-center">
-        <img
-          className="change-avatar-img"
-          src={resultUrl}
-          alt={t("userPage.dialogChangeAvatar.previewImgAlt")}
-        />
-      </Row>
-    );
-  };
-
-  return (
-    <Modal show={props.open} onHide={close}>
-      <Modal.Header>
-        <Modal.Title> {t("userPage.dialogChangeAvatar.title")}</Modal.Title>
-      </Modal.Header>
-      {(() => {
-        if (state === "select") {
-          return (
-            <>
-              <Modal.Body className="container">
-                <Row>{t("userPage.dialogChangeAvatar.prompt.select")}</Row>
-                <Row>
-                  <input type="file" accept="image/*" onChange={onSelectFile} />
-                </Row>
-              </Modal.Body>
-              <Modal.Footer>
-                <Button variant="secondary" onClick={close}>
-                  {t("operationDialog.cancel")}
-                </Button>
-              </Modal.Footer>
-            </>
-          );
-        } else if (state === "crop") {
-          if (fileUrl == null) {
-            throw new UiLogicError();
-          }
-          return (
-            <>
-              <Modal.Body className="container">
-                <Row className="justify-content-center">
-                  <ImageCropper
-                    clip={clip}
-                    onChange={setClip}
-                    imageUrl={fileUrl}
-                    imageElementCallback={setCropImgElement}
-                  />
-                </Row>
-                <Row>{t("userPage.dialogChangeAvatar.prompt.crop")}</Row>
-              </Modal.Body>
-              <Modal.Footer>
-                <Button variant="secondary" onClick={close}>
-                  {t("operationDialog.cancel")}
-                </Button>
-                <Button variant="secondary" onClick={onCropPrevious}>
-                  {t("operationDialog.previousStep")}
-                </Button>
-                <Button
-                  color="primary"
-                  onClick={onCropNext}
-                  disabled={
-                    cropImgElement == null || clip == null || clip.width === 0
-                  }
-                >
-                  {t("operationDialog.nextStep")}
-                </Button>
-              </Modal.Footer>
-            </>
-          );
-        } else if (state === "processcrop") {
-          return (
-            <>
-              <Modal.Body className="container">
-                <Row>
-                  {t("userPage.dialogChangeAvatar.prompt.processingCrop")}
-                </Row>
-              </Modal.Body>
-              <Modal.Footer>
-                <Button variant="secondary" onClick={close}>
-                  {t("operationDialog.cancel")}
-                </Button>
-                <Button variant="secondary" onClick={onPreviewPrevious}>
-                  {t("operationDialog.previousStep")}
-                </Button>
-              </Modal.Footer>
-            </>
-          );
-        } else if (state === "preview") {
-          return (
-            <>
-              <Modal.Body className="container">
-                {createPreviewRow()}
-                <Row>{t("userPage.dialogChangeAvatar.prompt.preview")}</Row>
-              </Modal.Body>
-              <Modal.Footer>
-                <Button variant="secondary" onClick={close}>
-                  {t("operationDialog.cancel")}
-                </Button>
-                <Button variant="secondary" onClick={onPreviewPrevious}>
-                  {t("operationDialog.previousStep")}
-                </Button>
-                <Button variant="primary" onClick={upload}>
-                  {t("userPage.dialogChangeAvatar.upload")}
-                </Button>
-              </Modal.Footer>
-            </>
-          );
-        } else if (state === "uploading") {
-          return (
-            <>
-              <Modal.Body className="container">
-                {createPreviewRow()}
-                <Row>{t("userPage.dialogChangeAvatar.prompt.uploading")}</Row>
-              </Modal.Body>
-              <Modal.Footer></Modal.Footer>
-            </>
-          );
-        } else if (state === "success") {
-          return (
-            <>
-              <Modal.Body className="container">
-                <Row className="p-4 text-success">
-                  {t("operationDialog.success")}
-                </Row>
-              </Modal.Body>
-              <Modal.Footer>
-                <Button variant="success" onClick={close}>
-                  {t("operationDialog.ok")}
-                </Button>
-              </Modal.Footer>
-            </>
-          );
-        } else {
-          return (
-            <>
-              <Modal.Body className="container">
-                {createPreviewRow()}
-                <Row className="text-danger">{trueMessage}</Row>
-              </Modal.Body>
-              <Modal.Footer>
-                <Button variant="secondary" onClick={close}>
-                  {t("operationDialog.cancel")}
-                </Button>
-                <Button variant="primary" onClick={upload}>
-                  {t("operationDialog.retry")}
-                </Button>
-              </Modal.Footer>
-            </>
-          );
-        }
-      })()}
-    </Modal>
-  );
-};
-
-export default ChangeAvatarDialog;
diff --git a/FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx b/FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx
deleted file mode 100644
index f319ac37..00000000
--- a/FrontEnd/src/app/views/user/ChangeNicknameDialog.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-import OperationDialog from "../common/OperationDialog";
-
-export interface ChangeNicknameDialogProps {
-  open: boolean;
-  close: () => void;
-  onProcess: (newNickname: string) => Promise<void>;
-}
-
-const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = (props) => {
-  return (
-    <OperationDialog
-      open={props.open}
-      title="userPage.dialogChangeNickname.title"
-      inputScheme={[
-        { type: "text", label: "userPage.dialogChangeNickname.inputLabel" },
-      ]}
-      onProcess={([newNickname]) => {
-        return props.onProcess(newNickname);
-      }}
-      close={props.close}
-    />
-  );
-};
-
-export default ChangeNicknameDialog;
diff --git a/FrontEnd/src/app/views/user/UserCard.tsx b/FrontEnd/src/app/views/user/UserCard.tsx
index 575ca2c1..b2c94457 100644
--- a/FrontEnd/src/app/views/user/UserCard.tsx
+++ b/FrontEnd/src/app/views/user/UserCard.tsx
@@ -5,16 +5,13 @@ import TimelinePageCardTemplate, {
 } from "../timeline-common/TimelinePageCardTemplate";
 import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate";
 import UserAvatar from "../common/user/UserAvatar";
-import ChangeNicknameDialog from "./ChangeNicknameDialog";
-import { getHttpUserClient } from "@/http/user";
-import ChangeAvatarDialog from "./ChangeAvatarDialog";
 
 const UserCard: React.FC<TimelinePageCardProps> = (props) => {
-  const { timeline, onReload } = props;
+  const { timeline } = props;
 
-  const [dialog, setDialog] = React.useState<
-    "member" | "property" | "avatar" | "nickname" | null
-  >(null);
+  const [dialog, setDialog] = React.useState<"member" | "property" | null>(
+    null
+  );
 
   return (
     <>
@@ -41,16 +38,6 @@ const UserCard: React.FC<TimelinePageCardProps> = (props) => {
             return {
               type: "manage",
               items: [
-                {
-                  type: "button",
-                  text: "timeline.manageItem.nickname",
-                  onClick: () => setDialog("nickname"),
-                },
-                {
-                  type: "button",
-                  text: "timeline.manageItem.avatar",
-                  onClick: () => setDialog("avatar"),
-                },
                 {
                   type: "button",
                   text: "timeline.manageItem.property",
@@ -69,37 +56,6 @@ const UserCard: React.FC<TimelinePageCardProps> = (props) => {
         setDialog={setDialog}
         {...props}
       />
-      {(() => {
-        // TODO: Move this two to settings.
-        if (dialog === "nickname") {
-          return (
-            <ChangeNicknameDialog
-              open
-              close={() => setDialog(null)}
-              onProcess={async (newNickname) => {
-                await getHttpUserClient().patch(timeline.owner.username, {
-                  nickname: newNickname,
-                });
-                onReload();
-              }}
-            />
-          );
-        } else if (dialog === "avatar") {
-          return (
-            <ChangeAvatarDialog
-              open
-              close={() => setDialog(null)}
-              process={async (file) => {
-                await getHttpUserClient().putAvatar(
-                  timeline.owner.username,
-                  file
-                );
-                onReload();
-              }}
-            />
-          );
-        }
-      })()}
     </>
   );
 };
-- 
cgit v1.2.3