typescript, ThumbNavigationLink component

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/icon_with_counter.tsx

@@ -1,10 +1,15 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import Icon from 'soapbox/components/icon';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
-const IconWithCounter = ({ icon, count, ...rest }) => {
+interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
+  count: number,
+  icon?: string;
+  src?: string;
+}
+
+const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, ...rest }) => {
   return (
     <div className='relative'>
       <Icon id={icon} {...rest} />
@@ -16,9 +21,4 @@ const IconWithCounter = ({ icon, count, ...rest }) => {
   );
 };
 
-IconWithCounter.propTypes = {
-  icon: PropTypes.string,
-  count: PropTypes.number.isRequired,
-};
-
 export default IconWithCounter;

app/soapbox/components/thumb_navigation-link.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+
+import IconWithCounter from 'soapbox/components/icon_with_counter';
+import { Icon, Text } from 'soapbox/components/ui';
+
+interface IThumbNavigationLink {
+  count?: number,
+  src: string,
+  text: string | React.ReactElement,
+  to: string,
+  exact?: boolean,
+  paths?: Array<string>,
+}
+
+const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, src, text, to, exact, paths }): JSX.Element => {
+  const location = useLocation();
+
+  const active = paths
+    ? paths.some(location.pathname.startsWith)
+    : (exact
+      ? location.pathname === to
+      : location.pathname.startsWith(to));
+
+
+  return (
+    <NavLink to={to} exact={exact} className='thumb-navigation__link'>
+      {count !== undefined ? (
+        <IconWithCounter
+          src={require('@tabler/icons/icons/messages.svg')}
+          className={classNames({
+            'h-5 w-5': true,
+            'text-gray-600 dark:text-gray-300': !active,
+            'text-primary-600': active,
+          })}
+          count={count}
+        />
+      ) : (
+        <Icon
+          src={src}
+          className={classNames({
+            'h-5 w-5': true,
+            'text-gray-600 dark:text-gray-300': !active,
+            'text-primary-600': active,
+          })}
+        />
+      )}
+
+      <Text tag='span' size='xs'>
+        {text}
+      </Text>
+    </NavLink>
+  );
+};
+
+export default ThumbNavigationLink;

app/soapbox/components/thumb_navigation.js

@@ -1,152 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom';
-
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import IconWithCounter from 'soapbox/components/icon_with_counter';
-import { Icon, Text } from 'soapbox/components/ui';
-import { getFeatures } from 'soapbox/utils/features';
-
-const mapStateToProps = state => {
-  const me = state.get('me');
-  const reportsCount = state.getIn(['admin', 'openReports']).count();
-  const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
-  const instance = state.get('instance');
-
-  return {
-    account: state.getIn(['accounts', me]),
-    logo: getSoapboxConfig(state).get('logo'),
-    notificationCount: state.getIn(['notifications', 'unread']),
-    chatsCount: state.getIn(['chats', 'items']).reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
-    dashboardCount: reportsCount + approvalCount,
-    features: getFeatures(instance),
-  };
-};
-
-export default @withRouter
-@connect(mapStateToProps)
-class ThumbNavigation extends React.PureComponent {
-
-  static propTypes = {
-    logo: PropTypes.string,
-    account: ImmutablePropTypes.record,
-    dashboardCount: PropTypes.number,
-    notificationCount: PropTypes.number,
-    chatsCount: PropTypes.number,
-    features: PropTypes.object.isRequired,
-    location: PropTypes.object,
-  }
-
-  render() {
-    const { account, notificationCount, chatsCount, location, features } = this.props;
-
-    return (
-      <div className='thumb-navigation'>
-        <NavLink to='/' exact className='thumb-navigation__link'>
-          <Icon
-            src={require('icons/feed.svg')}
-            className={classNames({
-              'h-5 w-5': true,
-              'text-gray-600 dark:text-gray-300': location.pathname !== '/',
-              'text-primary-600': location.pathname === '/',
-            })}
-          />
-
-          <Text tag='span' size='xs'>
-            <FormattedMessage id='navigation.home' defaultMessage='Home' />
-          </Text>
-        </NavLink>
-
-        <NavLink to='/search' className='thumb-navigation__link'>
-          <Icon
-            src={require('@tabler/icons/icons/search.svg')}
-            className={classNames({
-              'h-5 w-5': true,
-              'text-gray-600 dark:text-gray-300': location.pathname !== '/search',
-              'text-primary-600': location.pathname === '/search',
-            })}
-          />
-
-          <Text tag='span' size='xs'>
-            <FormattedMessage id='navigation.search' defaultMessage='Search' />
-          </Text>
-        </NavLink>
-
-        {account && (
-          <NavLink to='/notifications' className='thumb-navigation__link'>
-            <Icon
-              src={require('@tabler/icons/icons/bell.svg')}
-              className={classNames({
-                'h-5 w-5': true,
-                'text-gray-600 dark:text-gray-300': location.pathname !== '/notifications',
-                'text-primary-600': location.pathname === '/notifications',
-              })}
-              count={notificationCount}
-            />
-
-            <Text tag='span' size='xs'>
-              <FormattedMessage id='navigation.notifications' defaultMessage='Alerts' />
-            </Text>
-          </NavLink>
-        )}
-
-        {account && (
-          features.chats ? (
-            <NavLink to='/chats' className='thumb-navigation__link'>
-              <IconWithCounter
-                src={require('@tabler/icons/icons/messages.svg')}
-                className={classNames({
-                  'h-5 w-5': true,
-                  'text-gray-600 dark:text-gray-300': location.pathname !== '/chats',
-                  'text-primary-600': location.pathname === '/chats',
-                })}
-                count={chatsCount}
-              />
-              <Text tag='span' size='xs'>
-                <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
-              </Text>
-            </NavLink>
-          ) : (
-            <NavLink to='/messages' className='thumb-navigation__link'>
-              <Icon
-                src={require('@tabler/icons/icons/mail.svg')}
-                className={classNames({
-                  'h-5 w-5': true,
-                  'text-gray-600 dark:text-gray-300': !['/messages', '/conversations'].includes(location.pathname),
-                  'text-primary-600': ['/messages', '/conversations'].includes(location.pathname),
-                })}
-              />
-
-              <Text tag='span' size='xs'>
-                <FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />
-              </Text>
-            </NavLink>
-          )
-        )}
-
-        {/* (account && isStaff(account)) && (
-          <NavLink to='/admin' className='thumb-navigation__link'>
-            <Icon
-              src={require('@tabler/icons/icons/dashboard.svg')}
-              className={classNames({
-                'h-5 w-5': true,
-                'text-gray-600': !location.pathname.startsWith('/admin'),
-                'text-primary-600': location.pathname.startsWith('/admin'),
-              })}
-              count={dashboardCount}
-            />
-
-            <Text tag='span' size='xs'>
-              <FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />
-            </Text>
-          </NavLink>
-        ) */}
-      </div>
-    );
-  }
-
-}

app/soapbox/components/thumb_navigation.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import ThumbNavigationLink from 'soapbox/components/thumb_navigation-link';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { getFeatures } from 'soapbox/utils/features';
+
+const ThumbNavigation: React.FC = (): JSX.Element => {
+  const account = useOwnAccount();
+  const notificationCount = useAppSelector((state) => state.notifications.unread);
+  const chatsCount = useAppSelector((state) => state.chats.get('items').reduce((acc: number, curr: any) => acc + Math.min(curr.get('unread', 0), 1), 0));
+  // const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
+  const features = getFeatures(useAppSelector((state) => state.instance));
+
+  return (
+    <div className='thumb-navigation'>
+      <ThumbNavigationLink
+        src={require('icons/feed.svg')}
+        text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
+        to='/'
+        exact
+      />
+
+      <ThumbNavigationLink
+        src={require('@tabler/icons/icons/search.svg')}
+        text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
+        to='/search'
+        exact
+      />
+
+      {account && (
+        <ThumbNavigationLink
+          src={require('@tabler/icons/icons/bell.svg')}
+          text={<FormattedMessage id='navigation.notifications' defaultMessage='Alerts' />}
+          to='/notifications'
+          exact
+          count={notificationCount}
+        />
+      )}
+
+      {account && (
+        features.chats ? (
+          <ThumbNavigationLink
+            src={require('@tabler/icons/icons/messages.svg')}
+            text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
+            to='/chats'
+            exact
+            count={chatsCount}
+          />
+        ) : (
+          <ThumbNavigationLink
+            src={require('@tabler/icons/icons/mail.svg')}
+            text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
+            to='/messages'
+            paths={['/messages', '/conversations']}
+          />
+        )
+      )} 
+
+      {/* (account && isStaff(account)) && (
+        <ThumbNavigationLink
+          src={require('@tabler/icons/icons/dashboard.svg')}
+          text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
+          to='/admin'
+          count={dashboardCount}
+        />
+      ) */}
+    </div>
+  );
+};
+
+export default ThumbNavigation;