From 4b5c99c654355602278f1f331b53d121e8b035ec Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 1 May 2023 19:49:56 +0100
Subject: [PATCH] Improved the whole user usage

---
 src/components/Navbar.tsx |  2 +-
 src/hooks/useUser.tsx     |  7 ++-----
 src/pages/api/user.ts     | 10 ----------
 src/pages/history.tsx     | 39 +++++++++++++++++++++------------------
 src/pages/stats.tsx       |  2 --
 5 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 3f9672a7..6b100da3 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -43,7 +43,7 @@ export default function Navbar({profilePicture, timer, showExamEnd = false}: Pro
 			items: [
 				{label: "List", icon: "pi pi-fw pi-users", url: "/users"},
 				{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/stats"},
-				{label: "History", icon: "pi pi-fw pi-chart-pie", url: "/history"},
+				{label: "History", icon: "pi pi-fw pi-history", url: "/history"},
 			],
 		},
 		{
diff --git a/src/hooks/useUser.tsx b/src/hooks/useUser.tsx
index f6a27519..187334f6 100644
--- a/src/hooks/useUser.tsx
+++ b/src/hooks/useUser.tsx
@@ -7,15 +7,12 @@ import axios from "axios";
 const fetcher = (url: string) => axios.get(url).then((res) => res.data);
 
 export default function useUser({redirectTo = "", redirectIfFound = false} = {}) {
-	const {data: user, mutate: mutateUser, isLoading} = useSWR<User>("/api/user", fetcher);
+	const {data: user, mutate: mutateUser, isLoading, error} = useSWR<User>("/api/user", fetcher);
 
 	useEffect(() => {
 		// if no redirect needed, just return (example: already on /dashboard)
 		// if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
 		if (!redirectTo || !user) return;
-		if (redirectTo && !user) {
-			Router.push(redirectTo);
-		}
 
 		if (
 			// If redirectTo is set, redirect if the user was not found.
@@ -25,7 +22,7 @@ export default function useUser({redirectTo = "", redirectIfFound = false} = {})
 		) {
 			Router.push(redirectTo);
 		}
-	}, [user, redirectIfFound, redirectTo]);
+	}, [user, redirectIfFound, redirectTo, error]);
 
 	return {user, mutateUser, isLoading};
 }
diff --git a/src/pages/api/user.ts b/src/pages/api/user.ts
index a7b28086..4645bf8a 100644
--- a/src/pages/api/user.ts
+++ b/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);
diff --git a/src/pages/history.tsx b/src/pages/history.tsx
index d819d035..231da8a5 100644
--- a/src/pages/history.tsx
+++ b/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>
 		</>
 	);
 }
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index b90bdf6b..5b819290 100644
--- a/src/pages/stats.tsx
+++ b/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);
 	};