From e5fd6367a6accd2ec4eaeb0fc28033e405f27a03 Mon Sep 17 00:00:00 2001
From: metalex9 <alexbainter@gmail.com>
Date: Tue, 19 Mar 2019 00:34:07 -0500
Subject: [PATCH] Fix follow button

---
 index.template.html                     | 19 +++++++
 src/components/app/about-tab/about.scss |  8 +++
 src/components/app/about-tab/index.jsx  | 35 ++++++-------
 src/components/app/help-tab/index.jsx   | 66 ++++++++++++-------------
 4 files changed, 75 insertions(+), 53 deletions(-)

diff --git a/index.template.html b/index.template.html
index 75743bb..24b43d4 100644
--- a/index.template.html
+++ b/index.template.html
@@ -34,6 +34,25 @@
         return t;
       })(document, 'script', 'twitter-wjs');
     </script>
+    <script>
+      window.twttr = (function(d, s, id) {
+        var js,
+          fjs = d.getElementsByTagName(s)[0],
+          t = window.twttr || {};
+        if (d.getElementById(id)) return t;
+        js = d.createElement(s);
+        js.id = id;
+        js.src = 'https://platform.twitter.com/widgets.js';
+        fjs.parentNode.insertBefore(js, fjs);
+
+        t._e = [];
+        t.ready = function(f) {
+          t._e.push(f);
+        };
+
+        return t;
+      })(document, 'script', 'twitter-wjs');
+    </script>
     <meta charset="utf-8" />
     <meta name="description" content="Endlessly unique ambient music" />
     <meta name="author" content="Alex Bainter" />
diff --git a/src/components/app/about-tab/about.scss b/src/components/app/about-tab/about.scss
index 59b6963..729d597 100644
--- a/src/components/app/about-tab/about.scss
+++ b/src/components/app/about-tab/about.scss
@@ -12,4 +12,12 @@
       margin-right: 0.5em;
     }
   }
+
+  .follow-btn {
+    display: none;
+
+    &--rendered {
+      display: inline;
+    }
+  }
 }
diff --git a/src/components/app/about-tab/index.jsx b/src/components/app/about-tab/index.jsx
index 3ed8877..c34aa44 100644
--- a/src/components/app/about-tab/index.jsx
+++ b/src/components/app/about-tab/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import propTypes from 'prop-types';
 import { applyUpdate } from 'offline-plugin/runtime';
 import './about.scss';
@@ -11,23 +11,13 @@ const handleUpdateClick = e => {
 };
 
 const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
-  const followBtnRef = useRef(null);
-  useEffect(
-    () => {
-      if (window.twttr && followBtnRef.current) {
-        window.twttr.ready(twttr => {
-          twttr.widgets.createFollowButton(
-            'alex_bainter',
-            followBtnRef.current,
-            { showCount: false }
-          );
-        });
-      }
-    },
-    window.twttr,
-    followBtnRef.current
-  );
-
+  useEffect(() => {
+    if (window.twttr) {
+      window.twttr.ready(twttr => {
+        twttr.widgets.load();
+      });
+    }
+  }, [window.twttr]);
   return (
     <div className="about-tab info-tab">
       {isUpdateAvailable && isOnline && (
@@ -63,7 +53,14 @@ const AboutTabComponent = ({ version, isUpdateAvailable, isOnline }) => {
         </a>
       </p>
       <p>
-        Follow on Twitter for app news and updates: <span ref={followBtnRef} />
+        <a
+          href="https://twitter.com/alex_bainter?ref_src=twsrc%5Etfw"
+          className="twitter-follow-button"
+          data-show-count="false"
+        >
+          Follow @alex_bainter
+        </a>{' '}
+        on Twitter for app news and updates.{' '}
       </p>
       <br />
       <p>{`v${version}`}</p>
diff --git a/src/components/app/help-tab/index.jsx b/src/components/app/help-tab/index.jsx
index ba479e3..e3d007f 100644
--- a/src/components/app/help-tab/index.jsx
+++ b/src/components/app/help-tab/index.jsx
@@ -12,44 +12,42 @@ const HelpTabComponent = () => (
       This might be resolved in a future update.
     </p>
     <h2 className="help-tab__topic">The audio pops, crackles, or snaps</h2>
-    <p>
-      Here's some steps you can try:
-      <ol>
-        {!isMobile && (
-          <li>
-            Try turning the site volume down and using your computer's volume
-            instead.
-          </li>
-        )}
-        {isMobile && (
-          <li>
-            If you're using external speakers, try turning your device's volume
-            down and using your speakers' volume instead.
-          </li>
-        )}
+    Here's some steps you can try:
+    <ol>
+      {!isMobile && (
         <li>
-          Try listening to the pieces towards the end of the list. Some pieces
-          play better than others.
+          Try turning the site volume down and using your computer's volume
+          instead.
         </li>
+      )}
+      {isMobile && (
         <li>
-          Try using a more powerful device
-          {isMobile && ', like a desktop or laptop'}.
+          If you're using external speakers, try turning your device's volume
+          down and using your speakers' volume instead.
         </li>
-      </ol>
-      You can also report the issue{' '}
-      <a
-        href="https://github.com/generative-music/generative.fm/issues/new?title=The%20audio%20sucks&body=Please%20describe%20your%20device%2C%20operating%20system%2C%20and%20internet%20browser..."
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        on Github
-      </a>{' '}
-      or by sending an email to{' '}
-      <a href="mailto:alex@alexbainter.com?Subject=Generative Music sucky audio">
-        alex@alexbainter.com
-      </a>
-      .
-    </p>
+      )}
+      <li>
+        Try listening to the pieces towards the end of the list. Some pieces
+        play better than others.
+      </li>
+      <li>
+        Try using a more powerful device
+        {isMobile && ', like a desktop or laptop'}.
+      </li>
+    </ol>
+    You can also report the issue{' '}
+    <a
+      href="https://github.com/generative-music/generative.fm/issues/new?title=The%20audio%20sucks&body=Please%20describe%20your%20device%2C%20operating%20system%2C%20and%20internet%20browser..."
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      on Github
+    </a>{' '}
+    or by sending an email to{' '}
+    <a href="mailto:alex@alexbainter.com?Subject=Generative Music sucky audio">
+      alex@alexbainter.com
+    </a>
+    .
   </div>
 );