63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
|
import React, { useEffect } from 'react';
|
||
|
|
import { FormattedMessage } from 'react-intl';
|
||
|
|
|
||
|
|
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 { Stack } from 'soapbox/components/ui';
|
||
|
|
import ComposeForm from 'soapbox/features/compose/components/compose-form';
|
||
|
|
import { useAppDispatch } from 'soapbox/hooks';
|
||
|
|
|
||
|
|
import Timeline from '../ui/components/timeline';
|
||
|
|
|
||
|
|
type RouteParams = { id: string };
|
||
|
|
|
||
|
|
interface IGroupTimeline {
|
||
|
|
params: RouteParams,
|
||
|
|
}
|
||
|
|
|
||
|
|
const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
|
||
|
|
const dispatch = useAppDispatch();
|
||
|
|
|
||
|
|
const groupId = props.params.id;
|
||
|
|
|
||
|
|
const handleLoadMore = () => {
|
||
|
|
return dispatch(expandGroupTimeline(groupId));
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
dispatch(fetchGroup(groupId));
|
||
|
|
dispatch(expandGroupTimeline(groupId));
|
||
|
|
|
||
|
|
const disconnect = dispatch(connectGroupStream(groupId));
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
disconnect();
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
dispatch(groupCompose(`group:${groupId}`, groupId));
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Stack space={2}>
|
||
|
|
<div className='p-2 pt-0 border-b border-solid border-gray-200 dark:border-gray-800'>
|
||
|
|
<ComposeForm id={`group:${groupId}`} autoFocus={false} group={groupId} />
|
||
|
|
</div>
|
||
|
|
<div className='p-0 sm:p-2 shadow-none'>
|
||
|
|
<Timeline
|
||
|
|
scrollKey='group_timeline'
|
||
|
|
timelineId={`group:${groupId}`}
|
||
|
|
onLoadMore={handleLoadMore}
|
||
|
|
emptyMessage={<FormattedMessage id='empty_column.group' defaultMessage='There is no post in this group yet.' />}
|
||
|
|
divideType='space'
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Stack>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GroupTimeline;
|