mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge remote-tracking branch 'origin/develop' into embedded-status

environments/review-embedded-s-jkh70t/deployments/802
Alex Gleason 2022-08-21 11:20:19 -04:00
rodzic ee754915aa a716629bae
commit c4849ad38d
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
43 zmienionych plików z 341 dodań i 161 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

55
app/soapbox/actions/consumer-auth.ts 100644
Wyświetl plik

@ -0,0 +1,55 @@
import axios from 'axios';
import * as BuildConfig from 'soapbox/build_config';
import { isURL } from 'soapbox/utils/auth';
import sourceCode from 'soapbox/utils/code';
import { getFeatures } from 'soapbox/utils/features';
import { createApp } from './apps';
import type { AppDispatch, RootState } from 'soapbox/store';
const createProviderApp = () => {
return async(dispatch: AppDispatch, getState: () => RootState) => {
const state = getState();
const { scopes } = getFeatures(state.instance);
const params = {
client_name: sourceCode.displayName,
redirect_uris: `${window.location.origin}/login/external`,
website: sourceCode.homepage,
scopes,
};
return dispatch(createApp(params));
};
};
export const prepareRequest = (provider: string) => {
return async(dispatch: AppDispatch, getState: () => RootState) => {
const baseURL = isURL(BuildConfig.BACKEND_URL) ? BuildConfig.BACKEND_URL : '';
const state = getState();
const { scopes } = getFeatures(state.instance);
const app = await dispatch(createProviderApp());
const { client_id, redirect_uri } = app;
localStorage.setItem('soapbox:external:app', JSON.stringify(app));
localStorage.setItem('soapbox:external:baseurl', baseURL);
localStorage.setItem('soapbox:external:scopes', scopes);
const params = {
provider,
authorization: {
client_id,
redirect_uri,
scope: scopes,
},
};
const formdata = axios.toFormData(params);
const query = new URLSearchParams(formdata as any);
location.href = `${baseURL}/oauth/prepare_request?${query.toString()}`;
};
};

2
app/soapbox/base_polyfills.ts
Wyświetl plik

@ -37,7 +37,7 @@ if (!HTMLCanvasElement.prototype.toBlob) {
const dataURL = this.toDataURL(type, quality);
let data;
if (dataURL.indexOf(BASE64_MARKER) >= 0) {
if (dataURL.includes(BASE64_MARKER)) {
const [, base64] = dataURL.split(BASE64_MARKER);
data = decodeBase64(base64);
} else {

2
app/soapbox/components/autosuggest_input.tsx
Wyświetl plik

@ -30,7 +30,7 @@ const textAtCursorMatchesToken = (str: string, caretPosition: number, searchToke
word = str.slice(left, right + caretPosition);
}
if (!word || word.trim().length < 3 || searchTokens.indexOf(word[0]) === -1) {
if (!word || word.trim().length < 3 || !searchTokens.includes(word[0])) {
return [null, null];
}

2
app/soapbox/components/autosuggest_textarea.tsx
Wyświetl plik

@ -23,7 +23,7 @@ const textAtCursorMatchesToken = (str: string, caretPosition: number) => {
word = str.slice(left, right + caretPosition);
}
if (!word || word.trim().length < 3 || ['@', ':', '#'].indexOf(word[0]) === -1) {
if (!word || word.trim().length < 3 || !['@', ':', '#'].includes(word[0])) {
return [null, null];
}

2
app/soapbox/components/status-action-bar.tsx
Wyświetl plik

@ -442,7 +442,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
action: handleChatClick,
icon: require('@tabler/icons/messages.svg'),
});
} else {
} else if (features.privacyScopes) {
menu.push({
text: intl.formatMessage(messages.direct, { name: username }),
action: handleDirectClick,

32
app/soapbox/components/status.tsx
Wyświetl plik

@ -48,6 +48,7 @@ export interface IStatus {
hideActionBar?: boolean,
hoverable?: boolean,
variant?: 'default' | 'rounded',
withDismiss?: boolean,
}
const Status: React.FC<IStatus> = (props) => {
@ -65,6 +66,7 @@ const Status: React.FC<IStatus> = (props) => {
group,
hideActionBar,
variant = 'rounded',
withDismiss,
} = props;
const intl = useIntl();
const history = useHistory();
@ -181,7 +183,7 @@ const Status: React.FC<IStatus> = (props) => {
};
if (!status) return null;
let prepend, rebloggedByText, reblogElement, reblogElementMobile;
let rebloggedByText, reblogElement, reblogElementMobile;
if (hidden) {
return (
@ -207,20 +209,6 @@ const Status: React.FC<IStatus> = (props) => {
);
}
if (featured) {
prepend = (
<div className='pt-4 px-4'>
<HStack alignItems='center' space={1}>
<Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
<Text size='sm' theme='muted' weight='medium'>
<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
</Text>
</HStack>
</div>
);
}
if (status.reblog && typeof status.reblog === 'object') {
const displayNameHtml = { __html: String(status.getIn(['account', 'display_name_html'])) };
@ -318,7 +306,17 @@ const Status: React.FC<IStatus> = (props) => {
onClick={() => history.push(statusUrl)}
role='link'
>
{prepend}
{featured && (
<div className='pt-4 px-4'>
<HStack alignItems='center' space={1}>
<Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
<Text size='sm' theme='muted' weight='medium'>
<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
</Text>
</HStack>
</div>
)}
<Card
variant={variant}
@ -377,7 +375,7 @@ const Status: React.FC<IStatus> = (props) => {
{!hideActionBar && (
<div className='pt-4'>
<StatusActionBar status={actualStatus} />
<StatusActionBar status={actualStatus} withDismiss={withDismiss} />
</div>
)}
</div>

2
app/soapbox/components/status_list.tsx
Wyświetl plik

@ -122,7 +122,6 @@ const StatusList: React.FC<IStatusList> = ({
const renderStatus = (statusId: string) => {
return (
// @ts-ignore
<StatusContainer
key={statusId}
id={statusId}
@ -157,7 +156,6 @@ const StatusList: React.FC<IStatusList> = ({
if (!featuredStatusIds) return [];
return featuredStatusIds.toArray().map(statusId => (
// @ts-ignore
<StatusContainer
key={`f-${statusId}`}
id={statusId}

7
app/soapbox/components/ui/icon-button/icon-button.tsx
Wyświetl plik

@ -12,12 +12,14 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/** Text to display next ot the button. */
text?: string,
/** Don't render a background behind the icon. */
transparent?: boolean
transparent?: boolean,
/** Predefined styles to display for the button. */
theme?: 'seamless' | 'outlined',
}
/** A clickable icon. */
const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
const { src, className, iconClassName, text, transparent = false, ...filteredProps } = props;
const { src, className, iconClassName, text, transparent = false, theme = 'seamless', ...filteredProps } = props;
return (
<button
@ -25,6 +27,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
type='button'
className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
'bg-white dark:bg-transparent': !transparent,
'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
'opacity-50': filteredProps.disabled,
}, className)}
{...filteredProps}

9
app/soapbox/containers/status_container.tsx
Wyświetl plik

@ -4,15 +4,13 @@ import Status, { IStatus } from 'soapbox/components/status';
import { useAppSelector } from 'soapbox/hooks';
import { makeGetStatus } from 'soapbox/selectors';
interface IStatusContainer extends Omit<IStatus, 'id'> {
interface IStatusContainer extends Omit<IStatus, 'status'> {
id: string,
/** @deprecated Unused. */
contextType?: any,
/** @deprecated Unused. */
otherAccounts?: any,
/** @deprecated Unused. */
withDismiss?: any,
/** @deprecated Unused. */
getScrollPosition?: any,
/** @deprecated Unused. */
updateScrollBottom?: any,
@ -24,11 +22,12 @@ const getStatus = makeGetStatus();
* Legacy Status wrapper accepting a status ID instead of the full entity.
* @deprecated Use the Status component directly.
*/
const StatusContainer: React.FC<IStatusContainer> = ({ id }) => {
const StatusContainer: React.FC<IStatusContainer> = (props) => {
const { id, ...rest } = props;
const status = useAppSelector(state => getStatus(state, { id }));
if (status) {
return <Status status={status} />;
return <Status status={status} {...rest} />;
} else {
return null;
}

9
app/soapbox/features/account/components/header.tsx
Wyświetl plik

@ -696,7 +696,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
// src={require('@tabler/icons/mail.svg')}
// onClick={onDirect}
// title={intl.formatMessage(messages.direct, { name: account.username })}
// className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
// theme='outlined'
// className='px-2'
// iconClassName='w-4 h-4'
// />
// );
@ -715,7 +716,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
src={require('@tabler/icons/upload.svg')}
onClick={handleShare}
title={intl.formatMessage(messages.share, { name: account.username })}
className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
theme='outlined'
className='px-2'
iconClassName='w-4 h-4'
/>
);
@ -770,7 +772,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
<MenuButton
as={IconButton}
src={require('@tabler/icons/dots.svg')}
className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
theme='outlined'
className='px-2'
iconClassName='w-4 h-4'
children={null}
/>

2
app/soapbox/features/account_gallery/components/media_item.tsx
Wyświetl plik

@ -38,7 +38,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
};
const hoverToPlay = () => {
return !autoPlayGif && ['gifv', 'video'].indexOf(attachment.type) !== -1;
return !autoPlayGif && ['gifv', 'video'].includes(attachment.type);
};
const handleClick: React.MouseEventHandler = e => {

2
app/soapbox/features/account_timeline/index.tsx
Wyświetl plik

@ -65,7 +65,7 @@ const AccountTimeline: React.FC<IAccountTimeline> = ({ params, withReplies = fal
if (account) {
dispatch(expandAccountTimeline(account.id, { withReplies }));
}
}, [account?.id]);
}, [account?.id, withReplies]);
const handleLoadMore = (maxId: string) => {
if (account) {

7
app/soapbox/features/auth_login/components/__tests__/login_form.test.tsx
Wyświetl plik

@ -1,6 +1,7 @@
import { Map as ImmutableMap } from 'immutable';
import React from 'react';
import { normalizeInstance } from 'soapbox/normalizers';
import { fireEvent, render, screen } from '../../../../jest/test-helpers';
import LoginForm from '../login_form';
@ -8,7 +9,7 @@ describe('<LoginForm />', () => {
it('renders for Pleroma', () => {
const mockFn = jest.fn();
const store = {
instance: ImmutableMap({
instance: normalizeInstance({
version: '2.7.2 (compatible; Pleroma 2.3.0)',
}),
};
@ -21,7 +22,7 @@ describe('<LoginForm />', () => {
it('renders for Mastodon', () => {
const mockFn = jest.fn();
const store = {
instance: ImmutableMap({
instance: normalizeInstance({
version: '3.0.0',
}),
};

5
app/soapbox/features/auth_login/components/__tests__/login_page.test.tsx
Wyświetl plik

@ -1,13 +1,14 @@
import { Map as ImmutableMap } from 'immutable';
import React from 'react';
import { normalizeInstance } from 'soapbox/normalizers';
import { render, screen } from '../../../../jest/test-helpers';
import LoginPage from '../login_page';
describe('<LoginPage />', () => {
it('renders correctly on load', () => {
const store = {
instance: ImmutableMap({
instance: normalizeInstance({
version: '2.7.2 (compatible; Pleroma 2.3.0)',
}),
};

51
app/soapbox/features/auth_login/components/consumer-button.tsx 100644
Wyświetl plik

@ -0,0 +1,51 @@
import React from 'react';
import { useIntl, defineMessages } from 'react-intl';
import { prepareRequest } from 'soapbox/actions/consumer-auth';
import { IconButton, Tooltip } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
import { capitalize } from 'soapbox/utils/strings';
const messages = defineMessages({
tooltip: { id: 'oauth_consumer.tooltip', defaultMessage: 'Sign in with {provider}' },
});
/** Map between OAuth providers and brand icons. */
const BRAND_ICONS: Record<string, string> = {
twitter: require('@tabler/icons/brand-twitter.svg'),
facebook: require('@tabler/icons/brand-facebook.svg'),
google: require('@tabler/icons/brand-google.svg'),
microsoft: require('@tabler/icons/brand-windows.svg'),
slack: require('@tabler/icons/brand-slack.svg'),
github: require('@tabler/icons/brand-github.svg'),
};
interface IConsumerButton {
provider: string,
}
/** OAuth consumer button for logging in with a third-party service. */
const ConsumerButton: React.FC<IConsumerButton> = ({ provider }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const icon = BRAND_ICONS[provider] || require('@tabler/icons/key.svg');
const handleClick = () => {
dispatch(prepareRequest(provider));
};
return (
<Tooltip text={intl.formatMessage(messages.tooltip, { provider: capitalize(provider) })}>
<IconButton
theme='outlined'
className='p-2.5'
iconClassName='w-6 h-6'
src={icon}
onClick={handleClick}
/>
</Tooltip>
);
};
export default ConsumerButton;

35
app/soapbox/features/auth_login/components/consumers-list.tsx 100644
Wyświetl plik

@ -0,0 +1,35 @@
import { List as ImmutableList } from 'immutable';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Card, HStack, Text } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import ConsumerButton from './consumer-button';
interface IConsumersList {
}
/** Displays OAuth consumers to log in with. */
const ConsumersList: React.FC<IConsumersList> = () => {
const providers = useAppSelector(state => ImmutableList<string>(state.instance.pleroma.get('oauth_consumer_strategies')));
if (providers.size > 0) {
return (
<Card className='p-4 sm:rounded-xl bg-gray-50 dark:bg-primary-800'>
<Text size='xs' theme='muted'>
<FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
</Text>
<HStack space={2}>
{providers.map(provider => (
<ConsumerButton provider={provider} />
))}
</HStack>
</Card>
);
} else {
return null;
}
};
export default ConsumersList;

10
app/soapbox/features/auth_login/components/login_form.tsx
Wyświetl plik

@ -2,7 +2,9 @@ import React from 'react';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { Button, Form, FormActions, FormGroup, Input, Stack } from 'soapbox/components/ui';
import ConsumersList from './consumers-list';
const messages = defineMessages({
username: {
@ -29,7 +31,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
<h1 className='text-center font-bold text-2xl'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
</div>
<div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
<Stack className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto' space={5}>
<Form onSubmit={handleSubmit}>
<FormGroup labelText={intl.formatMessage(messages.username)}>
<Input
@ -76,7 +78,9 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
</Button>
</FormActions>
</Form>
</div>
<ConsumersList />
</Stack>
</div>
);
};

8
app/soapbox/features/emoji/emoji_mart_search_light.js
Wyświetl plik

@ -85,8 +85,8 @@ export function search(value, { emojisToShowFilter, maxResults, include, exclude
pool = {};
data.categories.forEach(category => {
const isIncluded = include && include.length ? include.indexOf(category.name.toLowerCase()) > -1 : true;
const isExcluded = exclude && exclude.length ? exclude.indexOf(category.name.toLowerCase()) > -1 : false;
const isIncluded = include && include.length ? include.includes(category.name.toLowerCase()) : true;
const isExcluded = exclude && exclude.length ? exclude.includes(category.name.toLowerCase()) : false;
if (!isIncluded || isExcluded) {
return;
}
@ -95,8 +95,8 @@ export function search(value, { emojisToShowFilter, maxResults, include, exclude
});
if (custom.length) {
const customIsIncluded = include && include.length ? include.indexOf('custom') > -1 : true;
const customIsExcluded = exclude && exclude.length ? exclude.indexOf('custom') > -1 : false;
const customIsIncluded = include && include.length ? include.includes('custom') : true;
const customIsExcluded = exclude && exclude.length ? exclude.includes('custom') : false;
if (customIsIncluded && !customIsExcluded) {
addCustomToPool(custom, pool);
}

6
app/soapbox/features/emoji/emoji_utils.js
Wyświetl plik

@ -15,7 +15,7 @@ const buildSearch = (data) => {
(split ? string.split(/[-|_|\s]+/) : [string]).forEach((s) => {
s = s.toLowerCase();
if (search.indexOf(s) === -1) {
if (!search.includes(s)) {
search.push(s);
}
});
@ -190,7 +190,7 @@ function getData(emoji, skin, set) {
function uniq(arr) {
return arr.reduce((acc, item) => {
if (acc.indexOf(item) === -1) {
if (!acc.includes(item)) {
acc.push(item);
}
return acc;
@ -201,7 +201,7 @@ function intersect(a, b) {
const uniqA = uniq(a);
const uniqB = uniq(b);
return uniqA.filter(item => uniqB.indexOf(item) >= 0);
return uniqA.filter(item => uniqB.includes(item));
}
function deepMerge(a, b) {

8
app/soapbox/features/feed-filtering/feed-carousel.tsx
Wyświetl plik

@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { replaceHomeTimeline } from 'soapbox/actions/timelines';
import { useAppDispatch, useAppSelector, useDimensions, useFeatures } from 'soapbox/hooks';
import { useAppDispatch, useAppSelector, useDimensions } from 'soapbox/hooks';
import useCarouselAvatars from 'soapbox/queries/carousels';
import { Card, HStack, Icon, Stack, Text } from '../../components/ui';
@ -59,8 +59,6 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
};
const FeedCarousel = () => {
const features = useFeatures();
const { data: avatars, isFetching, isError } = useCarouselAvatars();
const [cardRef, setCardRef, { width }] = useDimensions();
@ -83,10 +81,6 @@ const FeedCarousel = () => {
}
}, [width, widthPerAvatar]);
if (!features.feedUserFiltering) {
return null;
}
if (isError) {
return (
<Card variant='rounded' size='lg' data-testid='feed-carousel-error'>

44
app/soapbox/features/landing_page/index.tsx
Wyświetl plik

@ -1,12 +1,15 @@
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { prepareRequest } from 'soapbox/actions/consumer-auth';
import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
import { useAppDispatch, useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
import { capitalize } from 'soapbox/utils/strings';
const LandingPage = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
const soapboxConfig = useSoapboxConfig();
const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
@ -40,6 +43,29 @@ const LandingPage = () => {
return <RegistrationForm />;
};
/** Display login button for external provider. */
const renderProvider = () => {
const { authProvider } = soapboxConfig;
return (
<Stack space={3}>
<Stack>
<Text size='2xl' weight='bold' align='center'>
<FormattedMessage id='registrations.get_started' defaultMessage="Let's get started!" />
</Text>
</Stack>
<Button onClick={() => dispatch(prepareRequest(authProvider))} theme='primary' block>
<FormattedMessage
id='oauth_consumer.tooltip'
defaultMessage='Sign in with {provider}'
values={{ provider: capitalize(authProvider) }}
/>
</Button>
</Stack>
);
};
/** Pepe API registrations are open */
const renderPepe = () => {
return (
@ -47,18 +73,26 @@ const LandingPage = () => {
<VerificationBadge className='h-16 w-16 mx-auto' />
<Stack>
<Text size='2xl' weight='bold' align='center'>Let&apos;s get started!</Text>
<Text theme='muted' align='center'>Social Media Without Discrimination</Text>
<Text size='2xl' weight='bold' align='center'>
<FormattedMessage id='registrations.get_started' defaultMessage="Let's get started!" />
</Text>
<Text theme='muted' align='center'>
<FormattedMessage id='registrations.tagline' defaultMessage='Social Media Without Discrimination' />
</Text>
</Stack>
<Button to='/verify' theme='primary' block>Create an account</Button>
<Button to='/verify' theme='primary' block>
<FormattedMessage id='registrations.create_account' defaultMessage='Create an account' />
</Button>
</Stack>
);
};
// Render registration flow depending on features
const renderBody = () => {
if (pepeEnabled && pepeOpen) {
if (soapboxConfig.authProvider) {
return renderProvider();
} else if (pepeEnabled && pepeOpen) {
return renderPepe();
} else if (features.accountCreation && instance.registrations) {
return renderOpen();

12
app/soapbox/features/notifications/components/notification.tsx
Wyświetl plik

@ -18,7 +18,7 @@ import { makeGetNotification } from 'soapbox/selectors';
import { NotificationType, validType } from 'soapbox/utils/notification';
import type { ScrollPosition } from 'soapbox/components/status';
import type { Account, Status, Notification as NotificationEntity } from 'soapbox/types/entities';
import type { Account, Status as StatusEntity, Notification as NotificationEntity } from 'soapbox/types/entities';
const getNotification = makeGetNotification();
@ -104,7 +104,7 @@ const messages: Record<NotificationType, MessageDescriptor> = defineMessages({
},
update: {
id: 'notification.update',
defaultMessage: '{name} edited a post',
defaultMessage: '{name} edited a post you interacted with',
},
});
@ -143,7 +143,7 @@ interface INotificaton {
notification: NotificationEntity,
onMoveUp?: (notificationId: string) => void,
onMoveDown?: (notificationId: string) => void,
onReblog?: (status: Status, e?: KeyboardEvent) => void,
onReblog?: (status: StatusEntity, e?: KeyboardEvent) => void,
getScrollPosition?: () => ScrollPosition | undefined,
updateScrollBottom?: (bottom: number) => void,
}
@ -216,7 +216,7 @@ const Notification: React.FC<INotificaton> = (props) => {
if (e?.shiftKey || !boostModal) {
dispatch(reblog(status));
} else {
dispatch(openModal('BOOST', { status, onReblog: (status: Status) => {
dispatch(openModal('BOOST', { status, onReblog: (status: StatusEntity) => {
dispatch(reblog(status));
} }));
}
@ -303,16 +303,12 @@ const Notification: React.FC<INotificaton> = (props) => {
case 'update':
case 'pleroma:emoji_reaction':
return status && typeof status === 'object' ? (
// @ts-ignore
<StatusContainer
id={status.id}
withDismiss
hidden={hidden}
onMoveDown={handleMoveDown}
onMoveUp={handleMoveUp}
contextType='notifications'
getScrollPosition={props.getScrollPosition}
updateScrollBottom={props.updateScrollBottom}
/>
) : null;
default:

2
app/soapbox/features/status/components/card.tsx
Wyświetl plik

@ -26,7 +26,7 @@ const addAutoPlay = (html: string): string => {
const iframe = document.querySelector('iframe');
if (iframe) {
if (iframe.src.indexOf('?') !== -1) {
if (iframe.src.includes('?')) {
iframe.src += '&';
} else {
iframe.src += '?';

10
app/soapbox/features/status/components/detailed-status.tsx
Wyświetl plik

@ -5,7 +5,7 @@ import Icon from 'soapbox/components/icon';
import StatusMedia from 'soapbox/components/status-media';
import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
import StatusContent from 'soapbox/components/status_content';
import { HStack, Text } from 'soapbox/components/ui';
import { HStack, Stack, Text } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account_container';
import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
import { getActualStatus } from 'soapbox/utils/status';
@ -65,9 +65,9 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
}
if (actualStatus.visibility === 'direct') {
statusTypeIcon = <Icon src={require('@tabler/icons/mail.svg')} />;
statusTypeIcon = <Icon className='text-gray-700 dark:text-gray-600' src={require('@tabler/icons/mail.svg')} />;
} else if (actualStatus.visibility === 'private') {
statusTypeIcon = <Icon src={require('@tabler/icons/lock.svg')} />;
statusTypeIcon = <Icon className='text-gray-700 dark:text-gray-600' src={require('@tabler/icons/lock.svg')} />;
}
return (
@ -102,7 +102,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
<HStack justifyContent='between' alignItems='center' className='py-2'>
<StatusInteractionBar status={actualStatus} />
<div className='detailed-actualStatus__timestamp'>
<Stack space={1} alignItems='center'>
{statusTypeIcon}
<span>
@ -128,7 +128,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
</>
)}
</span>
</div>
</Stack>
</HStack>
</div>
</div>

2
app/soapbox/features/status/components/thread-status.tsx
Wyświetl plik

@ -9,6 +9,8 @@ import { useAppSelector } from 'soapbox/hooks';
interface IThreadStatus {
id: string,
focusedStatusId: string,
onMoveUp: (id: string) => void,
onMoveDown: (id: string) => void,
}
/** Status with reply-connector in threads. */

2
app/soapbox/features/status/index.tsx
Wyświetl plik

@ -369,6 +369,8 @@ const Thread: React.FC<IThread> = (props) => {
key={id}
id={id}
focusedStatusId={status!.id}
onMoveUp={handleMoveUp}
onMoveDown={handleMoveDown}
/>
);
};

2
app/soapbox/features/ui/components/modal_root.js
Wyświetl plik

@ -92,7 +92,7 @@ export default class ModalRoot extends React.PureComponent {
}
renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
return !['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].includes(modalId) ? <ModalLoading /> : null;
}
renderError = (props) => {

3
app/soapbox/features/ui/components/subscription-button.tsx
Wyświetl plik

@ -93,7 +93,8 @@ const SubscriptionButton = ({ account }: ISubscriptionButton) => {
src={isSubscribed ? require('@tabler/icons/bell-ringing.svg') : require('@tabler/icons/bell.svg')}
onClick={handleToggle}
title={title}
className='px-2 border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500'
theme='outlined'
className='px-2'
iconClassName='w-4 h-4'
/>
);

2
app/soapbox/features/ui/components/user_panel.tsx
Wyświetl plik

@ -28,7 +28,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
if (!account) return null;
const displayNameHtml = { __html: account.get('display_name_html') };
const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
const acct = !account.get('acct').includes('@') && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
const header = account.get('header');
const verified = account.get('verified');

2
app/soapbox/features/ui/index.tsx
Wyświetl plik

@ -352,7 +352,7 @@ const UI: React.FC = ({ children }) => {
const handleDragEnter = (e: DragEvent) => {
e.preventDefault();
if (e.target && dragTargets.current.indexOf(e.target) === -1) {
if (e.target && !dragTargets.current.includes(e.target)) {
dragTargets.current.push(e.target);
}

1
app/soapbox/features/ui/util/react_router_helpers.tsx
Wyświetl plik

@ -13,6 +13,7 @@ import BundleContainer from '../containers/bundle_container';
type PageProps = {
params?: MatchType['params'],
layout?: any,
children: React.ReactNode,
};
interface IWrappedRoute extends RouteProps {

14
app/soapbox/features/verification/steps/email-verification.tsx
Wyświetl plik

@ -85,13 +85,15 @@ const EmailVerification = () => {
);
})
.catch((error: AxiosError) => {
const isEmailTaken = (error.response?.data as any)?.error === 'email_taken';
const errorMessage = (error.response?.data as any)?.error;
const isEmailTaken = errorMessage === 'email_taken';
let message = intl.formatMessage({ id: 'email_verification.fail', defaultMessage: 'Failed to request email verification.' });
const message = isEmailTaken ? (
intl.formatMessage({ id: 'email_verification.exists', defaultMessage: 'This email has already been taken.' })
) : (
intl.formatMessage({ id: 'email_verification.fail', defaultMessage: 'Failed to request email verification.' })
);
if (isEmailTaken) {
message = intl.formatMessage({ id: 'email_verification.exists', defaultMessage: 'This email has already been taken.' });
} else if (errorMessage) {
message = errorMessage;
}
if (isEmailTaken) {
setErrors([intl.formatMessage({ id: 'email_verification.taken', defaultMessage: 'is taken' })]);

1
app/soapbox/normalizers/soapbox/soapbox_config.ts
Wyświetl plik

@ -71,6 +71,7 @@ export const CryptoAddressRecord = ImmutableRecord({
export const SoapboxConfigRecord = ImmutableRecord({
ads: ImmutableList<Ad>(),
appleAppId: null,
authProvider: '',
logo: '',
logoDarkMode: null,
banner: '',

2
app/soapbox/pages/home_page.tsx
Wyświetl plik

@ -58,7 +58,7 @@ const HomePage: React.FC = ({ children }) => {
</Card>
)}
<FeedCarousel />
{features.feedUserFiltering && <FeedCarousel />}
{children}

69
app/soapbox/pages/status_page.js
Wyświetl plik

@ -1,69 +0,0 @@
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import {
WhoToFollowPanel,
TrendsPanel,
SignUpPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
// import GroupSidebarPanel from '../features/groups/sidebar_panel';
import { getFeatures } from 'soapbox/utils/features';
import { Layout } from '../components/ui';
import BundleContainer from '../features/ui/containers/bundle_container';
const mapStateToProps = state => {
const me = state.get('me');
const features = getFeatures(state.get('instance'));
return {
me,
showTrendsPanel: features.trends,
showWhoToFollowPanel: features.suggestions,
};
};
export default @connect(mapStateToProps)
class StatusPage extends ImmutablePureComponent {
render() {
const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props;
return (
<>
<Layout.Main>
{children}
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>
{!me && (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{showTrendsPanel && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component limit={3} key='trends-panel' />}
</BundleContainer>
)}
{showWhoToFollowPanel && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</>
);
}
}

57
app/soapbox/pages/status_page.tsx 100644
Wyświetl plik

@ -0,0 +1,57 @@
import React from 'react';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import {
WhoToFollowPanel,
TrendsPanel,
SignUpPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
import { useAppSelector, useFeatures } from 'soapbox/hooks';
import { Layout } from '../components/ui';
import BundleContainer from '../features/ui/containers/bundle_container';
interface IStatusPage {
children: React.ReactNode,
}
const StatusPage: React.FC<IStatusPage> = ({ children }) => {
const me = useAppSelector(state => state.me);
const features = useFeatures();
return (
<>
<Layout.Main>
{children}
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>
{!me && (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{features.trends && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component limit={3} key='trends-panel' />}
</BundleContainer>
)}
{features.suggestions && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</>
);
};
export default StatusPage;

2
app/soapbox/selectors/index.ts
Wyświetl plik

@ -93,7 +93,7 @@ const toServerSideType = (columnType: string): string => {
case 'thread':
return columnType;
default:
if (columnType.indexOf('list:') > -1) {
if (columnType.includes('list:')) {
return 'home';
} else {
return 'public'; // community, account, hashtag

2
app/soapbox/service_worker/web_push_notifications.ts
Wyświetl plik

@ -146,7 +146,7 @@ const handlePush = (event: PushEvent) => {
timestamp: notification.created_at && Number(new Date(notification.created_at)),
tag: notification.id,
image: notification.status?.media_attachments[0]?.preview_url,
data: { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.username}/posts/${notification.status.id}` : `/@${notification.account.username}` },
data: { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.acct}/posts/${notification.status.id}` : `/@${notification.account.acct}` },
};
if (notification.status?.spoiler_text || notification.status?.sensitive) {

7
app/soapbox/utils/strings.ts 100644
Wyświetl plik

@ -0,0 +1,7 @@
/** Capitalize the first letter of a string. */
// https://stackoverflow.com/a/1026087
function capitalize(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
export { capitalize };

4
app/styles/components/modal.scss
Wyświetl plik

@ -304,7 +304,7 @@
li:not(:empty) {
a,
button {
@apply flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 no-underline hover:bg-gray-100 dark:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200;
@apply flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 no-underline hover:bg-gray-100 dark:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200 text-left;
&.destructive {
@apply text-danger-600;
@ -325,7 +325,7 @@
}
button[type="button"] {
@apply w-full justify-center;
@apply w-full justify-center text-center;
}
}
}

0
custom/modules/.gitkeep 100644
Wyświetl plik

5
webpack/rules/assets.js
Wyświetl plik

@ -66,7 +66,10 @@ module.exports = [{
}, {
test: /\.svg$/,
type: 'asset/resource',
include: resolve('node_modules', '@tabler'),
include: [
resolve('node_modules', '@tabler'),
resolve('custom', 'modules', '@tabler'),
],
generator: {
filename: 'packs/icons/[name]-[contenthash:8][ext]',
},

1
webpack/shared.js
Wyświetl plik

@ -141,6 +141,7 @@ module.exports = {
resolve: {
extensions: settings.extensions,
modules: [
resolve('custom', 'modules'),
resolve(settings.source_path),
'node_modules',
],