Add pull-to-refresh to EarnPage

SSWConsulting · May 23, 2024 · 7deeb74 · 7deeb74
1 parent 605f519
commit 7deeb74
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 90 deletions.
diff --git a/src/MobileUI/Pages/EarnDetailsPage.xaml.cs b/src/MobileUI/Pages/EarnDetailsPage.xaml.cs
@@ -1,4 +1,7 @@
-namespace SSW.Rewards.Mobile.Pages;
+using CommunityToolkit.Mvvm.Messaging;
+using SSW.Rewards.Mobile.Messages;
+
+namespace SSW.Rewards.Mobile.Pages;
 
 [QueryProperty(nameof(QuizId), nameof(QuizId))]
 public partial class EarnDetailsPage
@@ -20,4 +23,14 @@ protected override async void OnAppearing()
         int quizId = int.Parse(QuizId);
         await _viewModel.Initialise(quizId);
     }
+
+    protected override void OnDisappearing()
+    {
+        base.OnDisappearing();
+
+        if (_viewModel.TestPassed)
+        {
+            WeakReferenceMessenger.Default.Send(new QuizzesUpdatedMessage());
+        }
+    }
 }
diff --git a/src/MobileUI/Pages/EarnPage.xaml b/src/MobileUI/Pages/EarnPage.xaml
@@ -9,79 +9,82 @@
              ControlTemplate="{DynamicResource PageTemplate}"
              x:DataType="viewModels:EarnViewModel"
              x:Class="SSW.Rewards.Mobile.Pages.EarnPage">
-    <ScrollView>
-        <Grid>
-            <Grid RowDefinitions="Auto, *"
-                  Margin="15"
-                  RowSpacing="10">
-                <Grid Grid.Row="0"
-                      RowDefinitions="Auto" 
-                      x:Name="CarouselSection">
-                    <Grid.Triggers>
-                        <DataTrigger TargetType="Grid" Binding="{Binding CarouselQuizzes.Count}" Value="0">
-                            <Setter Property="IsVisible" Value="False" />
-                        </DataTrigger>
-                    </Grid.Triggers>
-                    <CarouselView Grid.Row="0"
-                                  x:Name="Carousel"
-                                  HeightRequest="400"
-                                  Loop="True"
-                                  ItemsSource="{Binding CarouselQuizzes}"
-                                  HorizontalScrollBarVisibility="Never"
-                                  IndicatorView="QuizIndicator">
-                        <CarouselView.ItemTemplate>
+    <RefreshView Command="{Binding RefreshQuizzesCommand}"
+                 IsRefreshing="{Binding IsRefreshing}">
+        <ScrollView>
+            <Grid>
+                <Grid RowDefinitions="Auto, *"
+                      Margin="15"
+                      RowSpacing="10">
+                    <Grid Grid.Row="0"
+                          RowDefinitions="Auto" 
+                          x:Name="CarouselSection">
+                        <Grid.Triggers>
+                            <DataTrigger TargetType="Grid" Binding="{Binding CarouselQuizzes.Count}" Value="0">
+                                <Setter Property="IsVisible" Value="False" />
+                            </DataTrigger>
+                        </Grid.Triggers>
+                        <CarouselView Grid.Row="0"
+                                      x:Name="Carousel"
+                                      HeightRequest="400"
+                                      Loop="True"
+                                      ItemsSource="{Binding CarouselQuizzes}"
+                                      HorizontalScrollBarVisibility="Never"
+                                      IndicatorView="QuizIndicator">
+                            <CarouselView.ItemTemplate>
+                                <DataTemplate x:DataType="viewModels:QuizItemViewModel">
+                                    <controls:CarouselItem
+                                        CarouselImage="{Binding CarouselImage}"
+                                        Description="{Binding Description}"
+                                        Points="{Binding Points}"
+                                        ButtonText="GO"
+                                        ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
+                                        ItemId="{Binding Id}"
+                                        IsButtonDisabled="{Binding Passed}"/>
+                                </DataTemplate>
+                            </CarouselView.ItemTemplate>
+                        </CarouselView>
+
+                        <IndicatorView Grid.Row="0"
+                                       SelectedIndicatorColor="{StaticResource SSWRed}"
+                                       IndicatorColor="{StaticResource IndicatorColor}"
+                                       IndicatorSize="4.5"
+                                       HorizontalOptions="Center"
+                                       VerticalOptions="End"
+                                       Margin="0,0,0,25"
+                                       x:Name="QuizIndicator" />
+                    </Grid>
+
+                    <VerticalStackLayout
+                        Grid.Row="1"
+                        x:Name="QuizListSection"
+                        BindableLayout.ItemsSource="{Binding Quizzes}"
+                        Spacing="6">
+                        <BindableLayout.ItemTemplate>
                             <DataTemplate x:DataType="viewModels:QuizItemViewModel">
-                                <controls:CarouselItem
-                                    CarouselImage="{Binding CarouselImage}"
-                                    Description="{Binding Description}"
-                                    Points="{Binding Points}"
-                                    ButtonText="GO"
-                                    ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
-                                    ItemId="{Binding Id}"
-                                    IsButtonDisabled="{Binding Passed}"/>
+                                <controls:ListItem Title="{Binding Title}"
+                                                   Description="{Binding Description}"
+                                                   Points="{Binding Points}"
+                                                   ButtonText="GO"
+                                                   ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
+                                                   ItemId="{Binding Id}"
+                                                   ThumbnailImage="{Binding ThumbnailImage}"
+                                                   PlaceholderGlyph="&#xf11b;"
+                                                   ShowTick="{Binding Passed}"
+                                                   IsDisabled="{Binding Passed}"
+                                                   IsButtonDisabled="{Binding Passed}"/> 
                             </DataTemplate>
-                        </CarouselView.ItemTemplate>
-                    </CarouselView>
-
-                    <IndicatorView Grid.Row="0"
-                                   SelectedIndicatorColor="{StaticResource SSWRed}"
-                                   IndicatorColor="{StaticResource IndicatorColor}"
-                                   IndicatorSize="4.5"
-                                   HorizontalOptions="Center"
-                                   VerticalOptions="End"
-                                   Margin="0,0,0,25"
-                                   x:Name="QuizIndicator" />
+                        </BindableLayout.ItemTemplate>
+                    </VerticalStackLayout>
                 </Grid>
-
-                <VerticalStackLayout
-                    Grid.Row="1"
-                    x:Name="QuizListSection"
-                    BindableLayout.ItemsSource="{Binding Quizzes}"
-                    Spacing="6">
-                    <BindableLayout.ItemTemplate>
-                        <DataTemplate x:DataType="viewModels:QuizItemViewModel">
-                            <controls:ListItem Title="{Binding Title}"
-                                               Description="{Binding Description}"
-                                               Points="{Binding Points}"
-                                               ButtonText="GO"
-                                               ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
-                                               ItemId="{Binding Id}"
-                                               ThumbnailImage="{Binding ThumbnailImage}"
-                                               PlaceholderGlyph="&#xf11b;"
-                                               ShowTick="{Binding Passed}"
-                                               IsDisabled="{Binding Passed}"
-                                               IsButtonDisabled="{Binding Passed}"/> 
-                        </DataTemplate>
-                    </BindableLayout.ItemTemplate>
-                </VerticalStackLayout>
+                <ActivityIndicator
+                    HorizontalOptions="Center"
+                    VerticalOptions="Center"
+                    Color="{StaticResource SSWRed}"
+                    IsEnabled="{Binding IsBusy}"
+                    IsRunning="{Binding IsBusy}"
+                    IsVisible="{Binding IsBusy}" />
             </Grid>
-            <ActivityIndicator
-                HorizontalOptions="Center"
-                VerticalOptions="Center"
-                Color="{StaticResource SSWRed}"
-                IsEnabled="{Binding IsBusy}"
-                IsRunning="{Binding IsBusy}"
-                IsVisible="{Binding IsBusy}" />
-        </Grid>
-    </ScrollView>
+        </ScrollView>
+    </RefreshView>
 </ContentPage>
diff --git a/src/MobileUI/ViewModels/EarnViewModel.cs b/src/MobileUI/ViewModels/EarnViewModel.cs
@@ -13,6 +13,9 @@ public partial class EarnViewModel : BaseViewModel, IRecipient<QuizzesUpdatedMes
     private readonly IQuizService _quizService;
 
     private string quizDetailsPageUrl = "earn/details";
+
+    [ObservableProperty]
+    private bool _isRefreshing;
 
     public ObservableCollection<QuizItemViewModel> Quizzes { get; set; } = new ();
 
@@ -26,11 +29,10 @@ public EarnViewModel(IQuizService quizService)
 
     public async Task Initialise()
     {
-        if (!_isLoaded)
-        {
-            IsBusy = true;
-        }
+        if (_isLoaded)
+            return;
 
+        IsBusy = true;
         await UpdateQuizzes();
 
         IsBusy = false;
@@ -40,27 +42,28 @@ public async Task Initialise()
     private async Task UpdateQuizzes()
     {
         var quizzes = await _quizService.GetQuizzes();
+
+        Quizzes.Clear();
+        CarouselQuizzes.Clear();
 
         foreach (var quiz in quizzes)
         {
-            var currentQuiz = Quizzes.FirstOrDefault(x => x.Id == quiz.Id);
-
-            if (currentQuiz == null)
-            {
-                var vm = new QuizItemViewModel(quiz);
-                Quizzes.Add(vm);
+            var vm = new QuizItemViewModel(quiz);
+            Quizzes.Add(vm);
 
-                if (quiz.IsCarousel)
-                {
-                    CarouselQuizzes.Add(vm);
-                }
-            }
-            else
+            if (quiz.IsCarousel)
             {
-                currentQuiz.Passed = quiz.Passed;
+                CarouselQuizzes.Add(vm);
             }
         }
     }
+
+    [RelayCommand]
+    private async Task RefreshQuizzes()
+    {
+        await UpdateQuizzes();
+        IsRefreshing = false;
+    }
 
     [RelayCommand]
     private async Task OpenQuiz(int quizId)
@@ -75,7 +78,9 @@ private bool CanOpenQuiz(int quizId)
 
     public async void Receive(QuizzesUpdatedMessage message)
     {
-        await Initialise();
+        IsBusy = true;
+        await UpdateQuizzes();
+        IsBusy = false;
     }
 }