diff --git a/apps/evalite-ui/app/root.tsx b/apps/evalite-ui/app/root.tsx index ca18a7b..f4dcc4b 100644 --- a/apps/evalite-ui/app/root.tsx +++ b/apps/evalite-ui/app/root.tsx @@ -1,4 +1,6 @@ +import type { LinksFunction } from "@remix-run/node"; import { + Link, Links, Meta, Outlet, @@ -6,10 +8,28 @@ import { ScrollRestoration, useLoaderData, } from "@remix-run/react"; -import type { LinksFunction } from "@remix-run/node"; +import { + ChevronDownCircleIcon, + ChevronUpCircleIcon, + MinusCircleIcon, + ZapIcon, +} from "lucide-react"; +import { SidebarRight } from "~/components/sidebar-right"; +import { + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupLabel, + SidebarHeader, + SidebarInset, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarProvider, +} from "~/components/ui/sidebar"; import "./tailwind.css"; -import { DEFAULT_SERVER_PORT } from "@evalite/core/constants"; +import { getEvals } from "@evalite/core/sdk"; export const links: LinksFunction = () => [ { rel: "preconnect", href: "https://fonts.googleapis.com" }, @@ -42,6 +62,103 @@ export function Layout({ children }: { children: React.ReactNode }) { ); } +type ScoreState = "up" | "down" | "same" | "first"; + +export const clientLoader = async () => { + const evals = await getEvals(); + + return { + menu: Object.entries(evals).map(([key, value]) => { + const mostRecentEval = value[0]!; + + const secondMostRecentEval = value[1]; + + const score = mostRecentEval.score; + + const state: ScoreState = !secondMostRecentEval + ? "first" + : score > secondMostRecentEval.score + ? "up" + : score < secondMostRecentEval.score + ? "down" + : "same"; + return { + name: key, + state, + score, + }; + }), + }; +}; + export default function App() { - return ; + const evals = useLoaderData(); + + return ( + + + + + +
+ + + Evalite + +
+
+
+
+ + + Evals + + {evals.menu.map((item) => ( + + + + {item.name} + + + + + ))} + + + +
+ + + + +
+ ); } + +const Score = (props: { score: number; state: ScoreState }) => { + return ( + + {Math.round(props.score * 100)}% + {props.state === "up" && ( + + + + )} + {props.state === "down" && ( + + + + )} + {props.state === "same" && ( + + + + )} + {props.state === "first" && ( + + + + )} + + ); +}; diff --git a/apps/evalite-ui/app/routes/$name.tsx b/apps/evalite-ui/app/routes/$name.tsx index ff3873a..69d82ab 100644 --- a/apps/evalite-ui/app/routes/$name.tsx +++ b/apps/evalite-ui/app/routes/$name.tsx @@ -2,15 +2,13 @@ import type { MetaFunction } from "@remix-run/node"; import { useLoaderData, type ClientLoaderFunctionArgs } from "@remix-run/react"; import { InnerPageLayout } from "~/components/page-header"; -export const meta: MetaFunction = () => { +export const meta: MetaFunction = (args) => { return [ - { title: "New Remix App" }, + { title: `${(args.data as any)?.name} | Evalite` }, { name: "description", content: "Welcome to Remix!" }, ]; }; -type ScoreState = "up" | "down" | "same" | "first"; - export const clientLoader = async (args: ClientLoaderFunctionArgs) => { return { name: args.params.name!, diff --git a/apps/evalite-ui/app/routes/_index.tsx b/apps/evalite-ui/app/routes/_index.tsx index 8e50f9e..5eed42a 100644 --- a/apps/evalite-ui/app/routes/_index.tsx +++ b/apps/evalite-ui/app/routes/_index.tsx @@ -1,139 +1,22 @@ import { getEvals } from "@evalite/core/sdk"; -import type { MetaFunction } from "@remix-run/node"; -import { Link, Outlet, useLoaderData } from "@remix-run/react"; -import { - ChevronDownCircleIcon, - ChevronUpCircleIcon, - MinusCircleIcon, - ZapIcon, -} from "lucide-react"; -import { SidebarRight } from "~/components/sidebar-right"; -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbList, - BreadcrumbPage, -} from "~/components/ui/breadcrumb"; -import { Separator } from "~/components/ui/separator"; -import { - Sidebar, - SidebarContent, - SidebarGroup, - SidebarGroupLabel, - SidebarHeader, - SidebarInset, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, - SidebarProvider, - SidebarTrigger, -} from "~/components/ui/sidebar"; -import { useSubscribeToTestServer } from "~/use-subscribe-to-socket"; +import { redirect, type MetaFunction } from "@remix-run/react"; export const meta: MetaFunction = () => { - return [ - { title: "New Remix App" }, - { name: "description", content: "Welcome to Remix!" }, - ]; + return [{ title: "Evalite" }]; }; -type ScoreState = "up" | "down" | "same" | "first"; - export const clientLoader = async () => { const evals = await getEvals(); - return { - menu: Object.entries(evals).map(([key, value]) => { - const mostRecentEval = value[0]!; - - const secondMostRecentEval = value[1]; + const firstName = Object.keys(evals)[0]; - const score = mostRecentEval.score; + if (firstName) { + return redirect(`/${firstName}`); + } - const state: ScoreState = !secondMostRecentEval - ? "first" - : score > secondMostRecentEval.score - ? "up" - : score < secondMostRecentEval.score - ? "down" - : "same"; - return { - name: key, - state, - score, - }; - }), - }; + return null; }; -export default function Index() { - const evals = useLoaderData(); - - return ( - - - - - -
- - - Evalite - -
-
-
-
- - - Evals - - {evals.menu.map((item) => ( - - - - {item.name} - - - - - ))} - - - -
- - - - -
- ); +export default function Page() { + return null; } - -const Score = (props: { score: number; state: ScoreState }) => { - return ( - - {Math.round(props.score * 100)}% - {props.state === "up" && ( - - - - )} - {props.state === "down" && ( - - - - )} - {props.state === "same" && ( - - - - )} - {props.state === "first" && ( - - - - )} - - ); -};