Fixes the React Todo example (#13)

Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>

Author: davidgomes

examples/react/todo/README.md

@@ -2,6 +2,11 @@
 
 ## How to run
 
+- Go to the root of the repository and run:
+
+  - `pnpm install`
+  - `pnpm build`
+
 - Install packages
   `pnpm install`
 

examples/react/todo/docker-compose.yml

@@ -7,7 +7,7 @@ services:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
     ports:
-      - "54321:5432"
+      - "54322:5432"
     volumes:
       - ./postgres.conf:/etc/postgresql/postgresql.conf:ro
     tmpfs:
@@ -29,7 +29,7 @@ services:
       DATABASE_URL: postgresql://postgres:postgres@postgres:5432/todo_app?sslmode=disable
       ELECTRIC_INSECURE: true
     ports:
-      - 3000:3000
+      - 3003:3000
     depends_on:
       postgres:
         condition: service_healthy

examples/react/todo/drizzle.config.ts

@@ -7,7 +7,7 @@ export default {
   casing: `snake_case`,
   dbCredentials: {
     host: process.env.DB_HOST || `localhost`,
-    port: parseInt(process.env.DB_PORT || `54321`),
+    port: parseInt(process.env.DB_PORT || `54322`),
     user: process.env.DB_USER || `postgres`,
     password: process.env.DB_PASSWORD || `postgres`,
     database: process.env.DB_NAME || `todo_app`,

examples/react/todo/package.json

@@ -32,6 +32,7 @@
     "eslint": "^9.22.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "pg": "^8.14.1",
     "tsx": "^4.6.2",
     "typescript": "^5.8.2",
     "vite": "^6.2.2"

examples/react/todo/scripts/migrate.ts

@@ -8,7 +8,7 @@ dotenv.config()
 const { Pool } = pkg
 const pool = new Pool({
   host: process.env.DB_HOST || `localhost`,
-  port: parseInt(process.env.DB_PORT || `54321`),
+  port: parseInt(process.env.DB_PORT || `54322`),
   user: process.env.DB_USER || `postgres`,
   password: process.env.DB_PASSWORD || `postgres`,
   database: process.env.DB_NAME || `todo_app`,

examples/react/todo/src/App.tsx

@@ -18,7 +18,7 @@ export default function App() {
     id: `todos`,
     sync: createElectricSync(
       {
-        url: `http://localhost:3000/v1/shape`,
+        url: `http://localhost:3003/v1/shape`,
         params: {
           table: `todos`,
         },
@@ -69,7 +69,7 @@ export default function App() {
     id: `config`,
     sync: createElectricSync(
       {
-        url: `http://localhost:3000/v1/shape`,
+        url: `http://localhost:3003/v1/shape`,
         params: {
           table: `config`,
         },

examples/react/todo/src/db/postgres.ts

@@ -3,7 +3,7 @@ import postgres from "postgres"
 // Create a postgres instance
 export const sql = postgres({
   host: `localhost`,
-  port: 54321,
+  port: 54322,
   user: `postgres`,
   password: `postgres`,
   database: `todo_app`,

packages/optimistic/tests/TransactionManager.test.ts

@@ -591,6 +591,7 @@ describe(`TransactionManager`, () => {
           sync: () => {},
         },
         mutationFn: {
+          // eslint-disable-next-line @typescript-eslint/require-await
           persist: async () => {
             // Throw a string instead of an Error object
             throw `String error message`

pnpm-lock.yaml

@@ -1,3 +1,3 @@
 packages:
   - "packages/**"
-  - "examples/react/*"
+  - "examples/**"