From 7472cf0c122149542a0a929e143e74f7c03f4c70 Mon Sep 17 00:00:00 2001
From: James Arthur <thruflo@gmail.com>
Date: Fri, 22 Nov 2024 18:37:39 +0100
Subject: [PATCH] example: typecheck.

---
 .../patterns/1-online-writes/index.tsx           |  9 +++++----
 examples/write-patterns/shared/app/client.ts     | 16 +++++++++++-----
 examples/write-patterns/shared/app/vite-env.d.ts |  2 ++
 3 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 examples/write-patterns/shared/app/vite-env.d.ts

diff --git a/examples/write-patterns/patterns/1-online-writes/index.tsx b/examples/write-patterns/patterns/1-online-writes/index.tsx
index 464fb5f21b..baeebfd914 100644
--- a/examples/write-patterns/patterns/1-online-writes/index.tsx
+++ b/examples/write-patterns/patterns/1-online-writes/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { useShape } from '@electric-sql/react'
 
 import * as client from '../../shared/app/client'
@@ -27,22 +28,22 @@ export default function OnlineWrites() {
     ? data.sort((a, b) => a.created_at - b.created_at)
     : []
 
-  async function handleChange(id, completed) {
+  async function handleChange(id: string, completed: boolean) {
     await client.updateTodo(id, {completed: !completed})
   }
 
-  async function handleDelete(event, id) {
+  async function handleDelete(event: React.MouseEvent, id: string) {
     event.preventDefault()
 
     await client.deleteTodo(id)
   }
 
-  async function handleSubmit(event) {
+  async function handleSubmit(event: React.FormEvent) {
     event.preventDefault()
 
     const form = event.target as HTMLFormElement
     const formData = new FormData(form)
-    const title = formData.get('todo')
+    const title = formData.get('todo') as string
 
     await client.createTodo(title)
 
diff --git a/examples/write-patterns/shared/app/client.ts b/examples/write-patterns/shared/app/client.ts
index 347e694306..b77eff0c0b 100644
--- a/examples/write-patterns/shared/app/client.ts
+++ b/examples/write-patterns/shared/app/client.ts
@@ -2,8 +2,14 @@ import { v4 as uuidv4 } from 'uuid'
 
 const API_URL = import.meta.env.API_URL || 'http://localhost:3001'
 
-async function request(url, method, data) {
-  const options = {
+type RequestOptions = {
+  method: string
+  headers: HeadersInit
+  body?: string
+}
+
+async function request(url: string, method: string, data?: object) {
+  const options: RequestOptions = {
     method: method,
     headers: {
       'Content-Type': `application/json`
@@ -17,7 +23,7 @@ async function request(url, method, data) {
   return await fetch(url, options)
 }
 
-export async function createTodo(title) {
+export async function createTodo(title: string) {
   const url = `${API_URL}/todos`
   const data = {
     id: uuidv4(),
@@ -27,13 +33,13 @@ export async function createTodo(title) {
   return await request(url, 'POST', data)
 }
 
-export async function updateTodo(id, data) {
+export async function updateTodo(id: string, data: object) {
   const url = `${API_URL}/todos/${id}`
 
   return await request(url, 'PUT', data)
 }
 
-export async function deleteTodo(id) {
+export async function deleteTodo(id: string) {
   const url = `${API_URL}/todos/${id}`
 
   return await request(url, 'DELETE')
diff --git a/examples/write-patterns/shared/app/vite-env.d.ts b/examples/write-patterns/shared/app/vite-env.d.ts
new file mode 100644
index 0000000000..a08026d9c9
--- /dev/null
+++ b/examples/write-patterns/shared/app/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite/types/importMeta.d.ts" />