Issue #94: Home page now show all folders with pagination

Author: AmrDeveloper

app/build.gradle.kts

@@ -79,6 +79,8 @@ dependencies {
     implementation(libs.bundles.room)
     ksp(libs.room.compiler)
 
+    implementation(libs.bundles.paging)
+
     implementation(libs.hilt.android)
     ksp(libs.hilt.compiler)
 

app/src/main/java/com/amrdeveloper/linkhub/data/source/FolderDataSource.kt

@@ -1,5 +1,6 @@
 package com.amrdeveloper.linkhub.data.source
 
+import androidx.paging.PagingSource
 import com.amrdeveloper.linkhub.data.Folder
 import kotlinx.coroutines.flow.Flow
 
@@ -15,6 +16,8 @@ interface FolderDataSource {
 
     suspend fun getFolderList(): Result<List<Folder>>
 
+    fun getMoseUsedFoldersWithPagination(): PagingSource<Int, Folder>
+
     fun getSortedFolders(
         keyword: String? = null,
         isPinned: Boolean? = null,

app/src/main/java/com/amrdeveloper/linkhub/data/source/FolderRepository.kt

@@ -1,5 +1,6 @@
 package com.amrdeveloper.linkhub.data.source
 
+import androidx.paging.PagingSource
 import com.amrdeveloper.linkhub.data.Folder
 import kotlinx.coroutines.flow.Flow
 
@@ -21,6 +22,10 @@ class FolderRepository(private val dataSource: FolderDataSource) {
         return dataSource.getFolderList()
     }
 
+    fun getMoseUsedFoldersWithPagination(): PagingSource<Int, Folder> {
+        return dataSource.getMoseUsedFoldersWithPagination()
+    }
+
     fun getSortedFolders(
         keyword: String? = null,
         isPinned: Boolean? = null,

app/src/main/java/com/amrdeveloper/linkhub/data/source/local/FolderDao.kt

@@ -1,5 +1,6 @@
 package com.amrdeveloper.linkhub.data.source.local
 
+import androidx.paging.PagingSource
 import androidx.room.Dao
 import androidx.room.Query
 import androidx.room.Transaction
@@ -18,6 +19,12 @@ interface FolderDao : BaseDao<Folder> {
     @Query("SELECT * FROM folder")
     suspend fun getFolders(): List<Folder>
 
+    @Query("""
+        SELECT * FROM folder
+        ORDER BY pinned DESC, click_count DESC
+    """)
+    fun getMoseUsedFoldersWithPagination(): PagingSource<Int, Folder>
+
     @Query("""
         SELECT * FROM folder
         WHERE ((:keyword IS NULL) OR (:keyword = '') OR (name LIKE '%' || :keyword || '%'))

app/src/main/java/com/amrdeveloper/linkhub/data/source/local/FolderLocalDataSource.kt

@@ -1,5 +1,6 @@
 package com.amrdeveloper.linkhub.data.source.local
 
+import androidx.paging.PagingSource
 import com.amrdeveloper.linkhub.data.Folder
 import com.amrdeveloper.linkhub.data.source.FolderDataSource
 import kotlinx.coroutines.CoroutineDispatcher
@@ -53,6 +54,10 @@ class FolderLocalDataSource internal constructor(
         }
     }
 
+    override fun getMoseUsedFoldersWithPagination(): PagingSource<Int, Folder> {
+        return folderDao.getMoseUsedFoldersWithPagination()
+    }
+
     override fun getSortedFolders(
         keyword: String?,
         isPinned: Boolean?,

app/src/main/java/com/amrdeveloper/linkhub/ui/components/PagerIndicator.kt

@@ -0,0 +1,55 @@
+package com.amrdeveloper.linkhub.ui.components
+
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.unit.dp
+import com.amrdeveloper.linkhub.R
+
+@Composable
+fun PagerIndicator(
+    pagerState: PagerState,
+    modifier: Modifier = Modifier,
+    selectedIndicatorColor: Color = colorResource(R.color.light_blue_200),
+    unSelectedIndicatorColor: Color = colorResource(R.color.light_blue_900),
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(vertical = 16.dp),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        repeat(pagerState.pageCount) { iteration ->
+            val isCurrentPage = pagerState.currentPage == iteration
+            val indicatorColor = if (isCurrentPage) selectedIndicatorColor
+            else unSelectedIndicatorColor
+
+            val size by animateDpAsState(
+                targetValue = if (isCurrentPage) 10.dp else 8.dp, label = "Indicator dor color"
+            )
+
+            Box(
+                modifier = Modifier
+                    .padding(4.dp)
+                    .clip(CircleShape)
+                    .background(indicatorColor)
+                    .size(size)
+            )
+        }
+    }
+}

app/src/main/java/com/amrdeveloper/linkhub/ui/home/HomeScreen.kt

@@ -1,14 +1,13 @@
 package com.amrdeveloper.linkhub.ui.home
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.material3.Icon
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -19,34 +18,40 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.core.os.bundleOf
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavController
+import androidx.paging.compose.collectAsLazyPagingItems
+import androidx.paging.compose.itemKey
 import com.amrdeveloper.linkhub.R
 import com.amrdeveloper.linkhub.data.Link
-import com.amrdeveloper.linkhub.ui.components.FolderList
-import com.amrdeveloper.linkhub.ui.components.FolderViewKind
+import com.amrdeveloper.linkhub.ui.components.FolderItem
 import com.amrdeveloper.linkhub.ui.components.LinkActionsBottomSheet
 import com.amrdeveloper.linkhub.ui.components.LinkList
 import com.amrdeveloper.linkhub.ui.components.LinkhubToolbar
+import com.amrdeveloper.linkhub.ui.components.PagerIndicator
 import com.amrdeveloper.linkhub.util.UiPreferences
 import com.amrdeveloper.linkhub.util.openLinkIntent
 
+private const val NUMBER_OF_FOLDERS_PER_PAGE = 6
+
 @Composable
 fun HomeScreen(
     viewModel: HomeViewModel = viewModel(),
     uiPreferences: UiPreferences,
     navController: NavController
 ) {
     val context = LocalContext.current
-    val folders = viewModel.mostUsedLimitedFoldersState.collectAsStateWithLifecycle()
+
+    val folders = viewModel.mostUsedLimitedFoldersState.collectAsLazyPagingItems()
+    val totalPages =
+        (folders.itemCount + NUMBER_OF_FOLDERS_PER_PAGE - 1) / NUMBER_OF_FOLDERS_PER_PAGE
+    val foldersPagerState = rememberPagerState(pageCount = { totalPages })
+
     val links = viewModel.sortedLinksState.collectAsStateWithLifecycle()
 
     var lastClickedLink by remember { mutableStateOf<Link?>(value = null) }
@@ -58,9 +63,9 @@ fun HomeScreen(
                 .fillMaxSize()
                 .padding(padding)
         ) {
-            if (folders.value.data.isNotEmpty()) {
+            if (folders.itemCount != 0) {
                 Text(
-                    text = "Most used Folders",
+                    text = "Folders",
                     modifier = Modifier
                         .fillMaxWidth()
                         .padding(8.dp),
@@ -69,45 +74,50 @@ fun HomeScreen(
                     color = colorResource(R.color.light_blue_600)
                 )
 
-                FolderList(
-                    folders = folders.value.data,
-                    viewKind = FolderViewKind.Grid,
-                    onClick = { folder ->
-                        viewModel.incrementFolderClickCount(folder)
-                        val bundle = bundleOf("folder" to folder)
-                        navController.navigate(R.id.linkListFragment, bundle)
-                    },
-                    onLongClick = { folder ->
-                        val bundle = bundleOf("folder" to folder)
-                        navController.navigate(R.id.folderFragment, bundle)
-                    },
-                    minimalModeEnabled = uiPreferences.isMinimalModeEnabled()
-                )
+                HorizontalPager(
+                    state = foldersPagerState,
+                    key = folders.itemKey { it.id },
+                    verticalAlignment = Alignment.Top,
+                    beyondViewportPageCount = 1,
+                    modifier = Modifier.fillMaxWidth(),
+                    pageContent = { pageIndex ->
+                        LazyVerticalGrid(columns = GridCells.Fixed(count = 2)) {
+                            for (elementIndexInUI in 0 until NUMBER_OF_FOLDERS_PER_PAGE) {
+                                val itemIndex =
+                                    (pageIndex * NUMBER_OF_FOLDERS_PER_PAGE) + elementIndexInUI
+                                if (itemIndex >= folders.itemCount) {
+                                    break
+                                }
 
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(4.dp)
-                        .clickable {
-                            navController.navigate(R.id.folderListFragment)
-                        },
-                    horizontalArrangement = Arrangement.End,
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    Text(
-                        text = "Show all",
-                        style = MaterialTheme.typography.titleSmall,
-                        fontWeight = FontWeight.Bold,
-                        color = colorResource(R.color.light_blue_600)
-                    )
+                                folders[itemIndex]?.let { folder ->
+                                    item {
+                                        FolderItem(
+                                            folder = folder,
+                                            onClick = { folder ->
+                                                viewModel.incrementFolderClickCount(folder)
+                                                val bundle = bundleOf("folder" to folder)
+                                                navController.navigate(
+                                                    R.id.linkListFragment,
+                                                    bundle
+                                                )
+                                            },
+                                            onLongClick = { folder ->
+                                                val bundle = bundleOf("folder" to folder)
+                                                navController.navigate(R.id.folderFragment, bundle)
+                                            },
+                                            minimalModeEnabled = uiPreferences.isMinimalModeEnabled(),
+                                            modifier = Modifier
+                                                .fillMaxWidth()
+                                                .padding(4.dp)
+                                        )
+                                    }
+                                }
+                            }
+                        }
+                    }
+                )
 
-                    Icon(
-                        painter = painterResource(R.drawable.ic_arrow_forward),
-                        contentDescription = "Show all",
-                        tint = Color.Unspecified,
-                        modifier = Modifier.size(18.dp)
-                    )
-                }
+                PagerIndicator(pagerState = foldersPagerState)
             }
 
             if (links.value.data.isNotEmpty()) {

app/src/main/java/com/amrdeveloper/linkhub/ui/home/HomeViewModel.kt

@@ -2,6 +2,9 @@ package com.amrdeveloper.linkhub.ui.home
 
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
+import androidx.paging.Pager
+import androidx.paging.PagingConfig
+import androidx.paging.cachedIn
 import com.amrdeveloper.linkhub.common.LazyValue
 import com.amrdeveloper.linkhub.data.Folder
 import com.amrdeveloper.linkhub.data.Link
@@ -23,13 +26,10 @@ class HomeViewModel @Inject constructor(
     private val linkRepository: LinkRepository,
 ) : ViewModel() {
 
-    val mostUsedLimitedFoldersState: StateFlow<LazyValue<List<Folder>>> =
-        folderRepository.getSortedFolders(limit = NUMBER_OF_TOP_FOLDERS)
-            .map { LazyValue(data = it, isLoading = false) }.stateIn(
-                scope = viewModelScope,
-                started = SharingStarted.WhileSubscribed(stopTimeoutMillis = 5000L),
-                initialValue = LazyValue(data = listOf(), isLoading = true)
-            )
+    val mostUsedLimitedFoldersState =
+        Pager(config = PagingConfig(pageSize = NUMBER_OF_TOP_FOLDERS, prefetchDistance = 2)) {
+            folderRepository.getMoseUsedFoldersWithPagination()
+        }.flow.cachedIn(viewModelScope)
 
     val sortedLinksState: StateFlow<LazyValue<List<Link>>> =
         linkRepository.getSortedLinks()

gradle/libs.versions.toml

@@ -19,6 +19,7 @@ lifecycle-livedata-ktx = "2.10.0"
 navigation-fragment-ktx = "2.9.6"
 navigation-safeargs = "2.9.6"
 room = "2.8.4"
+paging = "3.4.0"
 hilt = "2.57.2"
 legacy_support = "1.0.0"
 
@@ -69,7 +70,11 @@ jsoup = { module = "org.jsoup:jsoup", version.ref = "jsoup" }
 
 lottie = { module = "com.airbnb.android:lottie", version.ref = "lottie" }
 
+paging-runtime = { module = "androidx.paging:paging-runtime-ktx", version.ref = "paging" }
+paging-compose = { module = "androidx.paging:paging-compose", version.ref = "paging" }
+
 room-runtime = { module = "androidx.room:room-runtime", version.ref = "room" }
+room-paging = { module = "androidx.room:room-paging", version.ref = "room" }
 room-compiler = { module = "androidx.room:room-compiler", version.ref = "room" }
 room-ktx = { module = "androidx.room:room-ktx", version.ref = "room" }
 
@@ -88,7 +93,8 @@ kotlinx-coroutines-testing = { module = "org.jetbrains.kotlinx:kotlinx-coroutine
 leakcanary-android = { module = "com.squareup.leakcanary:leakcanary-android", version.ref = "leakcanary-android" }
 
 [bundles]
-room = ["room-runtime", "room-ktx"]
+room = ["room-runtime", "room-paging", "room-ktx"]
+paging = ["paging-runtime", "paging-compose"]
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }