From a8e5d88c1880857b36cd62444543fdc4d4320eee Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 21 Aug 2024 16:58:29 +0800 Subject: [PATCH 1/5] Better handling of a logged out user --- .../components/templates/NavigationLayout.tsx | 17 +++++++++++++++-- packages/web/lib/logout.ts | 3 +++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index abfc74dcd..1ceca6440 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/packages/web/components/templates/NavigationLayout.tsx @@ -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(() => { diff --git a/packages/web/lib/logout.ts b/packages/web/lib/logout.ts index 2b917deea..d86c9bb6d 100644 --- a/packages/web/lib/logout.ts +++ b/packages/web/lib/logout.ts @@ -1,7 +1,9 @@ +import { useQueryClient } from '@tanstack/react-query' import { deinitAnalytics } from './analytics' import { logoutMutation } from './networking/mutations/logoutMutation' export const logout = async () => { + const queryClient = useQueryClient() await logoutMutation() try { const result = await logoutMutation() @@ -9,6 +11,7 @@ export const logout = async () => { throw new Error('Logout failed') } deinitAnalytics() + queryClient.clear() window.location.href = '/login' } catch { // TODO: display an error message instead From a86ae2ab93de3da985d545ff74808092035f22e1 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 21 Aug 2024 16:58:42 +0800 Subject: [PATCH 2/5] Use the main gql fetcher --- .../library_items/useLibraryItems.tsx | 22 +------------------ 1 file changed, 1 insertion(+), 21 deletions(-) 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: { From 68e65334304ff3ec18fa2456746fdf71b156931d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 21 Aug 2024 17:38:30 +0800 Subject: [PATCH 3/5] Better hooks use --- .../components/templates/NavigationLayout.tsx | 3 +- .../components/templates/PrimaryLayout.tsx | 4 ++- .../components/templates/SettingsLayout.tsx | 4 ++- packages/web/lib/logout.ts | 32 +++++++++++-------- 4 files changed, 26 insertions(+), 17 deletions(-) diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index 1ceca6440..0b6f78bde 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 { logout, useLogout } from '../../lib/logout' import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme' import { useRegisterActions } from 'kbar' import { theme } from '../tokens/stitches.config' @@ -108,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..e4178ced3 100644 --- a/packages/web/components/templates/SettingsLayout.tsx +++ b/packages/web/components/templates/SettingsLayout.tsx @@ -8,7 +8,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 { logout, useLogout } from '../../lib/logout' import { SettingsMenu } from './navMenu/SettingsMenu' import { SettingsDropdown } from './navMenu/SettingsDropdown' import { useVerifyAuth } from '../../lib/hooks/useVerifyAuth' @@ -75,6 +75,8 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element { } }, [showLogout]) + const { logout } = useLogout() + return ( { - const queryClient = useQueryClient() - await logoutMutation() - try { - const result = await logoutMutation() - if (!result) { - throw new Error('Logout failed') +export const useLogout = () => { + const logout = useCallback(async () => { + const queryClient = useQueryClient() + 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() - queryClient.clear() - window.location.href = '/login' - } catch { - // TODO: display an error message instead - window.location.href = '/' - } + }, []) + return { logout } } From d202b7bf8d9fdad35b57e330a6a94b2c6f4b1e32 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 21 Aug 2024 17:49:19 +0800 Subject: [PATCH 4/5] Move hook call --- packages/web/lib/logout.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/lib/logout.ts b/packages/web/lib/logout.ts index e9bea3e36..689c81f5a 100644 --- a/packages/web/lib/logout.ts +++ b/packages/web/lib/logout.ts @@ -4,8 +4,8 @@ import { logoutMutation } from './networking/mutations/logoutMutation' import { useCallback } from 'react' export const useLogout = () => { + const queryClient = useQueryClient() const logout = useCallback(async () => { - const queryClient = useQueryClient() await logoutMutation() try { const result = await logoutMutation() From 36f03eab59abb2d73c64897a5fd2a0db915a2673 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 21 Aug 2024 18:01:22 +0800 Subject: [PATCH 5/5] Fix imports --- packages/web/components/templates/NavigationLayout.tsx | 2 +- packages/web/components/templates/PrimaryLayout.tsx | 7 ++----- packages/web/components/templates/SettingsLayout.tsx | 4 +--- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index 0b6f78bde..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, useLogout } from '../../lib/logout' +import { useLogout } from '../../lib/logout' import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme' import { useRegisterActions } from 'kbar' import { theme } from '../tokens/stitches.config' diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx index e88a692ca..5a3a07e44 100644 --- a/packages/web/components/templates/PrimaryLayout.tsx +++ b/packages/web/components/templates/PrimaryLayout.tsx @@ -1,20 +1,17 @@ import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData' import { Box } from '../elements/LayoutPrimitives' import { ReactNode, useEffect, useState, useCallback } from 'react' -import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery' -import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts' import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts' -import { NextRouter, useRouter } from 'next/router' +import { useRouter } from 'next/router' import { ConfirmationModal } from '../patterns/ConfirmationModal' import { KeyboardShortcutListModal } from './KeyboardShortcutListModal' import { setupAnalytics } from '../../lib/analytics' import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts' -import { logout, useLogout } from '../../lib/logout' +import { useLogout } from '../../lib/logout' import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme' import { updateTheme } from '../../lib/themeUpdater' import { Priority, useRegisterActions } from 'kbar' import { ThemeId } from '../tokens/stitches.config' -import { useVerifyAuth } from '../../lib/hooks/useVerifyAuth' import { useGetViewer } from '../../lib/networking/viewer/useGetViewer' type PrimaryLayoutProps = { diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx index e4178ced3..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, useLogout } from '../../lib/logout' +import { useLogout } from '../../lib/logout' import { SettingsMenu } from './navMenu/SettingsMenu' import { SettingsDropdown } from './navMenu/SettingsDropdown' import { useVerifyAuth } from '../../lib/hooks/useVerifyAuth'