Merge branch 'dev' into federation

[lemmy.git] / ui / src / components / private-message-form.tsx

diff --git a/ui/src/components/private-message-form.tsx b/ui/src/components/private-message-form.tsx
index 7e498bae3ca9048ac9f5855591556fd713f6ca13..14abacf62086ca1e0fccab3a49275eabdf11bc4b 100644 (file)
--- a/ui/src/components/private-message-form.tsx
+++ b/ui/src/components/private-message-form.tsx
@@ -21,14 +21,13 @@ import {
   capitalizeFirstLetter,
   markdownHelpUrl,
   mdToHtml,
-  showAvatars,
-  pictshareAvatarThumbnail,
   wsJsonToRes,
   toast,
   randomStr,
   setupTribute,
   setupTippy,
 } from '../utils';
+import { UserListing } from './user-listing';
 import Tribute from 'tributejs/src/Tribute.js';
 import autosize from 'autosize';
 import { i18n } from '../i18next';
@@ -132,22 +131,12 @@ export class PrivateMessageForm extends Component<
 
               {this.state.recipient && (
                 <div class="col-sm-10 form-control-plaintext">
-                  <Link
-                    className="text-body font-weight-bold"
-                    to={`/u/${this.state.recipient.name}`}
-                  >
-                    {this.state.recipient.avatar && showAvatars() && (
-                      <img
-                        height="32"
-                        width="32"
-                        src={pictshareAvatarThumbnail(
-                          this.state.recipient.avatar
-                        )}
-                        class="rounded-circle mr-1"
-                      />
-                    )}
-                    <span>{this.state.recipient.name}</span>
-                  </Link>
+                  <UserListing
+                    user={{
+                      name: this.state.recipient.name,
+                      avatar: this.state.recipient.avatar,
+                    }}
+                  />
                 </div>
               )}
             </div>
@@ -233,8 +222,9 @@ export class PrivateMessageForm extends Component<
               </button>
               {this.state.privateMessageForm.content && (
                 <button
-                  className={`btn btn-secondary mr-2 ${this.state.previewMode &&
-                    'active'}`}
+                  className={`btn btn-secondary mr-2 ${
+                    this.state.previewMode && 'active'
+                  }`}
                   onClick={linkEvent(this, this.handlePreviewToggle)}
                 >
                   {i18n.t('preview')}