paystack

orders-frontend/src/components/store/StoreHome.tsx

@@ -1,60 +1,68 @@
-import {AuthDialog} from "#/components/store/AuthDialog";
-import {ProductGrid} from "#/components/store/ProductGrid";
-import {SiteHeader} from "#/components/store/SiteHeader";
-import {useAuth} from "#/hooks/useAuth";
-import {useCart} from "#/hooks/useCart";
-import {useProducts} from "#/hooks/useProducts";
-import {navigateToRoleHome} from "#/lib/auth-navigation";
-import {useNavigate} from "@tanstack/react-router";
-import {useState} from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { AuthDialog } from "#/components/store/AuthDialog";
+import { ProductGrid } from "#/components/store/ProductGrid";
+import { SiteHeader } from "#/components/store/SiteHeader";
+import { useAuth } from "#/hooks/useAuth";
+import { useCart } from "#/hooks/useCart";
+import { useProducts } from "#/hooks/useProducts";
+import { navigateToRoleHome } from "#/lib/auth-navigation";
 
 export function StoreHome() {
-    const {user, login, register, logout} = useAuth();
-    const productsQuery = useProducts();
-    const cart = useCart();
-    const navigate = useNavigate();
-    const [authMode, setAuthMode] = useState<"login" | "register" | null>(null);
+	const { user, login, register, logout } = useAuth();
+	const productsQuery = useProducts();
+	const cart = useCart();
+	const navigate = useNavigate();
+	const [authMode, setAuthMode] = useState<"login" | "register" | null>(null);
 
-    async function handleLogin(request: {username: string; password: string}) {
-        const user = await login(request);
-        setAuthMode(null);
-        await navigateToRoleHome(navigate, user);
-        return user;
-    }
+	async function handleLogin(request: { username: string; password: string }) {
+		const user = await login(request);
+		setAuthMode(null);
+		await navigateToRoleHome(navigate, user);
+		return user;
+	}
 
-    async function handleRegister(request: {username: string; password: string; displayName: string}) {
-        const user = await register(request);
-        setAuthMode(null);
-        await navigateToRoleHome(navigate, user);
-        return user;
-    }
+	async function handleRegister(request: {
+		username: string;
+		password: string;
+		displayName: string;
+	}) {
+		const user = await register(request);
+		setAuthMode(null);
+		await navigateToRoleHome(navigate, user);
+		return user;
+	}
 
-    return (
-        <main className="min-h-screen bg-background">
-            <SiteHeader
-                user={user}
-                onLogin={() => setAuthMode("login")}
-                onRegister={() => setAuthMode("register")}
-                onLogout={logout}
-            />
-            <section className="mx-auto max-w-7xl px-4 py-8">
-                <div className="mb-6 max-w-2xl">
-                    <p className="text-sm font-medium uppercase text-muted-foreground">Store</p>
-                    <h1 className="mt-2 text-4xl font-bold tracking-normal text-foreground">Shop Cymelle products</h1>
-                </div>
-                <ProductGrid
-                    products={productsQuery.data ?? []}
-                    isLoading={productsQuery.isLoading}
-                    onAddToCart={cart.addItem}
-                />
-            </section>
-            <AuthDialog
-                open={authMode !== null}
-                initialMode={authMode ?? "login"}
-                onOpenChange={(open) => !open && setAuthMode(null)}
-                onLogin={handleLogin}
-                onRegister={handleRegister}
-            />
-        </main>
-    );
+	return (
+		<main className="min-h-screen bg-background">
+			<SiteHeader
+				user={user}
+				onLogin={() => setAuthMode("login")}
+				onRegister={() => setAuthMode("register")}
+				onLogout={logout}
+			/>
+			<section className="mx-auto max-w-7xl px-4 py-8">
+				<div className="mb-6 max-w-2xl">
+					<p className="text-sm font-medium uppercase text-muted-foreground">
+						Store
+					</p>
+					<h1 className="mt-2 text-4xl font-bold tracking-normal text-foreground">
+						Shop Cymelle products
+					</h1>
+				</div>
+				<ProductGrid
+					products={productsQuery.data ?? []}
+					isLoading={productsQuery.isLoading}
+					onAddToCart={cart.addItem}
+				/>
+			</section>
+			<AuthDialog
+				open={authMode !== null}
+				initialMode={authMode ?? "login"}
+				onOpenChange={(open) => !open && setAuthMode(null)}
+				onLogin={handleLogin}
+				onRegister={handleRegister}
+			/>
+		</main>
+	);
 }