From b2c9d4938fa9f3c9119aeaeddfad1ad968bd015d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 29 Apr 2022 21:05:39 -0500
Subject: [PATCH] Display rudimentary ProfileFieldsPanel

---
 .../ui/components/profile_fields_panel.tsx    | 30 +++++++++++++++++++
 .../features/ui/util/async-components.ts      |  4 +++
 app/soapbox/pages/profile_page.tsx            |  7 +++--
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/profile_fields_panel.tsx

diff --git a/app/soapbox/features/ui/components/profile_fields_panel.tsx b/app/soapbox/features/ui/components/profile_fields_panel.tsx
new file mode 100644
index 000000000..effc5eeda
--- /dev/null
+++ b/app/soapbox/features/ui/components/profile_fields_panel.tsx
@@ -0,0 +1,30 @@
+'use strict';
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Widget, Stack } from 'soapbox/components/ui';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IProfileFieldsPanel {
+  account: Account,
+}
+
+/** Custom profile fields for sidebar. */
+const ProfileFieldsPanel: React.FC<IProfileFieldsPanel> = ({ account }) => {
+  return (
+    <Widget title={<FormattedMessage id='profile_fields_panel.title' defaultMessage='Profile fields' />}>
+      <Stack space={2}>
+        {account.fields.map(field => (
+          <div>
+            {field.name_emojified}<br />
+            {field.value_emojified}
+          </div>
+        ))}
+      </Stack>
+    </Widget>
+  );
+};
+
+export default ProfileFieldsPanel;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 7deaa2651..6644a32dc 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -362,6 +362,10 @@ export function ProfileMediaPanel() {
   return import(/* webpackChunkName: "features/account_gallery" */'../components/profile_media_panel');
 }
 
+export function ProfileFieldsPanel() {
+  return import(/* webpackChunkName: "features/account_timeline" */'../components/profile_fields_panel');
+}
+
 export function PinnedAccountsPanel() {
   return import(/* webpackChunkName: "features/pinned_accounts" */'../components/pinned_accounts_panel');
 }
diff --git a/app/soapbox/pages/profile_page.tsx b/app/soapbox/pages/profile_page.tsx
index 68d06388a..eb178af95 100644
--- a/app/soapbox/pages/profile_page.tsx
+++ b/app/soapbox/pages/profile_page.tsx
@@ -9,6 +9,7 @@ import {
   TrendsPanel,
   ProfileInfoPanel,
   ProfileMediaPanel,
+  ProfileFieldsPanel,
   SignUpPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
@@ -141,9 +142,9 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
         <BundleContainer fetchComponent={ProfileMediaPanel}>
           {Component => <Component account={account} />}
         </BundleContainer>
-        {features.trends && (
-          <BundleContainer fetchComponent={TrendsPanel}>
-            {Component => <Component limit={3} key='trends-panel' />}
+        {account && !account.fields.isEmpty() && (
+          <BundleContainer fetchComponent={ProfileFieldsPanel}>
+            {Component => <Component account={account} />}
           </BundleContainer>
         )}
         {features.suggestions && (