diff --git a/src/app/components/Waku.tsx b/src/app/components/Waku.tsx
index 30f18b8..65c7138 100644
--- a/src/app/components/Waku.tsx
+++ b/src/app/components/Waku.tsx
@@ -1,13 +1,27 @@
import React from "react";
-import { Block, BlockTypes } from "@/components/Block";
+import { Block } from "@/components/Block";
import { Subtitle } from "@/components/Subtitle";
import { Button } from "@/components/Button";
import { MessageContent, useWaku } from "@/hooks";
-import { CONTENT_TOPIC } from "@/constants";
export const Waku: React.FunctionComponent<{}> = () => {
- const { onSend, messages } = useWaku();
- const { nick, text, onNickChange, onMessageChange, resetText } = useMessage();
+ const {
+ onSend,
+ messages,
+ contentTopic: activeContentTopic,
+ onContentTopicChange: onActiveContentTopicChange
+ } = useWaku();
+ const {
+ nick,
+ text,
+ onNickChange,
+ onMessageChange,
+ resetText,
+ } = useMessage();
+ const {
+ contentTopic,
+ onContentTopicChange,
+ } = useContentTopic(activeContentTopic);
const onSendClick = async () => {
await onSend(nick, text);
@@ -26,7 +40,20 @@ export const Waku: React.FunctionComponent<{}> = () => {
Waku
-
Content topic: {CONTENT_TOPIC}
+
+
+
@@ -76,6 +103,23 @@ export const Waku: React.FunctionComponent<{}> = () => {
);
};
+function useContentTopic(globalContentTopic: string) {
+ const [contentTopic, setContentTopic] = React.useState(globalContentTopic);
+
+ React.useEffect(() => {
+ setContentTopic(globalContentTopic);
+ }, [globalContentTopic]);
+
+ const onContentTopicChange = (e: React.SyntheticEvent) => {
+ setContentTopic(e.currentTarget.value || "");
+ };
+
+ return {
+ contentTopic,
+ onContentTopicChange,
+ };
+}
+
function useMessage() {
const [nick, setNick] = React.useState("");
const [text, setText] = React.useState("");
diff --git a/src/hooks/useWaku.ts b/src/hooks/useWaku.ts
index 85e9fb8..361e83a 100644
--- a/src/hooks/useWaku.ts
+++ b/src/hooks/useWaku.ts
@@ -5,10 +5,11 @@ import { Message, waku } from "@/services/waku";
export type MessageContent = {
nick: string;
text: string;
- time: string;
+ timestamp: number;
};
export const useWaku = () => {
+ const [contentTopic, setContentTopic] = React.useState(CONTENT_TOPIC);
const [messages, setMessages] = React.useState