revite/src/pages/channels/Channel.tsx

114 lines
3.5 KiB
TypeScript
Raw Normal View History

2021-07-02 18:46:19 -04:00
import { useParams, useHistory } from "react-router-dom";
2021-07-05 06:23:23 -04:00
import { Channels } from "revolt.js/dist/api/objects";
import styled from "styled-components";
import { useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
2021-07-05 06:23:23 -04:00
import { dispatch, getState } from "../../redux";
import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
2021-07-05 06:23:23 -04:00
import AgeGate from "../../components/common/AgeGate";
2021-07-05 06:23:23 -04:00
import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
2021-07-05 06:23:23 -04:00
import MemberSidebar from "../../components/navigation/right/MemberSidebar";
import ChannelHeader from "./ChannelHeader";
import { MessageArea } from "./messaging/MessageArea";
import VoiceHeader from "./voice/VoiceHeader";
const ChannelMain = styled.div`
2021-07-05 06:25:20 -04:00
flex-grow: 1;
display: flex;
min-height: 0;
overflow: hidden;
flex-direction: row;
`;
const ChannelContent = styled.div`
2021-07-05 06:25:20 -04:00
flex-grow: 1;
display: flex;
overflow: hidden;
flex-direction: column;
`;
export function Channel({ id }: { id: string }) {
2021-07-05 06:25:20 -04:00
const ctx = useForceUpdate();
const channel = useChannel(id, ctx);
2021-07-05 06:25:20 -04:00
if (!channel) return null;
2021-06-23 08:52:16 -04:00
2021-07-05 06:25:20 -04:00
if (channel.channel_type === "VoiceChannel") {
return <VoiceChannel channel={channel} />;
}
return <TextChannel channel={channel} />;
2021-06-23 08:52:16 -04:00
}
const MEMBERS_SIDEBAR_KEY = "sidebar_members";
2021-07-05 06:23:23 -04:00
function TextChannel({ channel }: { channel: Channels.Channel }) {
const [showMembers, setMembers] = useState(
getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
);
const id = channel._id;
2021-07-05 06:25:20 -04:00
return (
<AgeGate
type="channel"
channel={channel}
gated={
(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.name.includes("nsfw")
}>
2021-07-05 06:25:20 -04:00
<ChannelHeader
channel={channel}
toggleSidebar={() => {
setMembers(!showMembers);
if (showMembers) {
dispatch({
type: "SECTION_TOGGLE_SET",
id: MEMBERS_SIDEBAR_KEY,
state: false,
});
} else {
dispatch({
type: "SECTION_TOGGLE_UNSET",
id: MEMBERS_SIDEBAR_KEY,
});
}
}}
/>
2021-07-05 06:25:20 -04:00
<ChannelMain>
<ChannelContent>
<VoiceHeader id={id} />
<MessageArea id={id} />
<TypingIndicator id={id} />
<JumpToBottom id={id} />
<MessageBox channel={channel} />
</ChannelContent>
{!isTouchscreenDevice && showMembers && (
<MemberSidebar channel={channel} />
)}
</ChannelMain>
</AgeGate>
2021-07-05 06:25:20 -04:00
);
2021-06-23 08:52:16 -04:00
}
2021-07-05 06:23:23 -04:00
function VoiceChannel({ channel }: { channel: Channels.Channel }) {
2021-07-05 06:25:20 -04:00
return (
<>
<ChannelHeader channel={channel} />
<VoiceHeader id={channel._id} />
</>
);
}
2021-07-05 06:23:23 -04:00
export default function () {
2021-07-05 06:25:20 -04:00
const { channel } = useParams<{ channel: string }>();
return <Channel id={channel} key={channel} />;
}