From 7f073e0e63a80c11001724d55f8cc22816962678 Mon Sep 17 00:00:00 2001
From: Yue Fung Lee <yuefungalt@gmail.com>
Date: Thu, 30 Nov 2023 03:01:24 -0500
Subject: [PATCH] Finished minimal profile page

---
 frontend/src/index.sass        |  4 ++++
 frontend/src/logic/sdk.ts      | 20 --------------------
 frontend/src/pages/Profile.tsx | 20 +++++++++++++++++---
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/frontend/src/index.sass b/frontend/src/index.sass
index 02bee22..50af400 100644
--- a/frontend/src/index.sass
+++ b/frontend/src/index.sass
@@ -57,6 +57,10 @@ button.green
   background-color: $c-green
   box-shadow: $shadow-width $c-green-shadow
 
+button.red
+  background-color: $c-red
+  box-shadow: $shadow-width $c-red-shadow
+
 button.white
   background-color: white
   color: $c-default-text
diff --git a/frontend/src/logic/sdk.ts b/frontend/src/logic/sdk.ts
index 4b3e804..3188f8d 100644
--- a/frontend/src/logic/sdk.ts
+++ b/frontend/src/logic/sdk.ts
@@ -64,26 +64,6 @@ export function getUsername()
   return db.user
 }
 
-// export function recordAudio(callback: (audio: HTMLAudioElement) => void) {
-//   let chunks = [] as any;
-//   let mediaRecorder = null as any;
-
-//   navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
-//     mediaRecorder = new MediaRecorder(stream)
-//     mediaRecorder.ondataavailable = (e: any) => {
-//       chunks.push(e.data)
-//     }
-
-//     mediaRecorder.onstop = (e: any) => {
-//       const blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' })
-//       chunks = []
-//       const audioURL = window.URL.createObjectURL(blob)
-//       const audio = new Audio(audioURL)
-//       callback(audio);
-//     }
-//   })
-// }
-
 export interface CharacterChatCreationRequest 
 {
   character: string;
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index c22d036..13cb052 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,11 +1,25 @@
 import NavBar from "../components/NavBar"
+import { getUsername, getLanguage, logout } from "../logic/sdk"
+import { useNavigate } from "react-router-dom"
 
 export default function Profile() {
 
+    const username = getUsername();
+    const navigate = useNavigate();
+
+    function handleLougout() {
+        logout();
+        console.log("Logged out");
+        navigate('/')
+    }
+
     return (
-        <div className="flex flex-col h-screen">
-            <div className="flex flex-col flex-1">
-                <h1>Profile Page</h1>
+        <div className="v-layout p-10">
+            <div className="flex flex-col flex-1 h-full">
+                <h1 className="text-center">Profile</h1>
+                <h2 className="text-center">Username: {username}</h2>
+                <h2 className="text-center">Currently Learning: {getLanguage(username)}</h2>
+                <button className="red mt-auto mb-12" onClick={() => handleLougout()}>Logout</button>
             </div>
             <NavBar />
         </div>