From 823cd3124e107cac4077ddaaaf9450d7da1e0b83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 10 Jan 2023 00:11:39 +0100
Subject: [PATCH] I don't think it makes sense to have SvgIcon and
 ForkAwesomeIcon in a single component anymore
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/icon-button.tsx        |  2 +-
 app/soapbox/components/icon.tsx               | 35 ++++++++-------
 app/soapbox/components/status-content.tsx     |  2 +-
 app/soapbox/components/svg-icon.tsx           | 29 ------------
 .../features/list-adder/components/list.tsx   |  2 +-
 app/soapbox/features/lists/index.tsx          |  2 +-
 .../components/icon-picker-dropdown.tsx       |  4 +-
 .../features/ui/components/list-panel.tsx     | 45 -------------------
 .../features/ui/components/promo-panel.tsx    |  4 +-
 9 files changed, 26 insertions(+), 99 deletions(-)
 delete mode 100644 app/soapbox/components/svg-icon.tsx
 delete mode 100644 app/soapbox/features/ui/components/list-panel.tsx

diff --git a/app/soapbox/components/icon-button.tsx b/app/soapbox/components/icon-button.tsx
index 71f110995..9927ae8df 100644
--- a/app/soapbox/components/icon-button.tsx
+++ b/app/soapbox/components/icon-button.tsx
@@ -90,7 +90,7 @@ const IconButton: React.FC<IIconButton> = ({
       type='button'
     >
       <div>
-        <Icon className={iconClassName} src={src} fixedWidth aria-hidden='true' />
+        <Icon className={iconClassName} src={src} aria-hidden='true' />
       </div>
       {text && <span className='icon-button__text'>{text}</span>}
     </button>
diff --git a/app/soapbox/components/icon.tsx b/app/soapbox/components/icon.tsx
index f03f40580..8e875ed0e 100644
--- a/app/soapbox/components/icon.tsx
+++ b/app/soapbox/components/icon.tsx
@@ -1,27 +1,28 @@
 /**
- * Icon: abstract icon class that can render icons from multiple sets.
+ * Icon: abstact component to render SVG icons.
  * @module soapbox/components/icon
- * @see soapbox/components/fork_awesome_icon
- * @see soapbox/components/svg_icon
  */
 
+import classNames from 'clsx';
 import React from 'react';
+import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
-import ForkAwesomeIcon, { IForkAwesomeIcon } from './fork-awesome-icon';
-import SvgIcon, { ISvgIcon } from './svg-icon';
+export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
+  src: string,
+  id?: string,
+  alt?: string,
+  className?: string,
+}
 
-export type IIcon = IForkAwesomeIcon | ISvgIcon;
-
-const Icon: React.FC<IIcon> = (props) => {
-  if ((props as ISvgIcon).src) {
-    const { src, ...rest } = (props as ISvgIcon);
-
-    return <SvgIcon src={src} {...rest} />;
-  } else {
-    const { id, fixedWidth, ...rest } = (props as IForkAwesomeIcon);
-
-    return <ForkAwesomeIcon id={id} fixedWidth={fixedWidth} {...rest} />;
-  }
+const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
+  return (
+    <div
+      className={classNames('svg-icon', className)}
+      {...rest}
+    >
+      <InlineSVG src={src} title={alt} loader={<></>} />
+    </div>
+  );
 };
 
 export default Icon;
diff --git a/app/soapbox/components/status-content.tsx b/app/soapbox/components/status-content.tsx
index df35a90ac..c361c2289 100644
--- a/app/soapbox/components/status-content.tsx
+++ b/app/soapbox/components/status-content.tsx
@@ -26,7 +26,7 @@ interface IReadMoreButton {
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
   <button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
     <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-    <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
+    <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} />
   </button>
 );
 
diff --git a/app/soapbox/components/svg-icon.tsx b/app/soapbox/components/svg-icon.tsx
deleted file mode 100644
index cd8942f68..000000000
--- a/app/soapbox/components/svg-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * SvgIcon: abstact component to render SVG icons.
- * @module soapbox/components/svg_icon
- * @see soapbox/components/icon
- */
-
-import classNames from 'clsx';
-import React from 'react';
-import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
-
-export interface ISvgIcon extends React.HTMLAttributes<HTMLDivElement> {
-  src: string,
-  id?: string,
-  alt?: string,
-  className?: string,
-}
-
-const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, className, ...rest }) => {
-  return (
-    <div
-      className={classNames('svg-icon', className)}
-      {...rest}
-    >
-      <InlineSVG src={src} title={alt} loader={<></>} />
-    </div>
-  );
-};
-
-export default SvgIcon;
diff --git a/app/soapbox/features/list-adder/components/list.tsx b/app/soapbox/features/list-adder/components/list.tsx
index f1fb3ee40..b02800c92 100644
--- a/app/soapbox/features/list-adder/components/list.tsx
+++ b/app/soapbox/features/list-adder/components/list.tsx
@@ -37,7 +37,7 @@ const List: React.FC<IList> = ({ listId }) => {
 
   return (
     <div className='flex items-center gap-1.5 px-2 py-4 text-black dark:text-white'>
-      <Icon src={require('@tabler/icons/list.svg')} fixedWidth />
+      <Icon src={require('@tabler/icons/list.svg')} />
       <span className='flex-grow'>
         {list.title}
       </span>
diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index 082da7c5d..3dc8b4c90 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -85,7 +85,7 @@ const Lists: React.FC = () => {
         >
           {lists.map((list: any) => (
             <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 p-2 text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg'>
-              <Icon src={require('@tabler/icons/list.svg')} fixedWidth />
+              <Icon src={require('@tabler/icons/list.svg')} />
               <span className='flex-grow'>
                 {list.title}
               </span>
diff --git a/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx b/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
index d23e9f004..9a5f90399 100644
--- a/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 // @ts-ignore
 import Overlay from 'react-overlays/lib/Overlay';
 
-import Icon from 'soapbox/components/icon';
+import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
 
 import IconPickerMenu from './icon-picker-menu';
 
@@ -68,7 +68,7 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji
         onKeyDown={onToggle}
         tabIndex={0}
       >
-        <Icon id={value} />
+        <ForkAwesomeIcon id={value} />
       </div>
 
       <Overlay show={active} placement={placement} target={target.current}>
diff --git a/app/soapbox/features/ui/components/list-panel.tsx b/app/soapbox/features/ui/components/list-panel.tsx
deleted file mode 100644
index 8160217e9..000000000
--- a/app/soapbox/features/ui/components/list-panel.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useEffect } from 'react';
-import { NavLink } from 'react-router-dom';
-import { createSelector } from 'reselect';
-
-import { fetchLists } from 'soapbox/actions/lists';
-import Icon from 'soapbox/components/icon';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-
-import type { List as ImmutableList } from 'immutable';
-import type { RootState } from 'soapbox/store';
-import type { List as ListEntity } from 'soapbox/types/entities';
-
-const getOrderedLists = createSelector([(state: RootState) => state.lists], lists => {
-  if (!lists) {
-    return lists;
-  }
-
-  return lists.toList().filter(item => !!item).sort((a, b) => (a as ListEntity).title.localeCompare((b as ListEntity).title)).take(4) as ImmutableList<ListEntity>;
-});
-
-const ListPanel = () => {
-  const dispatch = useAppDispatch();
-
-  const lists = useAppSelector((state) => getOrderedLists(state));
-
-  useEffect(() => {
-    dispatch(fetchLists());
-  }, []);
-
-  if (!lists || lists.isEmpty()) {
-    return null;
-  }
-
-  return (
-    <div>
-      <hr />
-
-      {lists.map(list => (
-        <NavLink key={list.id} className='column-link column-link--transparent' strict to={`/list/${list.id}`}><Icon className='column-link__icon' id='list-ul' fixedWidth />{list.title}</NavLink>
-      ))}
-    </div>
-  );
-};
-
-export default ListPanel;
diff --git a/app/soapbox/features/ui/components/promo-panel.tsx b/app/soapbox/features/ui/components/promo-panel.tsx
index 12798dc06..778302f11 100644
--- a/app/soapbox/features/ui/components/promo-panel.tsx
+++ b/app/soapbox/features/ui/components/promo-panel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Icon from 'soapbox/components/icon';
+import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
 import { Widget, Stack, Text } from 'soapbox/components/ui';
 import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks';
 
@@ -20,7 +20,7 @@ const PromoPanel: React.FC = () => {
         {promoItems.map((item, i) => (
           <Text key={i}>
             <a className='flex items-center' href={item.url} target='_blank'>
-              <Icon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
+              <ForkAwesomeIcon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
               {item.textLocales.get(locale) || item.text}
             </a>
           </Text>