Minor bugfix

src/app/components/Navbar.tsx

@@ -19,6 +19,7 @@ import {
   Toolbar,
   Tooltip,
 } from '@mui/material';
+import { AppBarProps} from '@mui/material/AppBar';
 import {useMediaQuery, useTheme} from '@mui/material';
 import { styled } from '@mui/material/styles';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -32,7 +33,7 @@ import { auth } from '../config/firebaseConfig';
 import { useAuth } from '../context/AuthContext';
 import { User } from '../interface';
 import { DEFAULT_AVATAR, FB_URL } from '../constants';
-import { useUserData } from '../hooks/useUserData.ts';
+import { useUserData } from '../hooks/useUserData';
 
 // Hamburger Menu for small screens
 const appRoutes: string[] = [
@@ -62,7 +63,7 @@ function ProfileMenu() {
 
   console.log("User: ", user);
   // handlers
-  const handleClick = (e: React.MouseEvevnt<HTMLElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(e.currentTarget);
   };
 
@@ -144,7 +145,7 @@ function ProfileMenu() {
 }
 
 
-const FlatAppBar = styled(AppBar)(() => ({
+const FlatAppBar = styled(AppBar)<AppBarProps>(() => ({
   boxShadow: 'none',
 }));
 

src/app/hooks/useAuthContext.tsx

@@ -24,7 +24,7 @@ export const useAuth = () => {
   if (!context) {
     throw new Error("useAuth must be used within an AuthProvider");
   }
-  return useMemo(() => context, [context.uid, context.isLog]);
+  return useMemo(() => context, [context.uid, context.isLoggedIn]);
 };
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {

src/app/hooks/useUserData.ts

@@ -2,16 +2,16 @@
 
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-import { useAuth } from './hooks/useAuthContext';
+import { useAuth } from './useAuthContext';
 import { User } from '../interface';
 import { FB_URL, DEFAULT_AVATAR } from '../constants';
 
 interface UserData {
-  user: User,
+  user: User | null,
   loading: boolean
 };
 
-export function useUserData(uid: string): UserData {
+export function useUserData(uid: string | null): UserData {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   useEffect(() => {

src/app/profile/components/Goal.tsx

@@ -9,7 +9,7 @@ import {
 import { useRouter } from 'next/navigation';
 import AddTaskIcon from '@mui/icons-material/AddTask';
 import EditIcon from '@mui/icons-material/Edit';
-import { User } from '../_interface';
+import { User } from '../../interface';
 import { getDatabase, ref, get } from 'firebase/database'; // Import Firebase to fetch total savings
 import { useAuth } from '@/app/context/AuthContext';
 
@@ -30,7 +30,7 @@ export function UserMonthGoal({ user }: ProfileGoalProps) {
 
       try {
         const response = await fetch(`/api/savings/${uid}`);
-        
+
         if (!response.ok) {
           console.error("Error fetching savings from API:", response.status);
           return;

src/app/profile/page.tsx

@@ -23,19 +23,18 @@ import axios from "axios";
 import { useAuth } from "../context/AuthContext";
 import { auth } from "../config/firebaseConfig";
 import MainLayout from "../layouts/MainLayout";
+import Animation from '../components/Animation';
+import { UserAvatar } from './components/Avatar';
 import Castle from "../components/Castle";
 import {
   UserEmail,
   UserGender,
   UserName,
   UserPhone,
 } from './components/Inputs';
-import { UserAvatar } from './components/Avatar';
 import { UserMonthGoal } from './components/Goal';
-import { FB_URL } from '../constants';
-import { AVATARS, DUSER } from './_constants';
-import { User, UserProfileProps } from "./_interface";
-import Animation from "../components/Animation";
+import { FB_URL, AVATARS, DUSER } from '../constants';
+import { User, UserProfileProps } from "../interface";
 
 // styles
 const AvatarButton = styled(Button)(() => ({
@@ -189,7 +188,7 @@ function ProfilePage() {
           // Fetch animation preference from localStorage
           const savedShowAnimation = localStorage.getItem('showAnimation');
           setShowAnimation(savedShowAnimation === null ? true : JSON.parse(savedShowAnimation));
-  
+
         } catch (error) {
           console.error("Error fetching user data:", error);
           setLoading(false);