81 lines
1.7 KiB
TypeScript
81 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import { useQuery } from "@apollo/react-hooks";
|
|
import { gql } from "apollo-boost";
|
|
import { GQLMessage } from "./gql-types";
|
|
|
|
export default function Chatroom() {
|
|
const {
|
|
loading: localLoading,
|
|
error: localError,
|
|
data: localData
|
|
} = useQuery(gql`
|
|
{
|
|
currentChat {
|
|
workspace
|
|
channel
|
|
}
|
|
}
|
|
`);
|
|
const variables = {
|
|
workspace: localData.currentChat?.workspace || "",
|
|
channel: localData.currentChat?.channel || ""
|
|
};
|
|
const {
|
|
loading: remoteLoading,
|
|
error: remoteError,
|
|
data: remoteData
|
|
} = useQuery(
|
|
gql`
|
|
query Messages($workspace: String!, $channel: String!) {
|
|
messages(
|
|
workspace: $workspace
|
|
order: DATE_ASC
|
|
filter: { channel: $channel }
|
|
) {
|
|
messages {
|
|
content
|
|
username
|
|
userRealname
|
|
time
|
|
messageId
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
{
|
|
variables
|
|
}
|
|
);
|
|
|
|
if (localLoading || remoteLoading) {
|
|
return <div>Loading</div>;
|
|
}
|
|
if (localData.currentChat == null) {
|
|
return <div>Select a channel from the left menu</div>;
|
|
}
|
|
|
|
if (localError) {
|
|
return <div>{localError.message}</div>;
|
|
}
|
|
if (remoteError) {
|
|
return <div>{remoteError.message}</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<ul className="chatlog">
|
|
{remoteData.messages.messages.map((msg: GQLMessage) => (
|
|
<li key={msg.messageId}>
|
|
<article className="message">
|
|
<header>
|
|
{msg.userRealname} ({msg.username}) ({msg.messageId})
|
|
</header>
|
|
<p>{msg.content}</p>
|
|
</article>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|