DEV Community: Rupesh Ghosh

How to Implement a Global Error Handling Popup in React Native with React Query

Rupesh Ghosh — Sun, 19 May 2024 19:00:15 +0000

Handling errors gracefully in a React Native application is essential for providing a smooth user experience. One effective approach is to implement a global error handling popup that informs users of issues and allows them to retry failed actions. In this blog post, we will walk through how to achieve this using React Native and React Query.

Setting Up Your Project

Ensure you have a React Native project set up. If not, you can create one using Expo.

Creating the PopupController

PopupController will manage the visibility of the GlobalPopup. This controller can be used by other components to show or hide the popup.

export interface PopupRef {
  show: (failedQuery: QueryKey) => void;
  hide: () => void;
}

export default class PopupController {
  static popupRef: MutableRefObject<PopupRef>;

  static setGlobalPopupRef = (ref: MutableRefObject<PopupRef>) => {
    this.popupRef = ref;
  };

  static showGlobalPopup = (failedQuery: QueryKey) => {
    this.popupRef.current?.show(failedQuery);
  };

  static hideGlobalPopup = () => {
    this.popupRef.current?.hide();
  };
}

Creating the GlobalPopup Component

The GlobalPopup component will display error messages and provide an option to retry failed actions. It uses useLayoutEffect to set the ref of GlobalPopup in the popupController. It also uses useImperativeHandle to customise the handle exposed as a ref, allowing it to show and hide the popup.

const GlobalPopup = () => {
  const [visible, setVisible] = useState(false);
  const [failedQueries, setFailedQueries] = useState<QueryKey[]>([]);
  const queryClient = useQueryClient();
  const popupRef = useRef<PopupRef>();

  // Using useLayoutEffect to set the ref of GlobalPopup in popupController
  useLayoutEffect(() => {
    PopupController.setGlobalPopupRef(popupRef as MutableRefObject<PopupRef>);
  }, []);

  // Using useImperativeHandle to customize the handle exposed as a ref
  useImperativeHandle(
    popupRef,
    () => ({
      show: (failedQuery: QueryKey) => {
        setVisible(true);
        if (!failedQueries.includes(failedQuery)) {
          setFailedQueries([...failedQueries, failedQuery]);
        }
      },
      hide: () => {
        setVisible(false);
        setFailedQueries([]);
      },
    }),
    [failedQueries]
  );

  const handleTryAgain = () => {
    failedQueries.forEach(async (query) => {
      await queryClient.invalidateQueries({ queryKey: query });
    });
    PopupController.hideGlobalPopup();
  };

  return (
    <Modal visible={visible}>
      <View>
        <Text>This is a global error popup</Text>
        <Button onPress={handleTryAgain} title="Try Again" />
      </View>
    </Modal>
  );
};

Integrating GlobalPopup in the App Component

Now, integrate the GlobalPopup in the top-level component of your application and set up the React Query client to handle errors globally.

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    // Overwriting queryClient to handle errors globally
    onError: (_, query) => {
      PopupController.showGlobalPopup(query.queryKey);
    },
  }),
});

How it works

When any component in the application makes an API call using useQuery and it fails, the configured onError handler in App.tsx is triggered.
The onError handler calls PopupController.showGlobalPopup with the failed query key (e.g., ["key"]).
The show function in the popup reference object updates the visibility state of GlobalPopup and adds the failed query key to the internal list.
The global error popup becomes visible, displaying a generic error message and a "Try Again" button.
Clicking "Try Again" triggers handleTryAgain in the popup. This function iterates through the failed queries, invalidates them using queryClient, and calls PopupController.hideGlobalPopup to hide the popup.
React Query refetches the invalidated queries, potentially resolving the error.

By incorporating these enhancements, you can create a robust and informative error handling experience for your React Native applications.

Sample project with global error handling implementation: github

How to implement Infinite Scrolling in React Native

Rupesh Ghosh — Wed, 01 May 2024 18:37:06 +0000

In mobile apps, displaying large datasets efficiently is crucial. Imagine a social media feed or an e-commerce product listing, you don't want to overwhelm the user by loading everything at once. Infinite scrolling, where new content loads as the user scrolls down, provides a smooth and performant solution.

Setting up the project

For this blog post, we will assume you have a React Native project set up and an API endpoint that returns paginated data.

Install react-query

npm install react-query

React Query provides useInfiniteQuery hook which is specifically designed for fetching and managing paginated data. You can read more about useInfiniteQuery here

Implementing Infinite Scrolling with useInfiniteQuery

Define the Query Function

This function fetches data from the API endpoint. It should accept the current page number as a parameter and return the fetched data.

const fetchArticles = async (page = 1: number) => {
  const response = await fetch(`http://api.example.com?page=${page}`);
  return response.json();
}

Using useInfiniteQuery

import { useInfiniteQuery } from 'react-query';

const ArticleList = () => {
  const { 
    data, 
    isLoading, 
    fetchNextPage, 
    hasNextPage
  } = useInfiniteQuery('articles', fetchArticles, {
    getNextPageParam: (lastPage) => lastPage.hasNextPage || undefined 
  });

  return (
    <FlatList
      data={data?.pages.flat()}
      renderItem={({ item }) => <Article article={item} /> }
      onEndReached={hasNextPage && fetchNextPage}
      ListFooterComponent={isLoading && ActivityIndicator}
     // other FlatList props
    />
  )
}

useInfiniteQuery manages the fetching and caching of paginated data.
getNextPageParam is crucial for pagination. It takes the last fetched page (lastPage) and determines the next page parameter for the API request. If there are no more pages, it returns undefined. Modify this function based on your API's pagination structure (e.g., page numbers).
isLoading indicates if data is currently being fetched. You can use this to display a loading indicator while data loads. A loading indicator is displayed using ListFooterComponent
onEndReached within FlatList gets called when the user scrolls close to the end of the list. It's used to trigger the loading of the next page of data.
We can also adjust the threshold for triggering onEndReached using the onEndReachedThreshold prop of FlatList. This value represents a fraction of the list's viewable height from the bottom For example 0.5 means triggering when the user is halfway through the last visible item.

Conclusion

By leveraging useInfiniteQuery, you can effortlessly implement infinite scrolling in your React Native applications. This approach goes beyond articles – you can adapt it to various use cases like product listings, chat history, or any scenario where you're dealing with large datasets.

How to use Community Toolkit MVVM in Avalonia

Rupesh Ghosh — Sun, 07 May 2023 13:11:24 +0000

Avalonia is an open-source, cross-platform .NET UI framework that enables developers to create desktop applications that run on Windows, macOS, and Linux. Avalonia provides built-in support for the Model-View-ViewModel (MVVM) pattern.

Setting Up the Project

Before we dive into using the MVVM Community Toolkit, we need to set up a basic Avalonia MVVM application. We can do this by creating a new project in Visual Studio or Rider and selecting the "Avalonia MVVM Application" project template, or via the .NET CLI

dotnet new avalonia.mvvm -o Sample -n Sample

Using Community Toolkit MVVM in Avalonia

The Community Toolkit MVVM is a lightweight, flexible, and easy-to-use MVVM framework that provides basic infrastructure for implementing MVVM in .NET applications. It is maintained and published by Microsoft and is part of the .NET Foundation.

To use Community Toolkit MVVM in an Avalonia application, follow these steps:

Install the CommunityToolkit.Mvvm package from NuGet package manager or via .NET CLI

dotnet add package CommunityToolkit.Mvvm

Remove Avalonia.ReactiveUI Package Reference from Sample.csproj
From Program.cs, Remove UseReactiveUI() extension method from BuildAvaloniaApp method.

public static AppBuilder BuildAvaloniaApp()
    => AppBuilder.Configure<App>()
        .UsePlatformDetect()
        .LogToTrace();

In ViewModels/ViewModelBase.cs, Inherit from ObservableObject.

public class ViewModelBase : ObservableObject
{
}

Comparing Community Toolkit MVVM and Reactive UI

While both Community Toolkit MVVM and Reactive UI are popular MVVM frameworks for .NET applications, they have different strengths and weaknesses. Here are some trade-offs to consider when choosing between them:

Complexity: Reactive UI is a more complex and powerful framework than Community Toolkit MVVM. While Reactive UI provides advanced features for reactive programming and asynchronous data binding, it can be more difficult to learn and use, especially for developers who are new to reactive programming.
Performance: Reactive UI can be slower than Community Toolkit MVVM due to its reliance on reactive programming and the Rx library. While the performance difference may not be noticeable in small applications, it can become an issue in larger, more complex applications.
Flexibility: Reactive UI provides more flexibility and power than Community Toolkit MVVM, allowing developers to implement complex scenarios such as multi-threading, custom schedulers, and advanced data binding scenarios.

Create a Custom Progress Bar with moving percentage in WPF

Rupesh Ghosh — Sat, 22 Apr 2023 13:23:41 +0000

Introduction

As a dotnet developer, you may have found yourself in need of a progress bar to indicate the progress of a task. While the built in WPF progress bar is functional, it may not always fit the specific requirements of your project. In this blog post, I will show you how to create a custom progress bar with a moving percentage in WPF.

Project setup

To get started, we'll create a separate WPF user control library for our custom progress bar. This will allow us to reuse the progress bar in different projects without having to write the same code over and over again.
Here are the steps to create a WPF user control library in Visual Studio:

Open Visual Studio and create a new project.
In the New Project dialog box, select WPF User Control Library and click Next.
Give your project a name and click Next.
Select the dotnet version and click Create.

Designing the custom progress bar

To create a custom progress bar with a moving percentage in WPF, we'll need to use two converters. Converters are classes that can convert one type of value to another and are used in WPF to bind UI elements to data. In this case, we'll use two converters to bind the progress bar's width to its value, and its inverse width to its remaining value (i.e 100 - value).

Add below two converters the project:

ProgressBarValueToWidthConverter ```Csharp

internal class ProgressBarValueToWidthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var progressBarValue = System.Convert.ToDouble(value);

    if (progressBarValue >= 100)
    {
        return "100*";
    }

    return $"{progressBarValue}*";
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
    throw new NotImplementedException();
}

}

- InverseProgressBarValueToWidthConverter 
```Csharp


internal class InverseProgressBarValueToWidthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var progressBar = System.Convert.ToDouble(value);

        if (progressBar >= 100)
        {
            return "0*";
        }

        return $"{100.0 - progressBar}*";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

By using these two converters in combination, we can create a progress bar that dynamically moves the percentage value of the progress bar as the task progresses.

Now, Add a new UserControl name 'CustomProgressBar' to the project.

CustomProgressBar.xaml ```html

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:converters="clr-namespace:CustomProgressbar.Converters"
mc:Ignorable="d"
x:Name="CustomProgressBarUC">

<UserControl.Resources>
    <converters:ProgressBarValueToWidthConverter x:Key="ProgressBarValueToWidthConverter" />
    <converters:InverseProgressBarValueToWidthConverter x:Key="InverseProgressBarValueToWidthConverter" />
</UserControl.Resources>

<StackPanel HorizontalAlignment="Center">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{Binding ElementName=CustomProgressBarUC, Path=ProgressBarValue, Converter={StaticResource ProgressBarValueToWidthConverter}}" />
            <ColumnDefinition Width="{Binding ElementName=CustomProgressBarUC, Path=ProgressBarValue, Converter={StaticResource InverseProgressBarValueToWidthConverter}}" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding ElementName=CustomProgressBarUC, Path=ProgressBarValue, StringFormat={}{0:F0}%}"
                   FontSize="9px"
                   HorizontalAlignment="Right" />
    </Grid>
    <ProgressBar Minimum="0"
                 Value="{Binding ElementName=CustomProgressBarUC, Path=ProgressBarValue, Mode=OneWay}"
                 Maximum="100"
                 Height="8"
                 Width="300"
                 Foreground="DarkBlue"
                 Background="LightGray"
                 BorderBrush="LightGray" />
</StackPanel>

In the above XAML file, we have 'StackPanel' to hold our progress bar and percentage text. Inside the 'StackPanel', we'll have a 'Grid' to hold the progress bar. 

We've added two column definitions to the 'Grid'. The first column's width is bound to the 'ProgressBarValue' property of our user control, and we've used the 'ProgressBarValueToWidthConverter' converter to convert the progress bar value to a width. The second column's width is also bound to the 'ProgressBarValue; property, but we've used the 'InverseProgressBarValueToWidthConverter' converter to convert the inverse value of the progress bar to a width.

We've also added a 'TextBlock' to show the progress percentage. Its 'Text' property is bound to the 'ProgressBarValue' property, and we've used a 'StringFormat' to display the value as a percentage with no decimal places.

Finally, we'll add a 'ProgressBar' control to the 'StackPanel'. We'll bind its Value property to the 'ProgressBarValue' property of our user control, and we'll set its Minimum and Maximum values to 0 and 100, respectively.

- CustomProgressBar.xaml.cs

```Csharp


public partial class Progressbar : UserControl
{
    public Progressbar()
    {
        InitializeComponent();
        ProgressBarValue = 0;
    }

    public double ProgressBarValue
    {
        get => (double)GetValue(ProgressBarValueProperty);
        set => SetValue(ProgressBarValueProperty, value);
    }

    // Using a DependencyProperty as the backing store for ProgressBarValue.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ProgressBarValueProperty =
        DependencyProperty.Register(nameof(ProgressBarValue), typeof(double), typeof(Progressbar));
}

The above CustomProgressBar has a public property called 'ProgressBarValue' which is backed by a DependencyProperty. This property allows the value of the progress bar to be set and updated from the main project.

Conclusion

With these elements in place, we can create a fully functional custom progress bar with a moving percentage in WPF, simply by using the UserControl that contains the progress bar, as a separate library in our main project.

Source Code: https://github.com/RupeshGhosh10/CustomProgressBar