89 lines
2.0 KiB
TypeScript
89 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import { useQuery, useMutation } from "@apollo/react-hooks";
|
|
import { gql } from "apollo-boost";
|
|
import { GQLWorkspace, GQLChannel } from "./gql-types";
|
|
|
|
function channelsFirst(a: GQLChannel, b: GQLChannel): number {
|
|
let sameStatus = a.isPrivate == b.isPrivate;
|
|
if (!sameStatus) {
|
|
return a.isPrivate ? 1 : -1;
|
|
}
|
|
return a.name > b.name ? 1 : -1;
|
|
}
|
|
|
|
function isActive(currentChatData, ws, ch): boolean {
|
|
return (
|
|
currentChatData?.currentChat?.workspace == ws &&
|
|
currentChatData?.currentChat?.channel == ch
|
|
);
|
|
}
|
|
|
|
export default function ChannelList() {
|
|
const { loading, error, data } = useQuery(gql`
|
|
{
|
|
workspace {
|
|
icon
|
|
name
|
|
channels {
|
|
name
|
|
isPrivate
|
|
}
|
|
}
|
|
}
|
|
`);
|
|
|
|
const [gotoChat] = useMutation(gql`
|
|
mutation {
|
|
gotoChat(workspace: $workspace, channel: $channel) @client
|
|
}
|
|
`);
|
|
|
|
const { loading: currentChatLoading, data: currentChatData } = useQuery(gql`
|
|
{
|
|
currentChat {
|
|
workspace
|
|
channel
|
|
}
|
|
}
|
|
`);
|
|
|
|
if (loading) {
|
|
return <div>Loading</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div>{error}</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{data.workspace.map((ws: GQLWorkspace) => (
|
|
<article key={ws.name} className="workspace">
|
|
<div className="title">
|
|
<img src={ws.icon}></img> {ws.name}
|
|
</div>
|
|
<div className="chats">
|
|
<ul>
|
|
{ws.channels.sort(channelsFirst).map(ch => (
|
|
<li
|
|
key={ch.name}
|
|
className={
|
|
isActive(currentChatData, ws.name, ch.name) ? "active" : ""
|
|
}
|
|
onClick={a =>
|
|
gotoChat({
|
|
variables: { workspace: ws.name, channel: ch.name }
|
|
})
|
|
}
|
|
>
|
|
{ch.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|