40
41 try {
42 const response = await fetch("/api/chat", {
43 method: "POST",
44 headers: { "Content-Type": "application/json" },
4let location = "brooklyn ny";
5let lang = "en";
6const weather = await fetch(
7 `https://wttr.in/${location}?lang=${lang}&format=j1`,
8).then(r => r.json());
11
12 useEffect(() => {
13 fetchPolls();
14 }, []);
15
24 }, [polls]);
25
26 const fetchPolls = async () => {
27 const response = await fetch("/polls");
28 const data = await response.json();
29 setPolls(data);
32 const handleCreatePoll = async (e) => {
33 e.preventDefault();
34 const response = await fetch("/polls", {
35 method: "POST",
36 headers: { "Content-Type": "application/json" },
40 setNewPollQuestion("");
41 setNewPollOptions(["", ""]);
42 fetchPolls();
43 }
44 };
45
46 const handleVote = async (pollId, optionIndex) => {
47 const response = await fetch(`/polls/${pollId}/vote`, {
48 method: "POST",
49 headers: { "Content-Type": "application/json" },
51 });
52 if (response.ok) {
53 fetchPolls();
54 }
55 };
35
36async function execute(statement: InStatement, args?: InArgs): Promise<ResultSet> {
37 const res = await fetch(`${API_URL}/v1/sqlite/execute`, {
38 method: "POST",
39 headers: {
50
51async function batch(statements: InStatement[], mode?: TransactionMode): Promise<ResultSet[]> {
52 const res = await fetch(`${API_URL}/v1/sqlite/batch`, {
53 method: "POST",
54 headers: {
9
10 useEffect(() => {
11 async function fetchImage() {
12 try {
13 const response = await fetch("/image");
14 if (!response.ok) {
15 throw new Error(`HTTP error! status: ${response.status}`);
22 }
23 } catch (error) {
24 console.error("Error fetching image:", error);
25 setError(error instanceof Error ? error.message : "Error loading image");
26 }
27 }
28 fetchImage();
29 }, []);
30
36 <img
37 src={imageData}
38 alt="Fetched from blob storage"
39 style={{ maxWidth: "100%" }}
40 />
63 });
64 } catch (error) {
65 console.error("Error fetching blob:", error);
66 return new Response(JSON.stringify({ error: "Server error", details: error.message }), {
67 status: 500,
34
35 useEffect(() => {
36 fetchCategories();
37 }, []);
38
39 const fetchCategories = async () => {
40 const response = await fetch("/categories");
41 if (response.ok) {
42 const data = await response.json();
43 setCategories(data);
44 console.log("Categories fetched and set:", data);
45 data.forEach(category => console.log(`Category ${category.name} has ${category.cards.length} cards`));
46 }
50 console.log("Adding category:", newCategory);
51 if (newCategory.trim()) {
52 const response = await fetch("/categories", {
53 method: "POST",
54 headers: { "Content-Type": "application/json" },
57 if (response.ok) {
58 setNewCategory("");
59 fetchCategories();
60 }
61 }
64 const deleteCard = async (cardId) => {
65 console.log("Deleting card:", cardId);
66 const response = await fetch(`/cards/${cardId}`, {
67 method: "DELETE",
68 });
69 if (response.ok) {
70 fetchCategories();
71 } else {
72 console.error("Failed to delete card");
76 const deleteCategory = async (categoryId) => {
77 console.log("Deleting category:", categoryId);
78 const response = await fetch(`/categories/${categoryId}`, {
79 method: "DELETE",
80 });
81 if (response.ok) {
82 fetchCategories();
83 } else {
84 console.error("Failed to delete category");
88 const addCard = async () => {
89 if (newCard.trim()) {
90 const response = await fetch("/cards", {
91 method: "POST",
92 headers: { "Content-Type": "application/json" },
95 if (response.ok) {
96 setNewCard("");
97 fetchCategories();
98 }
99 }
144
145 // Update the card's category on the server
146 await fetch(`/cards/${movedCard.id}`, {
147 method: "PATCH",
148 headers: { "Content-Type": "application/json" },
9
10 useEffect(() => {
11 async function fetchImage() {
12 try {
13 const response = await fetch("/image");
14 if (!response.ok) {
15 throw new Error(`HTTP error! status: ${response.status}`);
24 setImageData(dataUrl);
25 } catch (error) {
26 console.error("Error fetching image:", error);
27 setError(error instanceof Error ? error.message : "Error loading image");
28 }
29 }
30 fetchImage();
31 }, []);
32
38 <img
39 src={imageData}
40 alt="Fetched from blob storage"
41 style={{ maxWidth: "100%" }}
42 />
66 });
67 } catch (error) {
68 console.error("Error fetching blob:", error);
69 return new Response(JSON.stringify({ error: "Server error", details: error.message }), {
70 status: 500,
20## How it works
21
221. Fetching the JSON:
23
24 - The client-side React component makes a fetch request to "/image".
25 - This request is handled by our server function.
26
485. Client-side handling:
49
50 - The fetch request in the React component receives the Response.
51 - We call `response.json()` to parse the JSON object from the Response.
52
3import { email } from "https://esm.town/v/std/email";
4
5async function fetchStories(type: string, count: number) {
6 const response = await fetch(`https://hacker-news.firebaseio.com/v0/${type}stories.json`);
7 const storyIds = await response.json();
8 const stories = await Promise.all(
9 storyIds.slice(0, count).map(async (id: number) => {
10 const storyResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`);
11 return storyResponse.json();
12 }),
120export default async function server(req: Request) {
121 try {
122 const topStories = await fetchStories("top", 10);
123 const newStories = await fetchStories("new", 5);
124 const showStories = await fetchStories("show", 3);
125 const askStories = await fetchStories("ask", 3);
126 const jobStories = await fetchStories("job", 3);
127
128 const emailContent = createEmailContent(topStories, newStories, showStories, askStories, jobStories);
12 * @param {number} [opts.timeout=10 minutes] - The maximum amount of time (in milliseconds) the client will wait for a response before timing out.
13 * @param {number} [opts.httpAgent] - An HTTP agent used to manage HTTP(s) connections.
14 * @param {Core.Fetch} [opts.fetch] - Specify a custom `fetch` function implementation.
15 * @param {number} [opts.maxRetries=2] - The maximum number of times the client will retry a request.
16 * @param {Core.Headers} opts.defaultHeaders - Default headers to include with every request to the API.