More polish

Author: benitav

demos/local-only-todolist/README.md

@@ -40,7 +40,7 @@ It does the following:
 
 ## Configure your PowerSync Instance
 
-Create a new PowerSync instance, connecting to the database of the Supabase project.
+Create a new PowerSync instance, connecting to the database of the Supabase project. See instructions [here](https://docs.powersync.com/integration-guides/supabase-+-powersync#connect-powersync-to-your-supabase).
 
 Then deploy the following sync rules:
 
@@ -60,7 +60,7 @@ Insert the credentials of your Supabase and PowerSync projects into `lib/app_con
 
 ## Sign in to the app
 
-Reload the app and sign up or sign in. Once successfully signed in, existing and new data should seamlessly sync with Supabase.
+Restart the app and sign up or sign in. Once successfully signed in, existing and new data should seamlessly sync with Supabase.
 
 
 # How this works
@@ -79,26 +79,24 @@ The downside to this approach is that app queries would need to continuously dif
 
 ## Recommended implementation
 
-To keep app queries consistent between the two states, we utilize the [viewName](https://pub.dev/documentation/powersync/latest/powersync/Table/viewName.html) property, which allows overriding the default name of the view that is used in queries. 
+To keep app queries consistent between the two states, we utilize the [viewName](https://pub.dev/documentation/powersync/latest/powersync/Table/viewName.html) property, which allows overriding the default name of schema views (each table automatically has a corresponding view, defaulting to the table name, which is used in queries). 
 
 This looks as follows in the local-only state:
 
 ![diagram-1](./assets/local-only-readme-1.png)
 
-The local-only tables (`local_lists` and `local_todos`) have their view names overriden to `listsAlias` and `todosAlias`, and these names are used in queries (e.g. `PowerSync.getAll("SELECT * FROM listsAlias");`). The `lists` and `todos` tables are not used in this state, but will become relevant in the next step.
+The local-only tables (`local_lists` and `local_todos`) have their view names overriden to `lists` and `todos`, and these names are used in queries (e.g. `PowerSync.getAll("SELECT * FROM lists");`). The `lists` and `todos` tables, which are the sync-enabled tables without the `localOnly` flag, are not used at this stage, as indicated by their `inactive_synced_` view names.
 
 When the user registers / signs in:
 
 ![diagram-2](./assets/local-only-readme-2.png)
 
-The _synced_ tables (`lists` and `todos`) now have their view names overriden to `listsAlias` and `todosAlias`. Note that `updateSchema` must be run to update the view name. See the [schema](./lib/models/schema.dart) for details about this. The app query `PowerSync.getAll("SELECT * FROM listsAlias")` now reads data from the `lists` table. 
+The _synced_ tables (`lists` and `todos`) now have their view names set to `lists` and `todos`. Note that `updateSchema` must be run to update the view name. See the [schema](./lib/models/schema.dart) for details about this. The app query `PowerSync.getAll("SELECT * FROM lists")` now reads data from the `lists` table. 
 
 Finally, copy data from the local-only tables to the synced tables, and delete data from the local-only tables to reduce database size:
 
 ![diagram-3](./assets/local-only-readme-3.png)
 
-
-
 At this point, being signed in no longer determines which schema should be used, as the user's session expiring and explicitly signing out trigger different behaviors. If the session expires, the user can continue interacting with their data. However, if the user explicitly logs out, all data is cleared, effectively resetting the app. To manage this, an additional local storage mechanism is used to track which schema is currently in use, as seen [here](./lib/models/sync_mode.dart). Note that any other local storage solution would work as long as it's not using the PowerSync database (chicken and egg problem).
 
 

demos/local-only-todolist/assets/local-only-readme-1.png

@@ -1,6 +1,6 @@
 // Enter your Supabase and PowerSync project details.
 class AppConfig {
-  static const String supabaseUrl = 'https://foo.supabase.co';
-  static const String supabaseAnonKey = 'foo';
-  static const String powersyncUrl = 'https://foo.powersync.journeyapps.com';
-}
+  static const String supabaseUrl = 'https://beaywnuieweznatavpeg.supabase.co';
+  static const String supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJlYXl3bnVpZXdlem5hdGF2cGVnIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjU0NTk3OTAsImV4cCI6MjA0MTAzNTc5MH0.sb5_RBESMWbfnq_xaZy00T8Mia9lzY0-BBc7ZovS5t0';
+  static const String powersyncUrl = 'https://660fe3a331d70135abf2c626.powersync.journeyapps.com';
+}

demos/local-only-todolist/assets/local-only-readme-2.png

@@ -4,6 +4,9 @@ import 'package:powersync_flutter_local_only_demo/models/sync_mode.dart';
 /// This schema design supports a local-only to sync-enabled workflow by managing data
 /// across two versions of each table: one for local-only use without syncing before a user registers, 
 /// the other for sync-enabled use after the user registers/signs in.
+/// 
+/// This is done by utilizing the viewName property to override the default view name
+/// of a table.
 ///
 /// See the README for details.
 ///
@@ -16,16 +19,22 @@ const listsTable = 'lists';
 Schema makeSchema({synced = bool}) {
   String syncedName(String table) {
     if (synced) {
+      // results in lists, todos
       return table;
     } else {
+      // in the local-only mode of the demo
+      // these tables are not used
       return "inactive_synced_$table";
     }
   }
 
   String localName(String table) {
     if (synced) {
+      // in the sync-enabled mode of the demo
+      // these tables are not used
       return "inactive_local_$table";
     } else {
+      // results in lists, todos
       return table;
     }
   }
@@ -68,10 +77,10 @@ switchToSyncedSchema(PowerSyncDatabase db, String userId) async {
   await setSyncEnabled(true);
 
   await db.writeTransaction((tx) async {
-    // Copy local-only data to the sync-enabled tables/views.
+    // Copy local-only data to the sync-enabled views.
     // This records each operation in the upload queue.
     await tx.execute(
-        'INSERT INTO lists(id, name, created_at, owner_id) SELECT id, name, created_at, ? FROM inactive_local_lists',
+        'INSERT INTO $listsTable(id, name, created_at, owner_id) SELECT id, name, created_at, ? FROM inactive_local_$listsTable',
         [userId]);
 
     await tx.execute(

demos/local-only-todolist/assets/local-only-readme-3.png

@@ -1,3 +1,5 @@
+import 'package:powersync_flutter_local_only_demo/models/schema.dart';
+
 import 'package:powersync/powersync.dart';
 import 'package:powersync/sqlite3_common.dart' as sqlite;
 
@@ -39,7 +41,7 @@ class TodoList {
   static Stream<List<TodoList>> watchLists() {
     // This query is automatically re-run when data in "lists" or "todos" is modified.
     return db
-        .watch('SELECT * FROM lists ORDER BY created_at, id')
+        .watch('SELECT * FROM $listsTable ORDER BY created_at, id')
         .map((results) {
       return results.map(TodoList.fromRow).toList(growable: false);
     });
@@ -51,8 +53,8 @@ class TodoList {
     return db.watch('''
       SELECT
         *,
-        (SELECT count() FROM todos WHERE list_id = lists.id AND completed = TRUE) as completed_count,
-        (SELECT count() FROM todos WHERE list_id = lists.id AND completed = FALSE) as pending_count
+        (SELECT count() FROM $todosTable WHERE list_id = lists.id AND completed = TRUE) as completed_count,
+        (SELECT count() FROM $todosTable WHERE list_id = lists.id AND completed = FALSE) as pending_count
       FROM lists
       ORDER BY created_at
     ''').map((results) {
@@ -68,7 +70,7 @@ class TodoList {
   static Future<TodoList> create(String name) async {
     final results = await db.execute('''
       INSERT INTO
-        lists(id, created_at, name, owner_id)
+        $listsTable(id, created_at, name, owner_id)
         VALUES(uuid(), datetime(), ?, ?)
       RETURNING *
       ''', [name, getUserId()]);
@@ -78,28 +80,28 @@ class TodoList {
   /// Watch items within this list.
   Stream<List<TodoItem>> watchItems() {
     return db.watch(
-        'SELECT * FROM todos WHERE list_id = ? ORDER BY created_at DESC, id',
+        'SELECT * FROM $todosTable WHERE list_id = ? ORDER BY created_at DESC, id',
         parameters: [id]).map((event) {
       return event.map(TodoItem.fromRow).toList(growable: false);
     });
   }
 
   /// Delete this list.
   Future<void> delete() async {
-    await db.execute('DELETE FROM lists WHERE id = ?', [id]);
+    await db.execute('DELETE FROM $listsTable WHERE id = ?', [id]);
   }
 
   /// Find list item.
   static Future<TodoList> find(id) async {
-    final results = await db.get('SELECT * FROM lists WHERE id = ?', [id]);
+    final results = await db.get('SELECT * FROM $listsTable WHERE id = ?', [id]);
     return TodoList.fromRow(results);
   }
 
   /// Add a new todo item to this list.
   Future<TodoItem> add(String description) async {
     final results = await db.execute('''
       INSERT INTO
-        todos(id, created_at, completed, list_id, description, created_by)
+        $todosTable(id, created_at, completed, list_id, description, created_by)
         VALUES(uuid(), datetime(), FALSE, ?, ?, ?)
       RETURNING *
     ''', [id, description, getUserId()]);