feat(subscriptions): connection state (#6084)

Author: KATT

src/pages/index.tsx

@@ -171,12 +171,7 @@ export default function IndexPage() {
     },
   });
 
-  const [currentlyTyping, setCurrentlyTyping] = useState<string[]>([]);
-  trpc.post.whoIsTyping.useSubscription(undefined, {
-    onData(data) {
-      setCurrentlyTyping(data);
-    },
-  });
+  const whoIsTypingResult = trpc.post.whoIsTyping.useSubscription();
 
   return (
     <>
@@ -293,8 +288,8 @@ export default function IndexPage() {
             <div className="w-full">
               <AddMessageForm onMessagePost={() => scrollToBottomOfList()} />
               <p className="h-2 italic text-gray-400">
-                {currentlyTyping.length
-                  ? `${currentlyTyping.join(', ')} typing...`
+                {whoIsTypingResult.data?.length
+                  ? `${whoIsTypingResult.data.join(', ')} typing...`
                   : ''}
               </p>
             </div>