From cf0307af0fb40ac3c0806a806ff8a091c78dd4aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 30 Mar 2022 17:37:30 +0200
Subject: [PATCH] typescript, ThumbNavigationLink component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 ..._with_counter.js => icon_with_counter.tsx} | Bin 644 -> 665 bytes
 .../components/thumb_navigation-link.tsx      |  57 ++++++++++++++
 app/soapbox/components/thumb_navigation.js    | Bin 5536 -> 0 bytes
 app/soapbox/components/thumb_navigation.tsx   |  72 ++++++++++++++++++
 4 files changed, 129 insertions(+)
 rename app/soapbox/components/{icon_with_counter.js => icon_with_counter.tsx} (68%)
 create mode 100644 app/soapbox/components/thumb_navigation-link.tsx
 delete mode 100644 app/soapbox/components/thumb_navigation.js
 create mode 100644 app/soapbox/components/thumb_navigation.tsx

diff --git a/app/soapbox/components/icon_with_counter.js b/app/soapbox/components/icon_with_counter.tsx
similarity index 68%
rename from app/soapbox/components/icon_with_counter.js
rename to app/soapbox/components/icon_with_counter.tsx
index c7de5f8968cbf6451e8f7916fd89a18c5d320ab0..0e09503cf4161af611e33f1ce0bcb3d12e9ecda6 100644
GIT binary patch
delta 193
zcmZo+oyj^;rKLVIuOzi7EipM&!P7H2KQBD9B*Qts6eOsST2Ydkmr|?{l$w}aqURCf
z>*H8bQk0ogT9R691LC@5mbvDn=BDPA*eO(VDJUd^G+HU-mF6a;7U=*5GJz)ATPYL+
sb>*d70|knUl9BkeTwI1g6~!eAXjWT6?R0atL3fqi#=WkLlT(-!0OQI-bN~PV

delta 150
zcmbQq+QO=mnOl%wRH6`2lwS~1S&&++kXDqRtDs&0<m;Az1k|m$CbUduW)$6Q!syBv
z>zSON7oJ&?;hbNZSCU$!2T};pXsb}orJ#@rl(#|{r&nB3l$n>V1C&Vy=|GmsE6q&;
Vnvhu>lv-GtS(KWhGr5FG6#!z3G==~G

diff --git a/app/soapbox/components/thumb_navigation-link.tsx b/app/soapbox/components/thumb_navigation-link.tsx
new file mode 100644
index 0000000000..ae3c4facbb
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
deleted file mode 100644
index 021c18ced11e4042d8d9d0c746a3e5d959a5ba92..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5536
zcmd5=ZEqVl4F2w4!F;LCt?kP&bRW`O*CIo)0Bcbs0rsIN0_9G&wcd*->5_DY|NBVk
zbni)=HhVFWHm9RVihTHxvdlJxG7zU+>km8=8kVZafZ2td7TBwabV46hvAOuVsbx0!
zJU6t^$ealtn@WeGznfR5Symc;m5RO|D>s+^^_=wf)NbKjp)ziaNZt#r`AWd9ZDlTV
zlQyQd5Epqa(37r|5=nX67W=@jf0Ox_8Qe&-J}XKiRDX+IoF_$w`+Ov}uoC9H;G3)B
z_N2&{a#iorZZ*WC%Ocld_1qXeMb~~uYbQmSlQ|b}zb!5>*15=y4kZd+l3$mx6K!;C
zfwauvLfke-98poq_8#>4o#3Wam_Z*Gzo|4b)#0*wO-Dro+CauP=Y|_`QBc-2M4;&r
zqSvsU0EL-^@Y$^|&_=*A!KSb3w@MJiv^{TI?lccRF`i^HXER{MM&xHsl6{^o?2&_(
z7QR7PT=Vn+HT;H4BlFeUN_<q8M5lQk_q_J2<U2aA1V$>irv%`!b?B%$rSsk`Ydk<E
zK2K-34InL6#nAvDfsNbL1&BmgC7u^XE@jLKF7|MJBW(e)#L65iCc%?Ad-0lA(e3ZF
zZ)k@!BGVKKDu7r70iI_DajDdlGKo*{0^W18USKu?T6ca{mS%7`oxu<Ii~rj*CS0$t
z3a*mM<4%rWKqpylhliGpjE7<1V{X;%UQO_4B5o}uC1T0T)WDmjG$(HmZ&cPn50=x3
z<tw;Ym)RB8v|QP60+xr!6AhM?79SD$C%(Qgv3L?nij096$1z(}CEO*EFmKlv+9*Vo
zJ4y|PA){e{<3c6lL29(+=%!Fks-4~{n&X1)JdaB>F>c-$SASr@7E+&yKTC=EcUIHF
zA?^tJqV#^}3LsB}3Z_*=T&Zt;Da>HtI3lWs;tb2cS(t%$3rQyevzB_XAuh31R@Yfz
zaRqRk$m^yZMa)o2=Xsq|_PP>8(Tcsn6cGy<W}A9X-O7f0FE3Lh`<4dOK}1?>r1I4&
zj<(7LD_}&z#ET+X=<5}m?mDuKt!@3M4u}}rAGV&qgq!(Gb_7P1!X=;)U<P42Un%}|
z{?p+hBwT$tYL<RHJj8uIn2QY-DYa!dh$6s4k1N|KnQ>+Hjc$&{Ht#xz3ttlk{O8zq
z8pBr+(;J>M(DE-4v0L2<CWdp+rezYbCVPu@fz1J`+OAr8#D2A_Xwut5O(B_VR*u6e
z+bzGk0MLS~c+H*|0B`KbqHH&IJsEqtwe-IPL=}YZfyJnbe+3*qgME0MSDAe@K(-ZC
z!?S1L35Fon1x}mD^keZeMj?F?8N<+(NYgO{;Y{Uc@#sEM0eFB`P@rLvM-xjoCVe=0
z-TU#({kpoyqU_jFE84cV*~ZxA-Y!958up|plzfP!+LjRzeK@{N1<tb!I&eg_J;tJy
znzQI!^g)iTN$xIm`hK~v?G%3QKo_-k+Mb*7TA&$p%#p4~p4iUUx`@<n(M$St8{rs+
z@ped8F+Gms{gJ!}mObLWtxdWh4N>g1?uX;Mv<wkkW7uvP0Wb8ygZbDSzbN|<f-6+?
zk$Xb(*#NkxZvb6d8-N$#3rF{&(IevVEQ$sPqu8D(<nj(C{SOd$@QH<W5b)*|;{13m
zl(zQ~yn-!c9;am@bTAm{s;iZ)z4{-=;az+_sfi(Y`^1Wwc}i#|cnOKkWgVmey}qwl
z<-2fNvss65!{<O(U-~+QMgpnN4PP$((sX+NoZ!Bzcr?|H;rd~2t#8=l<oXW{33yvL
z7yuJ5zZ@GL^@@OnE(#-H9fRt(=^A3P8VTy4j8JMHw)=zjK{l<;4rhU1{1+huv<^9S
agi)vPJoIDDafnx6cj2+$d*P(8oBR#6!eH$H

diff --git a/app/soapbox/components/thumb_navigation.tsx b/app/soapbox/components/thumb_navigation.tsx
new file mode 100644
index 0000000000..7e1debc612
--- /dev/null
+++ b/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;