Val Town Code SearchReturn to Val Town

36
37Custom middleware can be added in an array as the third argument.
38Middleware can add data to the `req.data` object or return a response for things like API endpoints.
39
40```tsx
62```tsx
63// example middleware
64async function api (req: Request, res: Response, next): Promise<Response> {
65  if (req.pathname !== "/api") return next();
66  if (req.method === "POST") {
67    return Repsonse.json({ message: "Hello POST request" });
70}
71
72export default render(App, import.meta.url, [ api ]);
73```
74

34  const useMiddleware = Array.isArray(opts); // for backwards compat
35  const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};
36  const { api, getInitialProps } = options;
37
38  if (typeof document !== "undefined" && module) {
48      // DEPRECATED (for backwards compat)
49      options.robots && robots(options.robots),
50      options.api && deprecatedCustomAPI(options.api),
51      options.getInitialProps && deprecatedGetInitiaProps(options.getInitialProps),
52      // New custom middleware
127// DEPRECATED
128// DEPRECATE (for backwards compat)
129const deprecatedCustomAPI = (api?: RequestHandler): Middleware => async (req, res, next) => {
130  if (!api) return next();
131  if (req.method === "GET") return next();
132  return api(req);
133};
134const deprecatedGetInitiaProps = (getProps: DataFetcher<any>): Middleware => async (req, res, next) => {
142  /** DEPRECATED: Optional text response for robots.txt */
143  robots?: string;
144  /** DEPRECATED: Optional API request handler for all non-GET methods */
145  api?: RequestHandler;
146  /** DEPRECATED: data fetcher to set initial props based on request */
147  getInitialProps?: DataFetcher<any>;

1/**
2 * This program creates a basic calculator endpoint that accepts and returns data in the specified format.
3 * It uses a RESTful API approach where the operation is specified in the URL path.
4 * The numbers to operate on are passed as query parameters.
5 * The result is returned as JSON.

4async function fetchRandomJoke() {
5  const response = await fetch(
6    "https://official-joke-api.appspot.com/random_joke",
7  );
8  return response.json();

1/**
2 * This application helps users write detailed reviews of coffee shops. It fetches coffee shop data
3 * from the OpenStreetMap Nominatim API, allows users to add custom details, and stores the augmented
4 * information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews.
5 *
6 * It uses React for the frontend, the Nominatim API for initial coffee shop data,
7 * and Val Town's SQLite for data persistence.
8 */
30  const fetchCoffeeShops = async () => {
31    try {
32      const response = await fetch(`/api/coffee-shops?search=${encodeURIComponent(searchTerm)}`);
33      if (!response.ok) throw new Error("Failed to fetch coffee shops");
34      const data = await response.json();
41  const fetchReviews = async () => {
42    try {
43      const response = await fetch("/api/reviews");
44      if (!response.ok) throw new Error("Failed to fetch reviews");
45      const data = await response.json();
60
61    try {
62      const response = await fetch("/api/reviews", {
63        method: "POST",
64        headers: { "Content-Type": "application/json" },
192    console.log("Table checked/created successfully");
193
194    if (url.pathname === "/api/coffee-shops") {
195      const searchTerm = url.searchParams.get("search") || "";
196      // Fetch coffee shops from OpenStreetMap Nominatim API
197      const nominatimUrl = `https://nominatim.openstreetmap.org/search?q=coffee+${
198        encodeURIComponent(searchTerm)
204      });
205      if (!nominatimResponse.ok) {
206        throw new Error(`Nominatim API error! status: ${nominatimResponse.status}`);
207      }
208      const nominatimData = await nominatimResponse.json();
209      if (!Array.isArray(nominatimData)) {
210        throw new Error("Invalid data received from Nominatim API");
211      }
212      const coffeeShops = nominatimData.map((shop: any) => ({
221    }
222
223    if (url.pathname === "/api/reviews") {
224      if (request.method === "GET") {
225        const reviews = await sqlite.execute(`SELECT * FROM ${KEY}_coffee_reviews_${SCHEMA_VERSION}`);

63      </div>
64      <a href={import.meta.url.replace("esm.town", "val.town")} target="_blank" rel="noopener noreferrer" className="view-source">View Source</a>
65      <pre className="api-examples">
66{`// Axios example
67const axios = require('axios');
214  text-decoration: underline;
215}
216.api-examples {
217  margin-top: 20px;
218  background-color: #f0f0f0;

3 * It uses React for the UI, leverages emoji and Unicode symbols for a visually rich experience, and
4 * incorporates Tailwind CSS for elegant, grayscale styling.
5 * The wizard allows users to select tools, libraries, and APIs, then displays them in a shareable format.
6 */
7
143  { name: "Discord", icon: "🗣️" },
144  { name: "Mattermost", icon: "📡" },
145  { name: "Zapier", icon: "🔗" },
146  { name: "IFTTT", icon: "🔄" },
147  { name: "Home Assistant", icon: "🏠" },

29      {Object.entries(techCategories).map(([category, technologies]) => (
30        <div key={category} className="mb-6">
31          <h2 className="text-xl font-semibold mb-2 text-gray-700 capitalize">{category}</h2>
32          <div className="flex flex-wrap gap-2">
33            {technologies.map(tech => (
52          {Object.entries(selectedTech).map(([category, tech]) => (
53            <li key={category} className="text-gray-700">
54              <span className="font-medium capitalize">{category}:</span> {tech}
55            </li>
56          ))}

27      <head>
28        <title>SQLite Explorer</title>
29        <link rel="preconnect" href="https://fonts.googleapis.com" />
30
31        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
32        <link
33          href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
34          rel="stylesheet"
35        />

13## Authentication
14
15Login to your SQLite Explorer with [password authentication](https://www.val.town/v/pomdtr/password_auth) with your [Val Town API Token](https://www.val.town/settings/api) as the password.
16
17## Todos / Plans