Improved the whole user usage

src/pages/api/user.ts

@@ -13,16 +13,6 @@ export default withIronSessionApiRoute(user, sessionOptions);
 
 async function user(req: NextApiRequest, res: NextApiResponse) {
 	if (req.session.user) {
-		if (!auth.currentUser) {
-			res.status(401).json(undefined);
-			return;
-		}
-
-		if (req.session.user.id !== auth.currentUser.uid) {
-			res.status(401).json(undefined);
-			return;
-		}
-
 		const docUser = await getDoc(doc(db, "users", req.session.user.id));
 		if (!docUser.exists()) {
 			res.status(401).json(undefined);

src/pages/history.tsx

@@ -13,6 +13,9 @@ import {Divider} from "primereact/divider";
 import useUser from "@/hooks/useUser";
 import {Timeline} from "primereact/timeline";
 import moment from "moment";
+import {AutoComplete} from "primereact/autocomplete";
+import useUsers from "@/hooks/useUsers";
+import {Dropdown} from "primereact/dropdown";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -33,17 +36,18 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-export default function History() {
+export default function History({user}: {user: User}) {
+	const [selectedUser, setSelectedUser] = useState<User>(user);
 	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
 
-	const {stats, isLoading} = useStats();
-	const {user} = useUser({redirectTo: "/login"});
+	const {users, isLoading: isUsersLoading} = useUsers();
+	const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
 
 	useEffect(() => {
-		if (stats && !isLoading) {
+		if (stats && !isStatsLoading) {
 			setGroupedStats(groupByDate(stats));
 		}
-	}, [stats, isLoading]);
+	}, [stats, isStatsLoading]);
 
 	const formatTimestamp = (timestamp: string) => {
 		const date = moment(parseInt(timestamp));
@@ -62,7 +66,7 @@ export default function History() {
 		return (
 			<div className="flex flex-col gap-2">
 				<span>{formatTimestamp(timestamp)}</span>
-				<div className="bg-white p-4 rounded-xl mb-4 flex flex-col gap-2">
+				<div className="bg-white p-4 rounded-xl mb-4 flex flex-col gap-2 drop-shadow-lg">
 					<span>
 						Modules:{" "}
 						{formatModuleTotalStats(dateStats)
@@ -89,18 +93,17 @@ export default function History() {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			{user && (
-				<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black">
-					<Navbar profilePicture={user.profilePicture} />
-					<div className="w-full h-full p-4 relative flex flex-col gap-8">
-						{groupedStats && !isLoading && (
-							<div className="flex gap-4">
-								<Timeline value={Object.keys(groupedStats)} content={customContent} />
-							</div>
-						)}
-					</div>
-				</main>
-			)}
+			<main className="w-full h-full min-h-[100vh] flex flex-col bg-neutral-100 text-black">
+				<Navbar profilePicture={user.profilePicture} />
+				<div className="w-fit self-center">
+					{!isUsersLoading && (
+						<Dropdown value={selectedUser} options={users} optionLabel="name" onChange={(e) => setSelectedUser(e.target.value)} />
+					)}
+				</div>
+				<div className="w-2/3 h-full p-4 relative flex flex-col gap-8">
+					{groupedStats && !isStatsLoading && <Timeline value={Object.keys(groupedStats)} content={customContent} />}
+				</div>
+			</main>
 		</>
 	);
 }

src/pages/stats.tsx

@@ -40,8 +40,6 @@ export default function Stats({user}: {user: User}) {
 	const {users, isLoading} = useUsers();
 	const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
 
-	useEffect(() => console.log({stats}), [stats]);
-
 	const search = (event: {query: string}) => {
 		setItems(event.query ? users.filter((x) => x.name.startsWith(event.query)) : users);
 	};