From a1db330b145d15ddda0990711776c309d0ab55cb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Dec 2020 20:18:57 -0600
Subject: [PATCH] Accordion: use children instead of content

---
 app/soapbox/features/public_timeline/index.js | 37 +++++++++----------
 app/soapbox/features/soapbox_config/index.js  | 21 +++++------
 .../features/ui/components/accordion.js       |  6 +--
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js
index 9173274fb..0708ca1c1 100644
--- a/app/soapbox/features/public_timeline/index.js
+++ b/app/soapbox/features/public_timeline/index.js
@@ -92,27 +92,26 @@ class CommunityTimeline extends React.PureComponent {
         <div className='explanation-box'>
           <Accordion
             headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
-            content={(
-              <FormattedMessage
-                id='fediverse_tab.explanation_box.explanation'
-                defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
-                values={{
-                  site_title: siteTitle,
-                  local: (
-                    <Link to='/timeline/local'>
-                      <FormattedMessage
-                        id='empty_column.home.local_tab'
-                        defaultMessage='the {site_title} tab'
-                        values={{ site_title: siteTitle }}
-                      />
-                    </Link>
-                  ),
-                }}
-              />
-            )}
             expanded={explanationBoxExpanded}
             onToggle={this.toggleExplanationBox}
-          />
+          >
+            <FormattedMessage
+              id='fediverse_tab.explanation_box.explanation'
+              defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
+              values={{
+                site_title: siteTitle,
+                local: (
+                  <Link to='/timeline/local'>
+                    <FormattedMessage
+                      id='empty_column.home.local_tab'
+                      defaultMessage='the {site_title} tab'
+                      values={{ site_title: siteTitle }}
+                    />
+                  </Link>
+                ),
+              }}
+            />
+          </Accordion>
         </div>
         <StatusListContainer
           scrollKey={`${timelineId}_timeline`}
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index 7856a8027..e06520c63 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -308,19 +308,18 @@ class SoapboxConfig extends ImmutablePureComponent {
             </FieldsGroup>
             <Accordion
               headline={intl.formatMessage(messages.rawJSONLabel)}
-              content={(
-                <div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
-                  <SimpleTextarea
-                    hint={intl.formatMessage(messages.rawJSONHint)}
-                    value={this.state.rawJSON}
-                    onChange={this.handleEditJSON}
-                    rows={12}
-                  />
-                </div>
-              )}
               expanded={this.state.jsonEditorExpanded}
               onToggle={this.toggleJSONEditor}
-            />
+            >
+              <div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
+                <SimpleTextarea
+                  hint={intl.formatMessage(messages.rawJSONHint)}
+                  value={this.state.rawJSON}
+                  onChange={this.handleEditJSON}
+                  rows={12}
+                />
+              </div>
+            </Accordion>
           </fieldset>
           <div className='actions'>
             <button name='button' type='submit' className='btn button button-primary'>
diff --git a/app/soapbox/features/ui/components/accordion.js b/app/soapbox/features/ui/components/accordion.js
index f6e1683f4..628c2912a 100644
--- a/app/soapbox/features/ui/components/accordion.js
+++ b/app/soapbox/features/ui/components/accordion.js
@@ -12,7 +12,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
 
   static propTypes = {
     headline: PropTypes.node.isRequired,
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     expanded: PropTypes.bool,
     onToggle: PropTypes.func,
     intl: PropTypes.object.isRequired,
@@ -29,7 +29,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
   }
 
   render() {
-    const { headline, content, expanded, intl } = this.props;
+    const { headline, children, expanded, intl } = this.props;
 
     return (
       <div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
@@ -42,7 +42,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
           {headline}
         </button>
         <div className='accordion__content'>
-          {content}
+          {children}
         </div>
       </div>
     );