/** * This val creates a page that lists all of the vals the user has made. * It uses the Val Town API to fetch the user's vals and displays them in a simple list. * The page includes a search functionality to filter vals by name. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface Val { id: number; name: string; author: { username: string; }; public: boolean; } function App() { const [vals, setVals] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetchVals(); }, []); const fetchVals = async () => { try { const response = await fetch('/api/vals'); if (!response.ok) { throw new Error('Failed to fetch vals'); } const data = await response.json(); setVals(data); setLoading(false); } catch (err) { setError('Error fetching vals. Please try again later.'); setLoading(false); } }; const filteredVals = vals.filter(val => val.name.toLowerCase().includes(searchTerm.toLowerCase()) ); return (

My Vals

setSearchTerm(e.target.value)} className="search-input" /> {loading &&

} {error &&

{error}

} {!loading && !error && (

{val.name} {val.public ? Public : Private}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === '/api/vals') { try { const response = await fetch('https://api.val.town/v1/me/vals', { headers: { 'Authorization': `Bearer ${Deno.env.get('VAL_TOWN_API_KEY')}` } }); if (!response.ok) { throw new Error('Failed to fetch vals from Val Town API'); } const data = await response.json(); return new Response(JSON.stringify(data.vals), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: 'Failed to fetch vals' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } return new Response(` My Vals

`, { headers: { 'Content-Type': 'text/html' } }); } export default server; const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } .container { background-color: #f4f4f4; border-radius: 5px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } h1 { color: #2c3e50; } .search-input { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px; } .val-list { list-style-type: none; padding: 0; } .val-item { background-color: #fff; margin-bottom: 10px; padding: 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } .val-name { font-weight: bold; } .public-badge, .private-badge { padding: 3px 6px; border-radius: 3px; font-size: 0.8em; } .public-badge { background-color: #2ecc71; color: white; } .private-badge { background-color: #e74c3c; color: white; } .error { color: #e74c3c; font-weight: bold; } footer { margin-top: 20px; text-align: center; } footer a { color: #3498db; text-decoration: none; } footer a:hover { text-decoration: underline; } `;

allvals

Versions

v0