kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'about-tsx' into 'develop'
Convert About page to TSX See merge request soapbox-pub/soapbox-fe!1716environments/review-develop-3zknud/deployments/723
Alex Gleason
commit
7d100193c3
|
|
@ -1,40 +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 { connect } from 'react-redux';
|
||||
|
||||
import { getSettings, changeSetting } from 'soapbox/actions/settings';
|
||||
import { Checkbox } from 'soapbox/features/forms';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
settings: getSettings(state),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class SettingsCheckbox extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
path: PropTypes.array.isRequired,
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
}
|
||||
|
||||
onChange = path => {
|
||||
return e => {
|
||||
this.props.dispatch(changeSetting(path, e.target.checked));
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { settings, path, ...props } = this.props;
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
checked={settings.getIn(path)}
|
||||
onChange={this.onChange(path)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
import React from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { fetchAboutPage } from 'soapbox/actions/about';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
import { languages } from '../preferences';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
locale: getSettings(state).get('locale'),
|
||||
aboutPages: getSoapboxConfig(state).get('aboutPages'),
|
||||
});
|
||||
|
||||
@connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class AboutPage extends ImmutablePureComponent {
|
||||
|
||||
state = {
|
||||
pageHtml: '',
|
||||
locale: this.props.locale,
|
||||
}
|
||||
|
||||
loadPageHtml = () => {
|
||||
const { dispatch, match, aboutPages } = this.props;
|
||||
const { locale } = this.state;
|
||||
const { slug } = match.params;
|
||||
const page = aboutPages.get(slug || 'about');
|
||||
const fetchLocale = page && locale !== page.get('default') && page.get('locales').includes(locale);
|
||||
dispatch(fetchAboutPage(slug, fetchLocale && locale)).then(html => {
|
||||
this.setState({ pageHtml: html });
|
||||
}).catch(error => {
|
||||
// TODO: Better error handling. 404 page?
|
||||
this.setState({ pageHtml: '<h1>Page not found</h1>' });
|
||||
});
|
||||
}
|
||||
|
||||
setLocale = (locale) => () => {
|
||||
this.setState({ locale });
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadPageHtml();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { locale, match, aboutPages } = this.props;
|
||||
const { locale: prevLocale, aboutPages: prevAboutPages } = prevProps;
|
||||
const { locale: stateLocale } = this.state;
|
||||
const { locale: prevStateLocale } = prevState;
|
||||
|
||||
const { slug } = match.params;
|
||||
const { slug: prevSlug } = prevProps.match.params;
|
||||
|
||||
if (locale !== prevLocale) this.setState({ locale });
|
||||
|
||||
if (
|
||||
slug !== prevSlug ||
|
||||
stateLocale !== prevStateLocale ||
|
||||
(!prevAboutPages.get(slug || 'about') && aboutPages.get(slug || 'about'))
|
||||
)
|
||||
this.loadPageHtml();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { match, aboutPages } = this.props;
|
||||
const { slug } = match.params;
|
||||
|
||||
const page = aboutPages.get(slug || 'about');
|
||||
const defaultLocale = page && page.get('default');
|
||||
const alsoAvailable = page && (
|
||||
<div className='rich-formatting also-available'>
|
||||
<FormattedMessage id='about.also_available' defaultMessage='Available in:' />
|
||||
{' '}
|
||||
<ul>
|
||||
<li>
|
||||
<a href='#' onClick={this.setLocale(defaultLocale)}>
|
||||
{languages[defaultLocale] || defaultLocale}
|
||||
</a>
|
||||
</li>
|
||||
{
|
||||
page.get('locales').map(locale => (
|
||||
<li key={locale}>
|
||||
<a href='#' onClick={this.setLocale(locale)}>
|
||||
{languages[locale] || locale}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='content'>
|
||||
<div className='about-page'>
|
||||
<div
|
||||
className='rich-formatting'
|
||||
dangerouslySetInnerHTML={{ __html: this.state.pageHtml }}
|
||||
/>
|
||||
{alsoAvailable}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default AboutPage;
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { fetchAboutPage } from 'soapbox/actions/about';
|
||||
import { useSoapboxConfig, useSettings, useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
import { languages } from '../preferences';
|
||||
|
||||
/** Displays arbitary user-uploaded HTML on a page at `/about/:slug` */
|
||||
const AboutPage: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { slug } = useParams<{ slug?: string }>();
|
||||
|
||||
const settings = useSettings();
|
||||
const soapboxConfig = useSoapboxConfig();
|
||||
|
||||
const [pageHtml, setPageHtml] = useState<string>('');
|
||||
const [locale, setLocale] = useState<string>(settings.get('locale'));
|
||||
|
||||
const { aboutPages } = soapboxConfig;
|
||||
|
||||
const page = aboutPages.get(slug || 'about');
|
||||
const defaultLocale = page?.get('default') as string | undefined;
|
||||
const pageLocales = page?.get('locales', []) as string[];
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLocale = Boolean(page && locale !== defaultLocale && pageLocales.includes(locale));
|
||||
dispatch(fetchAboutPage(slug, fetchLocale ? locale : undefined)).then(html => {
|
||||
setPageHtml(html);
|
||||
}).catch(error => {
|
||||
// TODO: Better error handling. 404 page?
|
||||
setPageHtml('<h1>Page not found</h1>');
|
||||
});
|
||||
}, [locale, slug]);
|
||||
|
||||
const alsoAvailable = (defaultLocale) && (
|
||||
<div className='rich-formatting also-available'>
|
||||
<FormattedMessage id='about.also_available' defaultMessage='Available in:' />
|
||||
{' '}
|
||||
<ul>
|
||||
<li>
|
||||
<a href='#' onClick={() => setLocale(defaultLocale)}>
|
||||
{/* @ts-ignore */}
|
||||
{languages[defaultLocale] || defaultLocale}
|
||||
</a>
|
||||
</li>
|
||||
{
|
||||
pageLocales?.map(locale => (
|
||||
<li key={locale}>
|
||||
<a href='#' onClick={() => setLocale(locale)}>
|
||||
{/* @ts-ignore */}
|
||||
{languages[locale] || locale}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='content'>
|
||||
<div className='about-page'>
|
||||
<div
|
||||
className='rich-formatting'
|
||||
dangerouslySetInnerHTML={{ __html: pageHtml }}
|
||||
/>
|
||||
{alsoAvailable}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutPage;
|
||||
|
|
@ -103,8 +103,8 @@ export const SoapboxConfigRecord = ImmutableRecord({
|
|||
cryptoDonatePanel: ImmutableMap({
|
||||
limit: 1,
|
||||
}),
|
||||
aboutPages: ImmutableMap(),
|
||||
mobilePages: ImmutableMap(),
|
||||
aboutPages: ImmutableMap<string, ImmutableMap<string, unknown>>(),
|
||||
mobilePages: ImmutableMap<string, ImmutableMap<string, unknown>>(),
|
||||
authenticatedProfile: true,
|
||||
singleUserMode: false,
|
||||
singleUserModeProfile: '',
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue