Val Town Code SearchReturn to Val Town

1import { ActionFunctionArgs, LoaderFunctionArgs } from "npm:react-router";
2import Layout from "./layout.tsx";
3import Home from "./home.tsx";
15    // imports the correct one to avoid putting the server code in client
16    // bundles
17    async loader(args: LoaderFunctionArgs) {
18      let mod = await (isServer
19        ? import("./layout.server.ts")
23    // same with the action, you'll probably want to abstract this kind of stuff
24    // in a createRoute() kind of thing
25    async action(args: ActionFunctionArgs) {
26      let mod = await (isServer
27        ? import("./layout.server.ts")
35        Component: Home,
36        ErrorBoundary: Home.ErrorBoundary,
37        async loader(args: LoaderFunctionArgs) {
38          // Fetch recent URLs
39          const response = await fetch(new URL("/api/recent", args.request.url));
49        Component: CreateShortUrl,
50        ErrorBoundary: CreateShortUrl.ErrorBoundary,
51        async action(args: ActionFunctionArgs) {
52          const formData = await args.request.formData();
53          const longUrl = formData.get("longUrl");

9} from "./backend/database/queries.ts";
10
11export default async function(request: Request) {
12  const url = new URL(request.url);
13  const path = url.pathname;

2import { useLoaderData } from "npm:react-router";
3
4export default function About() {
5  const data = useLoaderData() as { message: string };
6  

11 * Main server handler for the URL shortener application
12 */
13export default async function(request: Request): Promise<Response> {
14  // Initialize database on each request
15  await initializeDatabase(import.meta.url);

3This directory contains code that is shared between the frontend and backend.
4
5- `utils.ts` - Utility functions and shared types

2import React, { useState } from "https://esm.sh/react@18.2.0";
3
4export function CreateShortUrl() {
5  const [longUrl, setLongUrl] = useState("");
6  const [isSubmitting, setIsSubmitting] = useState(false);

3import { ShortUrl } from "../../shared/utils.ts";
4
5export function Home() {
6  const [recentUrls, setRecentUrls] = useState<ShortUrl[]>([]);
7  const [isLoading, setIsLoading] = useState(true);

4import { CreateShortUrl } from "./CreateShortUrl.tsx";
5
6export function App() {
7  const [currentRoute, setCurrentRoute] = useState("/");
8

7let { query, dataRoutes } = createStaticHandler(routes);
8
9export async function handler(request: Request) {
10  // 1. run actions/loaders to get the routing context with `query`
11  let context = await query(request);

1import { data } from "npm:react-router";
2
3export default async function load() {
4  await new Promise(resolve => setTimeout(resolve, 200));
5