111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import React, { use, useEffect } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { Link, useParams } from 'react-router-dom';
|
|
import { FaCog } from 'react-icons/fa';
|
|
import { IoIosNotifications } from 'react-icons/io';
|
|
import { RootState } from '../../store/store';
|
|
import { UserState } from '../../store/slices/userSlice';
|
|
import api from '../../config/api';
|
|
|
|
// const fetchAccountData = async (accountId: string) => {
|
|
// try {
|
|
// if(!accountId) return null;
|
|
// const response = await api.get(`/api/accounts/${accountId}`);
|
|
// return response.data;
|
|
// } catch (error) {
|
|
// console.error("Error fetching account data:", error);
|
|
// throw error;
|
|
// }
|
|
// }
|
|
|
|
// const fetchTransactionData = async (accountId: string, transactionId: string) => {
|
|
// try {
|
|
// if(!accountId || !transactionId) return null;
|
|
// const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`);
|
|
// return response.data;
|
|
// } catch (error) {
|
|
// console.error("Error fetching account data:", error);
|
|
// throw error;
|
|
// }
|
|
// }
|
|
|
|
|
|
interface AccountNavProps {
|
|
accountName: string | null;
|
|
transactionName: string | null;
|
|
}
|
|
|
|
const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transactionName = null }) => {
|
|
const user: UserState = useSelector((state: RootState) => state.user);
|
|
|
|
const initials = user.username
|
|
? user.username
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.slice(0, 2)
|
|
.toUpperCase()
|
|
: 'U';
|
|
|
|
// useEffect(() => {
|
|
// if (accountId) {
|
|
// api.get(`/api/accounts/${accountId}`)
|
|
// .then(response => {
|
|
// // Handle the account data if needed
|
|
// console.log(response.data, "Line 29");
|
|
// })
|
|
// .catch(error => {
|
|
// console.error("Error fetching account data:", error);
|
|
// });
|
|
// }
|
|
// }, [accountId, transactionId]);
|
|
|
|
return (
|
|
<header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm border-gray-200">
|
|
|
|
<h1 className="text-md font-medium text-gray-800 capitalize">
|
|
Account
|
|
{accountName ? ` > ${accountName}` : ''}
|
|
{transactionName ? ` > ${transactionName}` : ''}
|
|
</h1>
|
|
|
|
{/* <h1 className="text-md font-medium text-gray-800 capitalize">Account</h1> */}
|
|
|
|
<div className="flex items-center">
|
|
{/* Notification + Settings with smaller gap */}
|
|
<div className="flex items-center">
|
|
<button
|
|
aria-label="Notifications"
|
|
className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
|
|
>
|
|
<IoIosNotifications className="text-xl" />
|
|
</button>
|
|
|
|
<Link
|
|
to="/settings"
|
|
aria-label="Settings"
|
|
className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
|
|
>
|
|
<FaCog className="text-sm" />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Avatar with separate spacing */}
|
|
<div className="w-9 h-9 ms-3 rounded-full overflow-hidden bg-[var(--primary)] flex items-center justify-center text-white font-semibold text-sm">
|
|
{user.picture ? (
|
|
<img
|
|
src={user.picture}
|
|
alt="User avatar"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
initials
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default AccountNav;
|