diff --git a/examples/pub-sub-channel-messages/javascript/index.html b/examples/pub-sub-channel-messages/javascript/index.html index aae67d1b15..afaa204c8a 100644 --- a/examples/pub-sub-channel-messages/javascript/index.html +++ b/examples/pub-sub-channel-messages/javascript/index.html @@ -9,7 +9,7 @@
-
diff --git a/examples/pub-sub-channel-messages/javascript/src/script.ts b/examples/pub-sub-channel-messages/javascript/src/script.ts index d053d6db22..83ceed4e68 100644 --- 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 index deb44f08a6..1c951063f2 100644 --- 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 (