54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { useDispatch, useSelector } from 'react-redux';
|
|
import AppNavbar from '../navigation/app-navbar';
|
|
import Sidebar from '../navigation/sidebar/sidebar';
|
|
import { Redirect, useParams } from 'react-router-dom';
|
|
import { actions as uiActions } from '../../store/ui';
|
|
import TextBasedChannel from '../channel/text-based-channel';
|
|
import MemberList from '../user/member-list';
|
|
import { getGuild, getGuildChannels } from '../../store/guilds';
|
|
import { useEffect } from 'react';
|
|
import PageWrapper from './page-wrapper';
|
|
import { getChannel } from '../../store/channels';
|
|
|
|
const GuildPage: React.FunctionComponent = () => {
|
|
const { channelId, guildId }: any = useParams();
|
|
const dispatch = useDispatch();
|
|
const ui = useSelector((s: Store.AppState) => s.ui);
|
|
const guild = useSelector(getGuild(guildId));
|
|
const channel = useSelector(getChannel(channelId));
|
|
const textChannels = useSelector(getGuildChannels(guildId)).filter(c => c.type === 'TEXT');
|
|
|
|
useEffect(() => {
|
|
dispatch(uiActions.pageSwitched({ channel, guild }));
|
|
}, [guild, channel]);
|
|
|
|
if (!guild)
|
|
return <Redirect to="/channels/@me" />;
|
|
else if (textChannels.length && !channelId) {
|
|
const systemChannel = textChannels[0];
|
|
return <Redirect to={`/channels/${guild.id}/${systemChannel.id}`} />;
|
|
}
|
|
|
|
return (ui.activeGuild) ? (
|
|
<PageWrapper pageTitle={channel?.name ?? guild.name}>
|
|
<Sidebar />
|
|
{(channel)
|
|
? <div className="bg-bg-primary">
|
|
<AppNavbar />
|
|
<div
|
|
style={{ height: 'calc(100vh - 48px)' }}
|
|
className="flex">
|
|
{ui.activeChannel && {
|
|
'TEXT': <TextBasedChannel />,
|
|
'DM': <TextBasedChannel />,
|
|
'VOICE': <div className="w-full p-2">Add something cool here for voice channels?</div>,
|
|
}[channel.type]}
|
|
<MemberList />
|
|
</div>
|
|
</div>
|
|
: <div className="bg-bg-tertiary" />}
|
|
</PageWrapper>
|
|
) : null;
|
|
}
|
|
|
|
export default GuildPage; |