who am I

AceJobAgency.client/src/App.tsx

@@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom";
 import DefaultLayout from "./layouts/DefaultLayout";
 import HomePage from "./pages/HomePage";
 import ErrorPage from "./pages/ErrorPage";
+import EditProfilePage from "./pages/EditProfilePage";
 import { getAccessToken } from "./http";
 import MemberPage from "./pages/MemberPage";
 
@@ -15,6 +16,8 @@ export default function App() {
               index
               element={getAccessToken() ? <MemberPage /> : <HomePage />}
             />
+            <Route path="edit" element={<EditProfilePage />} />
+            <Route path="error" element={<ErrorPage />} />
             <Route path="*" element={<ErrorPage />} />
           </Route>
         </Route>

AceJobAgency.client/src/models/user-profile.ts

@@ -4,6 +4,8 @@ export interface UserProfile {
   nationalRegistrationIdentityCardNumber: string;
   firstName: string;
   lastName: string;
+  gender: number;
+  password: string | undefined;
   dateOfBirth: string;
   whoAmI: string;
   resumeName: string;

AceJobAgency.client/src/pages/EditProfilePage.tsx

@@ -0,0 +1,81 @@
+import { Button, Card } from "@heroui/react";
+import { Editor } from "@monaco-editor/react";
+import { useEffect, useState } from "react";
+import http, { getAccessToken } from "../http";
+import { useNavigate } from "react-router-dom";
+import { UserProfile } from "../models/user-profile";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { toast } from "react-toastify";
+
+export default function EditProfilePage() {
+  const [code, setCode] = useState("");
+  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+  const navigate = useNavigate();
+  useEffect(() => {
+    const accessToken = getAccessToken();
+    if (!accessToken) {
+      navigate(-1);
+    }
+    http.get("/User/profile").then((response) => {
+      if (response.status !== 200) {
+        navigate("/error");
+      }
+      setCode((response.data as UserProfile).whoAmI);
+      setUserProfile(response.data);
+    });
+  }, []);
+
+  const handleSaveChanges = () => {
+    var user = userProfile;
+    if (!user) {
+      return;
+    }
+    user.whoAmI = code;
+    user.password = "0000000000000000";
+    http
+      .put("/User/profile", user)
+      .then((response) => {
+        if (response.status === 200) {
+          navigate(-1);
+        }
+      })
+      .catch((error) => {
+        toast.error("Failed to save changes: " + error.message);
+      });
+  };
+
+  return (
+    <div className="absolute w-full flex flex-col">
+      <div className="w-full h-[80vh] flex flex-row justify-evenly gap-2 p-2">
+        <Card className="h-full w-1/2">
+          <Editor
+            className="h-full"
+            defaultLanguage="markdown"
+            theme="vs-dark"
+            value={code}
+            onChange={(value) => {
+              if (!value) {
+                return;
+              }
+              setCode(value);
+            }}
+          />
+        </Card>
+        <Card className="h-full w-1/2 p-4">
+          <Markdown
+            className="prose dark:prose-invert prose-neutral overflow-auto w-full h-full"
+            remarkPlugins={[remarkGfm]}
+          >
+            {code}
+          </Markdown>
+        </Card>
+      </div>
+      <div className="flex flex-row w-full justify-end">
+        <Button color="primary" onPress={handleSaveChanges}>
+          Save changes
+        </Button>
+      </div>
+    </div>
+  );
+}

AceJobAgency.client/src/pages/MemberPage.tsx

@@ -3,6 +3,8 @@ import http, { getAccessToken, logout } from "../http";
 import { useNavigate } from "react-router-dom";
 import { UserProfile } from "../models/user-profile";
 import { Button, Card, Divider, Input } from "@heroui/react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
 export default function MemberPage() {
   const accessToken = getAccessToken();
@@ -56,10 +58,17 @@ export default function MemberPage() {
             </div>
             <div className="flex flex-col gap-2">
               <p>Who am I</p>
-              <Card className="p-4 bg-neutral-500/20 h-full">
-                {userProfile.whoAmI.length > 0
-                  ? userProfile.whoAmI
-                  : "You have not wrote anything about yourself."}
+              <Card className="p-4 bg-neutral-500/20 h-full min-w-96">
+                {userProfile.whoAmI.length > 0 ? (
+                  <Markdown
+                    className="prose dark:prose-invert prose-neutral overflow-auto w-full h-full"
+                    remarkPlugins={[remarkGfm]}
+                  >
+                    {userProfile.whoAmI}
+                  </Markdown>
+                ) : (
+                  "You have not wrote anything about yourself."
+                )}
               </Card>
             </div>
           </div>
@@ -68,7 +77,14 @@ export default function MemberPage() {
             <Button variant="light" color="danger" onPress={logout}>
               Log out
             </Button>
-            <Button color="primary">Edit profile</Button>
+            <Button
+              color="primary"
+              onPress={() => {
+                navigate("edit");
+              }}
+            >
+              Edit profile
+            </Button>
           </div>
         </Card>
       )}