Implement Paging3 and Remote Mediator for Fruittie list

Fruitties/androidApp/src/main/java/com/example/fruitties/android/ui/ListScreen.kt

@@ -18,6 +18,7 @@ package com.example.fruitties.android.ui
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -27,10 +28,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ShoppingCart
 import androidx.compose.material3.Button
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
@@ -46,10 +47,14 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.paging.LoadState
+import androidx.paging.compose.collectAsLazyPagingItems
+import androidx.paging.compose.itemKey
 import com.example.fruitties.android.LocalAppContainer
 import com.example.fruitties.android.R
 import com.example.fruitties.model.Fruittie
@@ -64,6 +69,7 @@ fun ListScreen(
         factory = LocalAppContainer.current.mainViewModelFactory,
     ),
 ) {
+    val lazyPagingItems = viewModel.fruittiesPagingData.collectAsLazyPagingItems()
     val uiState by viewModel.homeUiState.collectAsState()
     val topAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
     Scaffold(
@@ -102,13 +108,45 @@ fun ListScreen(
                 .padding(paddingValues)
                 .consumeWindowInsets(paddingValues),
         ) {
-            items(items = uiState.fruitties, key = { it.id }) { item ->
-                FruittieItem(
-                    item = item,
-                    onClick = onFruittieClick,
-                    onAddToCart = viewModel::addItemToCart,
-                    modifier = Modifier.fillMaxWidth(),
-                )
+            items(
+                count = lazyPagingItems.itemCount,
+                key = lazyPagingItems.itemKey { it.id }
+            ) { index ->
+                val item = lazyPagingItems[index]
+                if (item != null) {
+                    FruittieItem(
+                        item = item,
+                        onClick = onFruittieClick,
+                        onAddToCart = viewModel::addItemToCart,
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                }
+            }
+
+            item {
+                when (lazyPagingItems.loadState.append) {
+                    is LoadState.Loading -> {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(16.dp),
+                            contentAlignment = Alignment.Center,
+                        ) {
+                            CircularProgressIndicator()
+                        }
+                    }
+                    is LoadState.Error -> {
+                        Text(
+                            text = "Error loading more items",
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(16.dp),
+                            textAlign = TextAlign.Center,
+                            color = MaterialTheme.colorScheme.error,
+                        )
+                    }
+                    else -> {}
+                }
             }
         }
     }

Fruitties/iosApp/iosApp/ui/ContentView.swift

@@ -33,10 +33,9 @@ struct ContentView: View {
             factory: appContainer.value.mainViewModelFactory
         )
         NavigationStack {
-            Observing(mainViewModel.homeUiState) { homeUIState in
+            Observing(mainViewModel.fruittiesPagingData) { pagingData in
                 List {
-                    ForEach(homeUIState.fruitties, id: \.self) {
-                        value in
+                    ForEach(pagingData, id: \.self) { value in
                         HStack {
                             NavigationLink {
                                 FruittieScreen(fruittie: value)

Fruitties/shared/src/androidMain/kotlin/com/example/fruitties/di/Factory.android.kt

@@ -34,6 +34,7 @@ actual class Factory(
                 name = dbFile.absolutePath,
             ).setDriver(BundledSQLiteDriver())
             .setQueryCoroutineContext(Dispatchers.IO)
+            .fallbackToDestructiveMigration(dropAllTables = true)
             .build()
     }
 

Fruitties/shared/src/commonMain/kotlin/com/example/fruitties/DataRepository.kt

@@ -15,17 +15,21 @@
  */
 package com.example.fruitties
 
+import androidx.paging.ExperimentalPagingApi
+import androidx.paging.Pager
+import androidx.paging.PagingConfig
+import androidx.paging.PagingData
 import com.example.fruitties.database.AppDatabase
 import com.example.fruitties.database.CartDataStore
 import com.example.fruitties.model.CartItemDetails
 import com.example.fruitties.model.Fruittie
 import com.example.fruitties.network.FruittieApi
+import com.example.fruitties.paging.FruittieRemoteMediator
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.mapLatest
-import kotlinx.coroutines.launch
 
 class DataRepository(
     private val api: FruittieApi,
@@ -53,26 +57,23 @@ class DataRepository(
         cartDataStore.remove(fruittie)
     }
 
-    fun getData(): Flow<List<Fruittie>> {
-        scope.launch {
-            if (database.fruittieDao().count() < 1) {
-                refreshData()
-            }
-        }
-        return loadData()
-    }
+    @OptIn(ExperimentalPagingApi::class)
+    fun getPagingData(): Flow<PagingData<Fruittie>> =
+        Pager(
+            config = PagingConfig(
+                pageSize = 20,
+                prefetchDistance = 10,
+                enablePlaceholders = false,
+                initialLoadSize = 20
+            ),
+            remoteMediator = FruittieRemoteMediator(api, database),
+            pagingSourceFactory = { database.fruittieDao().pagingSource() },
+        ).flow
 
     suspend fun getFruittie(id: Long): Fruittie? = database.fruittieDao().getFruittie(id)
 
     fun fruittieInCart(id: Long): Flow<Int> =
         cartDataStore.cart.map { cart ->
             cart.items.find { it.id == id }?.count ?: 0
         }
-
-    fun loadData(): Flow<List<Fruittie>> = database.fruittieDao().getAllAsFlow()
-
-    suspend fun refreshData() {
-        val response = api.getData()
-        database.fruittieDao().insert(response.feed)
-    }
 }

Fruitties/shared/src/commonMain/kotlin/com/example/fruitties/database/AppDatabase.kt

@@ -20,11 +20,14 @@ import androidx.room.Database
 import androidx.room.RoomDatabase
 import androidx.room.RoomDatabaseConstructor
 import com.example.fruitties.model.Fruittie
+import com.example.fruitties.model.RemoteKeys
 
-@Database(entities = [Fruittie::class], version = 1)
+@Database(entities = [Fruittie::class, RemoteKeys::class], version = 2)
 @ConstructedBy(AppDatabaseConstructor::class)
 abstract class AppDatabase : RoomDatabase() {
     abstract fun fruittieDao(): FruittieDao
+
+    abstract fun remoteKeysDao(): RemoteKeysDao
 }
 
 // The Room compiler generates the `actual` implementations.

Fruitties/shared/src/commonMain/kotlin/com/example/fruitties/database/FruittieDao.kt

@@ -15,6 +15,7 @@
  */
 package com.example.fruitties.database
 
+import androidx.paging.PagingSource
 import androidx.room.Dao
 import androidx.room.Insert
 import androidx.room.MapColumn
@@ -31,9 +32,15 @@ interface FruittieDao {
     @Insert(onConflict = OnConflictStrategy.REPLACE)
     suspend fun insert(fruitties: List<Fruittie>)
 
+    @Query("SELECT * FROM Fruittie ORDER BY id DESC")
+    fun pagingSource(): PagingSource<Int, Fruittie>
+
     @Query("SELECT * FROM Fruittie")
     fun getAllAsFlow(): Flow<List<Fruittie>>
 
+    @Query("DELETE FROM Fruittie")
+    suspend fun clearAll()
+
     @Query("SELECT COUNT(*) as count FROM Fruittie")
     suspend fun count(): Int
 

Fruitties/shared/src/commonMain/kotlin/com/example/fruitties/database/RemoteKeysDao.kt

@@ -0,0 +1,19 @@
+package com.example.fruitties.database
+
+import androidx.room.Dao
+import androidx.room.Insert
+import androidx.room.OnConflictStrategy
+import androidx.room.Query
+import com.example.fruitties.model.RemoteKeys
+
+@Dao
+interface RemoteKeysDao {
+    @Insert(onConflict = OnConflictStrategy.REPLACE)
+    suspend fun insertAll(remoteKey: List<RemoteKeys>)
+
+    @Query("SELECT * FROM remote_keys WHERE fruittieId = :id")
+    suspend fun getRemoteKeyByFruittieId(id: Long): RemoteKeys?
+
+    @Query("DELETE FROM remote_keys")
+    suspend fun clearRemoteKeys()
+}

Fruitties/shared/src/commonMain/kotlin/com/example/fruitties/model/Fruittie.kt

@@ -23,7 +23,7 @@ import kotlinx.serialization.Serializable
 @Serializable
 @Entity
 data class Fruittie(
-    @PrimaryKey(autoGenerate = true) val id: Long = 0,
+    @PrimaryKey val id: Long = 0,
     @SerialName("name")
     val name: String,
     @SerialName("full_name")

Fruitties/shared/src/commonMain/kotlin/com/example/fruitties/model/RemoteKeys.kt

@@ -0,0 +1,15 @@
+package com.example.fruitties.model
+
+import androidx.room.Entity
+import androidx.room.PrimaryKey
+import kotlin.time.Clock
+import kotlin.time.ExperimentalTime
+
+@Entity(tableName = "remote_keys")
+data class RemoteKeys @OptIn(ExperimentalTime::class) constructor(
+    @PrimaryKey
+    val fruittieId: Long,
+    val prevKey: Int?,
+    val nextKey: Int?,
+    val createdAt: Long = Clock.System.now().toEpochMilliseconds()
+)

Fruitties/shared/src/commonMain/kotlin/com/example/fruitties/paging/FruittieRemoteMediator.kt

@@ -0,0 +1,87 @@
+package com.example.fruitties.paging
+
+import androidx.paging.ExperimentalPagingApi
+import androidx.paging.LoadType
+import androidx.paging.PagingState
+import androidx.paging.RemoteMediator
+import com.example.fruitties.database.AppDatabase
+import com.example.fruitties.model.Fruittie
+import com.example.fruitties.model.RemoteKeys
+import com.example.fruitties.network.FruittieApi
+
+@OptIn(ExperimentalPagingApi::class)
+class FruittieRemoteMediator(
+    private val api: FruittieApi,
+    private val database: AppDatabase,
+) : RemoteMediator<Int, Fruittie>() {
+    private val fruittieDao = database.fruittieDao()
+    private val remoteKeysDao = database.remoteKeysDao()
+
+    override suspend fun load(
+        loadType: LoadType,
+        state: PagingState<Int, Fruittie>,
+    ): MediatorResult {
+        return try {
+            val page = when (loadType) {
+                LoadType.REFRESH -> {
+                    val remoteKeys = getRemoteKeyClosestToCurrentPosition(state)
+                    remoteKeys?.nextKey?.minus(1) ?: 0
+                }
+                LoadType.PREPEND -> {
+                    val remoteKeys = getRemoteKeyForFirstItem(state)
+                    val prevKey = remoteKeys?.prevKey
+                        ?: return MediatorResult.Success(endOfPaginationReached = remoteKeys != null)
+                    prevKey
+                }
+                LoadType.APPEND -> {
+                    val remoteKeys = getRemoteKeyForLastItem(state)
+                    val nextKey = remoteKeys?.nextKey
+                        ?: return MediatorResult.Success(endOfPaginationReached = remoteKeys != null)
+                    nextKey
+                }
+            }
+
+            val response = api.getData(page)
+            val fruitties = response.feed
+            val endOfPaginationReached = fruitties.isEmpty() || page >= response.totalPages - 1
+
+            if (loadType == LoadType.REFRESH) {
+                remoteKeysDao.clearRemoteKeys()
+                fruittieDao.clearAll()
+            }
+
+            val prevKey = if (page == 0) null else page - 1
+            val nextKey = if (endOfPaginationReached) null else page + 1
+            val keys = fruitties.map {
+                RemoteKeys(
+                    fruittieId = it.id,
+                    prevKey = prevKey,
+                    nextKey = nextKey,
+                )
+            }
+            remoteKeysDao.insertAll(keys)
+            fruittieDao.insert(fruitties)
+
+            MediatorResult.Success(endOfPaginationReached = endOfPaginationReached)
+        } catch (e: Exception) {
+            MediatorResult.Error(e)
+        }
+    }
+
+    private suspend fun getRemoteKeyClosestToCurrentPosition(state: PagingState<Int, Fruittie>): RemoteKeys? =
+        state.anchorPosition?.let { position ->
+            state.closestItemToPosition(position)?.id?.let { id ->
+                remoteKeysDao.getRemoteKeyByFruittieId(id)
+            }
+        }
+
+    private suspend fun getRemoteKeyForFirstItem(state: PagingState<Int, Fruittie>): RemoteKeys? =
+        state.pages.firstOrNull { it.data.isNotEmpty() }?.data?.firstOrNull()?.let { fruittie ->
+            remoteKeysDao.getRemoteKeyByFruittieId(fruittie.id)
+        }
+
+    private suspend fun getRemoteKeyForLastItem(state: PagingState<Int, Fruittie>): RemoteKeys? =
+        state.pages.lastOrNull { it.data.isNotEmpty() }?.data?.lastOrNull()?.let { fruittie ->
+            remoteKeysDao.getRemoteKeyByFruittieId(fruittie.id)
+        }
+}

Fruitties/shared/src/commonMain/kotlin/com/example/fruitties/viewmodel/MainViewModel.kt

@@ -18,12 +18,15 @@ package com.example.fruitties.viewmodel
 
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import androidx.paging.PagingData
+import androidx.paging.cachedIn
 import co.touchlab.kermit.Logger
 import com.example.fruitties.DataRepository
 import com.example.fruitties.model.Fruittie
+import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.flow.combine
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.launch
 
@@ -39,12 +42,14 @@ class MainViewModel(
         Logger.v { "MainViewModel cleared" }
     }
 
+    val fruittiesPagingData: Flow<PagingData<Fruittie>> =
+        repository.getPagingData().cachedIn(viewModelScope)
+
     val homeUiState: StateFlow<HomeUiState> =
         repository
-            .getData()
-            .combine(repository.cartDetails) { fruitties, cartState ->
+            .cartDetails
+            .map { cartState ->
                 HomeUiState(
-                    fruitties = fruitties,
                     cartItemCount = cartState.sumOf { item -> item.count },
                 )
             }.stateIn(
@@ -64,7 +69,6 @@ class MainViewModel(
  * Ui State for the home screen
  */
 data class HomeUiState(
-    val fruitties: List<Fruittie> = listOf(),
     val cartItemCount: Int = 0,
 )