Merge pull request #26 from HereEast/fix/router

fix: Protected routes

client/src/components/Entry.tsx

@@ -26,6 +26,7 @@ export function Entry({ entry }: EntryProps) {
 
   const isValidEntry = entry.day <= today.day && entry.day >= 1;
 
+  // Handle click
   function handleClick() {
     if (isValidEntry) {
       const id = selectedEntryId === entry._id ? null : entry._id;
@@ -39,6 +40,11 @@ export function Entry({ entry }: EntryProps) {
       className={cn(
         "flex size-6 shrink-0 items-center justify-center rounded-[4px] bg-stone-300/50 text-sm",
         currentRating > 0 && statusColor(currentRating),
+        // (currentRating === 1 || currentRating === 2) && "bg-stone-400/50",
+        // (currentRating === 3 || currentRating === 4) && "bg-stone-400",
+        // (currentRating === 5 || currentRating === 6) && "bg-stone-500",
+        // (currentRating === 7 || currentRating === 8) && "bg-stone-600",
+        // (currentRating === 9 || currentRating === 10) && "bg-stone-800",
         isValidEntry && "hover:border hover:border-brown-600",
         selectedEntryId === entry._id
           ? "border border-brown-600"

client/src/components/layouts/Header.tsx

@@ -1,28 +1,32 @@
 import Link from "next/link";
-// import { useRouter } from "next/router";
+import { useRouter } from "next/router";
 
 import { Button } from "../ui/Button";
 import { useAuthContext } from "~/hooks";
 
 export function Header() {
-  // const router = useRouter();
+  const router = useRouter();
 
   const { user, isAuth, setIsAuth } = useAuthContext();
 
   // Log out
   function handleLogout() {
     localStorage.removeItem("token");
     setIsAuth(false);
+
+    router.replace("/");
   }
 
   return (
     <div className="fixed flex h-16 w-full items-center justify-between bg-stone-300 px-10">
-      <h1 className="font-medium">Habit Tracker</h1>
+      <h1 className="font-medium hover:opacity-50">
+        <Link href="/">Habit Tracker</Link>
+      </h1>
       <div className="flex items-center gap-2">
         <div>
           {isAuth ? (
             <div className="flex items-center gap-4">
-              <span className="text-sm font-medium">👋 {user}</span>
+              {user && <span className="text-sm font-medium">👋 {user}</span>}
               <Button onClick={handleLogout}>Log out</Button>
             </div>
           ) : (

client/src/components/layouts/index.ts

@@ -1,6 +1,5 @@
 export * from "./Timeline";
 export * from "./Layout";
-export * from "./AuthLayout";
 export * from "./Header";
 export * from "./Footer";
 export * from "./Login";

client/src/pages/[username].tsx

@@ -0,0 +1,24 @@
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+import { Timeline } from "~/components/layouts";
+import { MonthContextProvider } from "~/context";
+import { useAuthContext } from "~/hooks";
+
+export default function TimelinePage() {
+  const router = useRouter();
+
+  const { isAuth, isAuthLoading } = useAuthContext();
+
+  useEffect(() => {
+    if (!isAuthLoading && !isAuth) {
+      router.replace("/login");
+    }
+  }, [isAuth, router, isAuthLoading]);
+
+  return (
+    <MonthContextProvider>
+      <Timeline />
+    </MonthContextProvider>
+  );
+}

client/src/pages/login.tsx

@@ -7,13 +7,13 @@ import { Login } from "~/components/layouts";
 export default function LoginPage() {
   const router = useRouter();
 
-  const { isAuth, isAuthLoading } = useAuthContext();
+  const { user, isAuthLoading } = useAuthContext();
 
   useEffect(() => {
-    if (!isAuthLoading && isAuth) {
-      router.replace("/");
+    if (!isAuthLoading && user) {
+      router.replace(`/${user}`);
     }
-  }, [isAuth, router, isAuthLoading]);
+  }, [user, router, isAuthLoading]);
 
   return <Login />;
 }

client/src/pages/register.tsx

@@ -7,13 +7,13 @@ import { Register } from "~/components/layouts/Register";
 export default function RegisterPage() {
   const router = useRouter();
 
-  const { isAuth } = useAuthContext();
+  const { user, isAuthLoading } = useAuthContext();
 
   useEffect(() => {
-    if (isAuth) {
-      router.replace("/");
+    if (!isAuthLoading && user) {
+      router.replace(`/${user}`);
     }
-  }, [isAuth, router]);
+  }, [user, router, isAuthLoading]);
 
   return <Register />;
 }

client/src/utils/handlers.ts

@@ -33,26 +33,20 @@ export function handleRequestError(err: Error) {
 
 // Status color
 export const statusColor = (status: Status): string => {
-  switch (status) {
-    case 0:
-      return "bg-stone-300/50";
-    case 1:
-    case 2:
-      return "bg-stone-400/50";
-    case 3:
-    case 4:
-      return "bg-stone-400";
-    case 5:
-    case 6:
-      return "bg-stone-500";
-    case 7:
-    case 8:
-      return "bg-stone-600";
-    case 9:
-    case 10:
-      return "bg-stone-800";
-    default:
-      return "bg-stone-300/50";
+  if (status === 0) {
+    return "bg-stone-300/50";
+  } else if (status === 1 || status === 2) {
+    return "bg-stone-400/50";
+  } else if (status === 3 || status === 4) {
+    return "bg-stone-400";
+  } else if (status === 5 || status === 6) {
+    return "bg-stone-500";
+  } else if (status === 7 || status === 8) {
+    return "bg-stone-600";
+  } else if (status === 9 || status === 10) {
+    return "bg-stone-800";
+  } else {
+    return "bg-stone-300/50";
   }
 };