@ieltsrealtest/ui
Version:
Reusable UI components for IELTS Real Test platform, built with React and TypeScript.
77 lines (76 loc) • 4.09 kB
JavaScript
/* eslint-disable @typescript-eslint/no-unused-vars */
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import NavBar from "./Navbar";
import DropdownMenu from "./DropdownMenu";
import { useState, useEffect } from "react";
import Image from "next/image";
const logo = "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/Logo+ngang_.png";
const Header = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [userName, setUserName] = useState("");
const [isLoading, setIsLoading] = useState(false);
const fetchUserDetail = async (userId) => {
try {
const response = await fetch(`https://api.youready.net/ielts/user/api/profile/UserDataView/?user_id=${userId}`, {
method: "GET",
headers: { "Content-Type": "application/json" },
credentials: "include",
});
const data = await response.json();
if (response.ok) {
const fullName = `${data.data[0].first_name} ${data.data[0].last_name}`;
setUserName(fullName);
setIsLoggedIn(true); // Set logged in state to true
setIsLoading(false);
}
}
catch (error) {
setIsLoggedIn(false); // Set logged in state to false on error
setIsLoading(true);
}
};
// useEffect để gọi API decode_token và lấy user_id
useEffect(() => {
const fetchUserIdAndData = async () => {
try {
// Gọi API decode_token để lấy user_id
const res = await fetch(`https://api.youready.net/ielts/user/api/auth/get_user_id/`, {
method: "GET",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
});
const data = await res.json();
if (res.ok && data.user_id) {
// Sau khi lấy được user_id, gọi API chính thức
fetchUserDetail(data.user_id);
setIsLoggedIn(true); // Set logged in state to true
setIsLoading(false);
}
else {
setIsLoggedIn(false); // Set logged in state to false if user_id not found
setIsLoading(true);
}
}
catch (error) {
setIsLoggedIn(false); // Set logged in state to false on error
setIsLoading(true);
console.error(error);
}
};
fetchUserIdAndData();
}, []);
return (_jsx("div", { children: _jsx("header", { className: "bg-[#FFF9F1] shadow-md py-0 px-8 text-black", children: _jsxs("div", { className: "mx-auto flex justify-between items-center", children: [_jsx("div", { className: "text-xl font-bold w-1/3", children: _jsx(Image, { src: logo, alt: "Logo", width: 140, height: 60 }) }), _jsx(NavBar, {}), _jsx("div", { className: "w-1/3 flex justify-end relative", children: isLoggedIn ? (isLoading ? (_jsx("div", { className: "w-full flex items-center justify-end text-gray-500", children: "Loading..." }))
: (_jsx(DropdownMenu, { items: [
{ label: "Profile", path: "profile" },
{ label: "Payment", path: "payment" },
{ label: "Performance", path: "performance" },
// { label: 'Logout', path: 'auth/signin' },
], userName: userName }))) : (_jsx("button", { className: "border bg-red-600 text-white px-4 py-1 rounded-md transition duration-200 hover:bg-red-700", onClick: () => {
window.location.href =
"https://www.youready.net/ielts/user/pages/auth/signin/";
}, children: "SIGN IN" })) })] }) }) }));
};
export default Header;