Migrate SQL console

Author: simolus3

demos/supabase-todolist-drift/lib/components/page_layout.dart

@@ -1,6 +1,8 @@
+import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
+import '../navigation.gr.dart';
 import '../supabase.dart';
 import 'app_bar.dart';
 
@@ -43,7 +45,12 @@ final class PageLayout extends ConsumerWidget {
                   ),
                   ListTile(
                     title: const Text('SQL Console'),
-                    onTap: () {},
+                    onTap: () {
+                      final route = context.topRoute;
+                      if (route.name != SqlConsoleRoute.name) {
+                        context.pushRoute(const SqlConsoleRoute());
+                      }
+                    },
                   ),
                   ListTile(
                     title: const Text('Sign Out'),

demos/supabase-todolist-drift/lib/navigation.dart

@@ -31,8 +31,9 @@ final class AppRouter extends RootStackRouter {
             page: ListsRoute.page,
           ),
           _dialogRoute(AddListRoute.page),
-          CustomRoute(page: ListsDetailsRoute.page),
+          AutoRoute(page: ListsDetailsRoute.page),
           _dialogRoute(AddItemRoute.page),
+          AutoRoute(page: SqlConsoleRoute.page),
         ],
       ),
     ];

demos/supabase-todolist-drift/lib/navigation.gr.dart

@@ -0,0 +1,98 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:powersync/sqlite3_common.dart' as sqlite;
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import '../components/page_layout.dart';
+import '../powersync/powersync.dart';
+import '../powersync/schema.dart';
+
+part 'sql_console.g.dart';
+
+@riverpod
+Stream<sqlite.ResultSet> _watch(Ref ref, String sql) async* {
+  final db = await ref.read(powerSyncInstanceProvider.future);
+  yield* db.watch(sql);
+}
+
+@RoutePage()
+final class SqlConsolePage extends HookConsumerWidget {
+  const SqlConsolePage({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final query = useState('SELECT * FROM $todosTable');
+    final controller = useTextEditingController(text: query.value);
+    final rows = ref.watch(_watchProvider(query.value));
+
+    return PageLayout(
+      showDrawer: false,
+      content: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(12),
+            child: TextField(
+              controller: controller,
+              onEditingComplete: () {
+                query.value = controller.text;
+              },
+              decoration: InputDecoration(
+                isDense: false,
+                border: const OutlineInputBorder(),
+                labelText: 'Query',
+                errorText: rows.error?.toString(),
+              ),
+            ),
+          ),
+          Expanded(
+              child: SingleChildScrollView(
+            scrollDirection: Axis.horizontal,
+            child: SingleChildScrollView(
+              scrollDirection: Axis.vertical,
+              child: ResultSetTable(data: rows.value),
+            ),
+          ))
+        ],
+      ),
+    );
+  }
+}
+
+/// Stateless DataTable rendering results from a SQLite query
+final class ResultSetTable extends StatelessWidget {
+  const ResultSetTable({super.key, this.data});
+
+  final sqlite.ResultSet? data;
+
+  @override
+  Widget build(BuildContext context) {
+    if (data == null) {
+      return const Text('Loading...');
+    } else if (data!.isEmpty) {
+      return const Text('Empty');
+    }
+    return DataTable(
+      columns: <DataColumn>[
+        for (var column in data!.columnNames)
+          DataColumn(
+            label: Expanded(
+              child: Text(
+                column,
+                style: const TextStyle(fontStyle: FontStyle.italic),
+              ),
+            ),
+          ),
+      ],
+      rows: <DataRow>[
+        for (var row in data!.rows)
+          DataRow(
+            cells: <DataCell>[
+              for (var cell in row) DataCell(Text((cell ?? '').toString())),
+            ],
+          ),
+      ],
+    );
+  }
+}