From b91d2a45418e75e185e188f9924eb1a19b86d241 Mon Sep 17 00:00:00 2001 From: me Date: Thu, 7 May 2026 15:23:20 +0530 Subject: [PATCH] refactor: whitespace fixes --- frontend/src/App.tsx | 157 ++-- frontend/src/components/Logo.tsx | 101 +-- frontend/src/components/RouteGuards.test.tsx | 200 ++--- frontend/src/components/RouteGuards.tsx | 26 +- frontend/src/pages/Home.tsx | 752 +++++++++---------- 5 files changed, 624 insertions(+), 612 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 9d03587..bf5cc26 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,6 @@ import { lazy, Suspense, useEffect, useRef } from "react"; import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; -import { ProtectedRoute, AutoRedirectRoute } from "./components/RouteGuards"; +import { AutoRedirectRoute, ProtectedRoute } from "./components/RouteGuards"; import SplashScreen from "./components/SplashScreen"; import { ROUTES } from "./config/routes"; import { useAuth } from "./hooks/useAuth"; @@ -16,85 +16,88 @@ const VerifyEmail = lazy(() => import("./pages/VerifyEmail")); const About = lazy(() => import("./pages/About")); export default function App() { - const { initialize, isInitializing } = useAuth(); - const authInitialized = useRef(false); + const { initialize, isInitializing } = useAuth(); + const authInitialized = useRef(false); - useEffect(() => { - if (authInitialized.current) return; - authInitialized.current = true; - initialize().then(); - }, [initialize]); + useEffect(() => { + if (authInitialized.current) return; + authInitialized.current = true; + initialize().then(); + }, [initialize]); - if (isInitializing) { - return ; - } + if (isInitializing) { + return ; + } - return ( - -
- }> - - - - - } /> + return ( + +
+ }> + + + + + } + /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> - - - - } - /> - - - - } - /> - } /> - } /> - } /> - - -
- - ); + + + + } + /> + + + + } + /> + } /> + } /> + } /> + + +
+ + ); } diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx index 80a16f9..1ff3e79 100644 --- a/frontend/src/components/Logo.tsx +++ b/frontend/src/components/Logo.tsx @@ -2,54 +2,63 @@ import { DotIcon } from "@phosphor-icons/react"; import "@fontsource/knewave/400.css"; interface LogoProps { - scale?: number; - type?: "inline" | "mono" | "logo" | null; - ul?: boolean; + scale?: number; + type?: "inline" | "mono" | "logo" | null; + ul?: boolean; } -export default function Logo({ scale = 1, type = null, ul = false }: LogoProps) { - if (type === "inline") { - return ( - - pi. ku - .  - - ); - } - - if (type === "mono") { - return ( - - pi. ku. - - ); - } - - if (type === "logo") { - return ( - Pi. Ku. logo - ); - } - +export default function Logo({ + scale = 1, + type = null, + ul = false, +}: LogoProps) { + if (type === "inline") { return ( -
- Pi - -  Ku - -
+ + pi. ku + .  + ); + } + + if (type === "mono") { + return ( + + pi. ku. + + ); + } + + if (type === "logo") { + return ( + Pi. Ku. logo + ); + } + + return ( +
+ Pi + +  Ku + +
+ ); } diff --git a/frontend/src/components/RouteGuards.test.tsx b/frontend/src/components/RouteGuards.test.tsx index 946d1bb..5cb34a3 100644 --- a/frontend/src/components/RouteGuards.test.tsx +++ b/frontend/src/components/RouteGuards.test.tsx @@ -3,125 +3,125 @@ import { MemoryRouter, Route, Routes } from "react-router-dom"; import { beforeEach, describe, expect, it } from "vitest"; import { mockUser } from "../../test/fixtures/user.fixture"; import { useAuthStore } from "../store/useAuthStore"; -import { ProtectedRoute, AutoRedirectRoute } from "./RouteGuards"; +import { AutoRedirectRoute, ProtectedRoute } from "./RouteGuards"; function renderGuard(ui: React.ReactNode, mountPath: "/protected" | "/public") { - return render( - - - Login Page} /> - Drawer Page} /> - - - - , - ); + return render( + + + Login Page} /> + Drawer Page} /> + + + + , + ); } beforeEach(() => { - useAuthStore.setState({ - accessToken: null, - user: null, - isInitializing: true, - }); + useAuthStore.setState({ + accessToken: null, + user: null, + isInitializing: true, + }); }); describe("ProtectedRoute", () => { - it("should show SplashScreen while auth is initializing", () => { - useAuthStore.setState({ - isInitializing: true, - accessToken: null, - user: null, - }); - renderGuard( - -
Secret
- , - "/protected", - ); - - expect(screen.getByText(/Unsealing/i)).toBeInTheDocument(); - expect(screen.queryByText("Secret")).not.toBeInTheDocument(); + it("should show SplashScreen while auth is initializing", () => { + useAuthStore.setState({ + isInitializing: true, + accessToken: null, + user: null, }); + renderGuard( + +
Secret
+ , + "/protected", + ); - it("should redirect unauthenticated users to /login", () => { - useAuthStore.setState({ - isInitializing: false, - accessToken: null, - user: null, - }); - renderGuard( - -
Secret
- , - "/protected", - ); - expect(screen.getByText("Login Page")).toBeInTheDocument(); - expect(screen.queryByText("Secret")).not.toBeInTheDocument(); + expect(screen.getByText(/Unsealing/i)).toBeInTheDocument(); + expect(screen.queryByText("Secret")).not.toBeInTheDocument(); + }); + + it("should redirect unauthenticated users to /login", () => { + useAuthStore.setState({ + isInitializing: false, + accessToken: null, + user: null, }); + renderGuard( + +
Secret
+ , + "/protected", + ); + expect(screen.getByText("Login Page")).toBeInTheDocument(); + expect(screen.queryByText("Secret")).not.toBeInTheDocument(); + }); - it("should render page for authenticated users", () => { - useAuthStore.setState({ - isInitializing: false, - accessToken: "token", - user: mockUser, - }); - renderGuard( - -
Secret
- , - "/protected", - ); - - expect(screen.getByText("Secret")).toBeInTheDocument(); + it("should render page for authenticated users", () => { + useAuthStore.setState({ + isInitializing: false, + accessToken: "token", + user: mockUser, }); + renderGuard( + +
Secret
+ , + "/protected", + ); + + expect(screen.getByText("Secret")).toBeInTheDocument(); + }); }); describe("PublicRoute", () => { - it("should show SplashScreen while auth is initializing", () => { - useAuthStore.setState({ - isInitializing: true, - accessToken: null, - user: null, - }); - renderGuard( - -
Login Page
- , - "/public", - ); - expect(screen.getByText(/Unsealing/i)).toBeInTheDocument(); - expect(screen.queryByText("Login Page")).not.toBeInTheDocument(); + it("should show SplashScreen while auth is initializing", () => { + useAuthStore.setState({ + isInitializing: true, + accessToken: null, + user: null, }); + renderGuard( + +
Login Page
+ , + "/public", + ); + expect(screen.getByText(/Unsealing/i)).toBeInTheDocument(); + expect(screen.queryByText("Login Page")).not.toBeInTheDocument(); + }); - it("should redirect authenticated users to /drawer", () => { - useAuthStore.setState({ - isInitializing: false, - accessToken: "token", - user: mockUser, - }); - renderGuard( - -
Login Form
- , - "/public", - ); - expect(screen.getByText("Drawer Page")).toBeInTheDocument(); - expect(screen.queryByText("Login Form")).not.toBeInTheDocument(); + it("should redirect authenticated users to /drawer", () => { + useAuthStore.setState({ + isInitializing: false, + accessToken: "token", + user: mockUser, }); + renderGuard( + +
Login Form
+ , + "/public", + ); + expect(screen.getByText("Drawer Page")).toBeInTheDocument(); + expect(screen.queryByText("Login Form")).not.toBeInTheDocument(); + }); - it("should render page for unauthenticated users", () => { - useAuthStore.setState({ - isInitializing: false, - accessToken: null, - user: null, - }); - renderGuard( - -
Login Form
- , - "/public", - ); - expect(screen.getByText("Login Form")).toBeInTheDocument(); + it("should render page for unauthenticated users", () => { + useAuthStore.setState({ + isInitializing: false, + accessToken: null, + user: null, }); + renderGuard( + +
Login Form
+ , + "/public", + ); + expect(screen.getByText("Login Form")).toBeInTheDocument(); + }); }); diff --git a/frontend/src/components/RouteGuards.tsx b/frontend/src/components/RouteGuards.tsx index 59e9b23..9fa20af 100644 --- a/frontend/src/components/RouteGuards.tsx +++ b/frontend/src/components/RouteGuards.tsx @@ -9,16 +9,16 @@ import SplashScreen from "./SplashScreen"; * state so the Login component can link them back after sign-in */ export function ProtectedRoute({ children }: { children: React.ReactNode }) { - const { isAuthenticated, isInitializing } = useAuth(); - const location = useLocation(); + const { isAuthenticated, isInitializing } = useAuth(); + const location = useLocation(); - if (isInitializing) return ; + if (isInitializing) return ; - if (!isAuthenticated) { - return ; - } + if (!isAuthenticated) { + return ; + } - return <>{children}; + return <>{children}; } /** @@ -26,13 +26,13 @@ export function ProtectedRoute({ children }: { children: React.ReactNode }) { * If authenticated, redirect all the auth related flows to the drawer */ export function AutoRedirectRoute({ children }: { children: React.ReactNode }) { - const { isAuthenticated, isInitializing } = useAuth(); + const { isAuthenticated, isInitializing } = useAuth(); - if (isInitializing) return ; + if (isInitializing) return ; - if (isAuthenticated) { - return ; - } + if (isAuthenticated) { + return ; + } - return <>{children}; + return <>{children}; } diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 0382c07..142d7da 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,10 +1,10 @@ import { InfoIcon } from "@phosphor-icons/react"; import { ReactLenis } from "lenis/react"; import { - motion, - useMotionValueEvent, - useScroll, - useTransform, + motion, + useMotionValueEvent, + useScroll, + useTransform, } from "motion/react"; import { useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; @@ -18,383 +18,383 @@ import "@fontsource/space-mono/index.css"; import "@fontsource/architects-daughter/index.css"; export default function Home() { - const sectionContainer1 = useRef(null); - const { scrollYProgress } = useScroll({ - target: sectionContainer1, - }); - const [isEnvelopeFlipped, setIsEnvelopeFlipped] = useState(true); - const [flapOpen, setFlapOpen] = useState(false); - const [recipient, setRecipient] = useState("someone dear"); - const [ignite, setIgnite] = useState(false); + const sectionContainer1 = useRef(null); + const { scrollYProgress } = useScroll({ + target: sectionContainer1, + }); + const [isEnvelopeFlipped, setIsEnvelopeFlipped] = useState(true); + const [flapOpen, setFlapOpen] = useState(false); + const [recipient, setRecipient] = useState("someone dear"); + const [ignite, setIgnite] = useState(false); - const navigate = useNavigate(); + const navigate = useNavigate(); - useMotionValueEvent(scrollYProgress, "change", (latestScrollValue) => { - if (latestScrollValue > 0.54) { - setFlapOpen(false); - } else { - setFlapOpen(true); - } - if (latestScrollValue <= 0.6) { - setIsEnvelopeFlipped(true); - } else { - setIsEnvelopeFlipped(false); - } - if (latestScrollValue > 0.68) { - setRecipient("future me"); - } else { - setRecipient("someone dear"); - } - if (latestScrollValue > 0.77) { - setIgnite(true); - } else { - setIgnite(false); - } - }); + useMotionValueEvent(scrollYProgress, "change", (latestScrollValue) => { + if (latestScrollValue > 0.54) { + setFlapOpen(false); + } else { + setFlapOpen(true); + } + if (latestScrollValue <= 0.6) { + setIsEnvelopeFlipped(true); + } else { + setIsEnvelopeFlipped(false); + } + if (latestScrollValue > 0.68) { + setRecipient("future me"); + } else { + setRecipient("someone dear"); + } + if (latestScrollValue > 0.77) { + setIgnite(true); + } else { + setIgnite(false); + } + }); - return ( - -
+
+
+ {/* Intro */} + +

+ You've been carrying something +

+ + unsaid + + + + +
+ and that's okay... +
+ + {/* pi. ku. */} + + + -
- {/* Intro */} - -

- You've been carrying something -

- - unsaid - - + is a{" "} + + safe space + + ,
+ + where you can + + + - -
- and that's okay... -
- - {/* pi. ku. */} - - - - is a{" "} - - safe space - - ,
- - where you can - - - +
+ + pen down your unsaid words into{" "} + + letters + + . + + {/* Seal */} + + seal it{" "} + + secure + {" "} + and{" "} + + private + + . + + {/* Send / vault */} + + send it to{" "} + + someone dear + + + + {" "} + or{" "} + + + yourself in the future + + . + + + {/* Burn */} + + and even burn it{" "} + to release the burden. + + {/* Outro */} + + You've been carrying it long enough. + + {/* CTA */} + + + + +
-
- - pen down your unsaid words into{" "} - - letters - - . - - {/* Seal */} - - seal it{" "} - - secure - {" "} - and{" "} - - private - - . - - {/* Send / vault */} - - send it to{" "} - - someone dear - - - - {" "} - or{" "} - - - yourself in the future - - . - - - {/* Burn */} - - and even burn it{" "} - to release the burden. - - {/* Outro */} - - You've been carrying it long enough. - - {/* CTA */} - - - - -
- -
- -
-
-
- letter -
-
- - {/* Envelope */} - - { }} - isFlip={isEnvelopeFlipped} - openFlap={flapOpen} - /> - - {/* Saajan */} - - - - {/* Orb */} - -
-
+
+ +
+
+
+ letter
-
- - ); + + + {/* Envelope */} + + {}} + isFlip={isEnvelopeFlipped} + openFlap={flapOpen} + /> + + {/* Saajan */} + + + + {/* Orb */} + +
+
+ +
+ + ); }