59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
import MessageBox from "@/components/MessageBox";
|
|
import AppSidebar from "@/components/Sidebar";
|
|
import { Message } from "@/types/types";
|
|
import { UserProfile } from "@/hooks/get-user";
|
|
import { StringMap } from "@/types/typeUtils";
|
|
import { useParams } from "next/navigation";
|
|
import { useMessages } from "@/hooks/use-messages";
|
|
|
|
// In this testing instance we are assuming that the target's node is localhost
|
|
// To make this functional we need to add a settings feature to the api
|
|
|
|
export default function DMs() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const wsRef = useRef<WebSocket | null>(null);
|
|
const messages = useMessages((s) => s.messages);
|
|
const setMessages = useMessages((s) => s.setMessages);
|
|
const [userList, setUserList] = useState<StringMap<UserProfile>>({});
|
|
const [user, setUser] = useState<UserProfile | undefined>();
|
|
|
|
return (
|
|
<AppSidebar
|
|
setMessages={setMessages}
|
|
wsRef={wsRef}
|
|
userList={userList}
|
|
setUserList={setUserList}
|
|
chatWith={id}
|
|
setUser={setUser}
|
|
messages={messages}
|
|
>
|
|
<MessageBox
|
|
channelName={userList[id]?.display_name || id}
|
|
userList={userList}
|
|
setUserList={setUserList}
|
|
messages={messages
|
|
.filter(
|
|
(m) =>
|
|
(m.channel_id === id && m.from === user?.id) ||
|
|
(m.from === id && m.channel_id === user?.id)
|
|
)
|
|
.toReversed()}
|
|
sendMessage={(message) => {
|
|
wsRef.current?.send(
|
|
JSON.stringify({
|
|
type: "send_message",
|
|
params: {
|
|
channel_id: id,
|
|
contents: message,
|
|
},
|
|
})
|
|
);
|
|
}}
|
|
/>
|
|
</AppSidebar>
|
|
);
|
|
}
|