From b8cbaba283e84c4811729d456cbf835fd60e8266 Mon Sep 17 00:00:00 2001
From: Emelia Smith <ThisIsMissEm@users.noreply.github.com>
Date: Thu, 11 May 2023 07:55:10 +0200
Subject: [PATCH] [Glitch] Split `EmptyAccount` out of `Account` component

Partial port of b8a2430642ac3a7d181ea078fb04654e2a200934 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/account.jsx    | 17 ++--------
 .../glitch/components/empty_account.tsx       | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/empty_account.tsx

diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 65c39ab48c..6a0c2ae917 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -5,11 +5,11 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { Skeleton } from 'flavours/glitch/components/skeleton';
 import { counterRenderer } from 'flavours/glitch/components/common_counter';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import classNames from 'classnames';
 import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
+import { EmptyAccount } from 'flavours/glitch/components/empty_account';
 
 import { me } from '../initial_state';
 
@@ -81,20 +81,7 @@ class Account extends ImmutablePureComponent {
     const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
 
     if (!account) {
-      return (
-        <div className={classNames('account', { 'account--minimal': minimal })}>
-          <div className='account__wrapper'>
-            <div className='account__display-name'>
-              <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
-
-              <div>
-                <DisplayName />
-                <Skeleton width='7ch' />
-              </div>
-            </div>
-          </div>
-        </div>
-      );
+      return <EmptyAccount size={size} minimal={minimal} />;
     }
 
     if (hidden) {
diff --git a/app/javascript/flavours/glitch/components/empty_account.tsx b/app/javascript/flavours/glitch/components/empty_account.tsx
new file mode 100644
index 0000000000..55322fb575
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/empty_account.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { DisplayName } from 'flavours/glitch/components/display_name';
+import { Skeleton } from 'flavours/glitch/components/skeleton';
+
+interface Props {
+  size?: number;
+  minimal?: boolean;
+}
+
+export const EmptyAccount: React.FC<Props> = ({
+  size = 46,
+  minimal = false,
+}) => {
+  return (
+    <div className={classNames('account', { 'account--minimal': minimal })}>
+      <div className='account__wrapper'>
+        <div className='account__display-name'>
+          <div className='account__avatar-wrapper'>
+            <Skeleton width={size} height={size} />
+          </div>
+
+          <div>
+            <DisplayName />
+            <Skeleton width='7ch' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};