Merge pull request #4300 from omnivore-app/feat/web-improved-logged-out

Improved logout detection on web

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 (
   //     <HStack

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 } 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 = {
@@ -96,6 +93,8 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
     }
   }, [showLogout])
 
+  const { logout } = useLogout()
+
   return (
     <>
       {props.pageMetaDataProps ? (

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 (
     <VStack
       alignment="start"

packages/web/lib/logout.ts

@@ -1,17 +1,24 @@
+import { useQueryClient } from '@tanstack/react-query'
 import { deinitAnalytics } from './analytics'
 import { logoutMutation } from './networking/mutations/logoutMutation'
+import { useCallback } from 'react'
 
-export const logout = async () => {
-  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 }
 }

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<unknown> {
-  // 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: {