77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { groupCompose } from 'soapbox/actions/compose';
|
|
import { fetchGroup } from 'soapbox/actions/groups';
|
|
import { connectGroupStream } from 'soapbox/actions/streaming';
|
|
import { expandGroupTimeline } from 'soapbox/actions/timelines';
|
|
import { Avatar, HStack, Stack } from 'soapbox/components/ui';
|
|
import ComposeForm from 'soapbox/features/compose/components/compose-form';
|
|
import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks';
|
|
|
|
import Timeline from '../ui/components/timeline';
|
|
|
|
type RouteParams = { id: string };
|
|
|
|
interface IGroupTimeline {
|
|
params: RouteParams,
|
|
}
|
|
|
|
const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
|
|
const account = useOwnAccount();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const groupId = props.params.id;
|
|
|
|
const relationship = useAppSelector((state) => state.group_relationships.get(groupId));
|
|
|
|
const handleLoadMore = (maxId: string) => {
|
|
dispatch(expandGroupTimeline(groupId, { maxId }));
|
|
};
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchGroup(groupId));
|
|
dispatch(expandGroupTimeline(groupId));
|
|
|
|
dispatch(groupCompose(`group:${groupId}`, groupId));
|
|
|
|
const disconnect = dispatch(connectGroupStream(groupId));
|
|
|
|
return () => {
|
|
disconnect();
|
|
};
|
|
}, [groupId]);
|
|
|
|
return (
|
|
<Stack space={2}>
|
|
{!!account && relationship?.member && (
|
|
<div className='px-2 py-4 border-b border-solid border-gray-200 dark:border-gray-800'>
|
|
<HStack alignItems='start' space={4}>
|
|
<Link to={`/@${account.acct}`}>
|
|
<Avatar src={account.avatar} size={46} />
|
|
</Link>
|
|
|
|
<ComposeForm
|
|
id={`group:${groupId}`}
|
|
shouldCondense
|
|
autoFocus={false}
|
|
group={groupId}
|
|
/>
|
|
</HStack>
|
|
</div>
|
|
)}
|
|
<Timeline
|
|
scrollKey='group_timeline'
|
|
timelineId={`group:${groupId}`}
|
|
onLoadMore={handleLoadMore}
|
|
emptyMessage={<FormattedMessage id='empty_column.group' defaultMessage='There are no posts in this group yet.' />}
|
|
divideType='border'
|
|
showGroup={false}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default GroupTimeline;
|