feat: implement edit userinfo

web/src/pages/Account.tsx

@@ -0,0 +1,37 @@
+import { Button } from "@mui/joy";
+import { useState } from "react";
+import { useAppSelector } from "../stores";
+import ChangePasswordDialog from "../components/ChangePasswordDialog";
+import EditUserinfoDialog from "../components/EditUserinfoDialog";
+
+const Account: React.FC = () => {
+  const user = useAppSelector((state) => state.user).user as User;
+  const [showEditUserinfoDialog, setShowEditUserinfoDialog] = useState<boolean>(false);
+  const [showChangePasswordDialog, setShowChangePasswordDialog] = useState<boolean>(false);
+
+  return (
+    <>
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+        <p className="text-3xl my-2">{user.nickname}</p>
+        <p className="leading-8 flex flex-row justify-start items-center">
+          <span className="mr-3 text-gray-500 font-mono">Email: </span>
+          {user.email}
+        </p>
+        <div className="flex flex-row justify-start items-center gap-2">
+          <Button variant="outlined" color="neutral" onClick={() => setShowEditUserinfoDialog(true)}>
+            Edit
+          </Button>
+          <Button variant="outlined" color="neutral" onClick={() => setShowChangePasswordDialog(true)}>
+            Change password
+          </Button>
+        </div>
+      </div>
+
+      {showEditUserinfoDialog && <EditUserinfoDialog onClose={() => setShowEditUserinfoDialog(false)} />}
+
+      {showChangePasswordDialog && <ChangePasswordDialog onClose={() => setShowChangePasswordDialog(false)} />}
+    </>
+  );
+};
+
+export default Account;

web/src/pages/Auth.tsx

@@ -14,10 +14,7 @@ const Auth: React.FC = () => {
   const actionBtnLoadingState = useLoading(false);
 
   useEffect(() => {
-    if (userService.getState().user) {
-      navigate("/");
-      return;
-    }
+    userService.doSignOut();
   }, []);
 
   const handleEmailInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {

web/src/pages/Home.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { userService, shortcutService } from "../services";
+import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
@@ -13,7 +12,6 @@ interface State {
 }
 
 const Home: React.FC = () => {
-  const navigate = useNavigate();
   const loadingState = useLoading();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
@@ -21,11 +19,6 @@ const Home: React.FC = () => {
   });
 
   useEffect(() => {
-    if (!userService.getState().user) {
-      navigate("/user/auth");
-      return;
-    }
-
     Promise.all([shortcutService.getMyAllShortcuts()]).finally(() => {
       loadingState.setFinish();
     });

web/src/pages/UserDetail.tsx

@@ -1,63 +0,0 @@
-import { Button } from "@mui/joy";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useAppSelector } from "../stores";
-import { userService } from "../services";
-import ChangePasswordDialog from "../components/ChangePasswordDialog";
-
-interface State {
-  showChangePasswordDialog: boolean;
-}
-
-const UserDetail: React.FC = () => {
-  const navigate = useNavigate();
-  const { user } = useAppSelector((state) => state.user);
-  const [state, setState] = useState<State>({
-    showChangePasswordDialog: false,
-  });
-
-  useEffect(() => {
-    if (!userService.getState().user) {
-      navigate("/user/auth");
-      return;
-    }
-  }, []);
-
-  const handleChangePasswordBtnClick = async () => {
-    setState({
-      ...state,
-      showChangePasswordDialog: true,
-    });
-  };
-
-  return (
-    <>
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
-        <p className="text-3xl mt-2 mb-4">{user?.nickname}</p>
-        <p className="leading-8 flex flex-row justify-start items-center">
-          <span className="mr-3 text-gray-500 font-mono">Email: </span>
-          {user?.email}
-        </p>
-        <div className="leading-8 flex flex-row justify-start items-center">
-          <span className="mr-3 text-gray-500 font-mono">Password: </span>
-          <Button variant="soft" onClick={handleChangePasswordBtnClick}>
-            Change
-          </Button>
-        </div>
-      </div>
-
-      {state.showChangePasswordDialog && (
-        <ChangePasswordDialog
-          onClose={() => {
-            setState({
-              ...state,
-              showChangePasswordDialog: false,
-            });
-          }}
-        />
-      )}
-    </>
-  );
-};
-
-export default UserDetail;