logged out chat modal, call to action

src/app/_providers/MessagesProvider.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { inferRouterOutputs } from '@trpc/server';
+import { useUser } from '@clerk/nextjs'
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
 import { trpc } from '~/app/_trpc/Client'
 import { type ChatRouter } from '~/server/routers/chat'
@@ -26,15 +27,29 @@ export const useMessages = () => useContext(MessageContext)
 export const MessagesProvider = ({children}:{children:ReactNode}) => {
   const [error,setError] = useState<string|null>(null)
   const [isLoading,setIsLoading] = useState<boolean>(true)
-  const { data: session,error:sessionError,isLoading:sessionLoading} = trpc.chat.getSession.useQuery()
-  const { data: messages, refetch, error:messageError, isLoading:messagesLoading } = trpc.chat.getMessages.useQuery(session?.id ? session.id : "")
+  const { isLoaded, isSignedIn } = useUser()
+  const { data: session,error:sessionError,isLoading:sessionLoading} = trpc.chat.getSession.useQuery(undefined, {
+    enabled: isSignedIn === true,
+  })
+  const { data: messages, refetch, error:messageError, isLoading:messagesLoading } = trpc.chat.getMessages.useQuery(session?.id ? session.id : "", {
+    enabled: isSignedIn === true && session?.id != undefined,
+  })
   const { mutate ,isPending:clearingChat,isSuccess:clearedChat } = trpc.chat.clearChat.useMutation()
   const utils = trpc.useUtils()
   const refetchMessages = () => {
+    if (!isSignedIn) {
+      return;
+    }
       utils.chat.getMessages.invalidate()
       refetch()
   }
   const clearChat = (callback?: () => void) => {
+    if (!isSignedIn) {
+      if (callback) {
+        callback()
+      }
+      return;
+    }
     mutate(undefined,{onSuccess: () => {
       if (callback) {
         callback()
@@ -43,18 +58,29 @@ export const MessagesProvider = ({children}:{children:ReactNode}) => {
     }})
   }
   useEffect(() => {
+    if (isSignedIn !== true) {
+      setError(null)
+      return;
+    }
     messageError && setError(messageError.message)
     sessionError && setError(sessionError.message)
-  },[messageError,sessionError])
+  },[messageError,sessionError,isSignedIn])
   useEffect(() => {
-    !sessionLoading && !messagesLoading && setIsLoading(false)
-    sessionLoading || messagesLoading && setIsLoading(true)
-  },[sessionLoading,messagesLoading])
+    if (!isLoaded) {
+      setIsLoading(true)
+      return;
+    }
+    if (isSignedIn !== true) {
+      setIsLoading(false)
+      return;
+    }
+    setIsLoading(sessionLoading || messagesLoading)
+  },[isLoaded,isSignedIn,sessionLoading,messagesLoading])
   return (
     <MessageContext.Provider value={
       {
-        session,
-        messages,
+        session: isSignedIn === true ? session : undefined,
+        messages: isSignedIn === true ? messages : undefined,
         refetchMessages,
         clearChat,
         error,