refactor(sidebar): convert to TS

src/components/Input/index.tsx

@@ -33,12 +33,14 @@ type TProps = {
   disabled?: boolean
   autoFocus?: boolean
 
+  onFocus?: (e) => void | null
   onChange?: (e) => void | null
 }
 
 const Input: FC<TProps> = ({
   behavior = 'default',
   onChange = null,
+  onFocus = null,
   prefixIcon = null,
   prefixActive = false,
   suffixIcon = null,
@@ -47,6 +49,7 @@ const Input: FC<TProps> = ({
   ...restProps
 }) => {
   const handleOnChange = useCallback((e) => onChange && onChange(e), [onChange])
+  const handleOnFocus = useCallback((e) => onFocus && onFocus(e), [onFocus])
   const validProps = pickBy((v) => v !== null, restProps)
 
   return behavior === 'default' ? (
@@ -56,6 +59,7 @@ const Input: FC<TProps> = ({
       </PrefixWrapper>
       <InputWrapper
         onChange={handleOnChange}
+        onFocus={handleOnFocus}
         spellcheck="false"
         // prefix={false}
         hasPrefix={!nilOrEmpty(prefixIcon)}

src/components/TabBar/spec.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 
 export type TTabItem = {
   title?: string
-  raw?: string
+  raw: string
   alias?: string
   icon?: string | ReactNode
   localIcon?: string

src/containers/unit/Sidebar/Footer.js → src/containers/unit/Sidebar/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
 import { ICON_CMD, ISSUE_ADDR } from '@/config'
 
@@ -17,10 +17,15 @@ import {
 
 import { sortBtnOnClick } from './logic'
 
-const Footer = ({ pin, sortOptActive }) => {
+type TProps = {
+  pin: boolean
+  sortOptActive: boolean
+}
+
+const Footer: FC<TProps> = ({ pin, sortOptActive }) => {
   return (
-    <Wrapper pin={pin}>
-      <InnerWrapper pin={pin}>
+    <Wrapper>
+      <InnerWrapper>
         <OptionWrapper pin={pin}>
           <OptionItem active={sortOptActive} onClick={() => sortBtnOnClick()}>
             <OptionIcon src={`${ICON_CMD}/sidebar_drag.svg`} />
@@ -42,4 +47,4 @@ const Footer = ({ pin, sortOptActive }) => {
   )
 }
 
-export default React.memo(Footer)
+export default memo(Footer)

src/containers/unit/Sidebar/Header.js → src/containers/unit/Sidebar/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
 import { ICON } from '@/config'
 
@@ -15,12 +15,17 @@ import {
 } from './styles/header'
 import { searchOnFocus, searchCommunityValueOnChange, setPin } from './logic'
 
-const Header = ({ pin, searchCommunityValue }) => (
-  <Wrapper pin={pin}>
+type TProps = {
+  pin: boolean
+  searchCommunityValue: string
+}
+
+const Header: FC<TProps> = ({ pin, searchCommunityValue }) => (
+  <Wrapper>
     <InnerWrapper>
       {!pin ? (
         <HeaderFuncs>
-          <MenuWrapper pin={pin} onClick={setPin}>
+          <MenuWrapper onClick={setPin}>
             <MenuLogo src={`${ICON}/sidebar-menu.svg`} pin={pin} />
           </MenuWrapper>
         </HeaderFuncs>
@@ -37,7 +42,7 @@ const Header = ({ pin, searchCommunityValue }) => (
               />
             </SearchContent>
           </SearchWrapper>
-          <MenuWrapper pin={pin} onClick={setPin}>
+          <MenuWrapper onClick={setPin}>
             <MenuLogo src={`${ICON}/sidebar-menu.svg`} pin={pin} />
           </MenuWrapper>
         </HeaderFuncs>
@@ -46,4 +51,4 @@ const Header = ({ pin, searchCommunityValue }) => (
   </Wrapper>
 )
 
-export default React.memo(Header)
+export default memo(Header)

src/containers/unit/Sidebar/LoadingBlocks.js → src/containers/unit/Sidebar/LoadingBlocks.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
 import { range } from 'ramda'
 import { Wrapper, Block } from './styles/loading_blocks'
 
-const LoadingBlocks = () => {
+const LoadingBlocks: FC = () => {
   return (
     <Wrapper>
       {range(0, 14).map((num) => (
@@ -13,4 +13,4 @@ const LoadingBlocks = () => {
   )
 }
 
-export default React.memo(LoadingBlocks)
+export default memo(LoadingBlocks)

src/containers/unit/Sidebar/MenuList/MenuBar.js → src/containers/unit/Sidebar/MenuList/MenuBar.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react'
+import { FC, memo, useCallback } from 'react'
 import { toLower } from 'ramda'
 
+import type { TCommunity } from '@/spec'
 import { ICON_CMD } from '@/config'
-// import { uid } from '@/utils'
 
 import TrendLine from '@/components/TrendLine'
 
@@ -19,44 +19,42 @@ import {
 
 import { onCommunitySelect } from '../logic'
 
-const MenuBar = ({ pin, sortOptActive, item, activeRaw, forceRerender }) => {
-  const handleSelect = useCallback(() => {
-    onCommunitySelect(item)
-  }, [item])
+type TProps = {
+  item: TCommunity
+  pin: boolean
+  sortOptActive?: boolean
+  activeRaw: string
+}
+
+const MenuBar: FC<TProps> = ({
+  pin,
+  sortOptActive = false,
+  item,
+  activeRaw,
+}) => {
+  const handleSelect = useCallback(() => onCommunitySelect(item), [item])
 
   return (
     <Wrapper onClick={handleSelect}>
-      <ActiveBar
-        pin={pin}
-        active={!sortOptActive && activeRaw === toLower(item.raw)}
-      />
+      <ActiveBar active={!sortOptActive && activeRaw === toLower(item.raw)} />
       <DragIcon src={`${ICON_CMD}/drag.svg`} show={sortOptActive} />
       <MenuItemBar>
-        <MenuRow
-          pin={pin}
-          sortOptActive={sortOptActive}
-          active={!sortOptActive && activeRaw === toLower(item.raw)}
-        >
+        <MenuRow sortOptActive={sortOptActive}>
           <MenuItemIcon
             key={item.raw}
             active={activeRaw === toLower(item.raw)}
             raw={item.raw}
             src={item.logo}
           />
           {/* eslint-disable jsx-a11y/anchor-is-valid */}
-          <MenuItemTitle
-            pin={pin}
-            active={activeRaw === toLower(item.raw)}
-            forceRerender={forceRerender}
-          >
+          <MenuItemTitle pin={pin} active={activeRaw === toLower(item.raw)}>
             {item.title}
           </MenuItemTitle>
 
           <MiniChartWrapper pin={pin}>
             <TrendLine
               key={item.raw}
               data={item.contributesDigest}
-              duration={300}
               radius={15}
               width={7}
             />
@@ -67,4 +65,4 @@ const MenuBar = ({ pin, sortOptActive, item, activeRaw, forceRerender }) => {
   )
 }
 
-export default React.memo(MenuBar)
+export default memo(MenuBar)

src/containers/unit/Sidebar/MenuList/NormalMenuList.js → src/containers/unit/Sidebar/MenuList/NormalMenuList.tsx

@@ -1,34 +1,34 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
+import type { TCommunity } from '@/spec'
 import CustomScroller from '@/components/CustomScroller'
 import MenuBar from './MenuBar'
 
-const NormalMenuList = ({ communities, pin, activeRaw, forceRerender }) => {
+type TProps = {
+  communities: TCommunity[]
+  pin: boolean
+  activeRaw: string
+}
+
+const NormalMenuList: FC<TProps> = ({ communities, pin, activeRaw }) => {
   const scrollHeight = !pin ? 'calc(100vh - 88px)' : 'calc(100vh - 140px)'
-  const barSize = !pin ? 'none' : 'small'
 
   return (
     <CustomScroller
       direction="vertical"
       height={scrollHeight}
-      barSize={barSize}
+      barSize="small"
       withBorder
       autoHide
     >
       <div>
         {communities.map((item) => (
-          <MenuBar
-            key={item.raw}
-            pin={pin}
-            item={item}
-            activeRaw={activeRaw}
-            forceRerender={forceRerender}
-          />
+          <MenuBar key={item.raw} pin={pin} item={item} activeRaw={activeRaw} />
         ))}
         <br />
       </div>
     </CustomScroller>
   )
 }
 
-export default React.memo(NormalMenuList)
+export default memo(NormalMenuList)

src/containers/unit/Sidebar/MenuList/SortableMenuList.tsx

@@ -0,0 +1,63 @@
+import { ComponentClass } from 'react'
+import {
+  SortableContainer,
+  SortableElement,
+  SortableElementProps,
+  SortableContainerProps,
+} from 'react-sortable-hoc'
+
+import type { TCommunity } from '@/spec'
+import CustomScroller from '@/components/CustomScroller'
+import MenuBar from './MenuBar'
+
+type TMenuBar = {
+  item: TCommunity
+  pin: boolean
+  activeRaw: string
+  sortOptActive: boolean
+} & SortableElementProps
+
+const SortableMenuBar: ComponentClass<TMenuBar> = SortableElement(
+  ({ pin, sortOptActive, item, activeRaw }) => {
+    return (
+      <MenuBar
+        pin={pin}
+        sortOptActive={sortOptActive}
+        item={item}
+        activeRaw={activeRaw}
+      />
+    )
+  },
+)
+
+type TProps = {
+  communities: TCommunity[]
+  pin: boolean
+  activeRaw: string
+  sortOptActive: boolean
+  // see: https://github.com/clauderic/react-sortable-hoc/blob/master/types/index.d.ts
+} & SortableContainerProps
+
+const SortableMenuList: ComponentClass<TProps> = SortableContainer(
+  ({ communities, pin, sortOptActive, activeRaw }) => {
+    return (
+      <CustomScroller direction="vertical" height="84vh" withBorder autoHide>
+        <div>
+          {communities.map((item: TCommunity, index: number) => (
+            <SortableMenuBar
+              index={index}
+              key={item.raw}
+              pin={pin}
+              sortOptActive={sortOptActive}
+              item={item}
+              activeRaw={activeRaw}
+            />
+          ))}
+          <br />
+        </div>
+      </CustomScroller>
+    )
+  },
+)
+
+export default SortableMenuList