bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert About page to TSX

Browse source
This commit is contained in:
Alex Gleason 2022-08-08 17:43:47 -05:00
parent 636e0d9eff
commit d511b673ae
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 77 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
app/soapbox/features/about/index.js
View file

@ -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;

75
app/soapbox/features/about/index.tsx Normal file
View file

@ -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;

4
app/soapbox/normalizers/soapbox/soapbox_config.ts
View file

@ -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: '',