diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index abfc74dcd..453e9df51 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/packages/web/components/templates/NavigationLayout.tsx @@ -9,7 +9,7 @@ import { ConfirmationModal } from '../patterns/ConfirmationModal' import { KeyboardShortcutListModal } from './KeyboardShortcutListModal' import { setupAnalytics } from '../../lib/analytics' import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts' -import { logout } from '../../lib/logout' +import { useLogout } from '../../lib/logout' import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme' import { useRegisterActions } from 'kbar' import { theme } from '../tokens/stitches.config' @@ -22,6 +22,7 @@ import useWindowDimensions from '../../lib/hooks/useGetWindowDimensions' import { useAddItem } from '../../lib/networking/library_items/useLibraryItems' import { useHandleAddUrl } from '../../lib/hooks/useHandleAddUrl' import { useGetViewer } from '../../lib/networking/viewer/useGetViewer' +import { useQueryClient } from '@tanstack/react-query' export type NavigationSection = | 'home' @@ -45,12 +46,18 @@ type NavigationLayoutProps = { export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { useApplyLocalTheme() - const { data: viewerData } = useGetViewer() const router = useRouter() + const queryClient = useQueryClient() const [showLogoutConfirmation, setShowLogoutConfirmation] = useState(false) const [showKeyboardCommandsModal, setShowKeyboardCommandsModal] = useState(false) - const addItem = useAddItem() + const { + data: viewerData, + isFetching, + isPending, + isError, + status, + } = useGetViewer() useRegisterActions(navigationCommands(router)) @@ -69,6 +76,12 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { if (viewerData) { setupAnalytics(viewerData) } + if (!viewerData && !isPending) { + console.log('viewerData: ', viewerData, isFetching, isPending, status) + // there was an error loading, so lets log out + queryClient.clear() + router.push(`/login`) + } }, [viewerData]) const showLogout = useCallback(() => { @@ -95,6 +108,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { } }, [showLogout]) + const { logout } = useLogout() // if (isLoading) { // return ( // {props.pageMetaDataProps ? ( diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx index 36859fdfd..706601c78 100644 --- a/packages/web/components/templates/SettingsLayout.tsx +++ b/packages/web/components/templates/SettingsLayout.tsx @@ -1,6 +1,4 @@ import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives' -import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts' -import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts' import { useRouter } from 'next/router' import { applyStoredTheme } from '../../lib/themeUpdater' import { useCallback, useEffect, useState } from 'react' @@ -8,7 +6,7 @@ import { ConfirmationModal } from '../patterns/ConfirmationModal' import { KeyboardShortcutListModal } from './KeyboardShortcutListModal' import { PageMetaData } from '../patterns/PageMetaData' import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer' -import { logout } from '../../lib/logout' +import { useLogout } from '../../lib/logout' import { SettingsMenu } from './navMenu/SettingsMenu' import { SettingsDropdown } from './navMenu/SettingsDropdown' import { useVerifyAuth } from '../../lib/hooks/useVerifyAuth' @@ -75,6 +73,8 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element { } }, [showLogout]) + const { logout } = useLogout() + return ( { - await logoutMutation() - try { - const result = await logoutMutation() - if (!result) { - throw new Error('Logout failed') +export const useLogout = () => { + const queryClient = useQueryClient() + const logout = useCallback(async () => { + await logoutMutation() + try { + const result = await logoutMutation() + if (!result) { + throw new Error('Logout failed') + } + deinitAnalytics() + queryClient.clear() + window.location.href = '/login' + } catch { + // TODO: display an error message instead + window.location.href = '/' } - deinitAnalytics() - window.location.href = '/login' - } catch { - // TODO: display an error message instead - window.location.href = '/' - } + }, []) + return { logout } } diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx index c50f79eee..8545357b7 100644 --- a/packages/web/lib/networking/library_items/useLibraryItems.tsx +++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx @@ -10,7 +10,7 @@ import { gqlEndpoint } from '../../appConfig' import { ContentReader, PageType, State } from '../fragments/articleFragment' import { Highlight } from '../fragments/highlightFragment' import { Label } from '../fragments/labelFragment' -import { requestHeaders } from '../networkHelpers' +import { gqlFetcher, requestHeaders } from '../networkHelpers' import { gqlSearchQuery, GQL_BULK_ACTION, @@ -23,24 +23,6 @@ import { GQL_SET_LINK_ARCHIVED, GQL_UPDATE_LIBRARY_ITEM, } from './gql' -import { useState } from 'react' - -function gqlFetcher( - query: string, - variables?: unknown, - requiresAuth = true -): Promise { - // if (requiresAuth) { - // verifyAuth() - // } - - const graphQLClient = new GraphQLClient(gqlEndpoint, { - credentials: 'include', - mode: 'cors', - }) - - return graphQLClient.request(query, variables, requestHeaders()) -} const updateItemStateInCache = ( queryClient: QueryClient, @@ -242,7 +224,6 @@ export function useGetLibraryItems( // If no folder is specified cache this as `home` queryKey, queryFn: async ({ queryKey, pageParam, meta }) => { - console.log('pageParam and limit', Number(pageParam), limit) const cached = queryClient.getQueryData(queryKey) as CachedPagesData if (pageParam !== INITIAL_INDEX) { // check in the query cache, if there is an item for this page @@ -260,7 +241,6 @@ export function useGetLibraryItems( cached.pages[idx - 1].pageInfo.wasUnchanged ) { const cachedResult = cached.pages[idx] - console.log('found cached page result: ', cachedResult) return { edges: cachedResult.edges, pageInfo: {