import React, { useCallback, useEffect, useState } from 'react'; import { FormattedDate, FormattedMessage } from 'react-intl'; import { fetchStatus } from 'soapbox/actions/statuses'; import MissingIndicator from 'soapbox/components/missing-indicator'; import StatusContent from 'soapbox/components/status-content'; import StatusMedia from 'soapbox/components/status-media'; import TranslateButton from 'soapbox/components/translate-button'; import { HStack, Icon, Stack, Text } from 'soapbox/components/ui'; import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container'; import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks'; import { makeGetStatus } from 'soapbox/selectors'; import { defaultMediaVisibility } from 'soapbox/utils/status'; import type { Status as StatusEntity } from 'soapbox/types/entities'; type RouteParams = { statusId: string }; interface IEventInformation { params: RouteParams, } const EventInformation: React.FC = ({ params }) => { const dispatch = useAppDispatch(); const getStatus = useCallback(makeGetStatus(), []); const status = useAppSelector(state => getStatus(state, { id: params.statusId })) as StatusEntity; const settings = useSettings(); const displayMedia = settings.get('displayMedia') as string; const [isLoaded, setIsLoaded] = useState(!!status); const [showMedia, setShowMedia] = useState(defaultMediaVisibility(status, displayMedia)); useEffect(() => { dispatch(fetchStatus(params.statusId)).then(() => { setIsLoaded(true); }).catch(() => { setIsLoaded(true); }); setShowMedia(defaultMediaVisibility(status, displayMedia)); }, [params.statusId]); const handleToggleMediaVisibility = () => { setShowMedia(!showMedia); }; const handleShowMap: React.MouseEventHandler = (e) => { e.preventDefault(); dispatch(openModal('EVENT_MAP', { statusId: status.id, })); }; const renderEventLocation = useCallback(() => { const event = status!.event!; return event.location && ( {event.location.get('name')}
{!!event.location.get('street')?.trim() && (<> {event.location.get('street')}
)} {[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')} {event.location.get('latitude') && (<>
)}
); }, [status]); const renderEventDate = useCallback(() => { const event = status!.event!; if (!event.start_time) return null; const startDate = new Date(event.start_time); const endDate = event.end_time && new Date(event.end_time); const sameDay = endDate && startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear(); return ( {endDate && (<> {' - '} )} ); }, [status]); const renderLinks = useCallback(() => { if (!status.event?.links.size) return null; return ( {status.event.links.map(link => ( {(link.remote_url || link.url).replace(/^https?:\/\//, '')} ))} ); }, [status]); if (!status && isLoaded) { return ( ); } else if (!status) return null; return ( {!!status.contentHtml.trim() && ( )} {status.quote && status.pleroma.get('quote_visible', true) && ( )} {renderEventLocation()} {renderEventDate()} {renderLinks()} ); }; export default EventInformation;