From 1f600c272e7208c11822bba61118ad2fbe4d86fe Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 17 Oct 2023 13:36:47 +0800 Subject: [PATCH] Better handling of network failures for labels/subscriptions/searches in the left menu --- .../templates/homeFeed/LibraryFilterMenu.tsx | 41 +++++++++++-------- .../networking/queries/useGetLabelsQuery.tsx | 5 ++- .../queries/useGetSavedSearchQuery.tsx | 3 ++ .../queries/useGetSubscriptionsQuery.tsx | 3 ++ 4 files changed, 34 insertions(+), 18 deletions(-) diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx index 11adec862..fba2015c9 100644 --- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx +++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx @@ -48,32 +48,39 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element { isSessionStorage: false, initialValue: [], }) - const { labels: networkLabels, isLoading: labelsLoading } = - useGetLabelsQuery() - const { savedSearches: networkSearches, isLoading: searchesLoading } = - useGetSavedSearchQuery() - const { - subscriptions: networkSubscriptions, - isLoading: subscriptionsLoading, - } = useGetSubscriptionsQuery() + const labelsResponse = useGetLabelsQuery() + const searchesResponse = useGetSavedSearchQuery() + const subscriptionsResponse = useGetSubscriptionsQuery() useEffect(() => { - if (!labelsLoading) { - setLabels(networkLabels) + if ( + !labelsResponse.error && + !labelsResponse.isLoading && + labelsResponse.labels + ) { + setLabels(labelsResponse.labels) } - }, [setLabels, networkLabels, labelsLoading]) + }, [setLabels, labelsResponse]) useEffect(() => { - if (!subscriptionsLoading) { - setSubscriptions(networkSubscriptions) + if ( + !subscriptionsResponse.error && + !subscriptionsResponse.isLoading && + subscriptionsResponse.subscriptions + ) { + setSubscriptions(subscriptionsResponse.subscriptions) } - }, [setSubscriptions, networkSubscriptions, subscriptionsLoading]) + }, [setSubscriptions, subscriptionsResponse]) useEffect(() => { - if (!searchesLoading) { - setSavedSearches(networkSearches ?? []) + if ( + !searchesResponse.error && + !searchesResponse.isLoading && + searchesResponse.savedSearches + ) { + setSavedSearches(searchesResponse.savedSearches) } - }, [setSavedSearches, networkSearches, searchesLoading]) + }, [setSavedSearches, searchesResponse]) return ( <> diff --git a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx index d6fefad8e..abd4295fd 100644 --- a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx @@ -4,6 +4,7 @@ import { Label, labelFragment } from '../fragments/labelFragment' import { publicGqlFetcher } from '../networkHelpers' type LabelsQueryResponse = { + error: any isLoading: boolean isValidating: boolean labels: Label[] @@ -38,10 +39,11 @@ export function useGetLabelsQuery(): LabelsQueryResponse { const { data, error, mutate, isValidating } = useSWR(query, publicGqlFetcher) try { - if (data) { + if (data && !error) { const result = data as LabelsResponseData const labels = result.labels?.labels as Label[] return { + error, isLoading: !error && !data, isValidating, labels, @@ -54,6 +56,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse { console.log('error', error) } return { + error, isLoading: !error && !data, isValidating: false, labels: [], diff --git a/packages/web/lib/networking/queries/useGetSavedSearchQuery.tsx b/packages/web/lib/networking/queries/useGetSavedSearchQuery.tsx index 4dde76f89..f6a76f386 100644 --- a/packages/web/lib/networking/queries/useGetSavedSearchQuery.tsx +++ b/packages/web/lib/networking/queries/useGetSavedSearchQuery.tsx @@ -7,6 +7,7 @@ import { } from '../fragments/savedSearchFragment' type SavedSearchResponse = { + error: any savedSearches?: SavedSearch[] savedSearchErrors?: unknown isLoading: boolean @@ -39,6 +40,7 @@ export function useGetSavedSearchQuery(): SavedSearchResponse { const { filters } = data as SavedSearchResponseData return { + error, savedSearches: filters?.filters ?? [], savedSearchErrors: error ?? {}, isLoading: false, @@ -46,6 +48,7 @@ export function useGetSavedSearchQuery(): SavedSearchResponse { } return { + error, savedSearches: [], savedSearchErrors: null, isLoading: !error && !data, diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx index 4c0a26d17..ababa6fdb 100644 --- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx @@ -25,6 +25,7 @@ export type Subscription = { } type SubscriptionsQueryResponse = { + error: any isLoading: boolean isValidating: boolean subscriptions: Subscription[] @@ -85,6 +86,7 @@ export function useGetSubscriptionsQuery( const result = data as SubscriptionsResponseData const subscriptions = result.subscriptions.subscriptions as Subscription[] return { + error, isLoading: !error && !data, isValidating, subscriptions, @@ -97,6 +99,7 @@ export function useGetSubscriptionsQuery( console.log('error', error) } return { + error, isLoading: !error && !data, isValidating: true, subscriptions: [],