From 311ec14200b06db7bc8d31792cf088074f077b8d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 1 May 2022 12:53:53 -0500
Subject: [PATCH] Convert most Placeholder components into TSX

---
 .../components/placeholder_account.js         | 23 -------------
 .../components/placeholder_account.tsx        | 22 +++++++++++++
 ...aceholder_card.js => placeholder_card.tsx} |  3 +-
 .../components/placeholder_chat.js            | 32 -------------------
 .../components/placeholder_chat.tsx           | 31 ++++++++++++++++++
 .../components/placeholder_hashtag.js         | 21 ------------
 .../components/placeholder_hashtag.tsx        | 20 ++++++++++++
 .../components/placeholder_material_status.js | 17 ----------
 .../placeholder_material_status.tsx           | 16 ++++++++++
 ...cation.js => placeholder_notification.tsx} |  1 +
 .../components/placeholder_status.tsx         |  3 +-
 11 files changed, 94 insertions(+), 95 deletions(-)
 delete mode 100644 app/soapbox/features/placeholder/components/placeholder_account.js
 create mode 100644 app/soapbox/features/placeholder/components/placeholder_account.tsx
 rename app/soapbox/features/placeholder/components/{placeholder_card.js => placeholder_card.tsx} (85%)
 delete mode 100644 app/soapbox/features/placeholder/components/placeholder_chat.js
 create mode 100644 app/soapbox/features/placeholder/components/placeholder_chat.tsx
 delete mode 100644 app/soapbox/features/placeholder/components/placeholder_hashtag.js
 create mode 100644 app/soapbox/features/placeholder/components/placeholder_hashtag.tsx
 delete mode 100644 app/soapbox/features/placeholder/components/placeholder_material_status.js
 create mode 100644 app/soapbox/features/placeholder/components/placeholder_material_status.tsx
 rename app/soapbox/features/placeholder/components/{placeholder_notification.js => placeholder_notification.tsx} (94%)

diff --git a/app/soapbox/features/placeholder/components/placeholder_account.js b/app/soapbox/features/placeholder/components/placeholder_account.js
deleted file mode 100644
index 4d638046b..000000000
--- a/app/soapbox/features/placeholder/components/placeholder_account.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import PlaceholderAvatar from './placeholder_avatar';
-import PlaceholderDisplayName from './placeholder_display_name';
-
-export default class PlaceholderAccount extends React.Component {
-
-  render() {
-    return (
-      <div className='account'>
-        <div className='account__wrapper'>
-          <span className='account__display-name'>
-            <div className='account__avatar-wrapper'>
-              <PlaceholderAvatar size={36} />
-            </div>
-            <PlaceholderDisplayName minLength={3} maxLength={25} />
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/placeholder/components/placeholder_account.tsx b/app/soapbox/features/placeholder/components/placeholder_account.tsx
new file mode 100644
index 000000000..ad31db3a4
--- /dev/null
+++ b/app/soapbox/features/placeholder/components/placeholder_account.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import PlaceholderAvatar from './placeholder_avatar';
+import PlaceholderDisplayName from './placeholder_display_name';
+
+/** Fake account to display while data is loading. */
+const PlaceholderAccount: React.FC = () => {
+  return (
+    <div className='account'>
+      <div className='account__wrapper'>
+        <span className='account__display-name'>
+          <div className='account__avatar-wrapper'>
+            <PlaceholderAvatar size={36} />
+          </div>
+          <PlaceholderDisplayName minLength={3} maxLength={25} />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderAccount;
diff --git a/app/soapbox/features/placeholder/components/placeholder_card.js b/app/soapbox/features/placeholder/components/placeholder_card.tsx
similarity index 85%
rename from app/soapbox/features/placeholder/components/placeholder_card.js
rename to app/soapbox/features/placeholder/components/placeholder_card.tsx
index 87b7e5caf..92911b9d6 100644
--- a/app/soapbox/features/placeholder/components/placeholder_card.js
+++ b/app/soapbox/features/placeholder/components/placeholder_card.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
-const PlaceholderCard = () => (
+/** Fake link preview to display while data is loading. */
+const PlaceholderCard: React.FC = () => (
   <div className={classNames('status-card', {
     'animate-pulse': true,
   })}
diff --git a/app/soapbox/features/placeholder/components/placeholder_chat.js b/app/soapbox/features/placeholder/components/placeholder_chat.js
deleted file mode 100644
index a3763b416..000000000
--- a/app/soapbox/features/placeholder/components/placeholder_chat.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { randomIntFromInterval, generateText } from '../utils';
-
-import PlaceholderAvatar from './placeholder_avatar';
-import PlaceholderDisplayName from './placeholder_display_name';
-
-export default class PlaceholderAccount extends React.Component {
-
-  render() {
-    const messageLength = randomIntFromInterval(5, 75);
-
-    return (
-      <div className='chat-list-item chat-list-item--placeholder'>
-        <div className='account'>
-          <div className='account__wrapper'>
-            <div className='account__display-name'>
-              <div className='account__avatar-wrapper'>
-                <PlaceholderAvatar size={36} />
-              </div>
-              <PlaceholderDisplayName minLength={3} maxLength={25} />
-              <span className='chat__last-message'>
-                {generateText(messageLength)}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/placeholder/components/placeholder_chat.tsx b/app/soapbox/features/placeholder/components/placeholder_chat.tsx
new file mode 100644
index 000000000..6b587f03d
--- /dev/null
+++ b/app/soapbox/features/placeholder/components/placeholder_chat.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { randomIntFromInterval, generateText } from '../utils';
+
+import PlaceholderAvatar from './placeholder_avatar';
+import PlaceholderDisplayName from './placeholder_display_name';
+
+/** Fake chat to display while data is loading. */
+const PlaceholderChat: React.FC = () => {
+  const messageLength = randomIntFromInterval(5, 75);
+
+  return (
+    <div className='chat-list-item chat-list-item--placeholder'>
+      <div className='account'>
+        <div className='account__wrapper'>
+          <div className='account__display-name'>
+            <div className='account__avatar-wrapper'>
+              <PlaceholderAvatar size={36} />
+            </div>
+            <PlaceholderDisplayName minLength={3} maxLength={25} />
+            <span className='chat__last-message'>
+              {generateText(messageLength)}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderChat;
diff --git a/app/soapbox/features/placeholder/components/placeholder_hashtag.js b/app/soapbox/features/placeholder/components/placeholder_hashtag.js
deleted file mode 100644
index 81c788238..000000000
--- a/app/soapbox/features/placeholder/components/placeholder_hashtag.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { generateText, randomIntFromInterval } from '../utils';
-
-export default class PlaceholderHashtag extends React.Component {
-
-  render() {
-    const length = randomIntFromInterval(15, 30);
-
-    return (
-      <div className='placeholder-hashtag'>
-        <div className='trends__item'>
-          <div className='trends__item__name'>
-            {generateText(length)}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
\ No newline at end of file
diff --git a/app/soapbox/features/placeholder/components/placeholder_hashtag.tsx b/app/soapbox/features/placeholder/components/placeholder_hashtag.tsx
new file mode 100644
index 000000000..28dceec72
--- /dev/null
+++ b/app/soapbox/features/placeholder/components/placeholder_hashtag.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { generateText, randomIntFromInterval } from '../utils';
+
+/** Fake hashtag to display while data is loading. */
+const PlaceholderHashtag: React.FC = () => {
+  const length = randomIntFromInterval(15, 30);
+
+  return (
+    <div className='placeholder-hashtag'>
+      <div className='trends__item'>
+        <div className='trends__item__name'>
+          {generateText(length)}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderHashtag;
diff --git a/app/soapbox/features/placeholder/components/placeholder_material_status.js b/app/soapbox/features/placeholder/components/placeholder_material_status.js
deleted file mode 100644
index 3199d42aa..000000000
--- a/app/soapbox/features/placeholder/components/placeholder_material_status.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import PlaceholderStatus from './placeholder_status';
-
-export default class PlaceholderMaterialStatus extends React.Component {
-
-  render() {
-    return (
-      <div className='material-status' tabIndex={-1} aria-hidden>
-        <div className='material-status__status' tabIndex={0}>
-          <PlaceholderStatus {...this.props} focusable={false} />
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/placeholder/components/placeholder_material_status.tsx b/app/soapbox/features/placeholder/components/placeholder_material_status.tsx
new file mode 100644
index 000000000..28581cb09
--- /dev/null
+++ b/app/soapbox/features/placeholder/components/placeholder_material_status.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import PlaceholderStatus from './placeholder_status';
+
+/** Fake material status to display while data is loading. */
+const PlaceholderMaterialStatus: React.FC = () => {
+  return (
+    <div className='material-status' tabIndex={-1} aria-hidden>
+      <div className='material-status__status' tabIndex={0}>
+        <PlaceholderStatus />
+      </div>
+    </div>
+  );
+};
+
+export default PlaceholderMaterialStatus;
diff --git a/app/soapbox/features/placeholder/components/placeholder_notification.js b/app/soapbox/features/placeholder/components/placeholder_notification.tsx
similarity index 94%
rename from app/soapbox/features/placeholder/components/placeholder_notification.js
rename to app/soapbox/features/placeholder/components/placeholder_notification.tsx
index e56f90c58..bb99eeb5b 100644
--- a/app/soapbox/features/placeholder/components/placeholder_notification.js
+++ b/app/soapbox/features/placeholder/components/placeholder_notification.tsx
@@ -4,6 +4,7 @@ import PlaceholderAvatar from './placeholder_avatar';
 import PlaceholderDisplayName from './placeholder_display_name';
 import PlaceholderStatusContent from './placeholder_status_content';
 
+/** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
   <div className='bg-white dark:bg-slate-800 px-4 py-6 sm:p-6'>
     <div className='w-full animate-pulse'>
diff --git a/app/soapbox/features/placeholder/components/placeholder_status.tsx b/app/soapbox/features/placeholder/components/placeholder_status.tsx
index a11823f8a..d67c41204 100644
--- a/app/soapbox/features/placeholder/components/placeholder_status.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_status.tsx
@@ -9,7 +9,8 @@ interface IPlaceholderStatus {
   thread?: boolean
 }
 
-const PlaceholderStatus = ({ thread = false }: IPlaceholderStatus) => (
+/** Fake status to display while data is loading. */
+const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => (
   <div
     className={classNames({
       'status-placeholder bg-white dark:bg-slate-800': true,