diff --git a/README.md b/README.md index e594fbbe..c7700250 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,8 @@ Demo applications are located in the [`demos/`](./demos) directory. See their re - [demos/hello-powersync](./demos/hello-powersync/README.md): A minimal example demonstrating the use of the PowerSync Kotlin Multiplatform SDK and the Supabase connector. - [demos/supabase-todolist](./demos/supabase-todolist/README.md): A simple to-do list application demonstrating the use of the PowerSync Kotlin Multiplatform SDK and the Supabase connector. +- +- [demos/android-supabase-todolist](./demos/android-supabase-todolist/README.md): A simple to-do list application demonstrating the use of the PowerSync Kotlin Multiplatform SDK and the Supabase connector in an Android application. ## Current Limitations / Future work diff --git a/demos/android-supabase-todolist/README.md b/demos/android-supabase-todolist/README.md new file mode 100644 index 00000000..7f9f7ce2 --- /dev/null +++ b/demos/android-supabase-todolist/README.md @@ -0,0 +1,66 @@ +# PowerSync + Supabase Android Demo: Todo List App + +This is a simple to-do list application demonstrating the use of the Kotlin Multiplatform SDK's Android package in an [Android Kotlin](https://kotlinlang.org/docs/android-overview.html) project with [Supabase](https://supabase.com/). + +## Set up your Supabase and PowerSync project + +To run this demo, you need a Supabase and PowerSync project. Detailed instructions for integrating PowerSync with Supabase can be found in [the integration guide](https://docs.powersync.com/integration-guides/supabase). + +Follow this guide to: +1. Create and configure a Supabase project. +2. 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). +3. Deploy sync rules. + +## Configure project in Android Studio + +1. Clone this repo: ```git clone https://github.com/powersync-ja/powersync-kotlin.git``` +2. Open `powersync-kotlin/demos/android-supabase-todolist` in Android Studio. +3. Sync the project with Gradle (this should happen automatically, or choose File > Sync project with Gradle Files). +4. Insert your Supabase project URL, Supabase Anon Key, and PowerSync instance URL into the `local.properties` file: + +```bash +# local.properties +sdk.dir=/path/to/android/sdk + +# Enter your PowerSync instance URL +POWERSYNC_URL=https://foo.powersync.journeyapps.com +# Enter your Supabase project's URL and public anon key (Project settings > API) +SUPABASE_URL=https://foo.supabase.co +SUPABASE_ANON_KEY=foo +``` + +## Run the app + +Choose a run configuration for the Android app in Android Studio and run it. + +## To include PowerSync in your own Android app make sure to do the following: + +1. Add `jitpack` as a repository to your `settings.gradle.kts` so that the underlying android sqlite package can be downloaded: + +```gradle +dependencyResolutionManagement { + repositories { + maven("https://jitpack.io") + ... + } +} +``` + +2. Add the PowerSync SDK to your project by adding the following to your `build.gradle.kts` file: + +```kotlin + +dependencies { + implementation("com.powersync:core-android:$powersyncVersion") + ... +} +``` + +If you want to use the Supabase Connector, also add the following to `dependencies`: + +```kotlin +dependencies { + implementation("com.powersync:connector-supabase:$powersyncVersion") + ... +} +``` \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/.gitignore b/demos/android-supabase-todolist/app/.gitignore new file mode 100644 index 00000000..42afabfd --- /dev/null +++ b/demos/android-supabase-todolist/app/.gitignore @@ -0,0 +1 @@ +/build \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/build.gradle.kts b/demos/android-supabase-todolist/app/build.gradle.kts new file mode 100644 index 00000000..38bd217d --- /dev/null +++ b/demos/android-supabase-todolist/app/build.gradle.kts @@ -0,0 +1,96 @@ +import java.util.Properties + +plugins { + alias(libs.plugins.android.application) + alias(libs.plugins.jetbrains.kotlin.android) + alias(libs.plugins.sqldelight) +} + +val localProperties = Properties() +val localPropertiesFile = rootProject.file("local.properties") +if (localPropertiesFile.exists()) { + localPropertiesFile.inputStream().use { localProperties.load(it) } +} + +fun getLocalProperty(key: String, defaultValue: String): String { + return localProperties.getProperty(key, defaultValue) +} + +android { + namespace = "com.powersync.androidexample" + compileSdk = 34 + + buildFeatures { + buildConfig = true + } + + defaultConfig { + applicationId = "com.powersync.androidexample" + minSdk = 24 + targetSdk = 34 + versionCode = 1 + versionName = "1.0" + + testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" + vectorDrawables { + useSupportLibrary = true + } + + buildConfigField("String", "SUPABASE_URL", "\"${getLocalProperty("SUPABASE_URL", "")}\"") + buildConfigField("String", "SUPABASE_ANON_KEY", "\"${getLocalProperty("SUPABASE_ANON_KEY", "")}\"") + buildConfigField("String", "POWERSYNC_URL", "\"${getLocalProperty("POWERSYNC_URL", "")}\"") + } + + buildTypes { + release { + isMinifyEnabled = false + proguardFiles( + getDefaultProguardFile("proguard-android-optimize.txt"), + "proguard-rules.pro" + ) + } + } + compileOptions { + sourceCompatibility = JavaVersion.VERSION_1_8 + targetCompatibility = JavaVersion.VERSION_1_8 + } + kotlinOptions { + jvmTarget = "1.8" + } + buildFeatures { + compose = true + } + composeOptions { + kotlinCompilerExtensionVersion = "1.5.1" + } + packaging { + resources { + excludes += "/META-INF/{AL2.0,LGPL2.1}" + } + } +} + +dependencies { + implementation(libs.androidx.core.splashscreen) + implementation(libs.androidx.core.ktx) + implementation(libs.androidx.lifecycle.runtime.ktx) + implementation(libs.androidx.activity.compose) + implementation(platform(libs.androidx.compose.bom)) + implementation(libs.androidx.ui) + implementation(libs.androidx.ui.graphics) + implementation(libs.androidx.ui.tooling.preview) + implementation(libs.androidx.material3) + testImplementation(libs.junit) + androidTestImplementation(libs.androidx.junit) + androidTestImplementation(libs.androidx.espresso.core) + androidTestImplementation(platform(libs.androidx.compose.bom)) + androidTestImplementation(libs.androidx.ui.test.junit4) + debugImplementation(libs.androidx.ui.tooling) + debugImplementation(libs.androidx.ui.test.manifest) + implementation("com.powersync:core") + implementation("com.powersync:connector-supabase") + implementation("com.powersync:compose") + implementation(libs.uuid) + implementation(libs.kermit) + implementation(libs.androidx.material.icons.extended) +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/proguard-rules.pro b/demos/android-supabase-todolist/app/proguard-rules.pro new file mode 100644 index 00000000..481bb434 --- /dev/null +++ b/demos/android-supabase-todolist/app/proguard-rules.pro @@ -0,0 +1,21 @@ +# Add project specific ProGuard rules here. +# You can control the set of applied configuration files using the +# proguardFiles setting in build.gradle. +# +# For more details, see +# http://developer.android.com/guide/developing/tools/proguard.html + +# If your project uses WebView with JS, uncomment the following +# and specify the fully qualified class name to the JavaScript interface +# class: +#-keepclassmembers class fqcn.of.javascript.interface.for.webview { +# public *; +#} + +# Uncomment this to preserve the line number information for +# debugging stack traces. +#-keepattributes SourceFile,LineNumberTable + +# If you keep the line number information, uncomment this to +# hide the original source file name. +#-renamesourcefileattribute SourceFile \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/androidTest/java/com/example/androidexample/ExampleInstrumentedTest.kt b/demos/android-supabase-todolist/app/src/androidTest/java/com/example/androidexample/ExampleInstrumentedTest.kt new file mode 100644 index 00000000..38723314 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/androidTest/java/com/example/androidexample/ExampleInstrumentedTest.kt @@ -0,0 +1,24 @@ +package com.powersync.androidexample + +import androidx.test.platform.app.InstrumentationRegistry +import androidx.test.ext.junit.runners.AndroidJUnit4 + +import org.junit.Test +import org.junit.runner.RunWith + +import org.junit.Assert.* + +/** + * Instrumented test, which will execute on an Android device. + * + * See [testing documentation](http://d.android.com/tools/testing). + */ +@RunWith(AndroidJUnit4::class) +class ExampleInstrumentedTest { + @Test + fun useAppContext() { + // Context of the app under test. + val appContext = InstrumentationRegistry.getInstrumentation().targetContext + assertEquals("com.powersync.androidexample", appContext.packageName) + } +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/AndroidManifest.xml b/demos/android-supabase-todolist/app/src/main/AndroidManifest.xml new file mode 100644 index 00000000..622607af --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/AndroidManifest.xml @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/App.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/App.kt new file mode 100644 index 00000000..d0b7588b --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/App.kt @@ -0,0 +1,150 @@ +package com.powersync.demos + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material3.MaterialTheme +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.collectAsState +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.rememberUpdatedState +import androidx.compose.ui.Modifier +import com.powersync.androidexample.BuildConfig +import com.powersync.PowerSyncDatabase +import com.powersync.compose.rememberDatabaseDriverFactory +import com.powersync.connector.supabase.SupabaseConnector +import com.powersync.demos.components.EditDialog +import com.powersync.demos.powersync.ListContent +import com.powersync.demos.powersync.ListItem +import com.powersync.demos.powersync.Todo +import com.powersync.demos.powersync.schema +import com.powersync.demos.screens.HomeScreen +import com.powersync.demos.screens.SignInScreen +import com.powersync.demos.screens.SignUpScreen +import com.powersync.demos.screens.TodosScreen +import kotlinx.coroutines.runBlocking + + +@Composable +fun App() { + val driverFactory = rememberDatabaseDriverFactory() + val supabase = remember { + SupabaseConnector( + powerSyncEndpoint = BuildConfig.POWERSYNC_URL, + supabaseUrl = BuildConfig.SUPABASE_URL, + supabaseKey = BuildConfig.SUPABASE_ANON_KEY + ) + } + val db = remember { PowerSyncDatabase(driverFactory, schema) } + val syncStatus = db.currentStatus + val status = syncStatus.asFlow().collectAsState(initial = null) + + val navController = remember { NavController(Screen.Home) } + val authViewModel = remember { + AuthViewModel(supabase, db, navController) + } + + val authState by authViewModel.authState.collectAsState() + val currentScreen by navController.currentScreen.collectAsState() + + val userId by authViewModel.userId.collectAsState() + val currentUserId = rememberUpdatedState(userId) + val lists = remember { mutableStateOf(ListContent(db, userId)) } + LaunchedEffect(currentUserId.value) { + lists.value = ListContent(db, currentUserId.value) + } + val selectedListId by lists.value.selectedListId.collectAsState() + val items by lists.value.watchItems().collectAsState(initial = emptyList()) + val listsInputText by lists.value.inputText.collectAsState() + + val todos = remember { mutableStateOf(Todo(db, userId)) } + LaunchedEffect(currentUserId.value) { + todos.value = Todo(db, currentUserId.value) + } + val todoItems by todos.value.watchItems(selectedListId).collectAsState(initial = emptyList()) + val editingItem by todos.value.editingItem.collectAsState() + val todosInputText by todos.value.inputText.collectAsState() + + fun handleSignOut() { + runBlocking { + authViewModel.signOut() + } + } + + when (currentScreen) { + is Screen.Home -> { + if(authState == AuthState.SignedOut) { + navController.navigate(Screen.SignIn) + } + + val handleOnItemClicked = { item: ListItem -> + lists.value.onItemClicked(item) + navController.navigate(Screen.Todos) + } + + HomeScreen( + modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background), + items = items, + isConnected = status.value?.connected, + onSignOutSelected = { handleSignOut() }, + inputText = listsInputText, + onItemClicked = handleOnItemClicked, + onItemDeleteClicked = lists.value::onItemDeleteClicked, + onAddItemClicked = lists.value::onAddItemClicked, + onInputTextChanged = lists.value::onInputTextChanged, + ) + } + + is Screen.Todos -> { + val handleOnAddItemClicked = { + todos.value.onAddItemClicked(userId, selectedListId) + } + + TodosScreen( + modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background), + navController = navController, + items = todoItems, + isConnected = status.value?.connected, + inputText = todosInputText, + onItemClicked = todos.value::onItemClicked, + onItemDoneChanged = todos.value::onItemDoneChanged, + onItemDeleteClicked = todos.value::onItemDeleteClicked, + onAddItemClicked = handleOnAddItemClicked, + onInputTextChanged = todos.value::onInputTextChanged, + ) + + editingItem?.also { + EditDialog( + item = it, + onCloseClicked = todos.value::onEditorCloseClicked, + onTextChanged = todos.value::onEditorTextChanged, + onDoneChanged = todos.value::onEditorDoneChanged, + ) + } + } + + is Screen.SignIn -> { + if(authState == AuthState.SignedIn) { + navController.navigate(Screen.Home) + } + + SignInScreen( + navController, + authViewModel + ) + } + + is Screen.SignUp -> { + if(authState == AuthState.SignedIn) { + navController.navigate(Screen.Home) + } + + SignUpScreen( + navController, + authViewModel + ) + } + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/Auth.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/Auth.kt new file mode 100644 index 00000000..28fad731 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/Auth.kt @@ -0,0 +1,70 @@ +package com.powersync.demos + +import androidx.lifecycle.ViewModel +import androidx.lifecycle.viewModelScope +import co.touchlab.kermit.Logger +import com.powersync.PowerSyncDatabase +import com.powersync.connector.supabase.SupabaseConnector +import io.github.jan.supabase.gotrue.SessionStatus +import kotlinx.coroutines.flow.MutableStateFlow +import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.launch + +sealed class AuthState { + data object SignedOut: AuthState() + data object SignedIn: AuthState() +} + +internal class AuthViewModel( + private val supabase: SupabaseConnector, + private val db: PowerSyncDatabase, + private val navController: NavController +): ViewModel() { + private val _authState = MutableStateFlow(AuthState.SignedOut) + val authState: StateFlow = _authState + private val _userId = MutableStateFlow(null) + val userId: StateFlow = _userId + + init { + viewModelScope.launch { + supabase.sessionStatus.collect() { + when (it) { + is SessionStatus.Authenticated -> { + _authState.value = AuthState.SignedIn + _userId.value = it.session.user?.id + db.connect(supabase) + navController.navigate(Screen.Home) + } + + SessionStatus.LoadingFromStorage -> Logger.e("Loading from storage") + SessionStatus.NetworkError -> Logger.e("Network error") + is SessionStatus.NotAuthenticated -> { + db.disconnectAndClear() + _authState.value = AuthState.SignedOut + navController.navigate(Screen.SignIn) + } + } + } + } + } + + suspend fun signIn(email: String, password: String) { + supabase.login(email, password) + _authState.value = AuthState.SignedIn + } + + suspend fun signUp(email: String, password: String) { + supabase.signUp(email, password) + _authState.value = AuthState.SignedIn + } + + suspend fun signOut() { + try { + supabase.signOut() + } catch (e: Exception) { + Logger.e("Error signing out: $e") + } finally { + _authState.value = AuthState.SignedOut + } + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/MainActivity.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/MainActivity.kt new file mode 100644 index 00000000..39e1eceb --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/MainActivity.kt @@ -0,0 +1,19 @@ +package com.powersync.androidexample + +import android.os.Bundle +import androidx.activity.ComponentActivity +import androidx.activity.compose.setContent +import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen +import com.powersync.demos.App + +class MainActivity : ComponentActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + installSplashScreen() + + super.onCreate(savedInstanceState) + + setContent { + App() + } + } +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/NavController.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/NavController.kt new file mode 100644 index 00000000..871269d7 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/NavController.kt @@ -0,0 +1,21 @@ +package com.powersync.demos + +import kotlinx.coroutines.flow.MutableStateFlow +import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.flow.asStateFlow + +sealed class Screen { + data object Home : Screen() + data object SignIn : Screen() + data object SignUp : Screen() + data object Todos : Screen() +} + +internal class NavController(initialScreen: Screen) { + private val _currentScreen = MutableStateFlow(initialScreen) + val currentScreen: StateFlow = _currentScreen.asStateFlow() + + fun navigate(screen: Screen) { + _currentScreen.value = screen + } +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/Utils.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/Utils.kt new file mode 100644 index 00000000..f345ef73 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/Utils.kt @@ -0,0 +1,40 @@ +package com.powersync.demos + +import androidx.compose.foundation.lazy.LazyListState +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.input.key.Key +import androidx.compose.ui.input.key.KeyEventType +import androidx.compose.ui.input.key.key +import androidx.compose.ui.input.key.onKeyEvent +import androidx.compose.ui.input.key.type +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp + +internal val MARGIN_SCROLLBAR: Dp = 0.dp + +internal interface ScrollbarAdapter + +@Composable +internal fun rememberScrollbarAdapter(scrollState: LazyListState): ScrollbarAdapter = + object : ScrollbarAdapter {} + +@Composable +internal fun VerticalScrollbar( + modifier: Modifier, + adapter: ScrollbarAdapter +) { + // no-op +} + + + +internal fun Modifier.onKeyUp(key: Key, action: () -> Unit): Modifier = + onKeyEvent { event -> + if ((event.type == KeyEventType.KeyUp) && (event.key == key)) { + action() + true + } else { + false + } + } diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/EditDialog.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/EditDialog.kt new file mode 100644 index 00000000..6df9327d --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/EditDialog.kt @@ -0,0 +1,93 @@ +package com.powersync.demos.components + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.sizeIn +import androidx.compose.material3.Button +import androidx.compose.material3.Card +import androidx.compose.material3.CardDefaults +import androidx.compose.material3.Checkbox +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.ProvideTextStyle +import androidx.compose.material3.Text +import androidx.compose.material3.TextField +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import androidx.compose.ui.window.Dialog +import com.powersync.demos.powersync.TodoItem + +@Composable +internal fun EditDialog( + item: TodoItem, + onCloseClicked: () -> Unit, + onTextChanged: (String) -> Unit, + onDoneChanged: (Boolean) -> Unit, +) { + EditDialog( + onCloseRequest = onCloseClicked, + ) { + Column(horizontalAlignment = Alignment.CenterHorizontally) { + TextField( + value = item.description, + modifier = Modifier.weight(1F).fillMaxWidth().sizeIn(minHeight = 192.dp), + label = { Text("Todo text") }, + onValueChange = onTextChanged, + ) + + Spacer(modifier = Modifier.height(8.dp)) + + Row { + Text(text = "Completed", Modifier.padding(15.dp)) + Checkbox( + checked = item.completed, + onCheckedChange = onDoneChanged, + ) + } + } + } +} + +@Composable +private fun EditDialog( + onCloseRequest: () -> Unit, + content: @Composable () -> Unit +) { + Dialog( + onDismissRequest = onCloseRequest, + ) { + Card(elevation = CardDefaults.cardElevation(defaultElevation = 8.dp) ) { + Column( + modifier = Modifier + .padding(8.dp) + .height(IntrinsicSize.Min) + ) { + ProvideTextStyle(MaterialTheme.typography.bodySmall) { + Text(text = "Edit todo") + } + + Spacer(modifier = Modifier.height(8.dp)) + + Box(modifier = Modifier.weight(1F)) { + content() + } + + Spacer(modifier = Modifier.height(8.dp)) + + Button( + onClick = onCloseRequest, + modifier = Modifier.align(Alignment.End) + ) { + Text(text = "Done") + } + } + } + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/Input.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/Input.kt new file mode 100644 index 00000000..1bc1173b --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/Input.kt @@ -0,0 +1,47 @@ +package com.powersync.demos.components + +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.OutlinedTextField +import androidx.compose.material3.Text +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Add +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.input.key.Key +import androidx.compose.ui.unit.dp +import com.powersync.demos.Screen +import com.powersync.demos.onKeyUp + +@Composable +internal fun Input( + text: String, + onTextChanged: (String) -> Unit, + onAddClicked: () -> Unit, + screen: Screen, +) { + Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(8.dp)) { + OutlinedTextField( + value = text, + modifier = Modifier + .weight(weight = 1F) + .onKeyUp(key = Key.Enter, action = onAddClicked), + onValueChange = onTextChanged, + label = { Text(text = if(screen == Screen.Home) "Add a list" else "Add a todo") } + ) + + Spacer(modifier = Modifier.width(8.dp)) + + IconButton(onClick = onAddClicked) { + Icon( + imageVector = Icons.Default.Add, + contentDescription = null + ) + } + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/List.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/List.kt new file mode 100644 index 00000000..a7d92c9b --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/List.kt @@ -0,0 +1,42 @@ +package com.powersync.demos.components + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.material3.HorizontalDivider +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import com.powersync.demos.VerticalScrollbar +import com.powersync.demos.powersync.ListItem +import com.powersync.demos.rememberScrollbarAdapter + +@Composable +internal fun ListContent( + items: List, + onItemClicked: (item: ListItem) -> Unit, + onItemDeleteClicked: (item: ListItem) -> Unit, +) { + Box { + val listState = rememberLazyListState() + + LazyColumn(state = listState) { + items(items) { item -> + ListItem( + item = item, + onClicked = { onItemClicked(item) }, + onDeleteClicked = { onItemDeleteClicked(item) } + ) + + HorizontalDivider() + } + } + + VerticalScrollbar( + modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(), + adapter = rememberScrollbarAdapter(scrollState = listState) + ) + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/ListItem.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/ListItem.kt new file mode 100644 index 00000000..625173b1 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/ListItem.kt @@ -0,0 +1,48 @@ +package com.powersync.demos.components + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.width +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Delete +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp +import com.powersync.demos.MARGIN_SCROLLBAR +import com.powersync.demos.powersync.ListItem + +@Composable +internal fun ListItem( + item: ListItem, + onClicked: () -> Unit, + onDeleteClicked: () -> Unit +) { + Row(modifier = Modifier.clickable(onClick = onClicked)) { + Spacer(modifier = Modifier.width(16.dp)) + + Text( + text = AnnotatedString(item.name), + modifier = Modifier.weight(1F).align(Alignment.CenterVertically), + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + + Spacer(modifier = Modifier.width(8.dp)) + + IconButton(onClick = onDeleteClicked) { + Icon( + imageVector = Icons.Default.Delete, + contentDescription = null + ) + } + + Spacer(modifier = Modifier.width(MARGIN_SCROLLBAR)) + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/Menu.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/Menu.kt new file mode 100644 index 00000000..ec8a7c5b --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/Menu.kt @@ -0,0 +1,39 @@ +package com.powersync.demos.components + +import androidx.compose.material3.* +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Menu +import androidx.compose.runtime.* + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +fun Menu( + isLoggedIn: Boolean, + onSignOutSelected: () -> Unit +) { + var expanded by remember { mutableStateOf(false) } + + if (isLoggedIn) { + TopAppBar( + title = { Text("Your App") }, + navigationIcon = { + IconButton(onClick = { expanded = true }) { + Icon(Icons.Default.Menu, contentDescription = "Menu") + } + } + ) + + DropdownMenu( + expanded = expanded, + onDismissRequest = { expanded = false } + ) { + DropdownMenuItem( + text = { Text("Sign Out") }, + onClick = { + expanded = false + onSignOutSelected() + }) + } + } +} + diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/TodoItem.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/TodoItem.kt new file mode 100644 index 00000000..a9b14457 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/TodoItem.kt @@ -0,0 +1,58 @@ +package com.powersync.demos.components + +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.width +import androidx.compose.material3.Checkbox +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Delete +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp +import com.powersync.demos.MARGIN_SCROLLBAR +import com.powersync.demos.powersync.TodoItem + +@Composable +internal fun TodoItem( + item: TodoItem, + onClicked: () -> Unit, + onDoneChanged: (Boolean) -> Unit, + onDeleteClicked: () -> Unit +) { + Row(modifier = Modifier.clickable(onClick = onClicked)) { + Spacer(modifier = Modifier.width(8.dp)) + + Checkbox( + checked = item.completed, + modifier = Modifier.align(Alignment.CenterVertically), + onCheckedChange = onDoneChanged, + ) + + Spacer(modifier = Modifier.width(8.dp)) + + Text( + text = AnnotatedString(item.description), + modifier = Modifier.weight(1F).align(Alignment.CenterVertically), + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + + Spacer(modifier = Modifier.width(8.dp)) + + IconButton(onClick = onDeleteClicked) { + Icon( + imageVector = Icons.Default.Delete, + contentDescription = null + ) + } + + Spacer(modifier = Modifier.width(MARGIN_SCROLLBAR)) + } +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/TodoList.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/TodoList.kt new file mode 100644 index 00000000..c2ccd5ec --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/TodoList.kt @@ -0,0 +1,44 @@ +package com.powersync.demos.components + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.foundation.lazy.rememberLazyListState +import androidx.compose.material3.HorizontalDivider +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import com.powersync.demos.powersync.TodoItem +import com.powersync.demos.VerticalScrollbar +import com.powersync.demos.rememberScrollbarAdapter + +@Composable +internal fun TodoList( + items: List, + onItemClicked: (id: TodoItem) -> Unit, + onItemDoneChanged: (item: TodoItem, isDone: Boolean) -> Unit, + onItemDeleteClicked: (item: TodoItem) -> Unit, +) { + Box { + val listState = rememberLazyListState() + + LazyColumn(state = listState) { + items(items) { item -> + TodoItem( + item = item, + onClicked = { onItemClicked(item) }, + onDoneChanged = { onItemDoneChanged(item, it) }, + onDeleteClicked = { onItemDeleteClicked(item) } + ) + + HorizontalDivider() + } + } + + VerticalScrollbar( + modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(), + adapter = rememberScrollbarAdapter(scrollState = listState) + ) + } +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/WifiIcon.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/WifiIcon.kt new file mode 100644 index 00000000..f8faf84a --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/components/WifiIcon.kt @@ -0,0 +1,21 @@ +package com.powersync.demos.components + +import androidx.compose.material3.Icon +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Wifi +import androidx.compose.material.icons.filled.WifiOff +import androidx.compose.runtime.Composable + +@Composable +fun WifiIcon(isConnected: Boolean) { + val icon = if (isConnected) { + Icons.Filled.Wifi + } else { + Icons.Filled.WifiOff + } + + Icon( + imageVector = icon, + contentDescription = if (isConnected) "Online" else "Offline", + ) +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/List.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/List.kt new file mode 100644 index 00000000..585a7d51 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/List.kt @@ -0,0 +1,69 @@ +package com.powersync.demos.powersync + +import androidx.lifecycle.ViewModel +import com.powersync.PowerSyncDatabase +import kotlinx.coroutines.flow.Flow +import kotlinx.coroutines.flow.MutableStateFlow +import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.runBlocking + +internal class ListContent( + private val db: PowerSyncDatabase, + private val userId: String? +): ViewModel() { + private val _selectedListId = MutableStateFlow(null) + val selectedListId: StateFlow = _selectedListId + + private val _inputText = MutableStateFlow("") + val inputText: StateFlow = _inputText + + fun watchItems(): Flow> { + return db.watch(""" + SELECT + * + FROM + $LISTS_TABLE + LEFT JOIN $TODOS_TABLE + ON $LISTS_TABLE.id = $TODOS_TABLE.list_id + GROUP BY $LISTS_TABLE.id + """) { cursor -> + ListItem( + id = cursor.getString(0)!!, + createdAt = cursor.getString(1)!!, + name = cursor.getString(2)!!, + ownerId = cursor.getString(3)!! + ) + } + } + + fun onItemDeleteClicked(item: ListItem) { + runBlocking { + db.writeTransaction { tx -> + tx.execute("DELETE FROM $LISTS_TABLE WHERE id = ?", listOf(item.id)) + tx.execute("DELETE FROM $TODOS_TABLE WHERE list_id = ?", listOf(item.id)) + } + } + } + + fun onAddItemClicked() { + if (_inputText.value.isBlank()) return + + runBlocking { + db.writeTransaction { tx -> + tx.execute( + "INSERT INTO $LISTS_TABLE (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?)", + listOf(_inputText.value, userId) + ) + } + _inputText.value = "" + } + } + + fun onItemClicked(item: ListItem) { + _selectedListId.value = item.id + } + + fun onInputTextChanged(text: String) { + _inputText.value = text + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/Schema.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/Schema.kt new file mode 100644 index 00000000..9ab757e4 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/Schema.kt @@ -0,0 +1,66 @@ +package com.powersync.demos.powersync + +import com.powersync.db.schema.Column +import com.powersync.db.schema.Index +import com.powersync.db.schema.IndexedColumn +import com.powersync.db.schema.Schema +import com.powersync.db.schema.Table + +const val LISTS_TABLE = "lists" +const val TODOS_TABLE = "todos" + +val todos = Table( + TODOS_TABLE, + listOf( + Column.text("created_at"), + Column.text("completed_at"), + Column.text("description"), + Column.text("created_by"), + Column.text("completed_by"), + // 0 or 1 to represent false or true + Column.integer("completed"), + Column.text("list_id"), + Column.text("photo_id") + ), + indexes = listOf( + Index( + name = "listid", + columns = listOf(IndexedColumn("list_id")) + ) + ) +) + +val lists = Table( + LISTS_TABLE, + listOf( + Column.text("created_at"), + Column.text("name"), + Column.text("owner_id") + ) +) + +val schema: Schema = Schema( + listOf( + todos, + lists, + ) +) + +data class ListItem( + val id: String, + val name: String, + val createdAt: String, + val ownerId: String +) + +data class TodoItem( + val id: String, + val listId: String, + val photoId: String?, + val createdAt: String?, + val completedAt: String?, + val description: String, + val createdBy: String?, + val completedBy: String?, + val completed: Boolean = false +) diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/Todo.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/Todo.kt new file mode 100644 index 00000000..abcbf451 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/powersync/Todo.kt @@ -0,0 +1,128 @@ +package com.powersync.demos.powersync + +import androidx.lifecycle.ViewModel +import androidx.lifecycle.viewModelScope +import co.touchlab.kermit.Logger +import com.powersync.PowerSyncDatabase +import kotlinx.coroutines.flow.Flow +import kotlinx.coroutines.flow.MutableStateFlow +import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.launch +import kotlinx.datetime.Clock + +internal class Todo( + private val db: PowerSyncDatabase, + private val userId: String? +): ViewModel() { + + private val _inputText = MutableStateFlow("") + val inputText: StateFlow = _inputText + + private val _editingItem = MutableStateFlow(null) + val editingItem: StateFlow = _editingItem + + fun watchItems(listId: String?): Flow> { + return db.watch(""" + SELECT * + FROM $TODOS_TABLE + WHERE list_id = ? + ORDER by id + """, + if(listId != null) listOf(listId) else null + ) { cursor -> + TodoItem( + id = cursor.getString(0)!!, + createdAt = cursor.getString(1), + completedAt = cursor.getString(2), + description = cursor.getString(3)!!, + createdBy = cursor.getString(4), + completedBy = cursor.getString(5), + completed = cursor.getLong(6) == 1L, + listId = cursor.getString(7)!!, + photoId = cursor.getString(8) + ) + } + } + + fun onItemClicked(item: TodoItem) { + _editingItem.value = item + } + + fun onItemDoneChanged(item: TodoItem, isDone: Boolean) { + updateItem(item = item) { + it.copy( + completed = isDone, + completedBy = if(isDone) userId else null, + completedAt = if(isDone) Clock.System.now().toString() else null + ) + } + } + + fun onItemDeleteClicked(item: TodoItem) { + viewModelScope.launch { + db.writeTransaction { tx -> + tx.execute("DELETE FROM $TODOS_TABLE WHERE id = ?", listOf(item.id)) + } + } + } + + fun onAddItemClicked(userId: String?, listId: String?) { + if (_inputText.value.isBlank()) return + + if(userId == null || listId == null) { + throw Exception("userId or listId is null") + } + + viewModelScope.launch { + db.writeTransaction { tx -> + tx.execute( + "INSERT INTO $TODOS_TABLE (id, created_at, created_by, description, list_id) VALUES (uuid(), datetime(), ?, ?, ?)", + listOf(userId, _inputText.value, listId) + ) + } + _inputText.value = "" + } + } + + fun onInputTextChanged(text: String) { + _inputText.value = text + } + + fun onEditorCloseClicked() { + updateItem(item = requireNotNull(_editingItem.value)) { it.copy() } + _editingItem.value = null + } + + fun onEditorTextChanged(text: String) { + updateEditingItem(item = requireNotNull(_editingItem.value)) { + it.copy(description = text) + } + } + + fun onEditorDoneChanged(isDone: Boolean) { + updateEditingItem(item = requireNotNull(_editingItem.value)) { + it.copy( + completed = isDone, + completedBy = if(isDone) userId else null, + completedAt = if(isDone) Clock.System.now().toString() else null + ) + } + } + + private fun updateEditingItem(item: TodoItem, transformer: (item: TodoItem) -> TodoItem) { + _editingItem.value = transformer(item) + } + + private fun updateItem(item: TodoItem, transformer: (item: TodoItem) -> TodoItem) { + viewModelScope.launch { + val updatedItem = transformer(item) + Logger.i("Updating item: $updatedItem") + db.writeTransaction { tx -> + tx.execute( + "UPDATE $TODOS_TABLE SET description = ?, completed = ?, completed_by = ?, completed_at = ? WHERE id = ?", + listOf(updatedItem.description, updatedItem.completed, updatedItem.completedBy, updatedItem.completedAt, item.id) + ) + } + } + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/HomeScreen.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/HomeScreen.kt new file mode 100644 index 00000000..86238d8e --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/HomeScreen.kt @@ -0,0 +1,70 @@ +package com.powersync.demos.screens + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import com.powersync.demos.Screen +import com.powersync.demos.components.Input +import com.powersync.demos.components.ListContent +import com.powersync.demos.components.Menu +import com.powersync.demos.components.WifiIcon +import com.powersync.demos.powersync.ListItem + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +internal fun HomeScreen( + modifier: Modifier = Modifier, + items: List, + inputText: String, + isConnected: Boolean?, + onSignOutSelected: () -> Unit, + onItemClicked: (item: ListItem) -> Unit, + onItemDeleteClicked: (item: ListItem) -> Unit, + onAddItemClicked: () -> Unit, + onInputTextChanged: (value: String) -> Unit, +) { + + Column(modifier) { + TopAppBar( + title = { + Text( + "Todo Lists", + textAlign = TextAlign.Center, + modifier = Modifier.fillMaxWidth().padding(end = 36.dp) + ) }, + navigationIcon = { Menu( + true, + onSignOutSelected + ) }, + actions = { + WifiIcon(isConnected ?: false) + Spacer(modifier = Modifier.width(16.dp)) + } + ) + + Input( + text = inputText, + onAddClicked = onAddItemClicked, + onTextChanged = onInputTextChanged, + screen = Screen.Home + ) + + Box(Modifier.weight(1F)) { + ListContent( + items = items, + onItemClicked = onItemClicked, + onItemDeleteClicked = onItemDeleteClicked + ) + } + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/SignInScreen.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/SignInScreen.kt new file mode 100644 index 00000000..4183e38d --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/SignInScreen.kt @@ -0,0 +1,109 @@ +package com.powersync.demos.screens + +import androidx.compose.foundation.layout.* +import androidx.compose.material3.* +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.unit.dp +import com.powersync.demos.AuthViewModel +import com.powersync.demos.NavController +import com.powersync.demos.Screen +import io.github.jan.supabase.exceptions.BadRequestRestException +import kotlinx.coroutines.launch + +@Composable +internal fun SignInScreen( + navController: NavController, + authViewModel: AuthViewModel, +) { + var email by remember { mutableStateOf("") } + var password by remember { mutableStateOf("") } + var errorMessage by remember { mutableStateOf(null) } + var isLoading by remember { mutableStateOf(false) } + + val coroutineScope = rememberCoroutineScope() + + Column( + modifier = Modifier + .fillMaxSize() + .padding(16.dp), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text( + "Sign In", + style = MaterialTheme.typography.headlineMedium, + modifier = Modifier.padding(bottom = 32.dp) + ) + + TextField( + value = email, + onValueChange = { email = it }, + label = { Text("Email") }, + modifier = Modifier + .fillMaxWidth() + .padding(bottom = 16.dp) + ) + + TextField( + value = password, + onValueChange = { password = it }, + label = { Text("Password") }, + visualTransformation = PasswordVisualTransformation(), + modifier = Modifier + .fillMaxWidth() + .padding(bottom = 16.dp) + ) + + if (errorMessage != null) { + Text( + text = errorMessage!!, + color = MaterialTheme.colorScheme.error, + modifier = Modifier.padding(vertical = 16.dp) + ) + } + + Button( + onClick = { + coroutineScope.launch { + isLoading = true + errorMessage = null + try { + authViewModel.signIn(email, password) + } catch (e: Exception) { + if (e is BadRequestRestException) { + errorMessage = "Invalid email or password" + } else { + errorMessage = e.message ?: "An error occurred during sign-in" + } + } finally { + isLoading = false + } + } + }, + modifier = Modifier.align(Alignment.End), + enabled = !isLoading + ) { + Text(if (isLoading) "Signing In..." else "Sign In") + } + + Spacer(modifier = Modifier.height(16.dp)) + + TextButton( + onClick = { + navController.navigate(Screen.SignUp) + }, + modifier = Modifier.align(Alignment.CenterHorizontally) + ) { + Text("Don't have an account? Sign Up") + } + } + + if (isLoading) { + Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { + CircularProgressIndicator() + } + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/SignUpScreen.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/SignUpScreen.kt new file mode 100644 index 00000000..f51038be --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/SignUpScreen.kt @@ -0,0 +1,114 @@ +package com.powersync.demos.screens + +import androidx.compose.foundation.layout.* +import androidx.compose.material3.* +import androidx.compose.runtime.* +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.input.PasswordVisualTransformation +import androidx.compose.ui.unit.dp +import com.powersync.demos.AuthViewModel +import com.powersync.demos.NavController +import com.powersync.demos.Screen +import kotlinx.coroutines.launch + +@Composable +internal fun SignUpScreen( + navController: NavController, + authViewModel: AuthViewModel +) { + var email by remember { mutableStateOf("") } + var password by remember { mutableStateOf("") } + var confirmPassword by remember { mutableStateOf("") } + var errorMessage by remember { mutableStateOf(null) } + var isLoading by remember { mutableStateOf(false) } + + val coroutineScope = rememberCoroutineScope() + + Column( + modifier = Modifier + .fillMaxSize() + .padding(16.dp), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Text("Sign Up", style = MaterialTheme.typography.headlineMedium, modifier = Modifier.padding(bottom = 32.dp)) + + TextField( + value = email, + onValueChange = { email = it }, + label = { Text("Email") }, + modifier = Modifier + .fillMaxWidth() + .padding(bottom = 16.dp) + ) + + TextField( + value = password, + onValueChange = { password = it }, + label = { Text("Password") }, + visualTransformation = PasswordVisualTransformation(), + modifier = Modifier + .fillMaxWidth() + .padding(bottom = 16.dp) + ) + + TextField( + value = confirmPassword, + onValueChange = { confirmPassword = it }, + label = { Text("Confirm Password") }, + visualTransformation = PasswordVisualTransformation(), + modifier = Modifier + .fillMaxWidth() + .padding(bottom = 16.dp) + ) + + if (errorMessage != null) { + Text( + text = errorMessage!!, + color = MaterialTheme.colorScheme.error, + modifier = Modifier.padding(vertical = 16.dp) + ) + } + + Button( + onClick = { + coroutineScope.launch { + isLoading = true + errorMessage = null + if (password != confirmPassword) { + errorMessage = "Passwords do not match" + isLoading = false + return@launch + } + try { + authViewModel.signUp(email, password) + } catch (e: Exception) { + errorMessage = e.message ?: "An error occurred during sign-up" + } finally { + isLoading = false + } + } + }, + modifier = Modifier.align(Alignment.End), + enabled = !isLoading + ) { + Text(if (isLoading) "Signing Up..." else "Sign Up") + } + + TextButton( + onClick = { + navController.navigate(Screen.SignIn) + }, + modifier = Modifier.align(Alignment.CenterHorizontally) + ) { + Text("Already have an account? Sign In") + } + } + + if (isLoading) { + Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { + CircularProgressIndicator() + } + } +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/TodosScreen.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/TodosScreen.kt new file mode 100644 index 00000000..be261e26 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/screens/TodosScreen.kt @@ -0,0 +1,76 @@ +package com.powersync.demos.screens + +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.automirrored.filled.ArrowBack +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import com.powersync.demos.NavController +import com.powersync.demos.Screen +import com.powersync.demos.components.Input +import com.powersync.demos.components.TodoList +import com.powersync.demos.components.WifiIcon +import com.powersync.demos.powersync.TodoItem + +@OptIn(ExperimentalMaterial3Api::class) +@Composable +internal fun TodosScreen( + modifier: Modifier = Modifier, + navController: NavController, + items: List, + inputText: String, + isConnected: Boolean?, + onItemClicked: (item: TodoItem) -> Unit, + onItemDoneChanged: (item: TodoItem, isDone: Boolean) -> Unit, + onItemDeleteClicked: (item: TodoItem) -> Unit, + onAddItemClicked: () -> Unit, + onInputTextChanged: (value: String) -> Unit, +) { + Column(modifier) { + TopAppBar( + title = { + Text( + "Todo List", + textAlign = TextAlign.Center, + modifier = Modifier.fillMaxWidth().padding(end = 36.dp) + ) }, + navigationIcon = { + IconButton(onClick = { navController.navigate(Screen.Home) }) { + Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Go back") + } + }, + actions = { + WifiIcon(isConnected ?: false) + Spacer(modifier = Modifier.width(16.dp)) + } + ) + + Input( + text = inputText, + onAddClicked = onAddItemClicked, + onTextChanged = onInputTextChanged, + screen = Screen.Todos + ) + + Box(Modifier.weight(1F)) { + TodoList( + items = items, + onItemClicked = onItemClicked, + onItemDoneChanged = onItemDoneChanged, + onItemDeleteClicked = onItemDeleteClicked + ) + } + } +} diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Color.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Color.kt new file mode 100644 index 00000000..8a16797f --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Color.kt @@ -0,0 +1,11 @@ +package com.powersync.androidexample.ui.theme + +import androidx.compose.ui.graphics.Color + +val Purple80 = Color(0xFFD0BCFF) +val PurpleGrey80 = Color(0xFFCCC2DC) +val Pink80 = Color(0xFFEFB8C8) + +val Purple40 = Color(0xFF6650a4) +val PurpleGrey40 = Color(0xFF625b71) +val Pink40 = Color(0xFF7D5260) \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Theme.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Theme.kt new file mode 100644 index 00000000..c9179c6b --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Theme.kt @@ -0,0 +1,57 @@ +package com.powersync.androidexample.ui.theme + +import android.os.Build +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.dynamicDarkColorScheme +import androidx.compose.material3.dynamicLightColorScheme +import androidx.compose.material3.lightColorScheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.platform.LocalContext + +private val DarkColorScheme = darkColorScheme( + primary = Purple80, + secondary = PurpleGrey80, + tertiary = Pink80 +) + +private val LightColorScheme = lightColorScheme( + primary = Purple40, + secondary = PurpleGrey40, + tertiary = Pink40 + + /* Other default colors to override + background = Color(0xFFFFFBFE), + surface = Color(0xFFFFFBFE), + onPrimary = Color.White, + onSecondary = Color.White, + onTertiary = Color.White, + onBackground = Color(0xFF1C1B1F), + onSurface = Color(0xFF1C1B1F), + */ +) + +@Composable +fun PowerSyncAndroidExampleTheme( + darkTheme: Boolean = isSystemInDarkTheme(), + // Dynamic color is available on Android 12+ + dynamicColor: Boolean = true, + content: @Composable () -> Unit +) { + val colorScheme = when { + dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { + val context = LocalContext.current + if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) + } + + darkTheme -> DarkColorScheme + else -> LightColorScheme + } + + MaterialTheme( + colorScheme = colorScheme, + typography = Typography, + content = content + ) +} \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Type.kt b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Type.kt new file mode 100644 index 00000000..8e3a3ada --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/java/com/powersync/androidexample/ui/theme/Type.kt @@ -0,0 +1,34 @@ +package com.powersync.androidexample.ui.theme + +import androidx.compose.material3.Typography +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.sp + +// Set of Material typography styles to start with +val Typography = Typography( + bodyLarge = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 16.sp, + lineHeight = 24.sp, + letterSpacing = 0.5.sp + ) + /* Other default text styles to override + titleLarge = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 22.sp, + lineHeight = 28.sp, + letterSpacing = 0.sp + ), + labelSmall = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Medium, + fontSize = 11.sp, + lineHeight = 16.sp, + letterSpacing = 0.5.sp + ) + */ +) \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/res/drawable-hdpi/splashscreen_image.png b/demos/android-supabase-todolist/app/src/main/res/drawable-hdpi/splashscreen_image.png new file mode 100644 index 00000000..177b8f1f Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/drawable-hdpi/splashscreen_image.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/drawable-mdpi/splashscreen_image.png b/demos/android-supabase-todolist/app/src/main/res/drawable-mdpi/splashscreen_image.png new file mode 100644 index 00000000..177b8f1f Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/drawable-mdpi/splashscreen_image.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/drawable-xhdpi/splashscreen_image.png b/demos/android-supabase-todolist/app/src/main/res/drawable-xhdpi/splashscreen_image.png new file mode 100644 index 00000000..177b8f1f Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/drawable-xhdpi/splashscreen_image.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/drawable-xxhdpi/splashscreen_image.png b/demos/android-supabase-todolist/app/src/main/res/drawable-xxhdpi/splashscreen_image.png new file mode 100644 index 00000000..177b8f1f Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/drawable-xxhdpi/splashscreen_image.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/drawable-xxxhdpi/splashscreen_image.png b/demos/android-supabase-todolist/app/src/main/res/drawable-xxxhdpi/splashscreen_image.png new file mode 100644 index 00000000..177b8f1f Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/drawable-xxxhdpi/splashscreen_image.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/drawable/splashscreen.xml b/demos/android-supabase-todolist/app/src/main/res/drawable/splashscreen.xml new file mode 100644 index 00000000..b79ef55f --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/res/drawable/splashscreen.xml @@ -0,0 +1,8 @@ + + + + diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/demos/android-supabase-todolist/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml new file mode 100644 index 00000000..c5c9e8f5 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/demos/android-supabase-todolist/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml new file mode 100644 index 00000000..c5c9e8f5 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher.png new file mode 100644 index 00000000..c5110ddd Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png new file mode 100644 index 00000000..c5110ddd Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher_round.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher_round.png new file mode 100644 index 00000000..89526667 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-hdpi/ic_launcher_round.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher.png new file mode 100644 index 00000000..f26edd15 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png new file mode 100644 index 00000000..f26edd15 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher_round.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher_round.png new file mode 100644 index 00000000..9c7aa344 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-mdpi/ic_launcher_round.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher.png new file mode 100644 index 00000000..20da3f71 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png new file mode 100644 index 00000000..20da3f71 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png new file mode 100644 index 00000000..77b2c787 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher.png new file mode 100644 index 00000000..d5583233 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png new file mode 100644 index 00000000..d5583233 Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png new file mode 100644 index 00000000..c3a733af Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png new file mode 100644 index 00000000..3d0ac18f Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png new file mode 100644 index 00000000..3d0ac18f Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png new file mode 100644 index 00000000..d1560d9b Binary files /dev/null and b/demos/android-supabase-todolist/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png differ diff --git a/demos/android-supabase-todolist/app/src/main/res/values/colors.xml b/demos/android-supabase-todolist/app/src/main/res/values/colors.xml new file mode 100644 index 00000000..f8c6127d --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/res/values/colors.xml @@ -0,0 +1,10 @@ + + + #FFBB86FC + #FF6200EE + #FF3700B3 + #FF03DAC5 + #FF018786 + #FF000000 + #FFFFFFFF + \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/res/values/dimens.xml b/demos/android-supabase-todolist/app/src/main/res/values/dimens.xml new file mode 100644 index 00000000..aeb08d63 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/res/values/dimens.xml @@ -0,0 +1,5 @@ + + + + 48dp + \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/res/values/strings.xml b/demos/android-supabase-todolist/app/src/main/res/values/strings.xml new file mode 100644 index 00000000..db85c18f --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/res/values/strings.xml @@ -0,0 +1,3 @@ + + PowerSync Android Demo + \ No newline at end of file diff --git a/demos/android-supabase-todolist/app/src/main/res/values/styles.xml b/demos/android-supabase-todolist/app/src/main/res/values/styles.xml new file mode 100644 index 00000000..0436c790 --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/res/values/styles.xml @@ -0,0 +1,13 @@ + + + diff --git a/demos/android-supabase-todolist/app/src/main/res/values/themes.xml b/demos/android-supabase-todolist/app/src/main/res/values/themes.xml new file mode 100644 index 00000000..cc268b1c --- /dev/null +++ b/demos/android-supabase-todolist/app/src/main/res/values/themes.xml @@ -0,0 +1,5 @@ + + + +