feat: add change user name function

GDGVIT · Dec 16, 2024 · cafb7a5 · cafb7a5
1 parent 87bd08b
commit cafb7a5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/ao3 webpages/components/Sidebar/Sidebar.jsx b/ao3 webpages/components/Sidebar/Sidebar.jsx
@@ -90,6 +90,35 @@ const Sidebar = () => {
             setActiveItem(item);
             navigate('/dashboard');
         }
+        else if(item === 'Settings'){
+            const Username = async () => {
+                try {
+                    const accessToken = localStorage.getItem('accessToken');
+                    const refreshToken = localStorage.getItem('refreshToken');
+                  const response = await fetch('https://ao3-chrome-extension-backend.onrender.com/auth/userdetail', {
+                    method: 'GET',
+                    headers: {
+                      'Content-Type': 'application/json',
+                      'Tokens': JSON.stringify({ accessToken, refreshToken }),
+                    },
+                  });
+
+                  if (response.ok) {
+                    const data = await response.json();
+                    localStorage.setItem('username', data.username);
+                    localStorage.setItem('email', data.email);
+                    navigate('/settings');
+                  } else {
+                    // Tokens are invalid
+                    console.log('Token validation failed:', response.status);
+                    alert('Token validation failed please login');
+                  }
+                } catch (error) {
+                  console.error('Error during token validation:', error);
+                }
+              };
+            Username();
+        }
         else {
             setActiveItem(item);
             navigate(`/${item.toLowerCase()}`);

diff --git a/ao3 webpages/src/pages/settings.jsx b/ao3 webpages/src/pages/settings.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Edit2, Heart } from 'lucide-react';
 import Sidebar from '../../components/Sidebar/Sidebar';
 const SettingsPage = () => {
@@ -7,6 +7,18 @@ const SettingsPage = () => {
   const [appearance, setAppearance] = useState('light');
   const [isFlipping, setIsFlipping] = useState(false);
 
+  useEffect(() => {
+    const storedUsername = localStorage.getItem('username');
+    const storedEmail = localStorage.getItem('email');
+
+    if (storedUsername) {
+      setUsername(storedUsername);
+    }
+    if (storedEmail) {
+      setEmail(storedEmail);
+    }
+  }, []);
+
   const styles = {
     body: {
       backgroundColor: '#f8f8f8',