From 5674e3c1b60e9bd47fcc9021885fa24ee2c72341 Mon Sep 17 00:00:00 2001
From: Domin-MND <69919939+domin-mnd@users.noreply.github.com>
Date: Tue, 31 Oct 2023 20:07:21 +0300
Subject: [PATCH] update readme & remove useless comments

---
 README.md                                     | 56 ++++++++++++++-----
 .../reacord/scripts/discordjs-manual-test.tsx | 55 +++++++++++++++++-
 .../src/content/guides/1-sending-messages.md  |  2 -
 3 files changed, 94 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 124a7e2..b8c0c31 100644
--- a/README.md
+++ b/README.md
@@ -22,23 +22,51 @@ pnpm add reacord react discord.js
 
 ## Example
 
-<!-- prettier-ignore -->
 ```tsx
-import * as React from "react"
-import { Embed, Button } from "reacord"
+import { useState } from "react"
+import { Embed, EmbedField, Button } from "reacord"
+
+interface EmbedCounterProps {
+	count: number
+	visible: boolean
+}
+
+function EmbedCounter({ count, visible }: EmbedCounterProps) {
+	if (!visible) return <></>
+
+	return (
+		<Embed title="the counter">
+			<EmbedField name="is it even?">{count % 2 ? "no" : "yes"}</EmbedField>
+		</Embed>
+	)
+}
 
 function Counter() {
-  const [count, setCount] = React.useState(0)
-  return (
-    <>
-      <Embed title="Counter">
-        This button has been clicked {count} times.
-      </Embed>
-      <Button onClick={() => setCount(count + 1)}>
-        +1
-      </Button>
-    </>
-  )
+	const [showEmbed, setShowEmbed] = useState<boolean>(false)
+	const [count, setCount] = useState<number>(0)
+	const instance = useInstance()
+
+	return (
+		<>
+			this button was clicked {count} times
+			<EmbedCounter count={count} visible={showEmbed} />
+			<Button
+				style="primary"
+				label="clicc"
+				onClick={() => setCount(count + 1)}
+			/>
+			<Button
+				style="secondary"
+				label={showEmbed ? "hide embed" : "show embed"}
+				onClick={() => setShowEmbed(!showEmbed)}
+			/>
+			<Button
+				style="danger"
+				label="deactivate"
+				onClick={() => instance.destroy()}
+			/>
+		</>
+	)
 }
 ```
 
diff --git a/packages/reacord/scripts/discordjs-manual-test.tsx b/packages/reacord/scripts/discordjs-manual-test.tsx
index 5bfc1b1..247ee5b 100644
--- a/packages/reacord/scripts/discordjs-manual-test.tsx
+++ b/packages/reacord/scripts/discordjs-manual-test.tsx
@@ -1,6 +1,8 @@
 import { raise } from "@reacord/helpers/raise.js"
 import {
 	Button,
+	Embed,
+	EmbedField,
 	Link,
 	Option,
 	ReacordDiscordJs,
@@ -11,7 +13,6 @@ import type { TextChannel } from "discord.js"
 import { ChannelType, Client, IntentsBitField } from "discord.js"
 import "dotenv/config"
 import { kebabCase } from "lodash-es"
-import * as React from "react"
 import { useState } from "react"
 
 const client = new Client({ intents: IntentsBitField.Flags.Guilds })
@@ -53,9 +54,57 @@ await createTest("basic", (channel) => {
 	reacord.createChannelMessage(channel).render("Hello, world!")
 })
 
+await createTest("readme counter", (channel) => {
+	interface EmbedCounterProps {
+		count: number
+		visible: boolean
+	}
+
+	function EmbedCounter({ count, visible }: EmbedCounterProps) {
+		if (!visible) return <></>
+
+		return (
+			<Embed title="the counter">
+				<EmbedField name="is it even?">{count % 2 ? "no" : "yes"}</EmbedField>
+			</Embed>
+		)
+	}
+
+	function Counter() {
+		const [showEmbed, setShowEmbed] = useState(false)
+		const [count, setCount] = useState(0)
+		const instance = useInstance()
+
+		return (
+			<>
+				this button was clicked {count} times
+				<EmbedCounter count={count} visible={showEmbed} />
+				<Button
+					style="primary"
+					label="clicc"
+					onClick={() => setCount(count + 1)}
+				/>
+				<Button
+					style="secondary"
+					label={showEmbed ? "hide embed" : "show embed"}
+					onClick={() => setShowEmbed(!showEmbed)}
+				/>
+				<Button
+					style="danger"
+					label="deactivate"
+					onClick={() => instance.destroy()}
+				/>
+			</>
+		)
+	}
+
+	reacord.createChannelMessage(channel).render(<Counter />)
+})
+
 await createTest("counter", (channel) => {
-	const Counter = () => {
-		const [count, setCount] = React.useState(0)
+	function Counter() {
+		const [count, setCount] = useState(0)
+
 		return (
 			<>
 				count: {count}
diff --git a/packages/website/src/content/guides/1-sending-messages.md b/packages/website/src/content/guides/1-sending-messages.md
index d9721dd..6c93664 100644
--- a/packages/website/src/content/guides/1-sending-messages.md
+++ b/packages/website/src/content/guides/1-sending-messages.md
@@ -141,14 +141,12 @@ interface Command {
 }
 
 function handleCommands(client: Client, commands: Command[]) {
-	// Registering commands when client is ready
 	client.once(Events.ClientReady, () => {
 		for (const { name, description } of commands) {
 			client.application?.commands.create({ name, description })
 		}
 	})
 
-	// Subscribing to interactionCreate event
 	client.on(Events.InteractionCreate, (interaction) => {
 		if (interaction.isCommand()) {
 			for (const command of commands) {