diff --git a/app/soapbox/features/group/group-timeline.tsx b/app/soapbox/features/group/group-timeline.tsx index 53f570280..2390adc0a 100644 --- a/app/soapbox/features/group/group-timeline.tsx +++ b/app/soapbox/features/group/group-timeline.tsx @@ -1,13 +1,14 @@ -import React, { useEffect } from 'react'; -import { FormattedMessage } from 'react-intl'; +import clsx from 'clsx'; +import React, { useEffect, useRef } from 'react'; +import { FormattedMessage, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { groupCompose, setGroupTimelineVisible } from 'soapbox/actions/compose'; +import { groupCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose'; import { connectGroupStream } from 'soapbox/actions/streaming'; import { expandGroupTimeline } from 'soapbox/actions/timelines'; import { Avatar, HStack, Icon, Stack, Text, Toggle } from 'soapbox/components/ui'; import ComposeForm from 'soapbox/features/compose/components/compose-form'; -import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks'; +import { useAppDispatch, useAppSelector, useDraggedFiles, useOwnAccount } from 'soapbox/hooks'; import { useGroup } from 'soapbox/hooks/api'; import Timeline from '../ui/components/timeline'; @@ -19,8 +20,10 @@ interface IGroupTimeline { } const GroupTimeline: React.FC = (props) => { + const intl = useIntl(); const account = useOwnAccount(); const dispatch = useAppDispatch(); + const composer = useRef(null); const { groupId } = props.params; @@ -30,6 +33,10 @@ const GroupTimeline: React.FC = (props) => { const canComposeGroupStatus = !!account && group?.relationship?.member; const groupTimelineVisible = useAppSelector((state) => !!state.compose.get(composeId)?.group_timeline_visible); + const { isDragging, isDraggedOver } = useDraggedFiles(composer, (files) => { + dispatch(uploadCompose(composeId, files, intl)); + }); + const handleLoadMore = (maxId: string) => { dispatch(expandGroupTimeline(groupId, { maxId })); }; @@ -57,7 +64,15 @@ const GroupTimeline: React.FC = (props) => { {canComposeGroupStatus && (
- +