revite/src/pages/channels/Channel.tsx

import { useParams, useHistory } from "react-router-dom";
import { Channels } from "revolt.js/dist/api/objects";
import styled from "styled-components";

import { useState } from "preact/hooks";

import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";

import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";

import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
import Button from "../../components/ui/Button";
import Checkbox from "../../components/ui/Checkbox";

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`
	flex-grow: 1;
	display: flex;
	min-height: 0;
	overflow: hidden;
	flex-direction: row;
`;

const ChannelContent = styled.div`
	flex-grow: 1;
	display: flex;
	overflow: hidden;
	flex-direction: column;
`;

const AgeGate = styled.div`
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	user-select: none;
	padding: 12px;

	img {
		height: 150px;
	}

	.subtext {
		color: var(--secondary-foreground);
		margin-bottom: 12px;
		font-size: 14px;
	}

	.actions {
		margin-top: 20px;
		display: flex;
		gap: 12px;
	}
`;

export function Channel({ id }: { id: string }) {
	const ctx = useForceUpdate();
	const channel = useChannel(id, ctx);

	if (!channel) return null;

	if (channel.channel_type === "VoiceChannel") {
		return <VoiceChannel channel={channel} />;
	} else {
		return <TextChannel channel={channel} />;
	}
}

function TextChannel({ channel }: { channel: Channels.Channel }) {
	const [showMembers, setMembers] = useState(true);

	if (
		(channel.channel_type === "TextChannel" ||
			channel.channel_type === "Group") &&
		channel.name.includes("nsfw")
	) {
		const goBack = useHistory();
		const [consent, setConsent] = useState(false);
		const [ageGate, setAgeGate] = useState(false);
		if (!ageGate) {
			return (
				<AgeGate>
					<img
						src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
						draggable={false}
					/>
					<h2>{channel.name}</h2>
					<span className="subtext">
						This channel is marked as NSFW.{" "}
						<a href="#">Learn more</a>
					</span>

					<Checkbox checked={consent} onChange={(v) => setConsent(v)}>
						I confirm that I am at least 18 years old.
					</Checkbox>
					<div className="actions">
						<Button contrast onClick={() => goBack}>
							Go back
						</Button>
						<Button
							contrast
							onClick={() => consent && setAgeGate(true)}>
							Enter Channel
						</Button>
					</div>
				</AgeGate>
			);
		}
	}

	let id = channel._id;
	return (
		<>
			<ChannelHeader
				channel={channel}
				toggleSidebar={() => setMembers(!showMembers)}
			/>
			<ChannelMain>
				<ChannelContent>
					<VoiceHeader id={id} />
					<MessageArea id={id} />
					<TypingIndicator id={id} />
					<JumpToBottom id={id} />
					<MessageBox channel={channel} />
				</ChannelContent>
				{!isTouchscreenDevice && showMembers && (
					<MemberSidebar channel={channel} />
				)}
			</ChannelMain>
		</>
	);
}

function VoiceChannel({ channel }: { channel: Channels.Channel }) {
	return (
		<>
			<ChannelHeader channel={channel} />
			<VoiceHeader id={channel._id} />
		</>
	);
}

export default function () {
	const { channel } = useParams<{ channel: string }>();
	return <Channel id={channel} key={channel} />;
}