Im trying to use datastore inside Composable to read user data but cant read the value as string to put inside Text.
That's the datastore
private val Context.userPreferencesDataStore: DataStore<Preferences> by preferencesDataStore(
name = "user"
)
private val USER_FIRST_NAME = stringPreferencesKey("user_first_name")
suspend fun saveUserToPreferencesStore(context: Context) {
context.userPreferencesDataStore.edit { preferences ->
preferences[USER_FIRST_NAME] = "user1"
}
}
fun getUserFromPreferencesStore(context: Context): Flow<String> = context.userPreferencesDataStore.data
.map { preferences ->
preferences[USER_FIRST_NAME] ?: ""
}
and inside Composable:
#Composable
fun myComposable() {
var context = LocalContext.current
LaunchedEffect( true){
saveUserToPreferencesStore(context )
}
Text(getUserFromPreferencesStore(context ))
}
so in your code, getUserFromPreferencesStore() is returning a Flow. so you should collect that as flow, and then compose will auto update once the data is being changed. For example (something similar to this):
val user by getUserFromPreferencesStore(context).collectAsStateWithLifecycleAware(initValue)
Related
I am trying to do some stuff on background and then displaying it to the user, but for some reason this does not work as it should and I am not sure what I am doing wrong.
It is an app with possibility to encrypt images and storing them on app-specific folder and holding the reference inside a database. While presenting it to the user following steps are done:
Get the reference of pictures and metadata from database.
read encrypted images and decrypt them while reading.
Print the pictures in composable.
How it works is:
Composable asks for getting data -> the repository gets the data -> my storage manager reads the files and uses the cryptomanager to decrypt them -> decrypted pictures are stored as live data
But the operation above blocks the interaction with the UI. Here is some Code:
Composable:
#Composable
fun WelcomeView(
viewModel: WelcomeViewModel = hiltViewModel()
) {
LaunchedEffect(Unit) {
viewModel.getGalleryItems()
}
val list = viewModel.images.observeAsState()
Column() {
//this button does not response until the data request and processing is done
Button(onClick = {}){
Text(text = "Click me while pictures are requested")
}
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
if (list.value != null) {
items(list.value as List<GalleryElement>) { item: GalleryElement ->
GalleryItem(element = item)
}
}
}
}
}
Thats the view model:
#HiltViewModel
class WelcomeViewModel #Inject constructor(
private val secretDataManager: SecretDataManager,
) : ViewModel() {
private val _images = MutableLiveData<List<GalleryElement>>()
val images: LiveData<List<GalleryElement>> = _images
suspend fun getGalleryItems() {
viewModelScope.launch {
_images.value = secretDataManager.getImages()
}
}
}
User data manager:
class SecretDataManager #Inject constructor(
private val cryptoManager: CryptoManager,
private val storageManager: StorageManager,
private val repo: EncryptedVaultDataRepo,
#ApplicationContext
private val ctx: Context
) : SecretDataManagerService {
override suspend fun getImages(): List<GalleryElement> {
val result: MutableList<GalleryElement> = mutableListOf()
repo.getAll().forEach {
var image: ByteArray
storageManager.readFile(File("${ctx.filesDir}/${it.name}").toUri()).use { b ->
image = cryptoManager.decrypt(it.iv, b?.readBytes()!!)
}
result.add(GalleryElement(BitmapFactory.decodeByteArray(image, 0, image.size)))
}
return result
}
}
Any ideas what I am doing wrong?
I believe the main problem is that the viewModelScope.launch(){} starts on the Dispatchers.Main(UI) thread. I recommend going to viewModelScope.launch(Dispatchers.IO){}. I am trying to find the documentation to support that but should be an easy change. I also recommended populating the list on the initialization of the view model.
#Composable
fun WelcomeView(
viewModel: WelcomeViewModel = hiltViewModel()
) {
val list = viewModel.images.observeAsState()
Column() {
//this button does not response until the data request and processing is done
Button(onClick = {}){
Text(text = "Click me while pictures are requested")
}
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
if (list.value != null) {
items(list.value as List<GalleryElement>) { item: GalleryElement ->
GalleryItem(element = item)
}
}
}
}
}
#HiltViewModel
class WelcomeViewModel #Inject constructor(
private val secretDataManager: SecretDataManager,
) : ViewModel() {
private val _images = MutableLiveData<List<GalleryElement>>()
val images: LiveData<List<GalleryElement>> = _images
init{
getGalleryImages()
}
fun getGalleryItems() {
viewModelScope.launch(Dispatchers.Default) {
_images.value = secretDataManager.getImages()
}
}
}
I have a composable with viewmodel and I want to pass an id from the composable to the viewmodel.
My composable is:
#Composable
fun HttpRequestScreen(
viewModel: HttpRequestViewModel = hiltViewModel(),
id: String = EMPTYUUID,
onClick: (String, String, Int) -> Unit // respond, request Function: 1 - send request, 2 - edit request
) {
I have the id from a different screen and I want to pass it to my Hilt viewmodel.
Assuming that you have followed the documentation for compose navigation, you can find your parameter here:
#HiltViewModel
class RouteDetailsViewModel #Inject constructor(
private val getRouteByIdUC: GetRouteByIdUC,
private val savedStateHandle: SavedStateHandle
): ViewModel() {
private val routeId = savedStateHandle.get<String>("your-param-name") // for example String in my case
}
You will need to think in a Unidirectional Data Flow pattern, where events flow up and state flows down. For this, you need to expose some sort of state from your viewmodel that sends down the state of the request to the Composable as an observable state.
Your viewmodel could look like this.
class HttpRequestViewModel: ViewModel() {
private val _httpResponse = mutableStateOf("")
val httpResponse: State<String> = _httpResponse
fun onHttpRequest(requestUrl: String) {
//Execute your logic
val result = "result of your execution"
_httpResponse.value = result
}
}
Then in your Composable, you can send events up by calling the ViewModel function on the button click like so
#Composable
fun HttpRequestScreen(viewModel: HttpRequestViewModel) {
val state by viewModel.httpResponse
var userInput = remember { TextFieldValue("") }
Column {
Text(text = "Http Response = $state")
}
BasicTextField(value = userInput, onValueChange = {
userInput = it
})
Button(onClick = { viewModel.onHttpRequest(userInput.text) }) {
Text(text = "Make Request")
}
}
I hope that points you in the right direction. Good luck.
I'm migrating from Shared preference to data store using jetpack compose. everything works fine (data is saved and can be retreated successfully). However, whenever a Data is retrieved, the composable keeps on recomposing endlessly. I'm using MVVM architecture and below is how I have implemented data store.
Below is declared in my AppModule.kt
App module in SingletonComponent
#Provides
#Singleton
fun provideUserPreferenceRepository(#ApplicationContext context: Context):
UserPreferencesRepository = UserPreferencesRepositoryImpl(context)
Then here's my ViewModel:
#HiltViewModel
class StoredUserViewModel #Inject constructor(
private val _getUserDataUseCase: GetUserDataUseCase
): ViewModel() {
private val _state = mutableStateOf(UserState())
val state: State<UserState> = _state
fun getUser(){
_getUserDataUseCase().onEach { result ->
val name = result.name
val token = result.api_token
_state.value = UserState(user = UserPreferences(name, agentCode, token, balance))
}.launchIn(viewModelScope)
}}
Finally, Here's my Repository Implementation:
class UserPreferencesRepositoryImpl #Inject constructor(
private val context: Context
): UserPreferencesRepository {
private val Context.dataStore by preferencesDataStore(name = "user_preferences")
}
private object Keys {
val fullName = stringPreferencesKey("full_name")
val api_token = stringPreferencesKey("api_token")
}
private inline val Preferences.fullName get() = this[Keys.fullName] ?: ""
private inline val Preferences.apiToken get() = this[Keys.api_token] ?: ""
override val userPreferences: Flow<UserPreferences> = context.dataStore.data.catch{
// throws an IOException when an error is encountered when reading data
if (it is IOException) {
emit(emptyPreferences())
} else {
throw it
}
}.map { preferences ->
UserPreferences(name = preferences.fullName, api_token = preferences.apiToken)
}.distinctUntilChanged()
I don't know what causes the composable to recompose. Below Is the composable:
#Composable
fun LoginScreen(
navController: NavController,
userViewModel: StoredUserViewModel = hiltViewModel()
) {
Log.v("LOGIN_SCREEN", "CALLED!")
userViewModel.getUser()
}
If anyone can tell me where I've done wrong please enlighten me. I have tried to change the implementation in AppModule for UserPreferencesRepository but no luck.
Below is UseState.kt which is just a data class
data class UserState(
val user: UserPreferences? = null
)
Below is UserPreferences.kt
data class UserPreferences(val name: String, val api_token: String)
I also faced such problem. The solution was became to navigate with LauchedEffect in composable.
before:
if (hasFlight) {
navController.navigate(Screen.StartMovingScreen.route)
}
after:
if (hasFlight) {
LaunchedEffect(Unit) {
navController.navigate(Screen.StartMovingScreen.route)
}
}
This is expected behaviour: you're calling getUser on each recomposition.
#Composable function is a view builder, and should be side-effects free.
Instead you can use special side effect function, like LaunchedEffect, which will launch job only once, until it's removed from view tree or key argument is changed:
LaunchedEffect(Unit) {
userViewModel.getUser()
}
But this also will be re-called in case of configuration change, e.g. screen rotation. To prevent this case, you have two options:
Call getUser inside view model init: in this case it's guarantied that it's called only once.
Create some flag inside view model to prevent redundant request.
More info about Compose side effects in documentation.
I have a Composable and a viewmodel (VM) for it. The VM gets some data from a kotlin flow which I would like to expose as a State
Usually I would have the VM expose a state like this:
var title by mutableStateOf("")
private set
And I could use it in the Composable like this
Text(text = viewModel.title)
But since the data comes from a flow, i have to expose it like this
#Composable
fun title() = flowOf("TITLE").collectAsState(initial = "")
And have to use it in the Composable like this
Text(text = viewModel.title().value)
I try to minimize boilerplate code, so the .value kind of bothers me. Is there any way to collect the flow as state, but still expose it as viewModel.title or viewModel.title() and get the actual String and not the state object?
You can use delegated property.If your program just read it.
class FlowDeletedProperty<T>(val flow: Flow<T>, var initialValue: T, val scope: CoroutineScope) :
ReadOnlyProperty<ViewModel, T> {
private var _value = mutableStateOf(initialValue)
init {
scope.launch {
flow.collect {
_value.value = it
}
}
}
override fun getValue(thisRef: ViewModel, property: KProperty<*>): T {
return _value.value
}
}
fun <T> ViewModel.flowDeletedProperty(flow: Flow<T>, initialValue: T) =
FlowDeletedProperty(flow, initialValue, viewModelScope)
in viewModel
val a = flow {
while (true) {
kotlinx.coroutines.delay(100L)
println("out ")
emit((100..999).random().toString())
}
}
val title by flowDeletedProperty(a,"")
in ui
Text(text = viewModel.title)
I want to store some preferences using DataStore. But the problem is that my application can have multiple users and therefor needs to store these preferences in separate files. I got a working example using only one user but I'm struggling to support multiple users.
Here is an example of my code:
class DataStorageRepository(private val context: Context, private val userRepository: UserRepository) {
private object PreferencesKeys {
val SETTING_ONE = intPreferencesKey("setting_one")
}
// retrieve datastore for currently logged in user.
private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = userRepository.currentRegistration().name)
val userPreferencesFlow: Flow<UserPreferences> = context.dataStore.data.map { preferences ->
val settingOne = preferences[PreferencesKeys.SETTING_ONE] ?: 0
UserPreferences(settingOne)
}
suspend fun storeSettingOne(settingOne: Int) {
context.dataStore.edit { preferences ->
preferences[PreferencesKeys.SETTING_ONE] = settingOne
}
}
data class UserPreferences(val lastUsedToAccountTab: Int)
}
I'm using Koin and I tried unloading the DataStorageRepository on logout and recreating it on login but the DataStore seems to stay alive until the app is killed and I get the following crash:
java.lang.IllegalStateException: There are multiple DataStores active
for the same file: [...] You should either maintain your DataStore as
a singleton or confirm that there is no two DataStore's active on the
same file (by confirming that the scope is cancelled).
I also tried to use a CoroutineScope and kill that when I log out, but after recreating the scope on login the DataStore doesn't seem to get recreated.
Does DataStore support a way to close the connection or to handle multiple files?
Put this line inside companion object { }
private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = "settingPrefs")
My Code
class SettingPrefs(private val context: Context) {
companion object {
private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = "settingPrefs")
private val soundKey = booleanPreferencesKey("sound")
private val vibrateKey = booleanPreferencesKey("vibrate")
}
val getSound: Flow<Boolean>
get() = context.dataStore.data.map {
it[soundKey] ?: true
}
suspend fun setSound(value: Boolean) {
context.dataStore.edit { it[soundKey] = value }
}
val getVibration: Flow<Boolean>
get() = context.dataStore.data.map {
it[vibrateKey] ?: true
}
suspend fun setVibration(value: Boolean) {
context.dataStore.edit { it[vibrateKey] = value }
}
}
You can use different key for different user or manual keep DataStore singleton.
For exception:
java.lang.IllegalStateException: There are multiple DataStores active for the same file: [...] You should either maintain your DataStore as a singleton or confirm that there is no two DataStore's active on the same file (by confirming that the scope is cancelled).
androidx.datastore:datastore-*:1.0.0-alpha07 is released.
Put this at the top level of your kotlin file so there is only one instance of it.
private val Context.dataStore by preferencesDataStore("settings")
class Xxx{
}
https://developer.android.com/jetpack/androidx/releases/datastore#1.0.0-alpha07.
The Context.createDataStore extension function has been removed and replaced with globalDataStore property delegate. Call globalDataStore once at the top level in your kotlin file. For example:
val Context.myDataStore by dataStore(...)
Put this at the top level of your kotlin file so there is only one instance of it. (I57215, b/173726702)
At the moment I was posting this question I found a solution to this problem. In order to solve my problem I needed to combine my previous two solutions. So on logout I unload the DataStorageRepository and on login I reload it again. I also needed to create a CoroutineScope that I cancel on logout.
My Module
val loggedInModule = module {
single { DataStorageRepository(get(), get()) }
}
I created a scope and passed it to the DataStore
var loggedInScope: CoroutineScope = CoroutineScope(Dispatchers.Default)
private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = userRepository.currentRegistration().name, scope = loggedInScope)
On Login
loggedInScope = CoroutineScope(Dispatchers.Default)
loadKoinModules(loggedInModule)
On Logout
loggedInScope.cancel()
unloadKoinModules(loggedInModule)
Just put your declaration datastore out of your DataStorageRepository class
private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name="settings")
class DataStorageRepository(context: Context) {
private var appContext = context.applicationContext
val mData: Flow<String?> = appContext.dataStore.data.map { preferences ->
preferences[YOUR_KEY]
}
suspend fun insertData(value: String) {
appContext.dataStore.edit { preferences ->
preferences[YOUR_KEY] = authToken
}
}
companion object {
private val KEY = stringPreferencesKey("data")
}
}
This is what I'm using in my project:
private object UserIdBasedPrefDs {
val lock = Any()
#GuardedBy("lock")
#Volatile
var currentId: String = ""
#GuardedBy("lock")
#Volatile
var INSTANCE: DataStore<Preferences>? = null
}
fun Context.happyStore( // rename what ever you like.
userId: String,
// below 3 optional params are same as int the `preferencesDataStore`.
corruptionHandler: ReplaceFileCorruptionHandler<Preferences>? = null,
produceMigrations: (Context) -> List<DataMigration<Preferences>> =
{ listOf() },
scope: CoroutineScope = CoroutineScope(Dispatchers.IO + SupervisorJob())
): DataStore<Preferences> = UserIdBasedPrefDs.run {
// check if current user id has been changed.
if (userId != currentId && INSTANCE != null) {
synchronized(lock) {
// release previous saved.
INSTANCE = null
// reset new user id.
currentId = userId
}
}
// below is the same logic inside the `preferencesDataStore` delegate.
INSTANCE ?: synchronized(lock) {
if (INSTANCE == null) {
INSTANCE = PreferenceDataStoreFactory.create(
corruptionHandler = corruptionHandler,
migrations = produceMigrations(applicationContext),
scope = scope
) {
applicationContext.preferencesDataStoreFile(userId)
}
}
INSTANCE!!
}
}
Hope it can be helpful to you.