57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import MessageBox from "@/components/MessageBox";
|
|
import AppSidebar from "@/components/Sidebar";
|
|
import Message from "@/types/message";
|
|
import useUser, { User } from "@/hooks/get-user";
|
|
import { NumberMap } from "@/types/typeUtils";
|
|
import auth, { makeAddress } from "@/lib/auth";
|
|
|
|
// In this testing instance we are assuming that Alice's node is localhost
|
|
// To make this functional we need to add a settings feature to the api
|
|
|
|
export default function AppHome() {
|
|
// Again we assume a static id, specifically Alice's user id
|
|
// const { id } = useParams<{ id: string }>();
|
|
const id = 667;
|
|
const ip = "localhost";
|
|
const wsRef = useRef<WebSocket | null>(null);
|
|
const [messages, setMessages] = useState<Message[]>([]);
|
|
const { user, loading } = useUser();
|
|
const [userList, setUserList] = useState<NumberMap<User>>({});
|
|
|
|
useEffect(() => {
|
|
if (!ip || !user || loading) return;
|
|
auth(makeAddress(ip, 7090), wsRef, () => {}, setMessages);
|
|
setUserList((prev) => {
|
|
prev[user.id] = user;
|
|
return prev;
|
|
});
|
|
}, [ip, user, loading]);
|
|
|
|
return (
|
|
<AppSidebar user={user}>
|
|
<MessageBox
|
|
channelName="Alice"
|
|
userList={userList}
|
|
setUserList={setUserList}
|
|
messages={messages
|
|
.filter((m) => m.channel_id === id || m.from === id)
|
|
.toReversed()}
|
|
sendMessage={(message) => {
|
|
wsRef.current?.send(
|
|
JSON.stringify({
|
|
type: "send_message",
|
|
params: {
|
|
channel_id: id,
|
|
contents: message,
|
|
},
|
|
})
|
|
);
|
|
}}
|
|
/>
|
|
</AppSidebar>
|
|
);
|
|
}
|