import cx from 'classnames';
import get from 'lodash/get';
import React, { useMemo } from 'react';
import { ChatContext, IChatContext, withContext } from 'context';
import {
ChannelIdentityFragment,
DmIdentityFragment,
UserChannelsPreviewComponent,
UserDmsPreviewComponent,
} from 'shared/graphql/__generated__';
import { getDmName } from 'shared/utils';
import css from './chat-window.module.css';
import Body from './components/body';
import Footer from './components/footer';
import Header from './components/header';
// -- TYPES
interface IChatWindowProps
extends Pick<
IChatContext,
| 'setChannel'
| 'setTabs'
| 'setSidebarVisibility'
| 'user'
| 'isSidebarVisible'
| 'channelMembersFilter'
> {
channelIdentityId?: string;
isTab?: boolean;
isTabCollapsed?: boolean;
style?: React.CSSProperties;
}
type MergedChannelIdentity = ChannelIdentityFragment & DmIdentityFragment;
// -- MAIN
function ChatWindow({
channelIdentityId,
user,
setChannel,
setSidebarVisibility,
setTabs,
isSidebarVisible,
isTab,
isTabCollapsed,
style,
channelMembersFilter,
}: IChatWindowProps) {
const cn = cx(isTab ? (isTabCollapsed ? css['shrinked-tab'] : css.tab) : css.window);
const cnBody = useMemo(
() => ({
wrapper: cx(isTabCollapsed && css.hidden, css['horizontal-padding']),
}),
[isTabCollapsed],
);
const cnFooter = cx(isTabCollapsed && css.hidden, css['horizontal-padding']);
return (
{({ data: channelsData }) => (
{({ data: dmsData }) => {
const channelIdentities: ChannelIdentityFragment[] = get(
channelsData,
'user.channelIdentities.items',
[],
);
const dmIdentities: DmIdentityFragment[] = get(
dmsData,
'user.channelIdentities.items',
[],
);
const identities = [...channelIdentities, ...dmIdentities];
const identity: Partial =
identities.find(el => el.id === channelIdentityId) || {};
const channel: Partial =
identity.channel || {};
const userId = user && user.id;
const createdById = get(channel, ['createdBy', 'id']);
const isChannel = channel.type === 'channel';
const isOwner = createdById === userId;
const canEdit = isChannel && (channel.public || isOwner);
const channelName = isChannel
? channel.name
: channel.members && userId
? getDmName(channel.members, userId)
: '';
return (
{user && (
)}
);
}}
)}
);
}
export default withContext({
context: ChatContext,
keys: [
'setChannel',
'setTabs',
'setSidebarVisibility',
'user',
'isSidebarVisible',
'channelMembersFilter',
],
})(ChatWindow);