PRA#01_MarcFernandez-ComponentsFrontendDevelopment-2

frontend/pronunciationAppFront/src/App.jsx

@@ -1,19 +1,20 @@
 import './App.css'
 import Cards from "./Cards.jsx"
-import Header from "./Hero.jsx";
+import Header from "./Header.jsx";
+import UserAvatar from './UserAvatar.jsx';
 
-function App() {
+export default function App() {
 
 
   return (
     <>
+      <UserAvatar />
+
       <h2>Welcome to PronunciationApp</h2>
 
       <Header />
 
       <Cards />
     </>
   );
-}
-
-export default App
+}

frontend/pronunciationAppFront/src/Hero.jsx → frontend/pronunciationAppFront/src/Header.jsx

@@ -1,4 +1,4 @@
-export default function HeroSection(){
+export default function HeaderSection(){
 
 
 return (

frontend/pronunciationAppFront/src/UserAvatar.jsx

@@ -0,0 +1,26 @@
+import { Avatar } from "@mui/material";
+import { fetchUser } from "./data-api";
+import { useState, useEffect } from "react";
+
+export default function UserAvatar() {
+    const [user, setUser] = useState({});
+
+    useEffect(() => {
+        const getUser = async () => {
+            try {
+                const data = await fetchUser ();
+                setUser(data);
+            } catch (error) {
+                console.error("Failed to fetch user:", error);
+            }
+        };
+
+        getUser();
+    }, []);
+
+    return(
+        <>
+            <Avatar sx={{ width: 56, height: 56 }} >{user.name}</Avatar>
+        </>
+    );
+}

frontend/pronunciationAppFront/src/data-api.js

@@ -1,7 +1,7 @@
 // api.js
 import axios from "axios";
 
-const BASE_URL = "https://a387bb02-2aa0-41a6-b8f7-9cc5247b9d5f.mock.pstmn.io";
+const BASE_URL = "https://c6e298f1-9bc6-4008-b85e-684c309e8250.mock.pstmn.io";
 
 export const fetchWords = async () => {
   try {
@@ -12,3 +12,13 @@ export const fetchWords = async () => {
     throw error;
   }
 };
+
+export const fetchUser = async () => {
+  try {
+    const response = await axios.get(`${BASE_URL}/user`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching user:", error);
+    throw error;
+  }
+}