From edcde6545e85a64f3cd7803a0c389dc41fcc36dc Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Thu, 7 Mar 2024 13:46:09 -0500
Subject: [PATCH] Condition warning message to log into twitter if script
 initializes

---
 .../web-common/src/App/NewsSidebar/News.scss  |  7 +++
 .../src/components/TwitterTimeline.jsx        | 45 ++++++++++++++-----
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/libs/web-common/src/App/NewsSidebar/News.scss b/packages/libs/web-common/src/App/NewsSidebar/News.scss
index 74c017190c..64634f5b73 100644
--- a/packages/libs/web-common/src/App/NewsSidebar/News.scss
+++ b/packages/libs/web-common/src/App/NewsSidebar/News.scss
@@ -75,4 +75,11 @@ $news-border-width: 2px;
     padding-top: 1.2rem;
     padding-bottom: 0.2rem;
   }
+
+  .TwitterTimelineContainer {
+    p {
+      margin: 0;
+      margin-top: 0.5em;
+    }
+  }
 }
diff --git a/packages/libs/web-common/src/components/TwitterTimeline.jsx b/packages/libs/web-common/src/components/TwitterTimeline.jsx
index ef8a86e2ac..17868f111e 100644
--- a/packages/libs/web-common/src/components/TwitterTimeline.jsx
+++ b/packages/libs/web-common/src/components/TwitterTimeline.jsx
@@ -4,6 +4,9 @@ export default class TwitterTimeline extends React.Component {
   constructor(props) {
     super(props);
     this.timelineRef = React.createRef();
+    this.state = {
+      isInitialized: false,
+    };
   }
 
   componentDidMount() {
@@ -34,6 +37,12 @@ export default class TwitterTimeline extends React.Component {
       return t;
     })(document, 'script', 'twitter-wjs'));
 
+    if (!this.state.isInitialized && 'init' in t) {
+      this.setState({
+        isInitialized: true,
+      });
+    }
+
     t.ready(() => t.widgets.load(this.timelineRef.current));
   }
 
@@ -46,17 +55,33 @@ export default class TwitterTimeline extends React.Component {
       linkColor = null,
     } = this.props;
     return (
-      <a
-        ref={this.timelineRef}
-        data-height={height}
-        data-width={width}
-        data-theme={theme}
-        data-link-color={linkColor}
-        className="twitter-timeline"
-        href={`https://twitter.com/${profileId}`}
+      <div
+        className="TwitterTimelineContainer"
+        style={{
+          height,
+          width,
+        }}
       >
-        Tweets by {profileId}
-      </a>
+        <a
+          ref={this.timelineRef}
+          data-height={height}
+          data-width={width}
+          data-theme={theme}
+          data-link-color={linkColor}
+          className="twitter-timeline"
+          href={`https://twitter.com/${profileId}`}
+        >
+          Tweets by {profileId}
+        </a>
+        {this.state.isInitialized && (
+          <p>
+            <em>
+              <strong>Warning</strong>: You must be logged into Twitter/X to
+              view our timeline.
+            </em>
+          </p>
+        )}
+      </div>
     );
   }
 }