Signed-off-by: marcin mikołajczak <git@mkljczk.pl>environments/review-develop-3zknud/deployments/571^2
marcin mikołajczak
2 years ago
commit
38066799e3
@ -1,39 +0,0 @@
|
||||
/**
|
||||
* ForkAwesomeIcon: renders a ForkAwesome icon.
|
||||
* Full list: https://forkaweso.me/Fork-Awesome/icons/
|
||||
* @module soapbox/components/fork_awesome_icon
|
||||
* @see soapbox/components/icon
|
||||
*/
|
||||
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
export default class ForkAwesomeIcon extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
className: PropTypes.string,
|
||||
fixedWidth: PropTypes.bool,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { id, className, fixedWidth, ...other } = this.props;
|
||||
|
||||
// Use the Fork Awesome retweet icon, but change its alt
|
||||
// tag. There is a common adblocker rule which hides elements with
|
||||
// alt='retweet' unless the domain is twitter.com. This should
|
||||
// change what screenreaders call it as well.
|
||||
const alt = (id === 'retweet') ? 'repost' : id;
|
||||
|
||||
return (
|
||||
<i
|
||||
role='img'
|
||||
alt={alt}
|
||||
className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
|
||||
{...other}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
/**
|
||||
* ForkAwesomeIcon: renders a ForkAwesome icon.
|
||||
* Full list: https://forkaweso.me/Fork-Awesome/icons/
|
||||
* @module soapbox/components/fork_awesome_icon
|
||||
* @see soapbox/components/icon
|
||||
*/
|
||||
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
|
||||
export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
|
||||
id: string,
|
||||
className?: string,
|
||||
fixedWidth?: boolean,
|
||||
}
|
||||
|
||||
const ForkAwesomeIcon: React.FC<IForkAwesomeIcon> = ({ id, className, fixedWidth, ...rest }) => {
|
||||
// Use the Fork Awesome retweet icon, but change its alt
|
||||
// tag. There is a common adblocker rule which hides elements with
|
||||
// alt='retweet' unless the domain is twitter.com. This should
|
||||
// change what screenreaders call it as well.
|
||||
// const alt = (id === 'retweet') ? 'repost' : id;
|
||||
|
||||
return (
|
||||
<i
|
||||
role='img'
|
||||
// alt={alt}
|
||||
className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForkAwesomeIcon;
|
||||
@ -1,33 +0,0 @@
|
||||
/**
|
||||
* Icon: abstract icon class that can render icons from multiple sets.
|
||||
* @module soapbox/components/icon
|
||||
* @see soapbox/components/fork_awesome_icon
|
||||
* @see soapbox/components/svg_icon
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import ForkAwesomeIcon from './fork_awesome_icon';
|
||||
import SvgIcon from './svg_icon';
|
||||
|
||||
export default class Icon extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
id: PropTypes.string,
|
||||
src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
className: PropTypes.string,
|
||||
fixedWidth: PropTypes.bool,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { id, src, fixedWidth, ...rest } = this.props;
|
||||
|
||||
if (src) {
|
||||
return <SvgIcon src={src} {...rest} />;
|
||||
} else {
|
||||
return <ForkAwesomeIcon id={id} fixedWidth={fixedWidth} {...rest} />;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Icon: abstract icon class that can render icons from multiple sets.
|
||||
* @module soapbox/components/icon
|
||||
* @see soapbox/components/fork_awesome_icon
|
||||
* @see soapbox/components/svg_icon
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import ForkAwesomeIcon, { IForkAwesomeIcon } from './fork_awesome_icon';
|
||||
import SvgIcon, { ISvgIcon } from './svg_icon';
|
||||
|
||||
export type IIcon = IForkAwesomeIcon | ISvgIcon;
|
||||
|
||||
const Icon: React.FC<IIcon> = (props) => {
|
||||
if ((props as ISvgIcon).src) {
|
||||
const { src, ...rest } = (props as ISvgIcon);
|
||||
|
||||
return <SvgIcon src={src} {...rest} />;
|
||||
} else {
|
||||
const { id, fixedWidth, ...rest } = (props as IForkAwesomeIcon);
|
||||
|
||||
return <ForkAwesomeIcon id={id} fixedWidth={fixedWidth} {...rest} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
@ -1,105 +0,0 @@
|
||||
import throttle from 'lodash/throttle';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
|
||||
import { CardHeader, CardTitle } from './ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
back: { id: 'column_back_button.label', defaultMessage: 'Back' },
|
||||
settings: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch, { settings: Settings }) => {
|
||||
return {
|
||||
onOpenSettings() {
|
||||
dispatch(openModal('COMPONENT', { component: Settings }));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(undefined, mapDispatchToProps)
|
||||
@injectIntl
|
||||
@withRouter
|
||||
class SubNavigation extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
message: PropTypes.string,
|
||||
settings: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
||||
onOpenSettings: PropTypes.func.isRequired,
|
||||
history: PropTypes.object,
|
||||
}
|
||||
|
||||
state = {
|
||||
scrolled: false,
|
||||
}
|
||||
|
||||
handleBackClick = () => {
|
||||
if (window.history && window.history.length === 1) {
|
||||
this.props.history.push('/');
|
||||
} else {
|
||||
this.props.history.goBack();
|
||||
}
|
||||
}
|
||||
|
||||
handleBackKeyUp = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.handleClick();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.attachScrollListener();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.detachScrollListener();
|
||||
}
|
||||
|
||||
attachScrollListener() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
detachScrollListener() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
handleScroll = throttle(() => {
|
||||
if (this.node) {
|
||||
const { offsetTop } = this.node;
|
||||
|
||||
if (offsetTop > 0) {
|
||||
this.setState({ scrolled: true });
|
||||
} else {
|
||||
this.setState({ scrolled: false });
|
||||
}
|
||||
}
|
||||
}, 150, { trailing: true });
|
||||
|
||||
handleOpenSettings = () => {
|
||||
this.props.onOpenSettings();
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, message } = this.props;
|
||||
|
||||
return (
|
||||
<CardHeader
|
||||
aria-label={intl.formatMessage(messages.back)}
|
||||
onBackClick={this.handleBackClick}
|
||||
>
|
||||
<CardTitle title={message} />
|
||||
</CardHeader>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
// import throttle from 'lodash/throttle';
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
// import { connect } from 'react-redux';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
// import { openModal } from 'soapbox/actions/modals';
|
||||
// import { useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
import { CardHeader, CardTitle } from './ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
back: { id: 'column_back_button.label', defaultMessage: 'Back' },
|
||||
settings: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
|
||||
});
|
||||
|
||||
interface ISubNavigation {
|
||||
message: String,
|
||||
settings?: React.ComponentType,
|
||||
}
|
||||
|
||||
const SubNavigation: React.FC<ISubNavigation> = ({ message }) => {
|
||||
const intl = useIntl();
|
||||
// const dispatch = useAppDispatch();
|
||||
const history = useHistory();
|
||||
|
||||
// const ref = useRef(null);
|
||||
|
||||
// const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
// const onOpenSettings = () => {
|
||||
// dispatch(openModal('COMPONENT', { component: Settings }));
|
||||
// };
|
||||
|
||||
const handleBackClick = () => {
|
||||
if (window.history && window.history.length === 1) {
|
||||
history.push('/');
|
||||
} else {
|
||||
history.goBack();
|
||||
}
|
||||
};
|
||||
|
||||
// const handleBackKeyUp = (e) => {
|
||||
// if (e.key === 'Enter') {
|
||||
// handleClick();
|
||||
// }
|
||||
// }
|
||||
|
||||
// const handleOpenSettings = () => {
|
||||
// onOpenSettings();
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// const handleScroll = throttle(() => {
|
||||
// if (this.node) {
|
||||
// const { offsetTop } = this.node;
|
||||
|
||||
// if (offsetTop > 0) {
|
||||
// setScrolled(true);
|
||||
// } else {
|
||||
// setScrolled(false);
|
||||
// }
|
||||
// }
|
||||
// }, 150, { trailing: true });
|
||||
|
||||
// window.addEventListener('scroll', handleScroll);
|
||||
|
||||
// return () => {
|
||||
// window.removeEventListener('scroll', handleScroll);
|
||||
// };
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<CardHeader
|
||||
aria-label={intl.formatMessage(messages.back)}
|
||||
onBackClick={handleBackClick}
|
||||
>
|
||||
<CardTitle title={message} />
|
||||
</CardHeader>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubNavigation;
|
||||
@ -1,33 +0,0 @@
|
||||
/**
|
||||
* SvgIcon: abstact component to render SVG icons.
|
||||
* @module soapbox/components/svg_icon
|
||||
* @see soapbox/components/icon
|
||||
*/
|
||||
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
|
||||
|
||||
export default class SvgIcon extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
|
||||
alt: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { src, className, alt, ...other } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('svg-icon', className)}
|
||||
{...other}
|
||||
>
|
||||
<InlineSVG src={src} title={alt} loader={<></>} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* SvgIcon: abstact component to render SVG icons.
|
||||
* @module soapbox/components/svg_icon
|
||||
* @see soapbox/components/icon
|
||||
*/
|
||||
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
|
||||
|
||||
export interface ISvgIcon extends React.HTMLAttributes<HTMLDivElement> {
|
||||
src: string,
|
||||
id?: string,
|
||||
alt?: string,
|
||||
className?: string,
|
||||
}
|
||||
|
||||
const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, className, ...rest }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames('svg-icon', className)}
|
||||
{...rest}
|
||||
>
|
||||
<InlineSVG src={src} title={alt} loader={<></>} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SvgIcon;
|
||||
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
import { COUNTRY_CODES, CountryCode } from 'soapbox/utils/phone';
|
||||
|
||||
interface ICountryCodeDropdown {
|
||||
countryCode: CountryCode,
|
||||
onChange(countryCode: CountryCode): void,
|
||||
}
|
||||
|
||||
/** Dropdown menu to select a country code. */
|
||||
const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onChange }) => {
|
||||
return (
|
||||
<select
|
||||
value={countryCode}
|
||||
className='h-full py-0 pl-3 pr-7 text-base bg-transparent border-transparent focus:outline-none focus:ring-primary-500 dark:text-white sm:text-sm rounded-md'
|
||||
onChange={(event) => onChange(event.target.value as any)}
|
||||
>
|
||||
{COUNTRY_CODES.map((code) => (
|
||||
<option value={code} key={code}>+{code}</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
};
|
||||
|
||||
export default CountryCodeDropdown;
|
||||
@ -0,0 +1,81 @@
|
||||
import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import { CountryCode } from 'soapbox/utils/phone';
|
||||
|
||||
import Input from '../input/input';
|
||||
|
||||
import CountryCodeDropdown from './country-code-dropdown';
|
||||
|
||||
interface IPhoneInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'required' | 'autoFocus'> {
|
||||
/** E164 phone number. */
|
||||
value?: string,
|
||||
/** Change handler which receives the E164 phone string. */
|
||||
onChange?: (phone: string | undefined) => void,
|
||||
/** Country code that's selected on mount. */
|
||||
defaultCountryCode?: CountryCode,
|
||||
}
|
||||
|
||||
/** Internationalized phone input with country code picker. */
|
||||
const PhoneInput: React.FC<IPhoneInput> = (props) => {
|
||||
const { value, onChange, defaultCountryCode = '1', ...rest } = props;
|
||||
|
||||
const [countryCode, setCountryCode] = useState<CountryCode>(defaultCountryCode);
|
||||
const [nationalNumber, setNationalNumber] = useState<string>('');
|
||||
|
||||
const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
|
||||
// HACK: AsYouType is not meant to be used this way. But it works!
|
||||
const asYouType = new AsYouType({ defaultCallingCode: countryCode });
|
||||
const formatted = asYouType.input(target.value);
|
||||
|
||||
// If the new value is the same as before, we might be backspacing,
|
||||
// so use the actual event value instead of the formatted value.
|
||||
if (formatted === nationalNumber && target.value !== nationalNumber) {
|
||||
setNationalNumber(target.value);
|
||||
} else {
|
||||
setNationalNumber(formatted);
|
||||
}
|
||||
};
|
||||
|
||||
// When the internal state changes, update the external state.
|
||||
useEffect(() => {
|
||||
if (onChange) {
|
||||
try {
|
||||
const opts = { defaultCallingCode: countryCode, extract: false } as any;
|
||||
const result = parsePhoneNumber(nationalNumber, opts);
|
||||
|
||||
// Throw if the number is invalid, but catch it below.
|
||||
// We'll only ever call `onChange` with a valid E164 string or `undefined`.
|
||||
if (!result.isPossible()) {
|
||||
throw result;
|
||||
}
|
||||
|
||||
onChange(result.format('E.164'));
|
||||
} catch (e) {
|
||||
// The value returned is always a valid E164 string.
|
||||
// If it's not valid, it'll return undefined.
|
||||
onChange(undefined);
|
||||
}
|
||||
}
|
||||
}, [countryCode, nationalNumber]);
|
||||
|
||||
useEffect(() => {
|
||||
handleChange({ target: { value: nationalNumber } } as any);
|
||||
}, [countryCode, nationalNumber]);
|
||||
|
||||
return (
|
||||
<Input
|
||||
onChange={handleChange}
|
||||
value={nationalNumber}
|
||||
addon={
|
||||
<CountryCodeDropdown
|
||||
countryCode={countryCode}
|
||||
onChange={setCountryCode}
|
||||
/>
|
||||
}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default PhoneInput;
|
||||
@ -1,231 +0,0 @@
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { createApp } from 'soapbox/actions/apps';
|
||||
import { obtainOAuthToken } from 'soapbox/actions/oauth';
|
||||
import { Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui';
|
||||
import Column from 'soapbox/features/ui/components/column';
|
||||
import { getBaseURL } from 'soapbox/utils/accounts';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.app_create', defaultMessage: 'Create app' },
|
||||
namePlaceholder: { id: 'app_create.name_placeholder', defaultMessage: 'e.g. \'Soapbox\'' },
|
||||
scopesPlaceholder: { id: 'app_create.scopes_placeholder', defaultMessage: 'e.g. \'read write follow\'' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const me = state.get('me');
|
||||
const account = state.getIn(['accounts', me]);
|
||||
|
||||
const instance = state.get('instance');
|
||||
const features = getFeatures(instance);
|
||||
|
||||
return {
|
||||
account,
|
||||
defaultScopes: features.scopes,
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class CreateApp extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
account: ImmutablePropTypes.record.isRequired,
|
||||
defaultScopes: PropTypes.string,
|
||||
}
|
||||
|
||||
initialState = () => {
|
||||
return {
|
||||
params: ImmutableMap({
|
||||
client_name: '',
|
||||
redirect_uris: 'urn:ietf:wg:oauth:2.0:oob',
|
||||
scopes: '',
|
||||
website: '',
|
||||
}),
|
||||
app: null,
|
||||
token: null,
|
||||
isLoading: false,
|
||||
};
|
||||
}
|
||||
|
||||
state = this.initialState()
|
||||
|
||||
handleCreateApp = () => {
|
||||
const { dispatch, account } = this.props;
|
||||
const { params } = this.state;
|
||||
const baseURL = getBaseURL(account);
|
||||
|
||||
return dispatch(createApp(params.toJS(), baseURL))
|
||||
.then(app => this.setState({ app }));
|
||||
}
|
||||
|
||||
handleCreateToken = () => {
|
||||
const { dispatch, account } = this.props;
|
||||
const { app, params: appParams } = this.state;
|
||||
const baseURL = getBaseURL(account);
|
||||
|
||||
const tokenParams = {
|
||||
client_id: app.client_id,
|
||||
client_secret: app.client_secret,
|
||||
redirect_uri: appParams.get('redirect_uri'),
|
||||
grant_type: 'client_credentials',
|
||||
scope: appParams.get('scopes'),
|
||||
};
|
||||
|
||||
return dispatch(obtainOAuthToken(tokenParams, baseURL))
|
||||
.then(token => this.setState({ token }));
|
||||
}
|
||||
|
||||
handleSubmit = e => {
|
||||
this.setState({ isLoading: true });
|
||||
|
||||
this.handleCreateApp()
|
||||
.then(this.handleCreateToken)
|
||||
.then(() => {
|
||||
this.scrollToTop();
|
||||
this.setState({ isLoading: false });
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
this.setState({ isLoading: false });
|
||||
});
|
||||
}
|
||||
|
||||
setParam = (key, value) => {
|
||||
const { params } = this.state;
|
||||
const newParams = params.set(key, value);
|
||||
|
||||
this.setState({ params: newParams });
|
||||
}
|
||||
|
||||
handleParamChange = key => {
|
||||
return e => {
|
||||
this.setParam(key, e.target.value);
|
||||
};
|
||||
}
|
||||
|
||||
resetState = () => {
|
||||
this.setState(this.initialState());
|
||||
}
|
||||
|
||||
handleReset = e => {
|
||||
this.resetState();
|
||||
this.scrollToTop();
|
||||
}
|
||||
|
||||
scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
renderResults = () => {
|
||||
const { intl } = this.props;
|
||||
const { app, token } = this.state;
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
|
||||
<Form>
|
||||
<Stack>
|
||||
<Text size='lg' weight='medium'>
|
||||
<FormattedMessage id='app_create.results.explanation_title' defaultMessage='App created successfully' />
|
||||
</Text>
|
||||
<Text theme='muted'>
|
||||
<FormattedMessage
|
||||
id='app_create.results.explanation_text'
|
||||
defaultMessage='You created a new app and token! Please copy the credentials somewhere; you will not see them again after navigating away from this page.'
|
||||
/>
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.results.app_label' defaultMessage='App' />}>
|
||||
<Textarea
|
||||
value={JSON.stringify(app, null, 2)}
|
||||
rows={10}
|
||||
readOnly
|
||||
isCodeEditor
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.results.token_label' defaultMessage='OAuth token' />}>
|
||||
<Textarea
|
||||
value={JSON.stringify(token, null, 2)}
|
||||
rows={10}
|
||||
readOnly
|
||||
isCodeEditor
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormActions>
|
||||
<Button theme='primary' type='button' onClick={this.handleReset}>
|
||||
<FormattedMessage id='app_create.restart' defaultMessage='Create another' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
const { params, app, token, isLoading } = this.state;
|
||||
|
||||
if (app && token) {
|
||||
return this.renderResults();
|
||||
}
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.name_label' defaultMessage='App name' />}>
|
||||
<Input
|
||||
placeholder={intl.formatMessage(messages.namePlaceholder)}
|
||||
onChange={this.handleParamChange('client_name')}
|
||||
value={params.get('client_name')}
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.website_label' defaultMessage='Website' />}>
|
||||
<Input
|
||||
placeholder='https://soapbox.pub'
|
||||
onChange={this.handleParamChange('website')}
|
||||
value={params.get('website')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.redirect_uri_label' defaultMessage='Redirect URIs' />}>
|
||||
<Input
|
||||
placeholder='https://example.com'
|
||||
onChange={this.handleParamChange('redirect_uris')}
|
||||
value={params.get('redirect_uris')}
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.scopes_label' defaultMessage='Scopes' />}>
|
||||
<Input
|
||||
placeholder={intl.formatMessage(messages.scopesPlaceholder)}
|
||||
onChange={this.handleParamChange('scopes')}
|
||||
value={params.get('scopes')}
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormActions>
|
||||
<Button theme='primary' type='submit' disabled={isLoading}>
|
||||
<FormattedMessage id='app_create.submit' defaultMessage='Create app' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,201 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
|
||||
|
||||
import { createApp } from 'soapbox/actions/apps';
|
||||
import { obtainOAuthToken } from 'soapbox/actions/oauth';
|
||||
import { Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui';
|
||||
import Column from 'soapbox/features/ui/components/column';
|
||||
import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
|
||||
import { getBaseURL } from 'soapbox/utils/accounts';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.app_create', defaultMessage: 'Create app' },
|
||||
namePlaceholder: { id: 'app_create.name_placeholder', defaultMessage: 'e.g. \'Soapbox\'' },
|
||||
scopesPlaceholder: { id: 'app_create.scopes_placeholder', defaultMessage: 'e.g. \'read write follow\'' },
|
||||
});
|
||||
|
||||
const BLANK_PARAMS = {
|
||||
client_name: '',
|
||||
redirect_uris: 'urn:ietf:wg:oauth:2.0:oob',
|
||||
scopes: '',
|
||||
website: '',
|
||||
};
|
||||
|
||||
type Params = typeof BLANK_PARAMS;
|
||||
|
||||
const CreateApp: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const account = useOwnAccount();
|
||||
|
||||
const [app, setApp] = useState<Record<string, any> | null>(null);
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [params, setParams] = useState<Params>(BLANK_PARAMS);
|
||||
|
||||
const handleCreateApp = () => {
|
||||
const baseURL = getBaseURL(account!);
|
||||
|
||||
return dispatch(createApp(params, baseURL))
|
||||
.then(app => {
|
||||
setApp(app);
|
||||
return app;
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateToken = (app: Record<string, string>) => {
|
||||
const baseURL = getBaseURL(account!);
|
||||
|
||||
const tokenParams = {
|
||||
client_id: app!.client_id,
|
||||
client_secret: app!.client_secret,
|
||||
redirect_uri: params.redirect_uris,
|
||||
grant_type: 'client_credentials',
|
||||
scope: params.scopes,
|
||||
};
|
||||
|
||||
return dispatch(obtainOAuthToken(tokenParams, baseURL))
|
||||
.then(setToken);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
setLoading(true);
|
||||
|
||||
handleCreateApp()
|
||||
.then(handleCreateToken)
|
||||
.then(() => {
|
||||
scrollToTop();
|
||||
setLoading(false);
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const setParam = (key: string, value: string) => {
|
||||
setParams({ ...params, [key]: value });
|
||||
};
|
||||
|
||||
const handleParamChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {
|
||||
return e => {
|
||||
setParam(key, e.target.value);
|
||||
};
|
||||
};
|
||||
|
||||
const resetState = () => {
|
||||
setApp(null);
|
||||
setToken(null);
|
||||
setLoading(false);
|
||||
setParams(BLANK_PARAMS);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
resetState();
|
||||
scrollToTop();
|
||||
};
|
||||
|
||||
const scrollToTop = (): void => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const renderResults = () => {
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
|
||||
<Form>
|
||||
<Stack>
|
||||
<Text size='lg' weight='medium'>
|
||||
<FormattedMessage id='app_create.results.explanation_title' defaultMessage='App created successfully' />
|
||||
</Text>
|
||||
<Text theme='muted'>
|
||||
<FormattedMessage
|
||||
id='app_create.results.explanation_text'
|
||||
defaultMessage='You created a new app and token! Please copy the credentials somewhere; you will not see them again after navigating away from this page.'
|
||||
/>
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.results.app_label' defaultMessage='App' />}>
|
||||
<Textarea
|
||||
value={JSON.stringify(app, null, 2)}
|
||||
rows={10}
|
||||
readOnly
|
||||
isCodeEditor
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.results.token_label' defaultMessage='OAuth token' />}>
|
||||
<Textarea
|
||||
value={JSON.stringify(token, null, 2)}
|
||||
rows={10}
|
||||
readOnly
|
||||
isCodeEditor
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormActions>
|
||||
<Button theme='primary' type='button' onClick={handleReset}>
|
||||
<FormattedMessage id='app_create.restart' defaultMessage='Create another' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
if (app && token) {
|
||||
return renderResults();
|
||||
}
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.name_label' defaultMessage='App name' />}>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder={intl.formatMessage(messages.namePlaceholder)}
|
||||
onChange={handleParamChange('client_name')}
|
||||
value={params.client_name}
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.website_label' defaultMessage='Website' />}>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder='https://soapbox.pub'
|
||||
onChange={handleParamChange('website')}
|
||||
value={params.website}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.redirect_uri_label' defaultMessage='Redirect URIs' />}>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder='https://example.com'
|
||||
onChange={handleParamChange('redirect_uris')}
|
||||
value={params.redirect_uris}
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup labelText={<FormattedMessage id='app_create.scopes_label' defaultMessage='Scopes' />}>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder={intl.formatMessage(messages.scopesPlaceholder)}
|
||||
onChange={handleParamChange('scopes')}
|
||||
value={params.scopes}
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormActions>
|
||||
<Button theme='primary' type='submit' disabled={isLoading}>
|
||||
<FormattedMessage id='app_create.submit' defaultMessage='Create app' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateApp;
|
||||
@ -0,0 +1,153 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
|
||||
|
||||
import { showAlertForError } from 'soapbox/actions/alerts';
|
||||
import { patchMe } from 'soapbox/actions/me';
|
||||
import { FE_NAME, SETTINGS_UPDATE, changeSetting } from 'soapbox/actions/settings';
|
||||
import List, { ListItem } from 'soapbox/components/list';
|
||||
import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Column,
|
||||
Button,
|
||||
Form,
|
||||
FormActions,
|
||||
FormGroup,
|
||||
Textarea,
|
||||
} from 'soapbox/components/ui';
|
||||
import SettingToggle from 'soapbox/features/notifications/components/setting_toggle';
|
||||
import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
|
||||
|
||||
const isJSONValid = (text: any): boolean => {
|
||||
try {
|
||||
JSON.parse(text);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.settings_store', defaultMessage: 'Settings store' },
|
||||
hint: { id: 'developers.settings_store.hint', defaultMessage: 'It is possible to directly edit your user settings here. BE CAREFUL! Editing this section can break your account, and you will only be able to recover through the API.' },
|
||||
});
|
||||
|
||||
const SettingsStore: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const settings = useSettings();
|
||||
const settingsStore = useAppSelector(state => state.get('settings'));
|
||||
|
||||
const [rawJSON, setRawJSON] = useState<string>(JSON.stringify(settingsStore, null, 2));
|
||||
const [jsonValid, setJsonValid] = useState(true);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
const handleEditJSON: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
|
||||
const rawJSON = target.value;
|
||||
setRawJSON(rawJSON);
|
||||
setJsonValid(isJSONValid(rawJSON));
|
||||
};
|
||||
|
||||
const onToggleChange = (key: string[], checked: boolean) => {
|
||||
dispatch(changeSetting(key, checked, { showAlert: true }));
|
||||
};
|
||||
|
||||
const handleSubmit: React.FormEventHandler = e => {
|
||||
const settings = JSON.parse(rawJSON);
|
||||
|
||||
setLoading(true);
|
||||
dispatch(patchMe({
|
||||
pleroma_settings_store: {
|
||||
[FE_NAME]: settings,
|
||||
},
|
||||
})).then(response => {
|
||||
dispatch({ type: SETTINGS_UPDATE, settings });
|
||||
setLoading(false);
|
||||
}).catch(error => {
|
||||
dispatch(showAlertForError(error));
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setRawJSON(JSON.stringify(settingsStore, null, 2));
|
||||
setJsonValid(true);
|
||||
}, [settingsStore]);
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<FormGroup
|
||||
hintText={intl.formatMessage(messages.hint)}
|
||||
errors={jsonValid ? [] : ['is invalid']}
|
||||
>
|
||||
<Textarea
|
||||
value={rawJSON}
|
||||
onChange={handleEditJSON}
|
||||
disabled={isLoading}
|
||||
rows={12}
|
||||
isCodeEditor
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormActions>
|
||||
<Button theme='primary' type='submit' disabled={!jsonValid || isLoading}>
|
||||
<FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle title='Advanced settings' />
|
||||
</CardHeader>
|
||||
|
||||
<List>
|
||||
<ListItem label={<FormattedMessage id='preferences.notifications.advanced' defaultMessage='Show all notification categories' />}>
|
||||
<SettingToggle settings={settings} settingPath={['notifications', 'quickFilter', 'advanced']} onChange={onToggleChange} />
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={<FormattedMessage id='preferences.fields.unfollow_modal_label' defaultMessage='Show confirmation dialog before unfollowing someone' />}>
|
||||
<SettingToggle settings={settings} settingPath={['unfollowModal']} onChange={onToggleChange} />
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={<FormattedMessage id='preferences.fields.missing_description_modal_label' defaultMessage='Show confirmation dialog before sending a post without media descriptions' />}>
|
||||
<SettingToggle settings={settings} settingPath={['missingDescriptionModal']} onChange={onToggleChange} />
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={<FormattedMessage id='preferences.fields.reduce_motion_label' defaultMessage='Reduce motion in animations' />}>
|
||||
<SettingToggle settings={settings} settingPath={['reduceMotion']} onChange={onToggleChange} />
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={<FormattedMessage id='preferences.fields.underline_links_label' defaultMessage='Always underline links in posts' />}>
|
||||
<SettingToggle settings={settings} settingPath={['underlineLinks']} onChange={onToggleChange} />
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={<FormattedMessage id='preferences.fields.system_font_label' defaultMessage="Use system's default font" />}>
|
||||
<SettingToggle settings={settings} settingPath={['systemFont']} onChange={onToggleChange} />
|
||||
</ListItem>
|
||||
|
||||
<div className='dyslexic'>
|
||||
<ListItem label={<FormattedMessage id='preferences.fields.dyslexic_font_label' defaultMessage='Dyslexic mode' />}>
|
||||
<SettingToggle settings={settings} settingPath={['dyslexicFont']} onChange={onToggleChange} />
|
||||
</ListItem>
|
||||
</div>
|
||||
|
||||
{/* <ListItem
|
||||
label={<FormattedMessage id='preferences.fields.halloween_label' defaultMessage='Halloween mode' />}
|
||||
hint={<FormattedMessage id='preferences.hints.halloween' defaultMessage='Beware: SPOOKY! Supports light/dark toggle.' />}
|
||||
>
|
||||
<SettingToggle settings={settings} settingPath={['halloween']} onChange={onToggleChange} />
|
||||
</ListItem> */}
|
||||
|
||||
<ListItem
|
||||
label={<FormattedMessage id='preferences.fields.demetricator_label' defaultMessage='Use Demetricator' />}
|
||||
hint={<FormattedMessage id='preferences.hints.demetricator' defaultMessage='Decrease social media anxiety by hiding all numbers from the site.' />}
|
||||
>
|
||||
<SettingToggle settings={settings} settingPath={['demetricator']} onChange={onToggleChange} />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsStore;
|
||||
@ -1,116 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { showAlertForError } from 'soapbox/actions/alerts';
|
||||
import { patchMe } from 'soapbox/actions/me';
|
||||
import { FE_NAME, SETTINGS_UPDATE } from 'soapbox/actions/settings';
|
||||
import { Button, Form, FormActions, FormGroup, Textarea } from 'soapbox/components/ui';
|
||||
import Column from 'soapbox/features/ui/components/column';
|
||||
|
||||
const isJSONValid = text => {
|
||||
try {
|
||||
JSON.parse(text);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.settings_store', defaultMessage: 'Settings store' },
|
||||
hint: { id: 'developers.settings_store.hint', defaultMessage: 'It is possible to directly edit your user settings here. BE CAREFUL! Editing this section can break your account, and you will only be able to recover through the API.' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
settingsStore: state.get('settings'),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class SettingsStore extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
settingsStore: ImmutablePropTypes.map.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
rawJSON: JSON.stringify(this.props.settingsStore, null, 2),
|
||||
jsonValid: true,
|
||||
isLoading: false,
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { settingsStore } = this.props;
|
||||
|
||||
if (settingsStore !== prevProps.settingsStore) {
|
||||
this.setState({
|
||||
rawJSON: JSON.stringify(settingsStore, null, 2),
|
||||
jsonValid: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleEditJSON = ({ target }) => {
|
||||
const rawJSON = target.value;
|
||||
this.setState({ rawJSON, jsonValid: isJSONValid(rawJSON) });
|
||||
}
|
||||
|
||||
handleSubmit = e => {
|
||||
const { dispatch } = this.props;
|
||||
const { rawJSON } = this.state;
|
||||
|
||||
const settings = JSON.parse(rawJSON);
|
||||
|
||||
this.setState({ isLoading: true });
|
||||
dispatch(patchMe({
|
||||
pleroma_settings_store: {
|
||||
[FE_NAME]: settings,
|
||||
},
|
||||
})).then(response => {
|
||||
dispatch({ type: SETTINGS_UPDATE, settings });
|
||||
this.setState({ isLoading: false });
|
||||
}).catch(error => {
|
||||
dispatch(showAlertForError(error));
|
||||
this.setState({ isLoading: false });
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
const { rawJSON, jsonValid, isLoading } = this.state;
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)} backHref='/developers'>
|
||||
<Form onSubmit={this.handleSubmit}>
|
||||
<FormGroup
|
||||
hintText={intl.formatMessage(messages.hint)}
|
||||
errors={jsonValid ? [] : ['is invalid']}
|
||||
>
|
||||
<Textarea
|
||||
value={rawJSON}
|
||||
onChange={this.handleEditJSON}
|
||||
disabled={isLoading}
|
||||
rows={12}
|
||||
isCodeEditor
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormActions>
|
||||
<Button theme='primary' type='submit' disabled={!jsonValid || isLoading}>
|
||||
<FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
||||
export default class ClearColumnButton extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onClick: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><Icon src={require('@tabler/icons/eraser.svg')} /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
||||
interface IClearColumnButton {
|
||||
onClick: React.MouseEventHandler<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
const ClearColumnButton: React.FC<IClearColumnButton> = ({ onClick }) => (
|
||||
<button className='text-btn column-header__setting-btn' tabIndex={0} onClick={onClick}>
|
||||
<Icon src={require('@tabler/icons/eraser.svg')} />
|
||||
{' '}
|
||||
<FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' />
|
||||
</button>
|
||||
);
|
||||
|
||||
export default ClearColumnButton;
|
||||
@ -1,106 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { Tabs } from 'soapbox/components/ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
all: { id: 'notifications.filter.all', defaultMessage: 'All' },
|
||||
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
|
||||
favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Likes' },
|
||||
boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Reposts' },
|
||||
polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
|
||||
follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
|
||||
moves: { id: 'notifications.filter.moves', defaultMessage: 'Moves' },
|
||||
emoji_reacts: { id: 'notifications.filter.emoji_reacts', defaultMessage: 'Emoji reacts' },
|
||||
statuses: { id: 'notifications.filter.statuses', defaultMessage: 'Updates from people you follow' },
|
||||
});
|
||||
|
||||
export default @injectIntl
|
||||
class NotificationFilterBar extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
selectFilter: PropTypes.func.isRequired,
|
||||
selectedFilter: PropTypes.string.isRequired,
|
||||
advancedMode: PropTypes.bool.isRequired,
|
||||
supportsEmojiReacts: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
onClick(notificationType) {
|
||||
return () => this.props.selectFilter(notificationType);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { selectedFilter, advancedMode, supportsEmojiReacts, intl } = this.props;
|
||||
|
||||
const items = [
|
||||
{
|
||||
text: intl.formatMessage(messages.all),
|
||||
action: this.onClick('all'),
|
||||
name: 'all',
|
||||
},
|
||||
];
|
||||
|
||||
if (!advancedMode) {
|
||||
items.push({
|
||||
text: intl.formatMessage(messages.mentions),
|
||||
action: this.onClick('mention'),
|
||||
name: 'mention',
|
||||
});
|
||||
} else {
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/at.svg')} />,
|
||||
title: intl.formatMessage(messages.mentions),
|
||||
action: this.onClick('mention'),
|
||||
name: 'mention',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/heart.svg')} />,
|
||||
title: intl.formatMessage(messages.favourites),
|
||||
action: this.onClick('favourite'),
|
||||
name: 'favourite',
|
||||
});
|
||||
if (supportsEmojiReacts) items.push({
|
||||
text: <Icon src={require('@tabler/icons/mood-smile.svg')} />,
|
||||
title: intl.formatMessage(messages.emoji_reacts),
|
||||
action: this.onClick('pleroma:emoji_reaction'),
|
||||
name: 'pleroma:emoji_reaction',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('feather-icons/dist/icons/repeat.svg')} />,
|
||||
title: intl.formatMessage(messages.boosts),
|
||||
action: this.onClick('reblog'),
|
||||
name: 'reblog',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/chart-bar.svg')} />,
|
||||
title: intl.formatMessage(messages.polls),
|
||||
action: this.onClick('poll'),
|
||||
name: 'poll',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/bell-ringing.svg')} />,
|
||||
title: intl.formatMessage(messages.statuses),
|
||||
action: this.onClick('status'),
|
||||
name: 'status',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/user-plus.svg')} />,
|
||||
title: intl.formatMessage(messages.follows),
|
||||
action: this.onClick('follow'),
|
||||
name: 'follow',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('feather-icons/dist/icons/briefcase.svg')} />,
|
||||
title: intl.formatMessage(messages.moves),
|
||||
action: this.onClick('move'),
|
||||
name: 'move',
|
||||
});
|
||||
}
|
||||
|
||||
return <Tabs items={items} activeItem={selectedFilter} />;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { setFilter } from 'soapbox/actions/notifications';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { Tabs } from 'soapbox/components/ui';
|
||||
import { useAppDispatch, useFeatures, useSettings } from 'soapbox/hooks';
|
||||
|
||||
import type { Item } from 'soapbox/components/ui/tabs/tabs';
|
||||
|
||||
const messages = defineMessages({
|
||||
all: { id: 'notifications.filter.all', defaultMessage: 'All' },
|
||||
mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
|
||||
favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Likes' },
|
||||
boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Reposts' },
|
||||
polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
|
||||
follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
|
||||
moves: { id: 'notifications.filter.moves', defaultMessage: 'Moves' },
|
||||
emoji_reacts: { id: 'notifications.filter.emoji_reacts', defaultMessage: 'Emoji reacts' },
|
||||
statuses: { id: 'notifications.filter.statuses', defaultMessage: 'Updates from people you follow' },
|
||||
});
|
||||
|
||||
const NotificationFilterBar = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const settings = useSettings();
|
||||
const features = useFeatures();
|
||||
|
||||
const selectedFilter = settings.getIn(['notifications', 'quickFilter', 'active']) as string;
|
||||
const advancedMode = settings.getIn(['notifications', 'quickFilter', 'advanced']);
|
||||
|
||||
const onClick = (notificationType: string) => () => dispatch(setFilter(notificationType));
|
||||
|
||||
const items: Item[] = [
|
||||
{
|
||||
text: intl.formatMessage(messages.all),
|
||||
action: onClick('all'),
|
||||
name: 'all',
|
||||
},
|
||||
];
|
||||
|
||||
if (!advancedMode) {
|
||||
items.push({
|
||||
text: intl.formatMessage(messages.mentions),
|
||||
action: onClick('mention'),
|
||||
name: 'mention',
|
||||
});
|
||||
} else {
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/at.svg')} />,
|
||||
title: intl.formatMessage(messages.mentions),
|
||||
action: onClick('mention'),
|
||||
name: 'mention',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/heart.svg')} />,
|
||||
title: intl.formatMessage(messages.favourites),
|
||||
action: onClick('favourite'),
|
||||
name: 'favourite',
|
||||
});
|
||||
if (features.emojiReacts) items.push({
|
||||
text: <Icon src={require('@tabler/icons/mood-smile.svg')} />,
|
||||
title: intl.formatMessage(messages.emoji_reacts),
|
||||
action: onClick('pleroma:emoji_reaction'),
|
||||
name: 'pleroma:emoji_reaction',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('feather-icons/dist/icons/repeat.svg')} />,
|
||||
title: intl.formatMessage(messages.boosts),
|
||||
action: onClick('reblog'),
|
||||
name: 'reblog',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/chart-bar.svg')} />,
|
||||
title: intl.formatMessage(messages.polls),
|
||||
action: onClick('poll'),
|
||||
name: 'poll',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/bell-ringing.svg')} />,
|
||||
title: intl.formatMessage(messages.statuses),
|
||||
action: onClick('status'),
|
||||
name: 'status',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('@tabler/icons/user-plus.svg')} />,
|
||||
title: intl.formatMessage(messages.follows),
|
||||
action: onClick('follow'),
|
||||
name: 'follow',
|
||||
});
|
||||
items.push({
|
||||
text: <Icon src={require('feather-icons/dist/icons/briefcase.svg')} />,
|
||||
title: intl.formatMessage(messages.moves),
|
||||
action: onClick('move'),
|
||||
name: 'move',
|
||||
});
|
||||
}
|
||||
|
||||
return <Tabs items={items} activeItem={selectedFilter} />;
|
||||
};
|
||||
|
||||
export default NotificationFilterBar;
|
||||
@ -1,27 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { setFilter } from 'soapbox/actions/notifications';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
|
||||
import FilterBar from '../components/filter_bar';
|
||||
|
||||
const makeMapStateToProps = state => {
|
||||
const settings = getSettings(state);
|
||||
const instance = state.get('instance');
|
||||
const features = getFeatures(instance);
|
||||
|
||||
return {
|
||||
selectedFilter: settings.getIn(['notifications', 'quickFilter', 'active']),
|
||||
advancedMode: settings.getIn(['notifications', 'quickFilter', 'advanced']),
|
||||
supportsEmojiReacts: features.emojiReacts,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
selectFilter(newActiveFilter) {
|
||||
dispatch(setFilter(newActiveFilter));
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(makeMapStateToProps, mapDispatchToProps)(FilterBar);
|
||||
@ -1,74 +0,0 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { mentionCompose } from 'soapbox/actions/compose';
|
||||
import {
|
||||
reblog,
|
||||
favourite,
|
||||
unreblog,
|
||||
unfavourite,
|
||||
} from 'soapbox/actions/interactions';
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import {
|
||||
hideStatus,
|
||||
revealStatus,
|
||||
} from 'soapbox/actions/statuses';
|
||||
import { makeGetNotification } from 'soapbox/selectors';
|
||||
|
||||
import Notification from '../components/notification';
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getNotification = makeGetNotification();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
return {
|
||||
siteTitle: state.getIn(['instance', 'title']),
|
||||
notification: getNotification(state, props.notification),
|
||||
};
|
||||
};
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onMention: (account) => {
|
||||
dispatch(mentionCompose(account));
|
||||
},
|
||||
|
||||
onModalReblog(status) {
|
||||
dispatch(reblog(status));
|
||||
},
|
||||
|
||||
onReblog(status, e) {
|
||||
dispatch((_, getState) => {
|
||||
const boostModal = getSettings(getState()).get('boostModal');
|
||||
if (status.get('reblogged')) {
|
||||
dispatch(unreblog(status));
|
||||
} else {
|
||||
if (e.shiftKey || !boostModal) {
|
||||
this.onModalReblog(status);
|
||||
} else {
|
||||
dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onFavourite(status) {
|
||||
if (status.get('favourited')) {
|
||||
dispatch(unfavourite(status));
|
||||
} else {
|
||||
dispatch(favourite(status));
|
||||
}
|
||||
},
|
||||
|
||||
onToggleHidden(status) {
|
||||
if (status.get('hidden')) {
|
||||
dispatch(revealStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(hideStatus(status.get('id')));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(makeMapStateToProps, mapDispatchToProps)(Notification);
|
||||
@ -1,213 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import debounce from 'lodash/debounce';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import {
|
||||
expandNotifications,
|
||||
scrollTopNotifications,
|
||||
dequeueNotifications,
|
||||
} from 'soapbox/actions/notifications';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import ScrollTopButton from 'soapbox/components/scroll-top-button';
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import { Column } from 'soapbox/components/ui';
|
||||
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
|
||||
|
||||
import FilterBarContainer from './containers/filter_bar_container';
|
||||
import NotificationContainer from './containers/notification_container';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
|
||||
queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
|
||||
});
|
||||
|
||||
const getNotifications = createSelector([
|
||||
state => getSettings(state).getIn(['notifications', 'quickFilter', 'show']),
|
||||
state => getSettings(state).getIn(['notifications', 'quickFilter', 'active']),
|
||||
state => ImmutableList(getSettings(state).getIn(['notifications', 'shows']).filter(item => !item).keys()),
|
||||
state => state.getIn(['notifications', 'items']).toList(),
|
||||
], (showFilterBar, allowedType, excludedTypes, notifications) => {
|
||||
if (!showFilterBar || allowedType === 'all') {
|
||||
// used if user changed the notification settings after loading the notifications from the server
|
||||
// otherwise a list of notifications will come pre-filtered from the backend
|
||||
// we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
|
||||
return notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type')));
|
||||
}
|
||||
return notifications.filter(item => item !== null && allowedType === item.get('type'));
|
||||
});
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const settings = getSettings(state);
|
||||
|
||||
return {
|
||||
showFilterBar: settings.getIn(['notifications', 'quickFilter', 'show']),
|
||||
activeFilter: settings.getIn(['notifications', 'quickFilter', 'active']),
|
||||
notifications: getNotifications(state),
|
||||
isLoading: state.getIn(['notifications', 'isLoading'], true),
|
||||
isUnread: state.getIn(['notifications', 'unread']) > 0,
|
||||
hasMore: state.getIn(['notifications', 'hasMore']),
|
||||
totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class Notifications extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
notifications: ImmutablePropTypes.list.isRequired,
|
||||
showFilterBar: PropTypes.bool.isRequired,
|
||||
activeFilter: PropTypes.string,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
isLoading: PropTypes.bool,
|
||||
isUnread: PropTypes.bool,
|
||||
hasMore: PropTypes.bool,
|
||||
dequeueNotifications: PropTypes.func,
|
||||
totalQueuedNotificationsCount: PropTypes.number,
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
this.handleLoadOlder.cancel();
|
||||
this.handleScrollToTop.cancel();
|
||||
this.handleScroll.cancel();
|
||||
this.props.dispatch(scrollTopNotifications(false));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.handleDequeueNotifications();
|
||||
this.props.dispatch(scrollTopNotifications(true));
|
||||
}
|
||||
|
||||
handleLoadGap = (maxId) => {
|
||||
this.props.dispatch(expandNotifications({ maxId }));
|
||||
};
|
||||
|
||||
handleLoadOlder = debounce(() => {
|
||||
const last = this.props.notifications.last();
|
||||
this.props.dispatch(expandNotifications({ maxId: last && last.get('id') }));
|
||||
}, 300, { leading: true });
|
||||
|
||||
handleScrollToTop = debounce(() => {
|
||||
this.props.dispatch(scrollTopNotifications(true));
|
||||
}, 100);
|
||||
|
||||
handleScroll = debounce(() => {
|
||||
this.props.dispatch(scrollTopNotifications(false));
|
||||
}, 100);
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
setColumnRef = c => {
|
||||
this.column = c;
|
||||
}
|
||||
|
||||
handleMoveUp = id => {
|
||||
const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
|
||||
this._selectChild(elementIndex);
|
||||
}
|
||||
|
||||
handleMoveDown = id => {
|
||||
const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
|
||||
this._selectChild(elementIndex);
|
||||
}
|
||||
|
||||
_selectChild(index) {
|
||||
this.node.scrollIntoView({
|
||||
index,
|
||||
behavior: 'smooth',
|
||||
done: () => {
|
||||
const container = this.column;
|
||||
const element = container.querySelector(`[data-index="${index}"] .focusable`);
|
||||
|
||||
if (element) {
|
||||
element.focus();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
handleDequeueNotifications = () => {
|
||||
this.props.dispatch(dequeueNotifications());
|
||||
};
|
||||
|
||||
handleRefresh = () => {
|
||||
const { dispatch } = this.props;
|
||||
return dispatch(expandNotifications());
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount, activeFilter } = this.props;
|
||||
|
||||
const emptyMessage = activeFilter === 'all'
|
||||
? <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />
|
||||
: <FormattedMessage id='empty_column.notifications_filtered' defaultMessage="You don't have any notifications of this type yet." />;
|
||||
|
||||
let scrollableContent = null;
|
||||
|
||||
const filterBarContainer = showFilterBar
|
||||
? (<FilterBarContainer />)
|
||||
: null;
|
||||
|
||||
if (isLoading && this.scrollableContent) {
|
||||
scrollableContent = this.scrollableContent;
|
||||
} else if (notifications.size > 0 || hasMore) {
|
||||
scrollableContent = notifications.map((item, index) => (
|
||||
<NotificationContainer
|
||||
key={item.get('id')}
|
||||
notification={item}
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
/>
|
||||
));
|
||||
} else {
|
||||
scrollableContent = null;
|
||||
}
|
||||
|
||||
this.scrollableContent = scrollableContent;
|
||||
|
||||
const scrollContainer = (
|
||||
<ScrollableList
|
||||
ref={this.setRef}
|
||||
scrollKey='notifications'
|
||||
isLoading={isLoading}
|
||||
showLoading={isLoading && notifications.size === 0}
|
||||
hasMore={hasMore}
|
||||
emptyMessage={emptyMessage}
|
||||
placeholderComponent={PlaceholderNotification}
|
||||
placeholderCount={20}
|
||||
onLoadMore={this.handleLoadOlder}
|
||||
onRefresh={this.handleRefresh}
|
||||
onScrollToTop={this.handleScrollToTop}
|
||||
onScroll={this.handleScroll}
|
||||
className={classNames({
|
||||
'divide-y divide-gray-200 dark:divide-gray-600 divide-solid': notifications.size > 0,
|
||||
'space-y-2': notifications.size === 0,
|
||||
})}
|
||||
>
|
||||
{scrollableContent}
|
||||
</ScrollableList>
|
||||
);
|
||||
|
||||
return (
|
||||
<Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)} withHeader={false}>
|
||||
{filterBarContainer}
|
||||
<ScrollTopButton
|
||||
onClick={this.handleDequeueNotifications}
|
||||
count={totalQueuedNotificationsCount}
|
||||
message={messages.queue}
|
||||
/>
|
||||
{scrollContainer}
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,191 @@
|
||||
import classNames from 'classnames';
|
||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
import { createSelector } from 'reselect';
|
||||
|
||||
import {
|
||||
expandNotifications,
|
||||
scrollTopNotifications,
|
||||
dequeueNotifications,
|
||||
} from 'soapbox/actions/notifications';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import PullToRefresh from 'soapbox/components/pull-to-refresh';
|
||||
import ScrollTopButton from 'soapbox/components/scroll-top-button';
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import { Column } from 'soapbox/components/ui';
|
||||
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
|
||||
import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
|
||||
|
||||
import FilterBar from './components/filter_bar';
|
||||
import Notification from './components/notification';
|
||||
|
||||
import type { VirtuosoHandle } from 'react-virtuoso';
|
||||
import type { RootState } from 'soapbox/store';
|
||||
import type { Notification as NotificationEntity } from 'soapbox/types/entities';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
|
||||
queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
|
||||
});
|
||||
|
||||
const getNotifications = createSelector([
|
||||
state => getSettings(state).getIn(['notifications', 'quickFilter', 'show']),
|
||||
state => getSettings(state).getIn(['notifications', 'quickFilter', 'active']),
|
||||
state => ImmutableList((getSettings(state).getIn(['notifications', 'shows']) as ImmutableMap<string, boolean>).filter(item => !item).keys()),
|
||||
(state: RootState) => state.notifications.items.toList(),
|
||||
], (showFilterBar, allowedType, excludedTypes, notifications: ImmutableList<NotificationEntity>) => {
|
||||
if (!showFilterBar || allowedType === 'all') {
|
||||
// used if user changed the notification settings after loading the notifications from the server
|
||||
// otherwise a list of notifications will come pre-filtered from the backend
|
||||
// we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
|
||||
return notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type')));
|
||||
}
|
||||
return notifications.filter(item => item !== null && allowedType === item.get('type'));
|
||||
});
|
||||
|
||||
const Notifications = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const settings = useSettings();
|
||||
|
||||
const showFilterBar = settings.getIn(['notifications', 'quickFilter', 'show']);
|
||||
const activeFilter = settings.getIn(['notifications', 'quickFilter', 'active']);
|
||||
const notifications = useAppSelector(state => getNotifications(state));
|
||||
const isLoading = useAppSelector(state => state.notifications.isLoading);
|
||||
// const isUnread = useAppSelector(state => state.notifications.unread > 0);
|
||||
const hasMore = useAppSelector(state => state.notifications.hasMore);
|
||||
const totalQueuedNotificationsCount = useAppSelector(state => state.notifications.totalQueuedNotificationsCount || 0);
|
||||
|
||||
const node = useRef<VirtuosoHandle>(null);
|
||||
const column = useRef<HTMLDivElement>(null);
|
||||
const scrollableContentRef = useRef<ImmutableList<JSX.Element> | null>(null);
|
||||
|
||||
// const handleLoadGap = (maxId) => {
|
||||
// dispatch(expandNotifications({ maxId }));
|
||||
// };
|
||||
|
||||
const handleLoadOlder = useCallback(debounce(() => {
|
||||
const last = notifications.last();
|
||||
dispatch(expandNotifications({ maxId: last && last.get('id') }));
|
||||
}, 300, { leading: true }), []);
|
||||
|
||||
const handleScrollToTop = useCallback(debounce(() => {
|
||||
dispatch(scrollTopNotifications(true));
|
||||
}, 100), []);
|
||||
|
||||
const handleScroll = useCallback(debounce(() => {
|
||||
dispatch(scrollTopNotifications(false));
|
||||
}, 100), []);
|
||||
|
||||
const handleMoveUp = (id: string) => {
|
||||
const elementIndex = notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
|
||||
_selectChild(elementIndex);
|
||||
};
|
||||
|
||||
const handleMoveDown = (id: string) => {
|
||||
const elementIndex = notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
|
||||
_selectChild(elementIndex);
|
||||
};
|
||||
|
||||
const _selectChild = (index: number) => {
|
||||
node.current?.scrollIntoView({
|
||||
index,
|
||||
behavior: 'smooth',
|
||||
done: () => {
|
||||
const container = column.current;
|
||||
const element = container?.querySelector(`[data-index="${index}"] .focusable`);
|
||||
|
||||
if (element) {
|
||||
(element as HTMLDivElement).focus();
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDequeueNotifications = () => {
|
||||
dispatch(dequeueNotifications());
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
return dispatch(expandNotifications());
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleDequeueNotifications();
|
||||
dispatch(scrollTopNotifications(true));
|
||||
|
||||
return () => {
|
||||
handleLoadOlder.cancel();
|
||||
handleScrollToTop.cancel();
|
||||
handleScroll.cancel();
|
||||
dispatch(scrollTopNotifications(false));
|
||||
};
|
||||
}, []);
|
||||
|
||||
const emptyMessage = activeFilter === 'all'
|
||||
? <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />
|
||||
: <FormattedMessage id='empty_column.notifications_filtered' defaultMessage="You don't have any notifications of this type yet." />;
|
||||
|
||||
let scrollableContent: ImmutableList<JSX.Element> | null = null;
|
||||
|
||||
const filterBarContainer = showFilterBar
|
||||
? (<FilterBar />)
|
||||
: null;
|
||||
|
||||
if (isLoading && scrollableContentRef.current) {
|
||||
scrollableContent = scrollableContentRef.current;
|
||||
} else if (notifications.size > 0 || hasMore) {
|
||||
scrollableContent = notifications.map((item) => (
|
||||
<Notification
|
||||
key={item.id}
|
||||
notification={item}
|
||||
onMoveUp={handleMoveUp}
|
||||
onMoveDown={handleMoveDown}
|
||||
/>
|
||||
));
|
||||
} else {
|
||||
scrollableContent = null;
|
||||
}
|
||||
|
||||
scrollableContentRef.current = scrollableContent;
|
||||
|
||||
const scrollContainer = (
|
||||
<ScrollableList
|
||||
ref={node}
|
||||
scrollKey='notifications'
|
||||
isLoading={isLoading}
|
||||
showLoading={isLoading && notifications.size === 0}
|
||||
hasMore={hasMore}
|
||||
emptyMessage={emptyMessage}
|
||||
placeholderComponent={PlaceholderNotification}
|
||||
placeholderCount={20}
|
||||
onLoadMore={handleLoadOlder}
|
||||
onScrollToTop={handleScrollToTop}
|
||||
onScroll={handleScroll}
|
||||
className={classNames({
|
||||
'divide-y divide-gray-200 dark:divide-gray-600 divide-solid': notifications.size > 0,
|
||||
'space-y-2': notifications.size === 0,
|
||||
})}
|
||||
>
|
||||
{scrollableContent as ImmutableList<JSX.Element>}
|
||||
</ScrollableList>
|
||||
);
|
||||
|
||||
return (
|
||||
<Column ref={column} label={intl.formatMessage(messages.title)} withHeader={false}>
|
||||
{filterBarContainer}
|
||||
<ScrollTopButton
|
||||
onClick={handleDequeueNotifications}
|
||||
count={totalQueuedNotificationsCount}
|
||||
message={messages.queue}
|
||||
/>
|
||||
<PullToRefresh onRefresh={handleRefresh}>
|
||||
{scrollContainer}
|
||||
</PullToRefresh>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notifications;
|
||||
@ -1,66 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { fetchPinnedStatuses } from 'soapbox/actions/pin_statuses';
|
||||
import MissingIndicator from 'soapbox/components/missing_indicator';
|
||||
import StatusList from 'soapbox/components/status_list';
|
||||
|
||||
import Column from '../ui/components/column';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
|
||||
});
|
||||
|
||||
const mapStateToProps = (state, { params }) => {
|
||||
const username = params.username || '';
|
||||
const me = state.get('me');
|
||||
const meUsername = state.getIn(['accounts', me, 'username'], '');
|
||||
return {
|
||||
isMyAccount: (username.toLowerCase() === meUsername.toLowerCase()),
|
||||
statusIds: state.status_lists.get('pins').items,
|
||||
hasMore: !!state.status_lists.get('pins').next,
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class PinnedStatuses extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
statusIds: ImmutablePropTypes.orderedSet.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
hasMore: PropTypes.bool.isRequired,
|
||||
isMyAccount: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.props.dispatch(fetchPinnedStatuses());
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, statusIds, hasMore, isMyAccount } = this.props;
|
||||
|
||||
if (!isMyAccount) {
|
||||
return (
|
||||
<MissingIndicator />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)} transparent>
|
||||
<StatusList
|
||||
statusIds={statusIds}
|
||||
scrollKey='pinned_statuses'
|
||||
hasMore={hasMore}
|
||||
emptyMessage={<FormattedMessage id='pinned_statuses.none' defaultMessage='No pins to show.' />}
|
||||
/>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { fetchPinnedStatuses } from 'soapbox/actions/pin_statuses';
|
||||
import MissingIndicator from 'soapbox/components/missing_indicator';
|
||||
import StatusList from 'soapbox/components/status_list';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import Column from '../ui/components/column';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
|
||||
});
|
||||
|
||||
const PinnedStatuses = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const { username } = useParams<{ username: string }>();
|
||||
|
||||
const meUsername = useAppSelector((state) => state.accounts.get(state.me)?.username || '');
|
||||
const statusIds = useAppSelector((state) => state.status_lists.get('pins')!.items);
|
||||
const isLoading = useAppSelector((state) => !!state.status_lists.get('pins')!.isLoading);
|
||||
const hasMore = useAppSelector((state) => !!state.status_lists.get('pins')!.next);
|
||||
|
||||
const isMyAccount = username.toLowerCase() === meUsername.toLowerCase();
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchPinnedStatuses());
|
||||
}, []);
|
||||
|
||||
if (!isMyAccount) {
|
||||
return (
|
||||
<MissingIndicator />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
|
||||
<StatusList
|
||||
statusIds={statusIds}
|
||||
scrollKey='pinned_statuses'
|
||||
hasMore={hasMore}
|
||||
isLoading={isLoading}
|
||||
emptyMessage={<FormattedMessage id='pinned_statuses.none' defaultMessage='No pins to show.' />}
|
||||
/>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default PinnedStatuses;
|
||||
@ -1,63 +0,0 @@
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { connect } from 'react-redux';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import { Text } from 'soapbox/components/ui';
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const soapboxConfig = getSoapboxConfig(state);
|
||||
|
||||
return {
|
||||
copyright: soapboxConfig.get('copyright'),
|
||||
navlinks: soapboxConfig.getIn(['navlinks', 'homeFooter'], ImmutableList()),
|
||||
locale: getSettings(state).get('locale'),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class Footer extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
copyright: PropTypes.string,
|
||||
locale: PropTypes.string,
|
||||
navlinks: ImmutablePropTypes.list,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { copyright, locale, navlinks } = this.props;
|
||||
|
||||
return (
|
||||
<footer className='relative max-w-7xl mt-auto mx-auto py-12 px-4 sm:px-6 xl:flex xl:items-center xl:justify-between lg:px-8'>
|
||||
<div className='flex flex-wrap justify-center'>
|
||||
{navlinks.map((link, idx) => {
|
||||
const url = link.get('url');
|
||||
const isExternal = url.startsWith('http');
|
||||
const Comp = isExternal ? 'a' : Link;
|
||||
const compProps = isExternal ? { href: url, target: '_blank' } : { to: url };
|
||||
|
||||
return (
|
||||
<div key={idx} className='px-5 py-2'>
|
||||
<Comp {...compProps} className='hover:underline'>
|
||||
<Text tag='span' theme='primary' size='sm'>
|
||||
{link.getIn(['titleLocales', locale]) || link.get('title')}
|
||||
</Text>
|
||||
</Comp>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='mt-6 xl:mt-0'>
|
||||
<Text theme='muted' align='center' size='sm'>{copyright}</Text>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import { Text } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
import type { FooterItem } from 'soapbox/types/soapbox';
|
||||
|
||||
const Footer = () => {
|
||||
const { copyright, navlinks, locale } = useAppSelector((state) => {
|
||||
const soapboxConfig = getSoapboxConfig(state);
|
||||
|
||||
return {
|
||||
copyright: soapboxConfig.copyright,
|
||||
navlinks: (soapboxConfig.navlinks.get('homeFooter') || ImmutableList()) as ImmutableList<FooterItem>,
|
||||
locale: getSettings(state).get('locale') as string,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<footer className='relative max-w-7xl mt-auto mx-auto py-12 px-4 sm:px-6 xl:flex xl:items-center xl:justify-between lg:px-8'>
|
||||
<div className='flex flex-wrap justify-center'>
|
||||
{navlinks.map((link, idx) => {
|
||||
const url = link.get('url');
|
||||
const isExternal = url.startsWith('http');
|
||||
const Comp = (isExternal ? 'a' : Link) as 'a';
|
||||
const compProps = isExternal ? { href: url, target: '_blank' } : { to: url };
|
||||
|
||||
return (
|
||||
<div key={idx} className='px-5 py-2'>
|
||||
<Comp {...compProps} className='hover:underline'>
|
||||
<Text tag='span' theme='primary' size='sm'>
|
||||
{(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
|
||||
</Text>
|
||||
</Comp>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='mt-6 xl:mt-0'>
|
||||
<Text theme='muted' align='center' size='sm'>{copyright}</Text>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -1,53 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
import IconButton from '../../../components/icon_button';
|
||||
|
||||
const messages = defineMessages({
|
||||
error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this page.' },
|
||||
retry: { id: 'bundle_modal_error.retry', defaultMessage: 'Try again' },
|
||||
close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
|
||||
});
|
||||
|
||||
class BundleModalError extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onRetry: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.props.onRetry();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { onClose, intl: { formatMessage } } = this.props;
|
||||
|
||||
// Keep the markup in sync with <ModalLoading />
|
||||
// (make sure they have the same dimensions)
|
||||
return (
|
||||
<div className='modal-root__modal error-modal'>
|
||||
<div className='error-modal__body'>
|
||||
<IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
|
||||
{formatMessage(messages.error)}
|
||||
</div>
|
||||
|
||||
<div className='error-modal__footer'>
|
||||
<div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className='error-modal__nav onboarding-modal__skip'
|
||||
>
|
||||
{formatMessage(messages.close)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default injectIntl(BundleModalError);
|
||||
@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import IconButton from 'soapbox/components/icon_button';
|
||||
|
||||
const messages = defineMessages({
|
||||
error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this page.' },
|
||||
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 (
|
||||
<div className='modal-root__modal error-modal'>
|
||||
<div className='error-modal__body'>
|
||||
<IconButton title={intl.formatMessage(messages.retry)} icon='refresh' onClick={handleRetry} size={64} />
|
||||
{intl.formatMessage(messages.error)}
|
||||
</div>
|
||||
|
||||
<div className='error-modal__footer'>
|
||||
<div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className='error-modal__nav onboarding-modal__skip'
|
||||
>
|
||||
{intl.formatMessage(messages.close)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BundleModalError;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue