Fix: pull to refresh

MONEYMONG · Jul 2, 2024 · 260570a · 260570a
1 parent 8ec3c76
commit 260570a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/...ain/java/com/moneymong/moneymong/design_system/component/indicator/MDSRefreshIndicator.kt b/...ain/java/com/moneymong/moneymong/design_system/component/indicator/MDSRefreshIndicator.kt
@@ -1,2 +1,26 @@
 package com.moneymong.moneymong.design_system.component.indicator
 
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.pullrefresh.PullRefreshIndicator
+import androidx.compose.material.pullrefresh.PullRefreshState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun MDSRefreshIndicator(
+    modifier: Modifier = Modifier,
+    pullRefreshState: PullRefreshState,
+    isRefreshing: Boolean,
+) {
+    Box(modifier = modifier.fillMaxWidth()) {
+        PullRefreshIndicator(
+            modifier = Modifier.align(Alignment.TopCenter),
+            refreshing = isRefreshing,
+            state = pullRefreshState
+        )
+    }
+}
diff --git a/feature/ledger/src/main/java/com/moneymong/moneymong/ledger/LedgerScreen.kt b/feature/ledger/src/main/java/com/moneymong/moneymong/ledger/LedgerScreen.kt
@@ -18,6 +18,9 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.pullrefresh.pullRefresh
+import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHostState
@@ -45,6 +48,7 @@ import com.moneymong.moneymong.design_system.component.bottomSheet.MDSBottomShee
 import com.moneymong.moneymong.design_system.component.button.FABIconSize
 import com.moneymong.moneymong.design_system.component.button.MDSFloatingActionButton
 import com.moneymong.moneymong.design_system.component.datepicker.MDSWheelDatePicker
+import com.moneymong.moneymong.design_system.component.indicator.MDSRefreshIndicator
 import com.moneymong.moneymong.design_system.component.snackbar.MDSSnackbarHost
 import com.moneymong.moneymong.design_system.error.ErrorDialog
 import com.moneymong.moneymong.design_system.theme.Mint02
@@ -63,7 +67,7 @@ import org.orbitmvi.orbit.compose.collectSideEffect
 
 @OptIn(
     ExperimentalFoundationApi::class,
-    ExperimentalMaterial3Api::class
+    ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class
 )
 @Composable
 fun LedgerScreen(
@@ -84,6 +88,10 @@ fun LedgerScreen(
     val pagerState = rememberPagerState(pageCount = { tabs.size })
     val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
     var addFABState by remember { mutableStateOf(OnboardingComponentState()) }
+    val pullRefreshState = rememberPullRefreshState(
+        refreshing = state.isRefreshing,
+        onRefresh = viewModel::fetchLedgerTransactionList
+    )
 
     LaunchedEffect(Unit) {
         viewModel.fetchMyAgencyList()
@@ -148,6 +156,7 @@ fun LedgerScreen(
     }
 
     Scaffold(
+        modifier = Modifier.pullRefresh(pullRefreshState),
         topBar = {
             LedgerTopbarView(
                 modifier = Modifier.background(White),
@@ -187,6 +196,7 @@ fun LedgerScreen(
                                 }
                             )
                         }
+
                         LedgerSheetType.DatePicker -> {
                             MDSWheelDatePicker(
                                 startDate = state.startDate,
@@ -329,6 +339,10 @@ fun LedgerScreen(
                 }
             }
         }
+        MDSRefreshIndicator(
+            pullRefreshState = pullRefreshState,
+            isRefreshing = state.isRefreshing
+        )
     }
 }
 

diff --git a/feature/ledger/src/main/java/com/moneymong/moneymong/ledger/LedgerState.kt b/feature/ledger/src/main/java/com/moneymong/moneymong/ledger/LedgerState.kt
@@ -32,7 +32,8 @@ data class LedgerState(
     val memberList: List<AgencyUser> = emptyList(),
     val errorMessage: String = "",
     val sheetType: LedgerSheetType = LedgerSheetType.DatePicker,
-    val visibleOnboarding: Boolean = false
+    val visibleOnboarding: Boolean = false,
+    val isRefreshing: Boolean = false,
 ) : State {
 
     val filterTransactionList: List<LedgerDetail>