fixup! Add PubSub example for channels and messages

ably · Dec 16, 2024 · b974be9 · b974be9
1 parent 33155c3
commit b974be9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/examples/pub-sub-channel-messages/javascript/index.html b/examples/pub-sub-channel-messages/javascript/index.html
@@ -9,7 +9,7 @@
   </head>
   <body class="font-inter">
     <div class="min-h-screen p-8 flex flex-col items-center gap-6">
-      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
+      <button id="publish" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
         Publish Random Headline
       </button>
       <div class="w-full max-w-2xl h-96 border rounded-lg overflow-y-auto bg-white shadow-lg">

diff --git a/examples/pub-sub-channel-messages/javascript/src/script.ts b/examples/pub-sub-channel-messages/javascript/src/script.ts
@@ -42,7 +42,7 @@ channel.subscribe((message) => {
   const messageText = document.createElement('span');
   messageText.innerText = message.data;
   newMessage.appendChild(messageText);
-  messagesDiv.appendChild(newMessage);
+  messagesDiv.prepend(newMessage);
 
   setTimeout(() => {
     newFlag.remove();
@@ -58,4 +58,9 @@ publishButton.addEventListener('click', () => {
   channel.publish('headline', selectedHeadline);
 
   getHeadlinesRemaining();
+
+  if (headlines.length === 0) {
+    publishButton.disabled = true;
+    publishButton.className = 'bg-gray-500 text-white px-4 py-2 rounded';
+  }
 });
diff --git a/examples/pub-sub-channel-messages/react/src/app/page.tsx b/examples/pub-sub-channel-messages/react/src/app/page.tsx
@@ -22,9 +22,10 @@ export default function Home() {
     "New Chip Architecture Doubles Computing Power While Halving Energy Use",
     "Virtual Reality Breakthrough: Neural Interface Allows Direct Brain Connection"
   ]);
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
 
   const { publish } = useChannel('cut-nil-tie', (message) => {
-    setMessages(prev => [...prev, { text: message.data, isNew: true }]);
+    setMessages(prev => [{ text: message.data, isNew: true }, ...prev]);
 
     setTimeout(() => {
       setMessages(prev =>
@@ -37,7 +38,13 @@ export default function Home() {
 
 
   const publishHeadline = async () => {
-    if (headlines.length === 0) return;
+    if (headlines.length === 0) {
+      setIsButtonDisabled(true);
+      const publishButton = document.getElementById('publish-button') as HTMLButtonElement;
+      publishButton.className = 'bg-gray-500 text-white px-4 py-2 rounded';
+
+      return;
+    };
 
     const randomIndex = Math.floor(Math.random() * headlines.length);
     const selectedHeadline = headlines[randomIndex];
@@ -49,9 +56,10 @@ export default function Home() {
   return (
     <div className="min-h-screen p-8 flex flex-col items-center gap-6">
       <button
+        id="publish-button"
         onClick={publishHeadline}
         className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
-        disabled={headlines.length === 0}
+        disabled={isButtonDisabled}
       >
         Publish Random Headline
       </button>