From 6813f512e6e3ae4d16d11a88365a3a6cd544af5a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 25 Apr 2020 16:10:01 -0500
Subject: [PATCH] About Page support

---
 .gitignore                            |  2 +-
 app/gabsocial/actions/about.js        | 13 +++++++++
 app/gabsocial/containers/gabsocial.js |  2 ++
 app/gabsocial/features/about/index.js | 41 +++++++++++++++++++++++++++
 app/styles/gabsocial/containers.scss  |  1 +
 public/soapbox/about/index.html       |  3 ++
 public/soapbox/about/tos.html         |  0
 7 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 app/gabsocial/actions/about.js
 create mode 100644 app/gabsocial/features/about/index.js
 create mode 100644 public/soapbox/about/index.html
 create mode 100644 public/soapbox/about/tos.html

diff --git a/.gitignore b/.gitignore
index 57e7b190f..02ceac5fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,5 @@
 /coverage/
 /.eslintcache
 /.env
-/public/soapbox/soapbox.json
+/public/soapbox
 /deploy.sh
diff --git a/app/gabsocial/actions/about.js b/app/gabsocial/actions/about.js
new file mode 100644
index 000000000..7c37f93f5
--- /dev/null
+++ b/app/gabsocial/actions/about.js
@@ -0,0 +1,13 @@
+import api from '../api';
+
+export const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
+export const FETCH_ABOUT_PAGE_FAIL    = 'FETCH_ABOUT_PAGE_FAIL';
+
+export function fetchAboutPage(slug = 'index') {
+  return (dispatch, getState) => {
+    dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug });
+    return api(getState).get(`/soapbox/about/${slug}.html`).catch(error => {
+      dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug });
+    });
+  };
+}
diff --git a/app/gabsocial/containers/gabsocial.js b/app/gabsocial/containers/gabsocial.js
index eddef1272..a49a84353 100644
--- a/app/gabsocial/containers/gabsocial.js
+++ b/app/gabsocial/containers/gabsocial.js
@@ -21,6 +21,7 @@ import { fetchInstance } from 'gabsocial/actions/instance';
 import { fetchSoapboxConfig } from 'gabsocial/actions/soapbox';
 import { fetchMe } from 'gabsocial/actions/me';
 import LandingPage from 'gabsocial/features/landing_page';
+import AboutPage from 'gabsocial/features/about';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);
@@ -92,6 +93,7 @@ class GabSocialMount extends React.PureComponent {
           <ScrollContext>
             <Switch>
               {!me && <Route exact path='/' component={LandingPage} />}
+              <Route exact path='/about/:slug?' component={AboutPage} />
               <Route path='/' component={UI} />
             </Switch>
           </ScrollContext>
diff --git a/app/gabsocial/features/about/index.js b/app/gabsocial/features/about/index.js
new file mode 100644
index 000000000..005dfa22c
--- /dev/null
+++ b/app/gabsocial/features/about/index.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { fetchAboutPage } from 'gabsocial/actions/about';
+
+class AboutPage extends ImmutablePureComponent {
+
+  state = {
+    pageHtml: '',
+  }
+
+  loadPageHtml = () => {
+    const { dispatch, match } = this.props;
+    const { slug } = match.params;
+    dispatch(fetchAboutPage(slug)).then(response => {
+      this.setState({ pageHtml: response.data });
+    }).catch(error => {
+      // TODO: Better error handling. 404 page?
+      this.setState({ pageHtml: '<h1>Page not found</h1>' });
+    });
+  }
+
+  componentWillMount() {
+    this.loadPageHtml();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { slug } = this.props.match.params;
+    const { slug: prevSlug } = prevProps.match.params;
+    if (slug !== prevSlug) this.loadPageHtml();
+  }
+
+  render() {
+    return (
+      <div dangerouslySetInnerHTML={{ __html: this.state.pageHtml }} />
+    );
+  }
+
+}
+
+export default connect()(AboutPage);
diff --git a/app/styles/gabsocial/containers.scss b/app/styles/gabsocial/containers.scss
index 0bfdc524e..88a66a08e 100644
--- a/app/styles/gabsocial/containers.scss
+++ b/app/styles/gabsocial/containers.scss
@@ -192,6 +192,7 @@
 
 .public-layout {
   .container {
+    width: 100%;
     max-width: 960px;
 
     @media screen and (max-width: $no-gap-breakpoint) {
diff --git a/public/soapbox/about/index.html b/public/soapbox/about/index.html
new file mode 100644
index 000000000..5923cddf3
--- /dev/null
+++ b/public/soapbox/about/index.html
@@ -0,0 +1,3 @@
+<h1>Hello world!</h1>
+
+<p>You made it.</p>
diff --git a/public/soapbox/about/tos.html b/public/soapbox/about/tos.html
new file mode 100644
index 000000000..e69de29bb