franpcode/Reflecto
1
0
Fork 0
mirror of https://github.com/FranP-code/Reflecto.git synced 2025-10-13 00:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Biome format

Browse Source
This commit is contained in:
Francisco Pessano
2025-09-03 12:37:29 -03:00
parent 55fab87db3
commit 5f6136a378
43 changed files with 1473 additions and 1379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
apps/web/src/routes/__root.tsx
View File

@@ -6,62 +6,62 @@ import type { trpc } from "@/utils/trpc";
import type { QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import {
HeadContent,
Outlet,
createRootRouteWithContext,
useRouterState,
HeadContent,
Outlet,
createRootRouteWithContext,
useRouterState,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import "../index.css";
export interface RouterAppContext {
trpc: typeof trpc;
queryClient: QueryClient;
trpc: typeof trpc;
queryClient: QueryClient;
}
export const Route = createRootRouteWithContext<RouterAppContext>()({
component: RootComponent,
head: () => ({
meta: [
{
title: "Reflecto",
},
{
name: "description",
content: "Reflecto is a web application",
},
],
links: [
{
rel: "icon",
href: "/favicon.ico",
},
],
}),
component: RootComponent,
head: () => ({
meta: [
{
title: "Reflecto",
},
{
name: "description",
content: "Reflecto is a web application",
},
],
links: [
{
rel: "icon",
href: "/favicon.ico",
},
],
}),
});
function RootComponent() {
const isFetching = useRouterState({
select: (s) => s.isLoading,
});
const isFetching = useRouterState({
select: (s) => s.isLoading,
});
return (
<>
<HeadContent />
<ThemeProvider
attribute="class"
defaultTheme="dark"
disableTransitionOnChange
storageKey="vite-ui-theme"
>
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
{isFetching ? <Loader /> : <Outlet />}
</div>
<Toaster richColors />
</ThemeProvider>
<TanStackRouterDevtools position="bottom-left" />
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
</>
);
return (
<>
<HeadContent />
<ThemeProvider
attribute="class"
defaultTheme="dark"
disableTransitionOnChange
storageKey="vite-ui-theme"
>
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
{isFetching ? <Loader /> : <Outlet />}
</div>
<Toaster richColors />
</ThemeProvider>
<TanStackRouterDevtools position="bottom-left" />
<ReactQueryDevtools position="bottom" buttonPosition="bottom-right" />
</>
);
}

42
apps/web/src/routes/dashboard.tsx
View File

@@ -5,33 +5,33 @@ import { createFileRoute } from "@tanstack/react-router";
import { useEffect } from "react";
export const Route = createFileRoute("/dashboard")({
component: RouteComponent,
component: RouteComponent,
});
function RouteComponent() {
const { data: session, isPending } = authClient.useSession();
const { data: session, isPending } = authClient.useSession();
const navigate = Route.useNavigate();
const navigate = Route.useNavigate();
const privateData = useQuery(trpc.privateData.queryOptions());
const privateData = useQuery(trpc.privateData.queryOptions());
useEffect(() => {
if (!session && !isPending) {
navigate({
to: "/login",
});
}
}, [session, isPending]);
useEffect(() => {
if (!session && !isPending) {
navigate({
to: "/login",
});
}
}, [session, isPending]);
if (isPending) {
return <div>Loading...</div>;
}
if (isPending) {
return <div>Loading...</div>;
}
return (
<div>
<h1>Dashboard</h1>
<p>Welcome {session?.user.name}</p>
<p>privateData: {privateData.data?.message}</p>
</div>
);
return (
<div>
<h1>Dashboard</h1>
<p>Welcome {session?.user.name}</p>
<p>privateData: {privateData.data?.message}</p>
</div>
);
}

48
apps/web/src/routes/index.tsx
View File

@@ -3,7 +3,7 @@ import { trpc } from "@/utils/trpc";
import { useQuery } from "@tanstack/react-query";
export const Route = createFileRoute("/")({
component: HomeComponent,
component: HomeComponent,
});
const TITLE_TEXT = `
@@ -23,28 +23,28 @@ const TITLE_TEXT = `
`;
function HomeComponent() {
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
return (
<div className="container mx-auto max-w-3xl px-4 py-2">
<pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
<div className="grid gap-6">
<section className="rounded-lg border p-4">
<h2 className="mb-2 font-medium">API Status</h2>
<div className="flex items-center gap-2">
<div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/>
<span className="text-sm text-muted-foreground">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
</div>
</section>
</div>
</div>
);
return (
<div className="container mx-auto max-w-3xl px-4 py-2">
<pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
<div className="grid gap-6">
<section className="rounded-lg border p-4">
<h2 className="mb-2 font-medium">API Status</h2>
<div className="flex items-center gap-2">
<div
className={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
/>
<span className="text-sm text-muted-foreground">
{healthCheck.isLoading
? "Checking..."
: healthCheck.data
? "Connected"
: "Disconnected"}
</span>
</div>
</section>
</div>
</div>
);
}

14
apps/web/src/routes/login.tsx
View File

@@ -4,15 +4,15 @@ import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
export const Route = createFileRoute("/login")({
component: RouteComponent,
component: RouteComponent,
});
function RouteComponent() {
const [showSignIn, setShowSignIn] = useState(false);
const [showSignIn, setShowSignIn] = useState(false);
return showSignIn ? (
<SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
) : (
<SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
);
return showSignIn ? (
<SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
) : (
<SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
);
}