From d511b673ae18307ca844e2d0cbee48011aaa090b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 8 Aug 2022 17:43:47 -0500
Subject: [PATCH] Convert About page to TSX

---
 app/soapbox/features/about/index.js           | 111 ------------------
 app/soapbox/features/about/index.tsx          |  75 ++++++++++++
 .../normalizers/soapbox/soapbox_config.ts     |   4 +-
 3 files changed, 77 insertions(+), 113 deletions(-)
 delete mode 100644 app/soapbox/features/about/index.js
 create mode 100644 app/soapbox/features/about/index.tsx

diff --git a/app/soapbox/features/about/index.js b/app/soapbox/features/about/index.js
deleted file mode 100644
index bb6f1222c..000000000
--- a/app/soapbox/features/about/index.js
+++ /dev/null
@@ -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;
diff --git a/app/soapbox/features/about/index.tsx b/app/soapbox/features/about/index.tsx
new file mode 100644
index 000000000..5c184a97a
--- /dev/null
+++ b/app/soapbox/features/about/index.tsx
@@ -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;
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index bf4f95eef..6e9a2c745 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -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: '',