Merge branch 'react-lazy' into 'main'
Delete Bundle component, switch to React.lazy See merge request soapbox-pub/soapbox!2779
This commit is contained in:
Alex Gleason
commit
74817c40b7
|
|
@ -1,28 +0,0 @@
|
|||
const BUNDLE_FETCH_REQUEST = 'BUNDLE_FETCH_REQUEST';
|
||||
const BUNDLE_FETCH_SUCCESS = 'BUNDLE_FETCH_SUCCESS';
|
||||
const BUNDLE_FETCH_FAIL = 'BUNDLE_FETCH_FAIL';
|
||||
|
||||
const fetchBundleRequest = (skipLoading?: boolean) => ({
|
||||
type: BUNDLE_FETCH_REQUEST,
|
||||
skipLoading,
|
||||
});
|
||||
|
||||
const fetchBundleSuccess = (skipLoading?: boolean) => ({
|
||||
type: BUNDLE_FETCH_SUCCESS,
|
||||
skipLoading,
|
||||
});
|
||||
|
||||
const fetchBundleFail = (error: any, skipLoading?: boolean) => ({
|
||||
type: BUNDLE_FETCH_FAIL,
|
||||
error,
|
||||
skipLoading,
|
||||
});
|
||||
|
||||
export {
|
||||
BUNDLE_FETCH_REQUEST,
|
||||
BUNDLE_FETCH_SUCCESS,
|
||||
BUNDLE_FETCH_FAIL,
|
||||
fetchBundleRequest,
|
||||
fetchBundleSuccess,
|
||||
fetchBundleFail,
|
||||
};
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import React, { Suspense } from 'react';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import Bundle from 'soapbox/features/ui/components/bundle';
|
||||
import { MediaGallery } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
|
|
@ -18,23 +17,21 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
|
|||
const { media, onClick, sensitive } = props;
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const renderLoading = () => <div className='media-gallery--compact' />;
|
||||
const fallback = <div className='media-gallery--compact' />;
|
||||
const onOpenMedia = (media: ImmutableList<Attachment>, index: number) => dispatch(openModal('MEDIA', { media, index }));
|
||||
|
||||
return (
|
||||
<div className='attachment-thumbs'>
|
||||
<Bundle fetchComponent={MediaGallery} loading={renderLoading}>
|
||||
{(Component: any) => (
|
||||
<Component
|
||||
media={media}
|
||||
onOpenMedia={onOpenMedia}
|
||||
height={50}
|
||||
compact
|
||||
sensitive={sensitive}
|
||||
visible
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
<Suspense fallback={fallback}>
|
||||
<MediaGallery
|
||||
media={media}
|
||||
onOpenMedia={onOpenMedia}
|
||||
height={50}
|
||||
compact
|
||||
sensitive={sensitive}
|
||||
visible
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
{onClick && (
|
||||
<div className='attachment-thumbs__clickable-region' onClick={onClick} />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
|
|||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import IconButton from 'soapbox/components/icon-button';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { DatePicker } from 'soapbox/features/ui/util/async-components';
|
||||
import { useInstance, useFeatures } from 'soapbox/hooks';
|
||||
|
||||
|
|
@ -114,19 +113,17 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
|
|||
|
||||
return (
|
||||
<div className='relative mt-1 rounded-md shadow-sm'>
|
||||
<BundleContainer fetchComponent={DatePicker}>
|
||||
{Component => (<Component
|
||||
selected={selected}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
onChange={handleChange}
|
||||
placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
|
||||
minDate={new Date('1900-01-01')}
|
||||
maxDate={maxDate}
|
||||
required={required}
|
||||
renderCustomHeader={renderCustomHeader}
|
||||
isClearable={!required}
|
||||
/>)}
|
||||
</BundleContainer>
|
||||
<DatePicker
|
||||
selected={selected}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
onChange={handleChange}
|
||||
placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
|
||||
minDate={new Date('1900-01-01')}
|
||||
maxDate={maxDate}
|
||||
required={required}
|
||||
renderCustomHeader={renderCustomHeader}
|
||||
isClearable={!required}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import { useGroupLookup } from 'soapbox/api/hooks';
|
||||
import ColumnLoading from 'soapbox/features/ui/components/column-loading';
|
||||
|
||||
import { Layout } from '../ui';
|
||||
|
||||
interface IGroupLookup {
|
||||
params: {
|
||||
groupSlug: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface IMaybeGroupLookup {
|
||||
params?: {
|
||||
groupSlug?: string;
|
||||
groupId?: string;
|
||||
};
|
||||
}
|
||||
|
||||
function GroupLookupHoc(Component: React.ComponentType<{ params: { groupId: string } }>) {
|
||||
const GroupLookup: React.FC<IGroupLookup> = (props) => {
|
||||
const { entity: group } = useGroupLookup(props.params.groupSlug);
|
||||
|
||||
if (!group) return (
|
||||
<>
|
||||
<Layout.Main>
|
||||
<ColumnLoading />
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside />
|
||||
</>
|
||||
);
|
||||
|
||||
const newProps = {
|
||||
...props,
|
||||
params: {
|
||||
...props.params,
|
||||
id: group.id,
|
||||
groupId: group.id,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Component {...newProps} />
|
||||
);
|
||||
};
|
||||
|
||||
const MaybeGroupLookup: React.FC<IMaybeGroupLookup> = (props) => {
|
||||
const { params } = props;
|
||||
|
||||
if (params?.groupId) {
|
||||
return <Component {...props} params={{ ...params, groupId: params.groupId }} />;
|
||||
} else {
|
||||
return <GroupLookup {...props} params={{ ...params, groupSlug: params?.groupSlug || '' }} />;
|
||||
}
|
||||
};
|
||||
|
||||
return MaybeGroupLookup;
|
||||
}
|
||||
|
||||
export default GroupLookupHoc;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
type HOC<P, R> = (Component: React.ComponentType<P>) => React.ComponentType<R>
|
||||
type AsyncComponent<P> = () => Promise<{ default: React.ComponentType<P> }>
|
||||
|
||||
const withHoc = <P, R>(asyncComponent: AsyncComponent<P>, hoc: HOC<P, R>) => {
|
||||
return async () => {
|
||||
const { default: component } = await asyncComponent();
|
||||
return { default: hoc(component) };
|
||||
};
|
||||
};
|
||||
|
||||
export default withHoc;
|
||||
|
|
@ -12,7 +12,6 @@ import {
|
|||
import { useAccount, usePatronUser } from 'soapbox/api/hooks';
|
||||
import Badge from 'soapbox/components/badge';
|
||||
import ActionButton from 'soapbox/features/ui/components/action-button';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { UserPanel } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
import { isLocal } from 'soapbox/utils/accounts';
|
||||
|
|
@ -56,7 +55,7 @@ const handleMouseLeave = (dispatch: AppDispatch): React.MouseEventHandler => {
|
|||
};
|
||||
|
||||
interface IProfileHoverCard {
|
||||
visible: boolean;
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
/** Popup profile preview that appears when hovering avatars and display names. */
|
||||
|
|
@ -112,15 +111,11 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
|
|||
<Card variant='rounded' className='relative isolate overflow-hidden'>
|
||||
<CardBody>
|
||||
<Stack space={2}>
|
||||
<BundleContainer fetchComponent={UserPanel}>
|
||||
{Component => (
|
||||
<Component
|
||||
accountId={account.id}
|
||||
action={<ActionButton account={account} small />}
|
||||
badges={badges}
|
||||
/>
|
||||
)}
|
||||
</BundleContainer>
|
||||
<UserPanel
|
||||
accountId={account.id}
|
||||
action={<ActionButton account={account} small />}
|
||||
badges={badges}
|
||||
/>
|
||||
|
||||
{isLocal(account) ? (
|
||||
<HStack alignItems='center' space={0.5}>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { showStatusHoverCard } from './hover-status-wrapper';
|
|||
import { Card, CardBody } from './ui';
|
||||
|
||||
interface IStatusHoverCard {
|
||||
visible: boolean;
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
/** Popup status preview that appears when hovering reply to */
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
import React from 'react';
|
||||
import React, { Suspense } from 'react';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
|
||||
import { GroupLinkPreview } from 'soapbox/features/groups/components/group-link-preview';
|
||||
import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
|
||||
import Card from 'soapbox/features/status/components/card';
|
||||
import Bundle from 'soapbox/features/ui/components/bundle';
|
||||
import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
import type { List as ImmutableList } from 'immutable';
|
||||
import type VideoType from 'soapbox/features/video';
|
||||
import type { Status, Attachment } from 'soapbox/types/entities';
|
||||
|
||||
interface IStatusMedia {
|
||||
|
|
@ -70,54 +68,48 @@ const StatusMedia: React.FC<IStatusMedia> = ({
|
|||
const video = firstAttachment;
|
||||
|
||||
media = (
|
||||
<Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer}>
|
||||
{(Component: typeof VideoType) => (
|
||||
<Component
|
||||
preview={video.preview_url}
|
||||
blurhash={video.blurhash}
|
||||
src={video.url}
|
||||
alt={video.description}
|
||||
aspectRatio={Number(video.meta.getIn(['original', 'aspect']))}
|
||||
height={285}
|
||||
visible={showMedia}
|
||||
inline
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
<Suspense fallback={renderLoadingVideoPlayer()}>
|
||||
<Video
|
||||
preview={video.preview_url}
|
||||
blurhash={video.blurhash}
|
||||
src={video.url}
|
||||
alt={video.description}
|
||||
aspectRatio={Number(video.meta.getIn(['original', 'aspect']))}
|
||||
height={285}
|
||||
visible={showMedia}
|
||||
inline
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
} else if (size === 1 && firstAttachment.type === 'audio') {
|
||||
const attachment = firstAttachment;
|
||||
|
||||
media = (
|
||||
<Bundle fetchComponent={Audio} loading={renderLoadingAudioPlayer}>
|
||||
{(Component: any) => (
|
||||
<Component
|
||||
src={attachment.url}
|
||||
alt={attachment.description}
|
||||
poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.getIn(['account', 'avatar_static'])}
|
||||
backgroundColor={attachment.meta.getIn(['colors', 'background'])}
|
||||
foregroundColor={attachment.meta.getIn(['colors', 'foreground'])}
|
||||
accentColor={attachment.meta.getIn(['colors', 'accent'])}
|
||||
duration={attachment.meta.getIn(['original', 'duration'], 0)}
|
||||
height={263}
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
<Suspense fallback={renderLoadingAudioPlayer()}>
|
||||
<Audio
|
||||
src={attachment.url}
|
||||
alt={attachment.description}
|
||||
poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.getIn(['account', 'avatar_static']) as string | undefined}
|
||||
backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined}
|
||||
foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
|
||||
accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}
|
||||
duration={attachment.meta.getIn(['original', 'duration'], 0) as number | undefined}
|
||||
height={263}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
} else {
|
||||
media = (
|
||||
<Bundle fetchComponent={MediaGallery} loading={renderLoadingMediaGallery}>
|
||||
{(Component: any) => (
|
||||
<Component
|
||||
media={status.media_attachments}
|
||||
sensitive={status.sensitive}
|
||||
height={285}
|
||||
onOpenMedia={openMedia}
|
||||
visible={showMedia}
|
||||
onToggleVisibility={onToggleVisibility}
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
<Suspense fallback={renderLoadingMediaGallery()}>
|
||||
<MediaGallery
|
||||
media={status.media_attachments}
|
||||
sensitive={status.sensitive}
|
||||
height={285}
|
||||
onOpenMedia={openMedia}
|
||||
visible={showMedia}
|
||||
onToggleVisibility={onToggleVisibility}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
} else if (status.spoiler_text.length === 0 && !status.quote && status.card?.group) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { QueryClientProvider } from '@tanstack/react-query';
|
||||
import clsx from 'clsx';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, Suspense } from 'react';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { Provider } from 'react-redux';
|
||||
|
|
@ -18,7 +18,6 @@ import Helmet from 'soapbox/components/helmet';
|
|||
import LoadingScreen from 'soapbox/components/loading-screen';
|
||||
import { StatProvider } from 'soapbox/contexts/stat-context';
|
||||
import EmbeddedStatus from 'soapbox/features/embedded-status';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
ModalContainer,
|
||||
OnboardingWizard,
|
||||
|
|
@ -87,9 +86,9 @@ const SoapboxMount = () => {
|
|||
|
||||
/** Render the onboarding flow. */
|
||||
const renderOnboarding = () => (
|
||||
<BundleContainer fetchComponent={OnboardingWizard} loading={LoadingScreen}>
|
||||
{(Component) => <Component />}
|
||||
</BundleContainer>
|
||||
<Suspense fallback={<LoadingScreen />}>
|
||||
<OnboardingWizard />
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
/** Render the auth layout or UI. */
|
||||
|
|
@ -127,10 +126,7 @@ const SoapboxMount = () => {
|
|||
<Route>
|
||||
{renderBody()}
|
||||
|
||||
<BundleContainer fetchComponent={ModalContainer}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
|
||||
<ModalContainer />
|
||||
<GdprBanner />
|
||||
|
||||
<div id='toaster'>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { initReport, ReportableEntities } from 'soapbox/actions/reports';
|
|||
import DropdownMenu from 'soapbox/components/dropdown-menu';
|
||||
import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
|
||||
import emojify from 'soapbox/features/emoji';
|
||||
import Bundle from 'soapbox/features/ui/components/bundle';
|
||||
import { MediaGallery } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
|
||||
import { ChatKeys, IChat, useChatActions } from 'soapbox/queries/chats';
|
||||
|
|
@ -22,7 +21,6 @@ import ChatMessageReaction from './chat-message-reaction';
|
|||
import ChatMessageReactionWrapper from './chat-message-reaction-wrapper/chat-message-reaction-wrapper';
|
||||
|
||||
import type { Menu as IMenu } from 'soapbox/components/dropdown-menu';
|
||||
import type { IMediaGallery } from 'soapbox/components/media-gallery';
|
||||
import type { ChatMessage as ChatMessageEntity } from 'soapbox/types/entities';
|
||||
|
||||
const messages = defineMessages({
|
||||
|
|
@ -111,19 +109,15 @@ const ChatMessage = (props: IChatMessage) => {
|
|||
if (!chatMessage.media_attachments.size) return null;
|
||||
|
||||
return (
|
||||
<Bundle fetchComponent={MediaGallery}>
|
||||
{(Component: React.FC<IMediaGallery>) => (
|
||||
<Component
|
||||
className={clsx({
|
||||
'rounded-br-sm': isMyMessage && content,
|
||||
'rounded-bl-sm': !isMyMessage && content,
|
||||
})}
|
||||
media={chatMessage.media_attachments}
|
||||
onOpenMedia={onOpenMedia}
|
||||
visible
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
<MediaGallery
|
||||
className={clsx({
|
||||
'rounded-br-sm': isMyMessage && content,
|
||||
'rounded-bl-sm': !isMyMessage && content,
|
||||
})}
|
||||
media={chatMessage.media_attachments}
|
||||
onOpenMedia={onOpenMedia}
|
||||
visible
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -17,14 +17,12 @@ import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest
|
|||
import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea';
|
||||
import { Button, HStack, Stack } from 'soapbox/components/ui';
|
||||
import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
|
||||
import Bundle from 'soapbox/features/ui/components/bundle';
|
||||
import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
|
||||
import { ComposeEditor, ScheduleForm } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
|
||||
import { isMobile } from 'soapbox/is-mobile';
|
||||
|
||||
import QuotedStatusContainer from '../containers/quoted-status-container';
|
||||
import ReplyIndicatorContainer from '../containers/reply-indicator-container';
|
||||
import ScheduleFormContainer from '../containers/schedule-form-container';
|
||||
import UploadButtonContainer from '../containers/upload-button-container';
|
||||
import WarningContainer from '../containers/warning-container';
|
||||
import { $createEmojiNode } from '../editor/nodes/emoji-node';
|
||||
|
|
@ -260,7 +258,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
|||
ref={spoilerTextRef}
|
||||
/>
|
||||
|
||||
<ScheduleFormContainer composeId={id} />
|
||||
<ScheduleForm composeId={id} />
|
||||
</Stack>
|
||||
);
|
||||
|
||||
|
|
@ -313,23 +311,19 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
|||
{!shouldCondense && !event && !group && <ReplyMentions composeId={id} />}
|
||||
|
||||
<div>
|
||||
<Bundle fetchComponent={ComposeEditor}>
|
||||
{(Component: any) => (
|
||||
<Component
|
||||
ref={editorRef}
|
||||
className='mt-2'
|
||||
composeId={id}
|
||||
condensed={condensed}
|
||||
eventDiscussion={!!event}
|
||||
autoFocus={shouldAutoFocus}
|
||||
hasPoll={hasPoll}
|
||||
handleSubmit={handleSubmit}
|
||||
onChange={setText}
|
||||
onFocus={handleComposeFocus}
|
||||
onPaste={onPaste}
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
<ComposeEditor
|
||||
ref={editorRef}
|
||||
className='mt-2'
|
||||
composeId={id}
|
||||
condensed={condensed}
|
||||
eventDiscussion={!!event}
|
||||
autoFocus={shouldAutoFocus}
|
||||
hasPoll={hasPoll}
|
||||
handleSubmit={handleSubmit}
|
||||
onChange={setText}
|
||||
onFocus={handleComposeFocus}
|
||||
onPaste={onPaste}
|
||||
/>
|
||||
{composeModifiers}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|||
import { setSchedule, removeSchedule } from 'soapbox/actions/compose';
|
||||
import IconButton from 'soapbox/components/icon-button';
|
||||
import { HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { DatePicker } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch, useCompose } from 'soapbox/hooks';
|
||||
|
||||
|
|
@ -55,22 +54,20 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
|
|||
<FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
|
||||
</Text>
|
||||
<HStack space={2} alignItems='center'>
|
||||
<BundleContainer fetchComponent={DatePicker}>
|
||||
{Component => (<Component
|
||||
selected={scheduledAt}
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
onChange={onSchedule}
|
||||
placeholderText={intl.formatMessage(messages.schedule)}
|
||||
filterDate={isCurrentOrFutureDate}
|
||||
filterTime={isFiveMinutesFromNow}
|
||||
className={clsx({
|
||||
'has-error': !isFiveMinutesFromNow(scheduledAt),
|
||||
})}
|
||||
/>)}
|
||||
</BundleContainer>
|
||||
<DatePicker
|
||||
selected={scheduledAt}
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
onChange={onSchedule}
|
||||
placeholderText={intl.formatMessage(messages.schedule)}
|
||||
filterDate={isCurrentOrFutureDate}
|
||||
filterTime={isFiveMinutesFromNow}
|
||||
className={clsx({
|
||||
'has-error': !isFiveMinutesFromNow(scheduledAt),
|
||||
})}
|
||||
/>
|
||||
<IconButton
|
||||
iconClassName='h-4 w-4'
|
||||
className='bg-transparent text-gray-400 hover:text-gray-600'
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { ScheduleForm } from 'soapbox/features/ui/util/async-components';
|
||||
|
||||
import type { IScheduleForm } from '../components/schedule-form';
|
||||
|
||||
const ScheduleFormContainer: React.FC<IScheduleForm> = (props) => (
|
||||
<BundleContainer fetchComponent={ScheduleForm}>
|
||||
{Component => <Component {...props} />}
|
||||
</BundleContainer>
|
||||
);
|
||||
|
||||
export default ScheduleFormContainer;
|
||||
|
|
@ -9,12 +9,10 @@ import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
|
|||
import { RootState } from 'soapbox/store';
|
||||
|
||||
import { buildCustomEmojis } from '../../emoji';
|
||||
import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
|
||||
import { EmojiPicker } from '../../ui/util/async-components';
|
||||
|
||||
import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
|
||||
|
||||
let EmojiPicker: any; // load asynchronously
|
||||
|
||||
export const messages = defineMessages({
|
||||
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
|
||||
emoji_pick: { id: 'emoji_button.pick', defaultMessage: 'Pick an emoji…' },
|
||||
|
|
@ -136,8 +134,6 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
|
|||
const customEmojis = useAppSelector((state) => getCustomEmojis(state));
|
||||
const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handlePick = (emoji: any) => {
|
||||
setVisible(false);
|
||||
|
||||
|
|
@ -210,18 +206,6 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
|
|||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
if (!EmojiPicker) {
|
||||
setLoading(true);
|
||||
|
||||
EmojiPickerAsync().then(EmojiMart => {
|
||||
EmojiPicker = EmojiMart.Picker;
|
||||
|
||||
setLoading(false);
|
||||
}).catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
useEffect(() => () => {
|
||||
|
|
@ -231,23 +215,21 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
|
|||
return (
|
||||
visible ? (
|
||||
<RenderAfter update={update}>
|
||||
{!loading && (
|
||||
<EmojiPicker
|
||||
custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
|
||||
title={title}
|
||||
onEmojiSelect={handlePick}
|
||||
recent={frequentlyUsedEmojis}
|
||||
perLine={8}
|
||||
skin={handleSkinTone}
|
||||
emojiSize={22}
|
||||
emojiButtonSize={34}
|
||||
set='twitter'
|
||||
theme={theme}
|
||||
i18n={getI18n()}
|
||||
skinTonePosition='search'
|
||||
previewPosition='none'
|
||||
/>
|
||||
)}
|
||||
<EmojiPicker
|
||||
custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
|
||||
title={title}
|
||||
onEmojiSelect={handlePick}
|
||||
recent={frequentlyUsedEmojis}
|
||||
perLine={8}
|
||||
skin={handleSkinTone}
|
||||
emojiSize={22}
|
||||
emojiButtonSize={34}
|
||||
set='twitter'
|
||||
theme={theme}
|
||||
i18n={getI18n()}
|
||||
skinTonePosition='search'
|
||||
previewPosition='none'
|
||||
/>
|
||||
</RenderAfter>
|
||||
) : null
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const getImageURL = (set: string, name: string) => {
|
|||
return joinPublicPath(`/packs/emoji/${name}.svg`);
|
||||
};
|
||||
|
||||
const Picker = (props: any) => {
|
||||
const Picker: React.FC<any> = (props) => {
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -25,6 +25,4 @@ const Picker = (props: any) => {
|
|||
return <div ref={ref} />;
|
||||
};
|
||||
|
||||
export {
|
||||
Picker,
|
||||
};
|
||||
export default Picker;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import StatusContent from 'soapbox/components/status-content';
|
|||
import { Toggle } from 'soapbox/components/ui';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import Bundle from '../../ui/components/bundle';
|
||||
import { MediaGallery, Video, Audio } from '../../ui/util/async-components';
|
||||
|
||||
interface IStatusCheckBox {
|
||||
|
|
@ -35,22 +34,16 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
|
|||
|
||||
if (video) {
|
||||
media = (
|
||||
<Bundle fetchComponent={Video}>
|
||||
{(Component: any) => (
|
||||
<Component
|
||||
preview={video.preview_url}
|
||||
blurhash={video.blurhash}
|
||||
src={video.url}
|
||||
alt={video.description}
|
||||
aspectRatio={video.meta.getIn(['original', 'aspect'])}
|
||||
width={239}
|
||||
height={110}
|
||||
inline
|
||||
sensitive={status.sensitive}
|
||||
onOpenVideo={noop}
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
<Video
|
||||
preview={video.preview_url}
|
||||
blurhash={video.blurhash}
|
||||
src={video.url}
|
||||
alt={video.description}
|
||||
aspectRatio={video.meta.getIn(['original', 'aspect']) as number | undefined}
|
||||
width={239}
|
||||
height={110}
|
||||
inline
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else if (status.media_attachments.get(0)?.type === 'audio') {
|
||||
|
|
@ -58,24 +51,20 @@ const StatusCheckBox: React.FC<IStatusCheckBox> = ({ id, disabled }) => {
|
|||
|
||||
if (audio) {
|
||||
media = (
|
||||
<Bundle fetchComponent={Audio}>
|
||||
{(Component: any) => (
|
||||
<Component
|
||||
src={audio.url}
|
||||
alt={audio.description}
|
||||
inline
|
||||
sensitive={status.sensitive}
|
||||
onOpenAudio={noop}
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
<Audio
|
||||
src={audio.url}
|
||||
alt={audio.description}
|
||||
/>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
media = (
|
||||
<Bundle fetchComponent={MediaGallery}>
|
||||
{(Component: any) => <Component media={status.media_attachments} sensitive={status.sensitive} height={110} onOpenMedia={noop} />}
|
||||
</Bundle>
|
||||
<MediaGallery
|
||||
media={status.media_attachments}
|
||||
sensitive={status.sensitive}
|
||||
height={110}
|
||||
onOpenMedia={noop}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Column, Stack, Text, IconButton } from 'soapbox/components/ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
|
||||
body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this page.' },
|
||||
retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' },
|
||||
});
|
||||
|
||||
interface IBundleColumnError {
|
||||
onRetry: () => void;
|
||||
}
|
||||
|
||||
const BundleColumnError: React.FC<IBundleColumnError> = ({ onRetry }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleRetry = () => {
|
||||
onRetry();
|
||||
};
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.title)}>
|
||||
<Stack space={4} alignItems='center' justifyContent='center' className='min-h-[160px] rounded-lg p-10'>
|
||||
<IconButton
|
||||
iconClassName='h-10 w-10'
|
||||
title={intl.formatMessage(messages.retry)}
|
||||
src={require('@tabler/icons/refresh.svg')}
|
||||
onClick={handleRetry}
|
||||
/>
|
||||
|
||||
<Text align='center' theme='muted'>{intl.formatMessage(messages.body)}</Text>
|
||||
</Stack>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default BundleColumnError;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Modal } from 'soapbox/components/ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this modal.' },
|
||||
retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
|
||||
close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
|
||||
});
|
||||
|
||||
interface IBundleModalError {
|
||||
onRetry: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const BundleModalError: React.FC<IBundleModalError> = ({ onRetry, onClose }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleRetry = () => {
|
||||
onRetry();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={intl.formatMessage(messages.error)}
|
||||
confirmationAction={onClose}
|
||||
confirmationText={intl.formatMessage(messages.close)}
|
||||
secondaryAction={handleRetry}
|
||||
secondaryText={intl.formatMessage(messages.retry)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BundleModalError;
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
const emptyComponent = () => null;
|
||||
const noop = () => { };
|
||||
|
||||
export interface BundleProps {
|
||||
fetchComponent: () => Promise<any>;
|
||||
loading: React.ComponentType;
|
||||
error: React.ComponentType<{ onRetry: (props?: BundleProps) => void }>;
|
||||
children: (mod: any) => React.ReactNode;
|
||||
renderDelay?: number;
|
||||
onFetch: () => void;
|
||||
onFetchSuccess: () => void;
|
||||
onFetchFail: (error: any) => void;
|
||||
}
|
||||
|
||||
interface BundleState {
|
||||
mod: any;
|
||||
forceRender: boolean;
|
||||
}
|
||||
|
||||
/** Fetches and renders an async component. */
|
||||
class Bundle extends React.PureComponent<BundleProps, BundleState> {
|
||||
|
||||
timeout: NodeJS.Timeout | undefined;
|
||||
timestamp: Date | undefined;
|
||||
|
||||
static defaultProps = {
|
||||
loading: emptyComponent,
|
||||
error: emptyComponent,
|
||||
renderDelay: 0,
|
||||
onFetch: noop,
|
||||
onFetchSuccess: noop,
|
||||
onFetchFail: noop,
|
||||
};
|
||||
|
||||
static cache = new Map;
|
||||
|
||||
state = {
|
||||
mod: undefined,
|
||||
forceRender: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.load(this.props);
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps: BundleProps) {
|
||||
if (nextProps.fetchComponent !== this.props.fetchComponent) {
|
||||
this.load(nextProps);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
}
|
||||
}
|
||||
|
||||
load = (props?: BundleProps) => {
|
||||
const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
|
||||
const cachedMod = Bundle.cache.get(fetchComponent);
|
||||
|
||||
if (fetchComponent === undefined) {
|
||||
this.setState({ mod: null });
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
onFetch();
|
||||
|
||||
if (cachedMod) {
|
||||
this.setState({ mod: cachedMod.default });
|
||||
onFetchSuccess();
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
this.setState({ mod: undefined });
|
||||
|
||||
if (renderDelay !== 0) {
|
||||
this.timestamp = new Date();
|
||||
this.timeout = setTimeout(() => this.setState({ forceRender: true }), renderDelay);
|
||||
}
|
||||
|
||||
return fetchComponent()
|
||||
.then((mod) => {
|
||||
Bundle.cache.set(fetchComponent, mod);
|
||||
this.setState({ mod: mod.default });
|
||||
onFetchSuccess();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({ mod: null });
|
||||
onFetchFail(error);
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading: Loading, error: Error, children, renderDelay } = this.props;
|
||||
const { mod, forceRender } = this.state;
|
||||
const elapsed = this.timestamp ? ((new Date()).getTime() - this.timestamp.getTime()) : renderDelay!;
|
||||
|
||||
if (mod === undefined) {
|
||||
return (elapsed >= renderDelay! || forceRender) ? <Loading /> : null;
|
||||
}
|
||||
|
||||
if (mod === null) {
|
||||
return <Error onRetry={this.load} />;
|
||||
}
|
||||
|
||||
return children(mod);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Bundle;
|
||||
|
|
@ -2,8 +2,6 @@ import React from 'react';
|
|||
|
||||
import { Spinner } from 'soapbox/components/ui';
|
||||
|
||||
// Keep the markup in sync with <BundleModalError />
|
||||
// (make sure they have the same dimensions)
|
||||
const ModalLoading = () => (
|
||||
<div className='modal-root__modal error-modal'>
|
||||
<div className='error-modal__body'>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { Suspense } from 'react';
|
||||
|
||||
import Base from 'soapbox/components/modal-root';
|
||||
import {
|
||||
|
|
@ -38,14 +38,10 @@ import {
|
|||
VideoModal,
|
||||
} from 'soapbox/features/ui/util/async-components';
|
||||
|
||||
import BundleContainer from '../containers/bundle-container';
|
||||
|
||||
import { BundleProps } from './bundle';
|
||||
import BundleModalError from './bundle-modal-error';
|
||||
import ModalLoading from './modal-loading';
|
||||
|
||||
/* eslint sort-keys: "error" */
|
||||
const MODAL_COMPONENTS = {
|
||||
const MODAL_COMPONENTS: Record<string, React.LazyExoticComponent<any>> = {
|
||||
'ACCOUNT_MODERATION': AccountModerationModal,
|
||||
'ACTIONS': ActionsModal,
|
||||
'BIRTHDAYS': BirthdaysModal,
|
||||
|
|
@ -104,14 +100,10 @@ export default class ModalRoot extends React.PureComponent<IModalRoot> {
|
|||
}
|
||||
}
|
||||
|
||||
renderLoading = (modalId: string) => () => {
|
||||
renderLoading = (modalId: string) => {
|
||||
return !['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].includes(modalId) ? <ModalLoading /> : null;
|
||||
};
|
||||
|
||||
renderError: React.ComponentType<{ onRetry: (props?: BundleProps) => void }> = (props) => {
|
||||
return <BundleModalError {...props} onClose={this.onClickClose} />;
|
||||
};
|
||||
|
||||
onClickClose = (_?: ModalType) => {
|
||||
const { onClose, type } = this.props;
|
||||
onClose(type);
|
||||
|
|
@ -119,14 +111,14 @@ export default class ModalRoot extends React.PureComponent<IModalRoot> {
|
|||
|
||||
render() {
|
||||
const { type, props } = this.props;
|
||||
const visible = !!type;
|
||||
const Component = type ? MODAL_COMPONENTS[type] : null;
|
||||
|
||||
return (
|
||||
<Base onClose={this.onClickClose} type={type}>
|
||||
{visible && (
|
||||
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
|
||||
{(SpecificComponent) => <SpecificComponent {...props} onClose={this.onClickClose} />}
|
||||
</BundleContainer>
|
||||
{(Component && !!type) && (
|
||||
<Suspense fallback={this.renderLoading(type)}>
|
||||
<Component {...props} onClose={this.onClickClose} />
|
||||
</Suspense>
|
||||
)}
|
||||
</Base>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
import {
|
||||
|
|
@ -24,7 +24,6 @@ import { checkEventComposeContent } from 'soapbox/components/modal-root';
|
|||
import { Button, Form, FormGroup, HStack, Icon, IconButton, Input, Modal, Spinner, Stack, Tabs, Text, Toggle } from 'soapbox/components/ui';
|
||||
import AccountContainer from 'soapbox/containers/account-container';
|
||||
import { isCurrentOrFutureDate } from 'soapbox/features/compose/components/schedule-form';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { ComposeEditor, DatePicker } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
|
|
@ -94,9 +93,8 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
|
|||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const editorStateRef = useRef<string>(null);
|
||||
|
||||
const [tab, setTab] = useState<'edit' | 'pending'>('edit');
|
||||
const [text, setText] = useState('');
|
||||
|
||||
const banner = useAppSelector((state) => state.compose_event.banner);
|
||||
const isUploading = useAppSelector((state) => state.compose_event.is_uploading);
|
||||
|
|
@ -167,7 +165,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
|
|||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
dispatch(changeEditEventDescription(editorStateRef.current!));
|
||||
dispatch(changeEditEventDescription(text));
|
||||
dispatch(submitEvent());
|
||||
};
|
||||
|
||||
|
|
@ -235,18 +233,14 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
|
|||
<FormGroup
|
||||
labelText={<FormattedMessage id='compose_event.fields.description_label' defaultMessage='Event description' />}
|
||||
>
|
||||
<BundleContainer fetchComponent={ComposeEditor}>
|
||||
{(Component: any) => (
|
||||
<Component
|
||||
ref={editorStateRef}
|
||||
className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
|
||||
placeholderClassName='pt-2'
|
||||
composeId='compose-event-modal'
|
||||
placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
|
||||
handleSubmit={handleSubmit}
|
||||
/>
|
||||
)}
|
||||
</BundleContainer>
|
||||
<ComposeEditor
|
||||
className='block w-full rounded-md border border-gray-400 bg-white px-3 py-2 text-base text-gray-900 ring-1 placeholder:text-gray-600 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500 sm:text-sm'
|
||||
placeholderClassName='pt-2'
|
||||
composeId='compose-event-modal'
|
||||
placeholder={intl.formatMessage(messages.eventDescriptionPlaceholder)}
|
||||
handleSubmit={handleSubmit}
|
||||
onChange={setText}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
labelText={<FormattedMessage id='compose_event.fields.location_label' defaultMessage='Event location' />}
|
||||
|
|
@ -260,18 +254,16 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
|
|||
<FormGroup
|
||||
labelText={<FormattedMessage id='compose_event.fields.start_time_label' defaultMessage='Event start date' />}
|
||||
>
|
||||
<BundleContainer fetchComponent={DatePicker}>
|
||||
{Component => (<Component
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
placeholderText={intl.formatMessage(messages.eventStartTimePlaceholder)}
|
||||
filterDate={isCurrentOrFutureDate}
|
||||
selected={startTime}
|
||||
onChange={onChangeStartTime}
|
||||
/>)}
|
||||
</BundleContainer>
|
||||
<DatePicker
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
placeholderText={intl.formatMessage(messages.eventStartTimePlaceholder)}
|
||||
filterDate={isCurrentOrFutureDate}
|
||||
selected={startTime}
|
||||
onChange={onChangeStartTime}
|
||||
/>
|
||||
</FormGroup>
|
||||
<HStack alignItems='center' space={2}>
|
||||
<Toggle
|
||||
|
|
@ -286,18 +278,16 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
|
|||
<FormGroup
|
||||
labelText={<FormattedMessage id='compose_event.fields.end_time_label' defaultMessage='Event end date' />}
|
||||
>
|
||||
<BundleContainer fetchComponent={DatePicker}>
|
||||
{Component => (<Component
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
placeholderText={intl.formatMessage(messages.eventEndTimePlaceholder)}
|
||||
filterDate={isCurrentOrFutureDate}
|
||||
selected={endTime}
|
||||
onChange={onChangeEndTime}
|
||||
/>)}
|
||||
</BundleContainer>
|
||||
<DatePicker
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
placeholderText={intl.formatMessage(messages.eventEndTimePlaceholder)}
|
||||
filterDate={isCurrentOrFutureDate}
|
||||
selected={endTime}
|
||||
onChange={onChangeEndTime}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
{!id && (
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
|||
import { changeAnnouncementAllDay, changeAnnouncementContent, changeAnnouncementEndTime, changeAnnouncementStartTime, handleCreateAnnouncement } from 'soapbox/actions/admin';
|
||||
import { closeModal } from 'soapbox/actions/modals';
|
||||
import { Form, FormGroup, HStack, Modal, Stack, Text, Textarea, Toggle } from 'soapbox/components/ui';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { DatePicker } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
|
|
@ -67,34 +66,30 @@ const EditAnnouncementModal: React.FC<IEditAnnouncementModal> = ({ onClose }) =>
|
|||
<FormGroup
|
||||
labelText={<FormattedMessage id='admin.edit_announcement.fields.start_time_label' defaultMessage='Start date' />}
|
||||
>
|
||||
<BundleContainer fetchComponent={DatePicker}>
|
||||
{Component => (<Component
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
placeholderText={intl.formatMessage(messages.announcementStartTimePlaceholder)}
|
||||
selected={startTime}
|
||||
onChange={onChangeStartTime}
|
||||
isClearable
|
||||
/>)}
|
||||
</BundleContainer>
|
||||
<DatePicker
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
placeholderText={intl.formatMessage(messages.announcementStartTimePlaceholder)}
|
||||
selected={startTime}
|
||||
onChange={onChangeStartTime}
|
||||
isClearable
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
labelText={<FormattedMessage id='admin.edit_announcement.fields.end_time_label' defaultMessage='End date' />}
|
||||
>
|
||||
<BundleContainer fetchComponent={DatePicker}>
|
||||
{Component => (<Component
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
placeholderText={intl.formatMessage(messages.announcementEndTimePlaceholder)}
|
||||
selected={endTime}
|
||||
onChange={onChangeEndTime}
|
||||
isClearable
|
||||
/>)}
|
||||
</BundleContainer>
|
||||
<DatePicker
|
||||
showTimeSelect
|
||||
dateFormat='MMMM d, yyyy h:mm aa'
|
||||
timeIntervals={15}
|
||||
wrapperClassName='react-datepicker-wrapper'
|
||||
placeholderText={intl.formatMessage(messages.announcementEndTimePlaceholder)}
|
||||
selected={endTime}
|
||||
onChange={onChangeEndTime}
|
||||
isClearable
|
||||
/>
|
||||
</FormGroup>
|
||||
<HStack alignItems='center' space={2}>
|
||||
<Toggle
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import { submitAccountNote } from 'soapbox/actions/account-notes';
|
|||
import { HStack, Text, Widget } from 'soapbox/components/ui';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
import type { Account as AccountEntity } from 'soapbox/schemas';
|
||||
import type { AppDispatch } from 'soapbox/store';
|
||||
import type { Account as AccountEntity } from 'soapbox/types/entities';
|
||||
|
||||
const onSave = debounce(
|
||||
(dispatch: AppDispatch, id: string, value: string, callback: () => void) =>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,10 @@ import { FormattedMessage } from 'react-intl';
|
|||
import { fetchPinnedAccounts } from 'soapbox/actions/accounts';
|
||||
import { Widget } from 'soapbox/components/ui';
|
||||
import AccountContainer from 'soapbox/containers/account-container';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import type { Account } from 'soapbox/types/entities';
|
||||
import type { Account } from 'soapbox/schemas';
|
||||
|
||||
interface IPinnedAccountsPanel {
|
||||
account: Account;
|
||||
|
|
@ -26,9 +25,7 @@ const PinnedAccountsPanel: React.FC<IPinnedAccountsPanel> = ({ account, limit })
|
|||
|
||||
if (pinned.isEmpty()) {
|
||||
return (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={limit} />}
|
||||
</BundleContainer>
|
||||
<WhoToFollowPanel limit={limit} />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import VerificationBadge from 'soapbox/components/verification-badge';
|
|||
import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
|
||||
import { makeGetAccount } from 'soapbox/selectors';
|
||||
|
||||
import type { Account } from 'soapbox/types/entities';
|
||||
import type { Account } from 'soapbox/schemas';
|
||||
|
||||
const getAccount = makeGetAccount();
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
|
|||
|
||||
import Markup from 'soapbox/components/markup';
|
||||
import { HStack, Icon } from 'soapbox/components/ui';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
|
||||
|
||||
import type { Account } from 'soapbox/schemas';
|
||||
|
|
@ -35,14 +34,10 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
|
|||
|
||||
if (isTicker(field.name)) {
|
||||
return (
|
||||
<BundleContainer fetchComponent={CryptoAddress}>
|
||||
{Component => (
|
||||
<Component
|
||||
ticker={getTicker(field.name).toLowerCase()}
|
||||
address={field.value_plain}
|
||||
/>
|
||||
)}
|
||||
</BundleContainer>
|
||||
<CryptoAddress
|
||||
ticker={getTicker(field.name).toLowerCase()}
|
||||
address={field.value_plain}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Widget, Stack } from 'soapbox/components/ui';
|
|||
|
||||
import ProfileField from './profile-field';
|
||||
|
||||
import type { Account } from 'soapbox/types/entities';
|
||||
import type { Account } from 'soapbox/schemas';
|
||||
|
||||
interface IProfileFieldsPanel {
|
||||
account: Account;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import ProfileFamiliarFollowers from './profile-familiar-followers';
|
|||
import ProfileField from './profile-field';
|
||||
import ProfileStats from './profile-stats';
|
||||
|
||||
import type { Account } from 'soapbox/types/entities';
|
||||
import type { Account } from 'soapbox/schemas';
|
||||
|
||||
/** Basically ensure the URL isn't `javascript:alert('hi')` or something like that */
|
||||
const isSafeUrl = (text: string): boolean => {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@ import { getAccountGallery } from 'soapbox/selectors';
|
|||
|
||||
import MediaItem from '../../account-gallery/components/media-item';
|
||||
|
||||
import type { Account, Attachment } from 'soapbox/types/entities';
|
||||
import type { Account } from 'soapbox/schemas';
|
||||
import type { Attachment } from 'soapbox/types/entities';
|
||||
|
||||
interface IProfileMediaPanel {
|
||||
account?: Account;
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
import { connect } from 'react-redux';
|
||||
|
||||
import { fetchBundleRequest, fetchBundleSuccess, fetchBundleFail } from 'soapbox/actions/bundles';
|
||||
|
||||
import Bundle from '../components/bundle';
|
||||
|
||||
import type { AppDispatch } from 'soapbox/store';
|
||||
|
||||
const mapDispatchToProps = (dispatch: AppDispatch) => ({
|
||||
onFetch() {
|
||||
dispatch(fetchBundleRequest());
|
||||
},
|
||||
onFetchSuccess() {
|
||||
dispatch(fetchBundleSuccess());
|
||||
},
|
||||
onFetchFail(error: any) {
|
||||
dispatch(fetchBundleFail(error));
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps)(Bundle);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import clsx from 'clsx';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import React, { lazy, useEffect, useRef } from 'react';
|
||||
import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom';
|
||||
|
||||
import { fetchFollowRequests } from 'soapbox/actions/accounts';
|
||||
|
|
@ -15,8 +15,6 @@ import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions';
|
|||
import { expandHomeTimeline } from 'soapbox/actions/timelines';
|
||||
import { useUserStream } from 'soapbox/api/hooks';
|
||||
import { useSignerStream } from 'soapbox/api/hooks/nostr/useSignerStream';
|
||||
import GroupLookupHoc from 'soapbox/components/hoc/group-lookup-hoc';
|
||||
import withHoc from 'soapbox/components/hoc/with-hoc';
|
||||
import SidebarNavigation from 'soapbox/components/sidebar-navigation';
|
||||
import ThumbNavigation from 'soapbox/components/thumb-navigation';
|
||||
import { Layout } from 'soapbox/components/ui';
|
||||
|
|
@ -43,7 +41,6 @@ import { isStandalone } from 'soapbox/utils/state';
|
|||
import BackgroundShapes from './components/background-shapes';
|
||||
import FloatingActionButton from './components/floating-action-button';
|
||||
import Navbar from './components/navbar';
|
||||
import BundleContainer from './containers/bundle-container';
|
||||
import {
|
||||
Status,
|
||||
CommunityTimeline,
|
||||
|
|
@ -147,16 +144,6 @@ import { WrappedRoute } from './util/react-router-helpers';
|
|||
// Without this it ends up in ~8 very commonly used bundles.
|
||||
import 'soapbox/components/status';
|
||||
|
||||
const GroupTagsSlug = withHoc(GroupTags as any, GroupLookupHoc);
|
||||
const GroupTagTimelineSlug = withHoc(GroupTagTimeline as any, GroupLookupHoc);
|
||||
const GroupTimelineSlug = withHoc(GroupTimeline as any, GroupLookupHoc);
|
||||
const GroupMembersSlug = withHoc(GroupMembers as any, GroupLookupHoc);
|
||||
const GroupGallerySlug = withHoc(GroupGallery as any, GroupLookupHoc);
|
||||
const ManageGroupSlug = withHoc(ManageGroup as any, GroupLookupHoc);
|
||||
const EditGroupSlug = withHoc(EditGroup as any, GroupLookupHoc);
|
||||
const GroupBlockedMembersSlug = withHoc(GroupBlockedMembers as any, GroupLookupHoc);
|
||||
const GroupMembershipRequestsSlug = withHoc(GroupMembershipRequests as any, GroupLookupHoc);
|
||||
|
||||
interface ISwitchingColumnsArea {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
|
@ -310,18 +297,6 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
|
|||
{features.groups && <WrappedRoute path='/groups/:groupId/manage/requests' exact page={ManageGroupsPage} component={GroupMembershipRequests} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/groups/:groupId/posts/:statusId' exact page={StatusPage} component={Status} content={children} />}
|
||||
|
||||
{features.groupsTags && <WrappedRoute path='/group/:groupSlug/tags' exact page={GroupPage} component={GroupTagsSlug} content={children} />}
|
||||
{features.groupsTags && <WrappedRoute path='/group/:groupSlug/tag/:tagId' exact page={GroupsPendingPage} component={GroupTagTimelineSlug} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/group/:groupSlug' publicRoute exact page={GroupPage} component={GroupTimelineSlug} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/group/:groupSlug/members' exact page={GroupPage} component={GroupMembersSlug} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/group/:groupSlug/media' publicRoute={!authenticatedProfile} component={GroupGallerySlug} page={GroupPage} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/group/:groupSlug/manage' exact page={ManageGroupsPage} component={ManageGroupSlug} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/group/:groupSlug/manage/edit' exact page={ManageGroupsPage} component={EditGroupSlug} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/group/:groupSlug/manage/blocks' exact page={ManageGroupsPage} component={GroupBlockedMembersSlug} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/group/:groupSlug/manage/requests' exact page={ManageGroupsPage} component={GroupMembershipRequestsSlug} content={children} />}
|
||||
{features.groups && <WrappedRoute path='/group/:groupSlug/posts/:statusId' exact page={StatusPage} component={Status} content={children} />}
|
||||
{features.groups && <Redirect from='/group/:groupSlug/statuses/:statusId' to='/group/:groupSlug/posts/:statusId' />}
|
||||
|
||||
<WrappedRoute path='/statuses/new' page={DefaultPage} component={NewStatus} content={children} exact />
|
||||
<WrappedRoute path='/statuses/:statusId' exact page={StatusPage} component={Status} content={children} />
|
||||
{features.scheduledStatuses && <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />}
|
||||
|
|
@ -354,7 +329,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
|
|||
<WrappedRoute path='/developers/timeline' developerOnly page={DefaultPage} component={TestTimeline} content={children} />
|
||||
<WrappedRoute path='/developers/sw' developerOnly page={DefaultPage} component={ServiceWorkerInfo} content={children} />
|
||||
<WrappedRoute path='/developers' page={DefaultPage} component={Developers} content={children} />
|
||||
<WrappedRoute path='/error/network' developerOnly page={EmptyPage} component={() => new Promise((_resolve, reject) => reject())} content={children} />
|
||||
<WrappedRoute path='/error/network' developerOnly page={EmptyPage} component={lazy(() => Promise.reject())} content={children} />
|
||||
<WrappedRoute path='/error' developerOnly page={EmptyPage} component={IntentionalError} content={children} />
|
||||
|
||||
{hasCrypto && <WrappedRoute path='/donate/crypto' publicRoute page={DefaultPage} component={CryptoDonate} content={children} />}
|
||||
|
|
@ -525,29 +500,18 @@ const UI: React.FC<IUI> = ({ children }) => {
|
|||
)}
|
||||
|
||||
{me && (
|
||||
<BundleContainer fetchComponent={SidebarMenu}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<SidebarMenu />
|
||||
)}
|
||||
|
||||
{me && features.chats && (
|
||||
<BundleContainer fetchComponent={ChatWidget}>
|
||||
{Component => (
|
||||
<div className='hidden xl:block'>
|
||||
<Component />
|
||||
</div>
|
||||
)}
|
||||
</BundleContainer>
|
||||
<div className='hidden xl:block'>
|
||||
<ChatWidget />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ThumbNavigation />
|
||||
|
||||
<BundleContainer fetchComponent={ProfileHoverCard}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
|
||||
<BundleContainer fetchComponent={StatusHoverCard}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<ProfileHoverCard />
|
||||
<StatusHoverCard />
|
||||
</div>
|
||||
</div>
|
||||
</GlobalHotkeys>
|
||||
|
|
|
|||
|
|
@ -1,647 +1,164 @@
|
|||
export function AboutPage() {
|
||||
return import('../../about');
|
||||
}
|
||||
|
||||
export function EmojiPicker() {
|
||||
return import('../../emoji/components/emoji-picker');
|
||||
}
|
||||
|
||||
export function Notifications() {
|
||||
return import('../../notifications');
|
||||
}
|
||||
|
||||
export function LandingTimeline() {
|
||||
return import('../../landing-timeline');
|
||||
}
|
||||
|
||||
export function HomeTimeline() {
|
||||
return import('../../home-timeline');
|
||||
}
|
||||
|
||||
export function PublicTimeline() {
|
||||
return import('../../public-timeline');
|
||||
}
|
||||
|
||||
export function RemoteTimeline() {
|
||||
return import('../../remote-timeline');
|
||||
}
|
||||
|
||||
export function CommunityTimeline() {
|
||||
return import('../../community-timeline');
|
||||
}
|
||||
|
||||
export function HashtagTimeline() {
|
||||
return import('../../hashtag-timeline');
|
||||
}
|
||||
|
||||
export function DirectTimeline() {
|
||||
return import('../../direct-timeline');
|
||||
}
|
||||
|
||||
export function Conversations() {
|
||||
return import('../../conversations');
|
||||
}
|
||||
|
||||
export function ListTimeline() {
|
||||
return import('../../list-timeline');
|
||||
}
|
||||
|
||||
export function Lists() {
|
||||
return import('../../lists');
|
||||
}
|
||||
|
||||
export function Bookmarks() {
|
||||
return import('../../bookmarks');
|
||||
}
|
||||
|
||||
export function Status() {
|
||||
return import('../../status');
|
||||
}
|
||||
|
||||
export function PinnedStatuses() {
|
||||
return import('../../pinned-statuses');
|
||||
}
|
||||
|
||||
export function AccountTimeline() {
|
||||
return import('../../account-timeline');
|
||||
}
|
||||
|
||||
export function AccountGallery() {
|
||||
return import('../../account-gallery');
|
||||
}
|
||||
|
||||
export function Followers() {
|
||||
return import('../../followers');
|
||||
}
|
||||
|
||||
export function Following() {
|
||||
return import('../../following');
|
||||
}
|
||||
|
||||
export function FollowRequests() {
|
||||
return import('../../follow-requests');
|
||||
}
|
||||
|
||||
export function GenericNotFound() {
|
||||
return import('../../generic-not-found');
|
||||
}
|
||||
|
||||
export function FavouritedStatuses() {
|
||||
return import('../../favourited-statuses');
|
||||
}
|
||||
|
||||
export function Blocks() {
|
||||
return import('../../blocks');
|
||||
}
|
||||
|
||||
export function DomainBlocks() {
|
||||
return import('../../domain-blocks');
|
||||
}
|
||||
|
||||
export function Mutes() {
|
||||
return import('../../mutes');
|
||||
}
|
||||
|
||||
export function MuteModal() {
|
||||
return import('../components/modals/mute-modal');
|
||||
}
|
||||
|
||||
export function Filters() {
|
||||
return import('../../filters');
|
||||
}
|
||||
|
||||
export function EditFilter() {
|
||||
return import('../../filters/edit-filter');
|
||||
}
|
||||
|
||||
export function ReportModal() {
|
||||
return import('../components/modals/report-modal/report-modal');
|
||||
}
|
||||
|
||||
export function AccountModerationModal() {
|
||||
return import('../components/modals/account-moderation-modal/account-moderation-modal');
|
||||
}
|
||||
|
||||
export function MediaGallery() {
|
||||
return import('../../../components/media-gallery');
|
||||
}
|
||||
|
||||
export function Video() {
|
||||
return import('../../video');
|
||||
}
|
||||
|
||||
export function Audio() {
|
||||
return import('../../audio');
|
||||
}
|
||||
|
||||
export function MediaModal() {
|
||||
return import('../components/modals/media-modal');
|
||||
}
|
||||
|
||||
export function VideoModal() {
|
||||
return import('../components/modals/video-modal');
|
||||
}
|
||||
|
||||
export function BoostModal() {
|
||||
return import('../components/modals/boost-modal');
|
||||
}
|
||||
|
||||
export function ConfirmationModal() {
|
||||
return import('../components/modals/confirmation-modal');
|
||||
}
|
||||
|
||||
export function MissingDescriptionModal() {
|
||||
return import('../components/modals/missing-description-modal');
|
||||
}
|
||||
|
||||
export function ActionsModal() {
|
||||
return import('../components/modals/actions-modal');
|
||||
}
|
||||
|
||||
export function HotkeysModal() {
|
||||
return import('../components/modals/hotkeys-modal');
|
||||
}
|
||||
|
||||
export function ComposeModal() {
|
||||
return import('../components/modals/compose-modal');
|
||||
}
|
||||
|
||||
export function ReplyMentionsModal() {
|
||||
return import('../components/modals/reply-mentions-modal');
|
||||
}
|
||||
|
||||
export function UnauthorizedModal() {
|
||||
return import('../components/modals/unauthorized-modal');
|
||||
}
|
||||
|
||||
export function EditFederationModal() {
|
||||
return import('../components/modals/edit-federation-modal');
|
||||
}
|
||||
|
||||
export function EmbedModal() {
|
||||
return import('../components/modals/embed-modal');
|
||||
}
|
||||
|
||||
export function ComponentModal() {
|
||||
return import('../components/modals/component-modal');
|
||||
}
|
||||
|
||||
export function ReblogsModal() {
|
||||
return import('../components/modals/reblogs-modal');
|
||||
}
|
||||
|
||||
export function FavouritesModal() {
|
||||
return import('../components/modals/favourites-modal');
|
||||
}
|
||||
|
||||
export function DislikesModal() {
|
||||
return import('../components/modals/dislikes-modal');
|
||||
}
|
||||
|
||||
export function ReactionsModal() {
|
||||
return import('../components/modals/reactions-modal');
|
||||
}
|
||||
|
||||
export function MentionsModal() {
|
||||
return import('../components/modals/mentions-modal');
|
||||
}
|
||||
|
||||
export function LandingPageModal() {
|
||||
return import('../components/modals/landing-page-modal');
|
||||
}
|
||||
|
||||
export function BirthdaysModal() {
|
||||
return import('../components/modals/birthdays-modal');
|
||||
}
|
||||
|
||||
export function BirthdayPanel() {
|
||||
return import('../../../components/birthday-panel');
|
||||
}
|
||||
|
||||
export function ListEditor() {
|
||||
return import('../../list-editor');
|
||||
}
|
||||
|
||||
export function ListAdder() {
|
||||
return import('../../list-adder');
|
||||
}
|
||||
|
||||
export function Search() {
|
||||
return import('../../search');
|
||||
}
|
||||
|
||||
export function LoginPage() {
|
||||
return import('../../auth-login/components/login-page');
|
||||
}
|
||||
|
||||
export function ExternalLogin() {
|
||||
return import('../../external-login');
|
||||
}
|
||||
|
||||
export function LogoutPage() {
|
||||
return import('../../auth-login/components/logout');
|
||||
}
|
||||
|
||||
export function RegistrationPage() {
|
||||
return import('../../auth-login/components/registration-page');
|
||||
}
|
||||
|
||||
export function Settings() {
|
||||
return import('../../settings');
|
||||
}
|
||||
|
||||
export function EditProfile() {
|
||||
return import('../../edit-profile');
|
||||
}
|
||||
|
||||
export function EditEmail() {
|
||||
return import('../../edit-email');
|
||||
}
|
||||
|
||||
export function EmailConfirmation() {
|
||||
return import('../../email-confirmation');
|
||||
}
|
||||
|
||||
export function EditPassword() {
|
||||
return import('../../edit-password');
|
||||
}
|
||||
|
||||
export function DeleteAccount() {
|
||||
return import('../../delete-account');
|
||||
}
|
||||
|
||||
export function SoapboxConfig() {
|
||||
return import('../../soapbox-config');
|
||||
}
|
||||
|
||||
export function ExportData() {
|
||||
return import('../../export-data');
|
||||
}
|
||||
|
||||
export function ImportData() {
|
||||
return import('../../import-data');
|
||||
}
|
||||
|
||||
export function Backups() {
|
||||
return import('../../backups');
|
||||
}
|
||||
|
||||
export function PasswordReset() {
|
||||
return import('../../auth-login/components/password-reset');
|
||||
}
|
||||
|
||||
export function PasswordResetConfirm() {
|
||||
return import('../../auth-login/components/password-reset-confirm');
|
||||
}
|
||||
|
||||
export function MfaForm() {
|
||||
return import('../../security/mfa-form');
|
||||
}
|
||||
|
||||
export function ChatIndex() {
|
||||
return import('../../chats');
|
||||
}
|
||||
|
||||
export function ChatWidget() {
|
||||
return import('../../chats/components/chat-widget/chat-widget');
|
||||
}
|
||||
|
||||
export function ServerInfo() {
|
||||
return import('../../server-info');
|
||||
}
|
||||
|
||||
export function Dashboard() {
|
||||
return import('../../admin');
|
||||
}
|
||||
|
||||
export function ModerationLog() {
|
||||
return import('../../admin/moderation-log');
|
||||
}
|
||||
|
||||
export function ThemeEditor() {
|
||||
return import('../../theme-editor');
|
||||
}
|
||||
|
||||
export function UserPanel() {
|
||||
return import('../components/user-panel');
|
||||
}
|
||||
|
||||
export function PromoPanel() {
|
||||
return import('../components/promo-panel');
|
||||
}
|
||||
|
||||
export function SignUpPanel() {
|
||||
return import('../components/panels/sign-up-panel');
|
||||
}
|
||||
|
||||
export function CtaBanner() {
|
||||
return import('../components/cta-banner');
|
||||
}
|
||||
|
||||
export function FundingPanel() {
|
||||
return import('../components/funding-panel');
|
||||
}
|
||||
|
||||
export function TrendsPanel() {
|
||||
return import('../components/trends-panel');
|
||||
}
|
||||
|
||||
export function ProfileInfoPanel() {
|
||||
return import('../components/profile-info-panel');
|
||||
}
|
||||
|
||||
export function ProfileMediaPanel() {
|
||||
return import('../components/profile-media-panel');
|
||||
}
|
||||
|
||||
export function ProfileFieldsPanel() {
|
||||
return import('../components/profile-fields-panel');
|
||||
}
|
||||
|
||||
export function PinnedAccountsPanel() {
|
||||
return import('../components/pinned-accounts-panel');
|
||||
}
|
||||
|
||||
export function InstanceInfoPanel() {
|
||||
return import('../components/instance-info-panel');
|
||||
}
|
||||
|
||||
export function InstanceModerationPanel() {
|
||||
return import('../components/instance-moderation-panel');
|
||||
}
|
||||
|
||||
export function LatestAccountsPanel() {
|
||||
return import('../../admin/components/latest-accounts-panel');
|
||||
}
|
||||
|
||||
export function SidebarMenu() {
|
||||
return import('../../../components/sidebar-menu');
|
||||
}
|
||||
|
||||
export function ModalContainer() {
|
||||
return import('../containers/modal-container');
|
||||
}
|
||||
|
||||
export function ProfileHoverCard() {
|
||||
return import('soapbox/components/profile-hover-card');
|
||||
}
|
||||
|
||||
export function StatusHoverCard() {
|
||||
return import('soapbox/components/status-hover-card');
|
||||
}
|
||||
|
||||
export function CryptoDonate() {
|
||||
return import('../../crypto-donate');
|
||||
}
|
||||
|
||||
export function CryptoDonatePanel() {
|
||||
return import('../../crypto-donate/components/crypto-donate-panel');
|
||||
}
|
||||
|
||||
export function CryptoAddress() {
|
||||
return import('../../crypto-donate/components/crypto-address');
|
||||
}
|
||||
|
||||
export function CryptoDonateModal() {
|
||||
return import('../components/modals/crypto-donate-modal');
|
||||
}
|
||||
|
||||
export function ScheduledStatuses() {
|
||||
return import('../../scheduled-statuses');
|
||||
}
|
||||
|
||||
export function UserIndex() {
|
||||
return import('../../admin/user-index');
|
||||
}
|
||||
|
||||
export function FederationRestrictions() {
|
||||
return import('../../federation-restrictions');
|
||||
}
|
||||
|
||||
export function Aliases() {
|
||||
return import('../../aliases');
|
||||
}
|
||||
|
||||
export function Migration() {
|
||||
return import('../../migration');
|
||||
}
|
||||
|
||||
export function ScheduleForm() {
|
||||
return import('../../compose/components/schedule-form');
|
||||
}
|
||||
|
||||
export function WhoToFollowPanel() {
|
||||
return import('../components/who-to-follow-panel');
|
||||
}
|
||||
|
||||
export function FollowRecommendations() {
|
||||
return import('../../follow-recommendations');
|
||||
}
|
||||
|
||||
export function Directory() {
|
||||
return import('../../directory');
|
||||
}
|
||||
|
||||
export function RegisterInvite() {
|
||||
return import('../../register-invite');
|
||||
}
|
||||
|
||||
export function Share() {
|
||||
return import('../../share');
|
||||
}
|
||||
|
||||
export function NewStatus() {
|
||||
return import('../../new-status');
|
||||
}
|
||||
|
||||
export function IntentionalError() {
|
||||
return import('../../intentional-error');
|
||||
}
|
||||
|
||||
export function Developers() {
|
||||
return import('../../developers');
|
||||
}
|
||||
|
||||
export function CreateApp() {
|
||||
return import('../../developers/apps/create');
|
||||
}
|
||||
|
||||
export function SettingsStore() {
|
||||
return import('../../developers/settings-store');
|
||||
}
|
||||
|
||||
export function TestTimeline() {
|
||||
return import('../../test-timeline');
|
||||
}
|
||||
|
||||
export function ServiceWorkerInfo() {
|
||||
return import('../../developers/service-worker-info');
|
||||
}
|
||||
|
||||
export function DatePicker() {
|
||||
return import('../../birthdays/date-picker');
|
||||
}
|
||||
|
||||
export function OnboardingWizard() {
|
||||
return import('../../onboarding/onboarding-wizard');
|
||||
}
|
||||
|
||||
export function CompareHistoryModal() {
|
||||
return import('../components/modals/compare-history-modal');
|
||||
}
|
||||
|
||||
export function AuthTokenList() {
|
||||
return import('../../auth-token-list');
|
||||
}
|
||||
|
||||
export function FamiliarFollowersModal() {
|
||||
return import('../components/modals/familiar-followers-modal');
|
||||
}
|
||||
|
||||
export function AnnouncementsPanel() {
|
||||
return import('../../../components/announcements/announcements-panel');
|
||||
}
|
||||
|
||||
export function Quotes() {
|
||||
return import('../../quotes');
|
||||
}
|
||||
|
||||
export function ComposeEventModal() {
|
||||
return import('../components/modals/compose-event-modal/compose-event-modal');
|
||||
}
|
||||
|
||||
export function JoinEventModal() {
|
||||
return import('../components/modals/join-event-modal');
|
||||
}
|
||||
|
||||
export function EventHeader() {
|
||||
return import('../../event/components/event-header');
|
||||
}
|
||||
|
||||
export function EventInformation() {
|
||||
return import('../../event/event-information');
|
||||
}
|
||||
|
||||
export function EventDiscussion() {
|
||||
return import('../../event/event-discussion');
|
||||
}
|
||||
|
||||
export function EventMapModal() {
|
||||
return import('../components/modals/event-map-modal');
|
||||
}
|
||||
|
||||
export function EventParticipantsModal() {
|
||||
return import('../components/modals/event-participants-modal');
|
||||
}
|
||||
|
||||
export function Events() {
|
||||
return import('../../events');
|
||||
}
|
||||
|
||||
export function Groups() {
|
||||
return import('../../groups');
|
||||
}
|
||||
|
||||
export function GroupsDiscover() {
|
||||
return import('../../groups/discover');
|
||||
}
|
||||
|
||||
export function GroupsPopular() {
|
||||
return import('../../groups/popular');
|
||||
}
|
||||
|
||||
export function GroupsSuggested() {
|
||||
return import('../../groups/suggested');
|
||||
}
|
||||
|
||||
export function GroupsTag() {
|
||||
return import('../../groups/tag');
|
||||
}
|
||||
|
||||
export function GroupsTags() {
|
||||
return import('../../groups/tags');
|
||||
}
|
||||
|
||||
export function PendingGroupRequests() {
|
||||
return import('../../groups/pending-requests');
|
||||
}
|
||||
|
||||
export function GroupMembers() {
|
||||
return import('../../group/group-members');
|
||||
}
|
||||
|
||||
export function GroupTags() {
|
||||
return import('../../group/group-tags');
|
||||
}
|
||||
|
||||
export function GroupTagTimeline() {
|
||||
return import('../../group/group-tag-timeline');
|
||||
}
|
||||
|
||||
export function GroupTimeline() {
|
||||
return import('../../group/group-timeline');
|
||||
}
|
||||
|
||||
export function ManageGroup() {
|
||||
return import('../../group/manage-group');
|
||||
}
|
||||
|
||||
export function EditGroup() {
|
||||
return import('../../group/edit-group');
|
||||
}
|
||||
|
||||
export function GroupBlockedMembers() {
|
||||
return import('../../group/group-blocked-members');
|
||||
}
|
||||
|
||||
export function GroupMembershipRequests() {
|
||||
return import('../../group/group-membership-requests');
|
||||
}
|
||||
|
||||
export function GroupGallery() {
|
||||
return import('../../group/group-gallery');
|
||||
}
|
||||
|
||||
export function CreateGroupModal() {
|
||||
return import('../components/modals/manage-group-modal/create-group-modal');
|
||||
}
|
||||
|
||||
export function NewGroupPanel() {
|
||||
return import('../components/panels/new-group-panel');
|
||||
}
|
||||
|
||||
export function MyGroupsPanel() {
|
||||
return import('../components/panels/my-groups-panel');
|
||||
}
|
||||
|
||||
export function SuggestedGroupsPanel() {
|
||||
return import('../components/panels/suggested-groups-panel');
|
||||
}
|
||||
|
||||
export function GroupMediaPanel() {
|
||||
return import('../components/group-media-panel');
|
||||
}
|
||||
|
||||
export function NewEventPanel() {
|
||||
return import('../components/panels/new-event-panel');
|
||||
}
|
||||
|
||||
export function Announcements() {
|
||||
return import('../../admin/announcements');
|
||||
}
|
||||
|
||||
export function EditAnnouncementModal() {
|
||||
return import('../components/modals/edit-announcement-modal');
|
||||
}
|
||||
|
||||
export function FollowedTags() {
|
||||
return import('../../followed-tags');
|
||||
}
|
||||
|
||||
export function AccountNotePanel() {
|
||||
return import('../components/panels/account-note-panel');
|
||||
}
|
||||
|
||||
export function ComposeEditor() {
|
||||
return import('../../compose/editor');
|
||||
}
|
||||
import { lazy } from 'react';
|
||||
|
||||
export const AboutPage = lazy(() => import('soapbox/features/about'));
|
||||
export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/emoji-picker'));
|
||||
export const Notifications = lazy(() => import('soapbox/features/notifications'));
|
||||
export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline'));
|
||||
export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline'));
|
||||
export const PublicTimeline = lazy(() => import('soapbox/features/public-timeline'));
|
||||
export const RemoteTimeline = lazy(() => import('soapbox/features/remote-timeline'));
|
||||
export const CommunityTimeline = lazy(() => import('soapbox/features/community-timeline'));
|
||||
export const HashtagTimeline = lazy(() => import('soapbox/features/hashtag-timeline'));
|
||||
export const DirectTimeline = lazy(() => import('soapbox/features/direct-timeline'));
|
||||
export const Conversations = lazy(() => import('soapbox/features/conversations'));
|
||||
export const ListTimeline = lazy(() => import('soapbox/features/list-timeline'));
|
||||
export const Lists = lazy(() => import('soapbox/features/lists'));
|
||||
export const Bookmarks = lazy(() => import('soapbox/features/bookmarks'));
|
||||
export const Status = lazy(() => import('soapbox/features/status'));
|
||||
export const PinnedStatuses = lazy(() => import('soapbox/features/pinned-statuses'));
|
||||
export const AccountTimeline = lazy(() => import('soapbox/features/account-timeline'));
|
||||
export const AccountGallery = lazy(() => import('soapbox/features/account-gallery'));
|
||||
export const Followers = lazy(() => import('soapbox/features/followers'));
|
||||
export const Following = lazy(() => import('soapbox/features/following'));
|
||||
export const FollowRequests = lazy(() => import('soapbox/features/follow-requests'));
|
||||
export const GenericNotFound = lazy(() => import('soapbox/features/generic-not-found'));
|
||||
export const FavouritedStatuses = lazy(() => import('soapbox/features/favourited-statuses'));
|
||||
export const Blocks = lazy(() => import('soapbox/features/blocks'));
|
||||
export const DomainBlocks = lazy(() => import('soapbox/features/domain-blocks'));
|
||||
export const Mutes = lazy(() => import('soapbox/features/mutes'));
|
||||
export const MuteModal = lazy(() => import('soapbox/features/ui/components/modals/mute-modal'));
|
||||
export const Filters = lazy(() => import('soapbox/features/filters'));
|
||||
export const EditFilter = lazy(() => import('soapbox/features/filters/edit-filter'));
|
||||
export const ReportModal = lazy(() => import('soapbox/features/ui/components/modals/report-modal/report-modal'));
|
||||
export const AccountModerationModal = lazy(() => import('soapbox/features/ui/components/modals/account-moderation-modal/account-moderation-modal'));
|
||||
export const MediaGallery = lazy(() => import('soapbox/components/media-gallery'));
|
||||
export const Video = lazy(() => import('soapbox/features/video'));
|
||||
export const Audio = lazy(() => import('soapbox/features/audio'));
|
||||
export const MediaModal = lazy(() => import('soapbox/features/ui/components/modals/media-modal'));
|
||||
export const VideoModal = lazy(() => import('soapbox/features/ui/components/modals/video-modal'));
|
||||
export const BoostModal = lazy(() => import('soapbox/features/ui/components/modals/boost-modal'));
|
||||
export const ConfirmationModal = lazy(() => import('soapbox/features/ui/components/modals/confirmation-modal'));
|
||||
export const MissingDescriptionModal = lazy(() => import('soapbox/features/ui/components/modals/missing-description-modal'));
|
||||
export const ActionsModal = lazy(() => import('soapbox/features/ui/components/modals/actions-modal'));
|
||||
export const HotkeysModal = lazy(() => import('soapbox/features/ui/components/modals/hotkeys-modal'));
|
||||
export const ComposeModal = lazy(() => import('soapbox/features/ui/components/modals/compose-modal'));
|
||||
export const ReplyMentionsModal = lazy(() => import('soapbox/features/ui/components/modals/reply-mentions-modal'));
|
||||
export const UnauthorizedModal = lazy(() => import('soapbox/features/ui/components/modals/unauthorized-modal'));
|
||||
export const EditFederationModal = lazy(() => import('soapbox/features/ui/components/modals/edit-federation-modal'));
|
||||
export const EmbedModal = lazy(() => import('soapbox/features/ui/components/modals/embed-modal'));
|
||||
export const ComponentModal = lazy(() => import('soapbox/features/ui/components/modals/component-modal'));
|
||||
export const ReblogsModal = lazy(() => import('soapbox/features/ui/components/modals/reblogs-modal'));
|
||||
export const FavouritesModal = lazy(() => import('soapbox/features/ui/components/modals/favourites-modal'));
|
||||
export const DislikesModal = lazy(() => import('soapbox/features/ui/components/modals/dislikes-modal'));
|
||||
export const ReactionsModal = lazy(() => import('soapbox/features/ui/components/modals/reactions-modal'));
|
||||
export const MentionsModal = lazy(() => import('soapbox/features/ui/components/modals/mentions-modal'));
|
||||
export const LandingPageModal = lazy(() => import('soapbox/features/ui/components/modals/landing-page-modal'));
|
||||
export const BirthdaysModal = lazy(() => import('soapbox/features/ui/components/modals/birthdays-modal'));
|
||||
export const BirthdayPanel = lazy(() => import('soapbox/components/birthday-panel'));
|
||||
export const ListEditor = lazy(() => import('soapbox/features/list-editor'));
|
||||
export const ListAdder = lazy(() => import('soapbox/features/list-adder'));
|
||||
export const Search = lazy(() => import('soapbox/features/search'));
|
||||
export const LoginPage = lazy(() => import('soapbox/features/auth-login/components/login-page'));
|
||||
export const ExternalLogin = lazy(() => import('soapbox/features/external-login'));
|
||||
export const LogoutPage = lazy(() => import('soapbox/features/auth-login/components/logout'));
|
||||
export const RegistrationPage = lazy(() => import('soapbox/features/auth-login/components/registration-page'));
|
||||
export const Settings = lazy(() => import('soapbox/features/settings'));
|
||||
export const EditProfile = lazy(() => import('soapbox/features/edit-profile'));
|
||||
export const EditEmail = lazy(() => import('soapbox/features/edit-email'));
|
||||
export const EmailConfirmation = lazy(() => import('soapbox/features/email-confirmation'));
|
||||
export const EditPassword = lazy(() => import('soapbox/features/edit-password'));
|
||||
export const DeleteAccount = lazy(() => import('soapbox/features/delete-account'));
|
||||
export const SoapboxConfig = lazy(() => import('soapbox/features/soapbox-config'));
|
||||
export const ExportData = lazy(() => import('soapbox/features/export-data'));
|
||||
export const ImportData = lazy(() => import('soapbox/features/import-data'));
|
||||
export const Backups = lazy(() => import('soapbox/features/backups'));
|
||||
export const PasswordReset = lazy(() => import('soapbox/features/auth-login/components/password-reset'));
|
||||
export const PasswordResetConfirm = lazy(() => import('soapbox/features/auth-login/components/password-reset-confirm'));
|
||||
export const MfaForm = lazy(() => import('soapbox/features/security/mfa-form'));
|
||||
export const ChatIndex = lazy(() => import('soapbox/features/chats'));
|
||||
export const ChatWidget = lazy(() => import('soapbox/features/chats/components/chat-widget/chat-widget'));
|
||||
export const ServerInfo = lazy(() => import('soapbox/features/server-info'));
|
||||
export const Dashboard = lazy(() => import('soapbox/features/admin'));
|
||||
export const ModerationLog = lazy(() => import('soapbox/features/admin/moderation-log'));
|
||||
export const ThemeEditor = lazy(() => import('soapbox/features/theme-editor'));
|
||||
export const UserPanel = lazy(() => import('soapbox/features/ui/components/user-panel'));
|
||||
export const PromoPanel = lazy(() => import('soapbox/features/ui/components/promo-panel'));
|
||||
export const SignUpPanel = lazy(() => import('soapbox/features/ui/components/panels/sign-up-panel'));
|
||||
export const CtaBanner = lazy(() => import('soapbox/features/ui/components/cta-banner'));
|
||||
export const FundingPanel = lazy(() => import('soapbox/features/ui/components/funding-panel'));
|
||||
export const TrendsPanel = lazy(() => import('soapbox/features/ui/components/trends-panel'));
|
||||
export const ProfileInfoPanel = lazy(() => import('soapbox/features/ui/components/profile-info-panel'));
|
||||
export const ProfileMediaPanel = lazy(() => import('soapbox/features/ui/components/profile-media-panel'));
|
||||
export const ProfileFieldsPanel = lazy(() => import('soapbox/features/ui/components/profile-fields-panel'));
|
||||
export const PinnedAccountsPanel = lazy(() => import('soapbox/features/ui/components/pinned-accounts-panel'));
|
||||
export const InstanceInfoPanel = lazy(() => import('soapbox/features/ui/components/instance-info-panel'));
|
||||
export const InstanceModerationPanel = lazy(() => import('soapbox/features/ui/components/instance-moderation-panel'));
|
||||
export const LatestAccountsPanel = lazy(() => import('soapbox/features/admin/components/latest-accounts-panel'));
|
||||
export const SidebarMenu = lazy(() => import('soapbox/components/sidebar-menu'));
|
||||
export const ModalContainer = lazy(() => import('soapbox/features/ui/containers/modal-container'));
|
||||
export const ProfileHoverCard = lazy(() => import('soapbox/components/profile-hover-card'));
|
||||
export const StatusHoverCard = lazy(() => import('soapbox/components/status-hover-card'));
|
||||
export const CryptoDonate = lazy(() => import('soapbox/features/crypto-donate'));
|
||||
export const CryptoDonatePanel = lazy(() => import('soapbox/features/crypto-donate/components/crypto-donate-panel'));
|
||||
export const CryptoAddress = lazy(() => import('soapbox/features/crypto-donate/components/crypto-address'));
|
||||
export const CryptoDonateModal = lazy(() => import('soapbox/features/ui/components/modals/crypto-donate-modal'));
|
||||
export const ScheduledStatuses = lazy(() => import('soapbox/features/scheduled-statuses'));
|
||||
export const UserIndex = lazy(() => import('soapbox/features/admin/user-index'));
|
||||
export const FederationRestrictions = lazy(() => import('soapbox/features/federation-restrictions'));
|
||||
export const Aliases = lazy(() => import('soapbox/features/aliases'));
|
||||
export const Migration = lazy(() => import('soapbox/features/migration'));
|
||||
export const ScheduleForm = lazy(() => import('soapbox/features/compose/components/schedule-form'));
|
||||
export const WhoToFollowPanel = lazy(() => import('soapbox/features/ui/components/who-to-follow-panel'));
|
||||
export const FollowRecommendations = lazy(() => import('soapbox/features/follow-recommendations'));
|
||||
export const Directory = lazy(() => import('soapbox/features/directory'));
|
||||
export const RegisterInvite = lazy(() => import('soapbox/features/register-invite'));
|
||||
export const Share = lazy(() => import('soapbox/features/share'));
|
||||
export const NewStatus = lazy(() => import('soapbox/features/new-status'));
|
||||
export const IntentionalError = lazy(() => import('soapbox/features/intentional-error'));
|
||||
export const Developers = lazy(() => import('soapbox/features/developers'));
|
||||
export const CreateApp = lazy(() => import('soapbox/features/developers/apps/create'));
|
||||
export const SettingsStore = lazy(() => import('soapbox/features/developers/settings-store'));
|
||||
export const TestTimeline = lazy(() => import('soapbox/features/test-timeline'));
|
||||
export const ServiceWorkerInfo = lazy(() => import('soapbox/features/developers/service-worker-info'));
|
||||
export const DatePicker = lazy(() => import('soapbox/features/birthdays/date-picker'));
|
||||
export const OnboardingWizard = lazy(() => import('soapbox/features/onboarding/onboarding-wizard'));
|
||||
export const CompareHistoryModal = lazy(() => import('soapbox/features/ui/components/modals/compare-history-modal'));
|
||||
export const AuthTokenList = lazy(() => import('soapbox/features/auth-token-list'));
|
||||
export const FamiliarFollowersModal = lazy(() => import('soapbox/features/ui/components/modals/familiar-followers-modal'));
|
||||
export const AnnouncementsPanel = lazy(() => import('soapbox/components/announcements/announcements-panel'));
|
||||
export const Quotes = lazy(() => import('soapbox/features/quotes'));
|
||||
export const ComposeEventModal = lazy(() => import('soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal'));
|
||||
export const JoinEventModal = lazy(() => import('soapbox/features/ui/components/modals/join-event-modal'));
|
||||
export const EventHeader = lazy(() => import('soapbox/features/event/components/event-header'));
|
||||
export const EventInformation = lazy(() => import('soapbox/features/event/event-information'));
|
||||
export const EventDiscussion = lazy(() => import('soapbox/features/event/event-discussion'));
|
||||
export const EventMapModal = lazy(() => import('soapbox/features/ui/components/modals/event-map-modal'));
|
||||
export const EventParticipantsModal = lazy(() => import('soapbox/features/ui/components/modals/event-participants-modal'));
|
||||
export const Events = lazy(() => import('soapbox/features/events'));
|
||||
export const Groups = lazy(() => import('soapbox/features/groups'));
|
||||
export const GroupsDiscover = lazy(() => import('soapbox/features/groups/discover'));
|
||||
export const GroupsPopular = lazy(() => import('soapbox/features/groups/popular'));
|
||||
export const GroupsSuggested = lazy(() => import('soapbox/features/groups/suggested'));
|
||||
export const GroupsTag = lazy(() => import('soapbox/features/groups/tag'));
|
||||
export const GroupsTags = lazy(() => import('soapbox/features/groups/tags'));
|
||||
export const PendingGroupRequests = lazy(() => import('soapbox/features/groups/pending-requests'));
|
||||
export const GroupMembers = lazy(() => import('soapbox/features/group/group-members'));
|
||||
export const GroupTags = lazy(() => import('soapbox/features/group/group-tags'));
|
||||
export const GroupTagTimeline = lazy(() => import('soapbox/features/group/group-tag-timeline'));
|
||||
export const GroupTimeline = lazy(() => import('soapbox/features/group/group-timeline'));
|
||||
export const ManageGroup = lazy(() => import('soapbox/features/group/manage-group'));
|
||||
export const EditGroup = lazy(() => import('soapbox/features/group/edit-group'));
|
||||
export const GroupBlockedMembers = lazy(() => import('soapbox/features/group/group-blocked-members'));
|
||||
export const GroupMembershipRequests = lazy(() => import('soapbox/features/group/group-membership-requests'));
|
||||
export const GroupGallery = lazy(() => import('soapbox/features/group/group-gallery'));
|
||||
export const CreateGroupModal = lazy(() => import('soapbox/features/ui/components/modals/manage-group-modal/create-group-modal'));
|
||||
export const NewGroupPanel = lazy(() => import('soapbox/features/ui/components/panels/new-group-panel'));
|
||||
export const MyGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/my-groups-panel'));
|
||||
export const SuggestedGroupsPanel = lazy(() => import('soapbox/features/ui/components/panels/suggested-groups-panel'));
|
||||
export const GroupMediaPanel = lazy(() => import('soapbox/features/ui/components/group-media-panel'));
|
||||
export const NewEventPanel = lazy(() => import('soapbox/features/ui/components/panels/new-event-panel'));
|
||||
export const Announcements = lazy(() => import('soapbox/features/admin/announcements'));
|
||||
export const EditAnnouncementModal = lazy(() => import('soapbox/features/ui/components/modals/edit-announcement-modal'));
|
||||
export const FollowedTags = lazy(() => import('soapbox/features/followed-tags'));
|
||||
export const AccountNotePanel = lazy(() => import('soapbox/features/ui/components/panels/account-note-panel'));
|
||||
export const ComposeEditor = lazy(() => import('soapbox/features/compose/editor'));
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
import React from 'react';
|
||||
import React, { Suspense } from 'react';
|
||||
import { Redirect, Route, useHistory, RouteProps, RouteComponentProps, match as MatchType } from 'react-router-dom';
|
||||
|
||||
import { Layout } from 'soapbox/components/ui';
|
||||
import { useOwnAccount, useSettings } from 'soapbox/hooks';
|
||||
|
||||
import BundleColumnError from '../components/bundle-column-error';
|
||||
import ColumnForbidden from '../components/column-forbidden';
|
||||
import ColumnLoading from '../components/column-loading';
|
||||
import ColumnsArea from '../components/columns-area';
|
||||
import BundleContainer from '../containers/bundle-container';
|
||||
|
||||
type PageProps = {
|
||||
params?: MatchType['params'];
|
||||
|
|
@ -17,7 +15,7 @@ type PageProps = {
|
|||
};
|
||||
|
||||
interface IWrappedRoute extends RouteProps {
|
||||
component: (...args: any[]) => any;
|
||||
component: React.LazyExoticComponent<any>;
|
||||
page?: React.ComponentType<PageProps>;
|
||||
content?: React.ReactNode;
|
||||
componentParams?: Record<string, any>;
|
||||
|
|
@ -29,7 +27,7 @@ interface IWrappedRoute extends RouteProps {
|
|||
}
|
||||
|
||||
const WrappedRoute: React.FC<IWrappedRoute> = ({
|
||||
component,
|
||||
component: Component,
|
||||
page: Page,
|
||||
content,
|
||||
componentParams = {},
|
||||
|
|
@ -48,32 +46,24 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
|
|||
const renderComponent = ({ match }: RouteComponentProps) => {
|
||||
if (Page) {
|
||||
return (
|
||||
<BundleContainer fetchComponent={component} loading={renderLoading} error={renderError}>
|
||||
{Component =>
|
||||
(
|
||||
<Page params={match.params} layout={layout} {...componentParams}>
|
||||
<Component params={match.params} {...componentParams}>
|
||||
{content}
|
||||
</Component>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
</BundleContainer>
|
||||
<Suspense fallback={renderLoading()}>
|
||||
<Page params={match.params} layout={layout} {...componentParams}>
|
||||
<Component params={match.params} {...componentParams}>
|
||||
{content}
|
||||
</Component>
|
||||
</Page>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BundleContainer fetchComponent={component} loading={renderLoading} error={renderError}>
|
||||
{Component =>
|
||||
(
|
||||
<ColumnsArea layout={layout}>
|
||||
<Component params={match.params} {...componentParams}>
|
||||
{content}
|
||||
</Component>
|
||||
</ColumnsArea>
|
||||
)
|
||||
}
|
||||
</BundleContainer>
|
||||
<Suspense fallback={renderLoading()}>
|
||||
<ColumnsArea layout={layout}>
|
||||
<Component params={match.params} {...componentParams}>
|
||||
{content}
|
||||
</Component>
|
||||
</ColumnsArea>
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -89,7 +79,6 @@ const WrappedRoute: React.FC<IWrappedRoute> = ({
|
|||
|
||||
const renderLoading = () => renderWithLayout(<ColumnLoading />);
|
||||
const renderForbidden = () => renderWithLayout(<ColumnForbidden />);
|
||||
const renderError = (props: any) => renderWithLayout(<BundleColumnError {...props} />);
|
||||
|
||||
const loginRedirect = () => {
|
||||
const actualUrl = encodeURIComponent(`${history.location.pathname}${history.location.search}`);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Layout } from 'soapbox/components/ui';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
LatestAccountsPanel,
|
||||
} from 'soapbox/features/ui/util/async-components';
|
||||
|
|
@ -20,10 +19,7 @@ const AdminPage: React.FC<IAdminPage> = ({ children }) => {
|
|||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
<BundleContainer fetchComponent={LatestAccountsPanel}>
|
||||
{Component => <Component limit={5} />}
|
||||
</BundleContainer>
|
||||
|
||||
<LatestAccountsPanel limit={5} />
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
WhoToFollowPanel,
|
||||
TrendsPanel,
|
||||
|
|
@ -26,27 +25,19 @@ const DefaultPage: React.FC<IDefaultPage> = ({ children }) => {
|
|||
{children}
|
||||
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={CtaBanner}>
|
||||
{Component => <Component key='cta-banner' />}
|
||||
</BundleContainer>
|
||||
<CtaBanner />
|
||||
)}
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component key='sign-up-panel' />}
|
||||
</BundleContainer>
|
||||
<SignUpPanel />
|
||||
)}
|
||||
{features.trends && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={5} key='trends-panel' />}
|
||||
</BundleContainer>
|
||||
<TrendsPanel limit={5} />
|
||||
)}
|
||||
{me && features.suggestions && (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={3} key='wtf-panel' />}
|
||||
</BundleContainer>
|
||||
<WhoToFollowPanel limit={3} />
|
||||
)}
|
||||
<LinkFooter key='link-footer' />
|
||||
</Layout.Aside>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { useHistory } from 'react-router-dom';
|
|||
import { Column, Layout, Tabs } from 'soapbox/components/ui';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
EventHeader,
|
||||
CtaBanner,
|
||||
|
|
@ -31,7 +30,7 @@ const EventPage: React.FC<IEventPage> = ({ params, children }) => {
|
|||
const history = useHistory();
|
||||
const statusId = params?.statusId!;
|
||||
|
||||
const status = useAppSelector(state => getStatus(state, { id: statusId }));
|
||||
const status = useAppSelector(state => getStatus(state, { id: statusId }) || undefined);
|
||||
|
||||
const event = status?.event;
|
||||
|
||||
|
|
@ -65,9 +64,7 @@ const EventPage: React.FC<IEventPage> = ({ params, children }) => {
|
|||
<Layout.Main>
|
||||
<Column label={event?.name} withHeader={false}>
|
||||
<div className='space-y-4'>
|
||||
<BundleContainer fetchComponent={EventHeader}>
|
||||
{Component => <Component status={status} />}
|
||||
</BundleContainer>
|
||||
<EventHeader status={status} />
|
||||
|
||||
{status && showTabs && (
|
||||
<Tabs key={`event-tabs-${status.id}`} items={tabs} activeItem={activeItem} />
|
||||
|
|
@ -78,27 +75,19 @@ const EventPage: React.FC<IEventPage> = ({ params, children }) => {
|
|||
</Column>
|
||||
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={CtaBanner}>
|
||||
{Component => <Component key='cta-banner' />}
|
||||
</BundleContainer>
|
||||
<CtaBanner />
|
||||
)}
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component key='sign-up-panel' />}
|
||||
</BundleContainer>
|
||||
<SignUpPanel />
|
||||
)}
|
||||
{features.trends && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={5} key='trends-panel' />}
|
||||
</BundleContainer>
|
||||
<TrendsPanel limit={5} />
|
||||
)}
|
||||
{features.suggestions && (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={3} key='wtf-panel' />}
|
||||
</BundleContainer>
|
||||
<WhoToFollowPanel limit={3} />
|
||||
)}
|
||||
<LinkFooter key='link-footer' />
|
||||
</Layout.Aside>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
|||
|
||||
import { Layout } from 'soapbox/components/ui';
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
WhoToFollowPanel,
|
||||
TrendsPanel,
|
||||
|
|
@ -25,18 +24,12 @@ const EventsPage: React.FC<IEventsPage> = ({ children }) => {
|
|||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
<BundleContainer fetchComponent={NewEventPanel}>
|
||||
{Component => <Component key='new-event-panel' />}
|
||||
</BundleContainer>
|
||||
<NewEventPanel />
|
||||
{features.trends && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={5} key='trends-panel' />}
|
||||
</BundleContainer>
|
||||
<TrendsPanel limit={5} />
|
||||
)}
|
||||
{features.suggestions && (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={3} key='wtf-panel' />}
|
||||
</BundleContainer>
|
||||
<WhoToFollowPanel limit={3} />
|
||||
)}
|
||||
<LinkFooter key='link-footer' />
|
||||
</Layout.Aside>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
|
|||
import { useRouteMatch } from 'react-router-dom';
|
||||
|
||||
import { useGroup, useGroupMembershipRequests } from 'soapbox/api/hooks';
|
||||
import GroupLookupHoc from 'soapbox/components/hoc/group-lookup-hoc';
|
||||
import { Column, Icon, Layout, Stack, Text, Tabs } from 'soapbox/components/ui';
|
||||
import GroupHeader from 'soapbox/features/group/components/group-header';
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
CtaBanner,
|
||||
GroupMediaPanel,
|
||||
|
|
@ -167,28 +165,20 @@ const GroupPage: React.FC<IGroupPage> = ({ params, children }) => {
|
|||
</Column>
|
||||
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={CtaBanner}>
|
||||
{Component => <Component key='cta-banner' />}
|
||||
</BundleContainer>
|
||||
<CtaBanner />
|
||||
)}
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component key='sign-up-panel' />}
|
||||
</BundleContainer>
|
||||
<SignUpPanel />
|
||||
)}
|
||||
<BundleContainer fetchComponent={GroupMediaPanel}>
|
||||
{Component => <Component group={group} />}
|
||||
</BundleContainer>
|
||||
<BundleContainer fetchComponent={SuggestedGroupsPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<LinkFooter key='link-footer' />
|
||||
<GroupMediaPanel group={group} />
|
||||
<SuggestedGroupsPanel />
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GroupLookupHoc(GroupPage as any) as any;
|
||||
export default GroupPage;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Route, Routes } from 'react-router-dom-v5-compat';
|
|||
|
||||
import { Column, Layout } from 'soapbox/components/ui';
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { MyGroupsPanel, NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components';
|
||||
|
||||
interface IGroupsPage {
|
||||
|
|
@ -22,26 +21,10 @@ const GroupsPage: React.FC<IGroupsPage> = ({ children }) => (
|
|||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
<BundleContainer fetchComponent={NewGroupPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<NewGroupPanel />
|
||||
<Routes>
|
||||
<Route
|
||||
path='/groups'
|
||||
element={(
|
||||
<BundleContainer fetchComponent={SuggestedGroupsPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path='/groups/discover'
|
||||
element={(
|
||||
<BundleContainer fetchComponent={MyGroupsPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
)}
|
||||
/>
|
||||
<Route path='/groups' element={<SuggestedGroupsPanel />} />
|
||||
<Route path='/groups/discover' element={<MyGroupsPanel />} />
|
||||
</Routes>
|
||||
|
||||
<LinkFooter />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
|||
|
||||
import { Layout } from 'soapbox/components/ui';
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { NewGroupPanel, SuggestedGroupsPanel } from 'soapbox/features/ui/util/async-components';
|
||||
|
||||
interface IGroupsPage {
|
||||
|
|
@ -17,15 +16,9 @@ const GroupsPendingPage: React.FC<IGroupsPage> = ({ children }) => (
|
|||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
<BundleContainer fetchComponent={NewGroupPanel}>
|
||||
{Component => <Component key='new-group-panel' />}
|
||||
</BundleContainer>
|
||||
|
||||
<BundleContainer fetchComponent={SuggestedGroupsPanel}>
|
||||
{Component => <Component key='suggested-groups-panel' />}
|
||||
</BundleContainer>
|
||||
|
||||
<LinkFooter key='link-footer' />
|
||||
<NewGroupPanel />
|
||||
<SuggestedGroupsPanel />
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDragge
|
|||
|
||||
import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui';
|
||||
import ComposeForm from '../features/compose/components/compose-form';
|
||||
import BundleContainer from '../features/ui/containers/bundle-container';
|
||||
|
||||
interface IHomePage {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -83,52 +82,34 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
|
|||
{children}
|
||||
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={CtaBanner}>
|
||||
{Component => <Component key='cta-banner' />}
|
||||
</BundleContainer>
|
||||
<CtaBanner />
|
||||
)}
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<SignUpPanel />
|
||||
)}
|
||||
{me && features.announcements && (
|
||||
<BundleContainer fetchComponent={AnnouncementsPanel}>
|
||||
{Component => <Component key='announcements-panel' />}
|
||||
</BundleContainer>
|
||||
<AnnouncementsPanel />
|
||||
)}
|
||||
{features.trends && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={5} />}
|
||||
</BundleContainer>
|
||||
<TrendsPanel limit={5} />
|
||||
)}
|
||||
{(hasPatron && me) && (
|
||||
<BundleContainer fetchComponent={FundingPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<FundingPanel />
|
||||
)}
|
||||
{(hasCrypto && cryptoLimit > 0 && me) && (
|
||||
<BundleContainer fetchComponent={CryptoDonatePanel}>
|
||||
{Component => <Component limit={cryptoLimit} />}
|
||||
</BundleContainer>
|
||||
<CryptoDonatePanel limit={cryptoLimit} />
|
||||
)}
|
||||
<BundleContainer fetchComponent={PromoPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<PromoPanel />
|
||||
{features.birthdays && (
|
||||
<BundleContainer fetchComponent={BirthdayPanel}>
|
||||
{Component => <Component limit={10} />}
|
||||
</BundleContainer>
|
||||
<BirthdayPanel limit={10} />
|
||||
)}
|
||||
{me && features.suggestions && (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={3} />}
|
||||
</BundleContainer>
|
||||
<WhoToFollowPanel limit={3} />
|
||||
)}
|
||||
<LinkFooter key='link-footer' />
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import {
|
|||
import { useAppSelector, useFeatures } from 'soapbox/hooks';
|
||||
|
||||
import { Layout } from '../components/ui';
|
||||
import BundleContainer from '../features/ui/containers/bundle-container';
|
||||
|
||||
interface ILandingPage {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -25,22 +24,16 @@ const LandingPage: React.FC<ILandingPage> = ({ children }) => {
|
|||
{children}
|
||||
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={CtaBanner}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<CtaBanner />
|
||||
)}
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<SignUpPanel />
|
||||
)}
|
||||
{features.trends && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={5} />}
|
||||
</BundleContainer>
|
||||
<TrendsPanel limit={5} />
|
||||
)}
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
|||
|
||||
import { Layout } from 'soapbox/components/ui';
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import { MyGroupsPanel, NewGroupPanel } from 'soapbox/features/ui/util/async-components';
|
||||
|
||||
interface IGroupsPage {
|
||||
|
|
@ -17,13 +16,8 @@ const ManageGroupsPage: React.FC<IGroupsPage> = ({ children }) => (
|
|||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
<BundleContainer fetchComponent={NewGroupPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
<BundleContainer fetchComponent={MyGroupsPanel}>
|
||||
{Component => <Component />}
|
||||
</BundleContainer>
|
||||
|
||||
<NewGroupPanel />
|
||||
<MyGroupsPanel />
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { useAccountLookup } from 'soapbox/api/hooks';
|
|||
import { Column, Layout, Tabs } from 'soapbox/components/ui';
|
||||
import Header from 'soapbox/features/account/components/header';
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
WhoToFollowPanel,
|
||||
ProfileInfoPanel,
|
||||
|
|
@ -92,10 +91,7 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
|
|||
<Column size='lg' label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}>
|
||||
<div className='space-y-4'>
|
||||
<Header account={account} />
|
||||
|
||||
<BundleContainer fetchComponent={ProfileInfoPanel}>
|
||||
{Component => <Component username={username} account={account} />}
|
||||
</BundleContainer>
|
||||
<ProfileInfoPanel username={username} account={account} />
|
||||
|
||||
{account && showTabs && (
|
||||
<Tabs key={`profile-tabs-${account.id}`} items={tabItems} activeItem={activeItem} />
|
||||
|
|
@ -106,40 +102,26 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
|
|||
</Column>
|
||||
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={CtaBanner}>
|
||||
{Component => <Component key='cta-banner' />}
|
||||
</BundleContainer>
|
||||
<CtaBanner />
|
||||
)}
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component key='sign-up-panel' />}
|
||||
</BundleContainer>
|
||||
<SignUpPanel />
|
||||
)}
|
||||
|
||||
{features.notes && account && account?.id !== me && (
|
||||
<BundleContainer fetchComponent={AccountNotePanel}>
|
||||
{Component => <Component account={account} />}
|
||||
</BundleContainer>
|
||||
<AccountNotePanel account={account} />
|
||||
)}
|
||||
<BundleContainer fetchComponent={ProfileMediaPanel}>
|
||||
{Component => <Component account={account} />}
|
||||
</BundleContainer>
|
||||
<ProfileMediaPanel account={account} />
|
||||
{(account && account.fields.length > 0) && (
|
||||
<BundleContainer fetchComponent={ProfileFieldsPanel}>
|
||||
{Component => <Component account={account} />}
|
||||
</BundleContainer>
|
||||
<ProfileFieldsPanel account={account} />
|
||||
)}
|
||||
{(features.accountEndorsements && account && isLocal(account)) ? (
|
||||
<BundleContainer fetchComponent={PinnedAccountsPanel}>
|
||||
{Component => <Component account={account} limit={5} key='pinned-accounts-panel' />}
|
||||
</BundleContainer>
|
||||
<PinnedAccountsPanel account={account} limit={5} />
|
||||
) : me && features.suggestions && (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={3} key='wtf-panel' />}
|
||||
</BundleContainer>
|
||||
<WhoToFollowPanel limit={3} />
|
||||
)}
|
||||
<LinkFooter key='link-footer' />
|
||||
</Layout.Aside>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
PromoPanel,
|
||||
InstanceInfoPanel,
|
||||
|
|
@ -21,7 +20,7 @@ interface IRemoteInstancePage {
|
|||
|
||||
/** Page for viewing a remote instance timeline. */
|
||||
const RemoteInstancePage: React.FC<IRemoteInstancePage> = ({ children, params }) => {
|
||||
const host = params?.instance;
|
||||
const host = params!.instance!;
|
||||
|
||||
const { account } = useOwnAccount();
|
||||
const disclosed = useAppSelector(federationRestrictionsDisclosed);
|
||||
|
|
@ -33,18 +32,12 @@ const RemoteInstancePage: React.FC<IRemoteInstancePage> = ({ children, params })
|
|||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
<BundleContainer fetchComponent={PromoPanel}>
|
||||
{Component => <Component key='promo-panel' />}
|
||||
</BundleContainer>
|
||||
<BundleContainer fetchComponent={InstanceInfoPanel}>
|
||||
{Component => <Component host={host} />}
|
||||
</BundleContainer>
|
||||
<PromoPanel />
|
||||
<InstanceInfoPanel host={host} />
|
||||
{(disclosed || account?.admin) && (
|
||||
<BundleContainer fetchComponent={InstanceModerationPanel}>
|
||||
{Component => <Component host={host} />}
|
||||
</BundleContainer>
|
||||
<InstanceModerationPanel host={host} />
|
||||
)}
|
||||
<LinkFooter key='link-footer' />
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import LinkFooter from 'soapbox/features/ui/components/link-footer';
|
||||
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
|
||||
import {
|
||||
WhoToFollowPanel,
|
||||
TrendsPanel,
|
||||
|
|
@ -27,38 +26,28 @@ const SearchPage: React.FC<ISearchPage> = ({ children }) => {
|
|||
{children}
|
||||
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={CtaBanner}>
|
||||
{Component => <Component key='cta-banner' />}
|
||||
</BundleContainer>
|
||||
<CtaBanner />
|
||||
)}
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component key='sign-up-panel' />}
|
||||
</BundleContainer>
|
||||
<SignUpPanel />
|
||||
)}
|
||||
|
||||
{features.trends && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={5} key='trends-panel' />}
|
||||
</BundleContainer>
|
||||
<TrendsPanel limit={5} />
|
||||
)}
|
||||
|
||||
{me && features.suggestions && (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={3} key='wtf-panel' />}
|
||||
</BundleContainer>
|
||||
<WhoToFollowPanel limit={3} />
|
||||
)}
|
||||
|
||||
{features.groups && (
|
||||
<BundleContainer fetchComponent={SuggestedGroupsPanel}>
|
||||
{Component => <Component key='suggested-groups-panel' />}
|
||||
</BundleContainer>
|
||||
<SuggestedGroupsPanel />
|
||||
)}
|
||||
|
||||
<LinkFooter key='link-footer' />
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import {
|
|||
import { useAppSelector, useFeatures } from 'soapbox/hooks';
|
||||
|
||||
import { Layout } from '../components/ui';
|
||||
import BundleContainer from '../features/ui/containers/bundle-container';
|
||||
|
||||
interface IStatusPage {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -26,29 +25,21 @@ const StatusPage: React.FC<IStatusPage> = ({ children }) => {
|
|||
{children}
|
||||
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={CtaBanner}>
|
||||
{Component => <Component key='cta-banner' />}
|
||||
</BundleContainer>
|
||||
<CtaBanner />
|
||||
)}
|
||||
</Layout.Main>
|
||||
|
||||
<Layout.Aside>
|
||||
{!me && (
|
||||
<BundleContainer fetchComponent={SignUpPanel}>
|
||||
{Component => <Component key='sign-up-panel' />}
|
||||
</BundleContainer>
|
||||
<SignUpPanel />
|
||||
)}
|
||||
{features.trends && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={5} key='trends-panel' />}
|
||||
</BundleContainer>
|
||||
<TrendsPanel limit={5} />
|
||||
)}
|
||||
{me && features.suggestions && (
|
||||
<BundleContainer fetchComponent={WhoToFollowPanel}>
|
||||
{Component => <Component limit={3} key='wtf-panel' />}
|
||||
</BundleContainer>
|
||||
<WhoToFollowPanel limit={3} />
|
||||
)}
|
||||
<LinkFooter key='link-footer' />
|
||||
<LinkFooter />
|
||||
</Layout.Aside>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue