feat: Show toaster when load record fails

src/App.tsx

@@ -1,5 +1,5 @@
 import { ConnectedRouter } from "connected-react-router";
-import { ThemeProvider } from "evergreen-ui";
+import { ThemeProvider, toaster } from "evergreen-ui";
 import React, { useEffect, useMemo } from "react";
 import { BarChart2, Clock, Settings } from "react-feather";
 import { hot } from "react-hot-loader";
@@ -31,14 +31,19 @@ import HistoryView from "./views/history";
 import SettingsView from "./views/settings";
 
 interface AppShellProps {
-  loadRecords: () => void;
+  loadRecords: (
+    onSuccess?: () => void,
+    onError?: (error: Error) => void
+  ) => void;
   isExportingDatabaseRecords: boolean;
   isImportingDatabaseRecords: boolean;
   searchParams: string;
   selectedDomain: string | null;
   selectedTimeRange: TimeRange;
 }
 
+const LOAD_TOASTER_ID = "app-shell-load-toaster";
+
 const AppShell = ({
   loadRecords,
   isExportingDatabaseRecords,
@@ -54,7 +59,12 @@ const AppShell = ({
     ]).toString();
   }, [searchParams]);
   useEffect(() => {
-    loadRecords();
+    loadRecords(undefined, error => {
+      toaster.danger("Fail to load records", {
+        id: LOAD_TOASTER_ID,
+        description: error.message
+      });
+    });
   }, [loadRecords, selectedDomain, selectedTimeRange]);
 
   return (

src/store/activity/selectors.ts

@@ -56,7 +56,19 @@ export const getIsInitialized = (state: RootState) =>
  * Retrieves the status of loading activity records
  */
 export const getIsLoadingRecords = (state: RootState) =>
-  state.activity.isLoading;
+  state.activity.isLoadingRecords;
+
+/**
+ * Retrieves the error occurred from loading activity records
+ */
+export const getLoadingRecordsError = (state: RootState) =>
+  state.activity.loadingRecordsError;
+
+/**
+ * Retrieves the success status from loading activity records
+ */
+export const getLoadingRecordsSuccess = (state: RootState) =>
+  state.activity.loadingRecordsSuccess;
 
 /**
  * Retrieves time range of all (fetched) activity records in store

src/store/activity/slice.ts

@@ -34,11 +34,15 @@ export interface ActivityState {
   /**
    * Loading status of `loadRecords` thunk
    */
-  isLoading: boolean;
+  isLoadingRecords: boolean;
   /**
-   * Error resulting from `loadRecords` thunk
+   * Error resulting from `loadRecords` thunks
    */
-  error: Error | null;
+  loadingRecordsError: Error | null;
+  /**
+   * Success status from `loadRecords` thunks
+   */
+  loadingRecordsSuccess: boolean | null;
   /**
    * Map of all (fetched) domain records, keyed by domain value
    */
@@ -65,10 +69,11 @@ const INITIAL_STATE: ActivityState = {
   deletingRecordsError: null,
   deletingRecordsSuccess: null,
   domains: {},
-  error: null,
   isDeletingRecords: false,
   isInitialized: false,
-  isLoading: false,
+  isLoadingRecords: false,
+  loadingRecordsError: null,
+  loadingRecordsSuccess: null,
   records: [],
   recordsTimeRange: null,
   selectedTimeRange: DEFAULT_TIME_RANGE,
@@ -97,18 +102,21 @@ const activity = createSlice({
       state.deletingRecordsSuccess = false;
     },
     getRecordsStart(state: ActivityState) {
-      state.isLoading = true;
+      state.isLoadingRecords = true;
+      state.loadingRecordsSuccess = null;
     },
     getRecordsSuccess(state, action: PayloadAction<Activity[]>) {
       state.records = action.payload;
       state.isInitialized = true;
-      state.isLoading = false;
-      state.error = null;
+      state.isLoadingRecords = false;
+      state.loadingRecordsError = null;
+      state.loadingRecordsSuccess = true;
     },
     getRecordsFailure(state: ActivityState, action: PayloadAction<Error>) {
       state.isInitialized = true;
-      state.isLoading = false;
-      state.error = action.payload;
+      state.isLoadingRecords = false;
+      state.loadingRecordsError = action.payload;
+      state.loadingRecordsSuccess = false;
     },
     setDomains(state, action: PayloadAction<Record<string, Domain>>) {
       state.domains = action.payload;
@@ -126,6 +134,8 @@ const activity = createSlice({
 });
 
 const loadRecords = (
+  onSuccess?: () => void,
+  onError?: (error: Error) => void,
   options: { forceReload: boolean } = { forceReload: false }
 ): ThunkAction => async (dispatch, getState, { databaseService }) => {
   const state = getState();
@@ -150,7 +160,7 @@ const loadRecords = (
   dispatch(activity.actions.getRecordsStart());
   try {
     if (databaseService === undefined) {
-      throw Error("Unable to connect to DB");
+      throw Error("Unable to connect to database");
     }
 
     // Only fetch all domains & activity time range on initialization
@@ -161,6 +171,10 @@ const loadRecords = (
         databaseService.fetchActivityRecords(requiredTimeRange)
       ]);
 
+      if (onSuccess) {
+        onSuccess();
+      }
+
       // Batch actions to ensure smooth UI transition on store updates
       batch(() => [
         dispatch(activity.actions.getRecordsSuccess(records || [])),
@@ -174,6 +188,10 @@ const loadRecords = (
         requiredTimeRange
       );
 
+      if (onSuccess) {
+        onSuccess();
+      }
+
       // Batch actions to ensure smooth UI transition on store updates
       batch(() => [
         dispatch(activity.actions.getRecordsSuccess(records || [])),
@@ -182,6 +200,9 @@ const loadRecords = (
       ]);
     }
   } catch (error) {
+    if (onError) {
+      onError(error);
+    }
     dispatch(activity.actions.getRecordsFailure(error));
   }
 };

src/store/dataMigration/slice.ts

@@ -109,7 +109,9 @@ const importDatabaseRecords = (rawData: string): ThunkAction => async (
 
     batch(() => [
       dispatch(dataMigration.actions.importDatabaseRecordsSuccess()),
-      dispatch(activityActions.loadRecords({ forceReload: true }))
+      dispatch(
+        activityActions.loadRecords(undefined, undefined, { forceReload: true })
+      )
     ]);
   } catch (error) {
     console.error(error);