refactor(article-cat-state): sync name alias & dashboard fix (#145)

src/containers/layout/GlobalLayout/index.tsx

@@ -88,7 +88,7 @@ const GlobalLayoutContainer: FC<TProps> = ({ globalLayout: store, children }) =>
         {load && <Addon />}
         <Skeleton>
           <Wallpaper />
-          <ScrollWrapper noMobilePadding={metric === METRIC.HOME}>
+          <ScrollWrapper $noMobilePadding={metric === METRIC.HOME}>
             <Wrapper>
               <SEO />
               {/* TODO: extract */}

src/containers/layout/GlobalLayout/styles/index.ts

@@ -19,7 +19,7 @@ export const Wrapper = styled.div`
   ${css.row('justify-center')};
 `
 
-export const ScrollWrapper = styled.div<{ noMobilePadding: boolean }>`
+export const ScrollWrapper = styled.div<{ $noMobilePadding: boolean }>`
   position: absolute;
   width: 100%;
 
@@ -28,8 +28,8 @@ export const ScrollWrapper = styled.div<{ noMobilePadding: boolean }>`
     margin-left: 8px;
   `};
 
-  ${({ noMobilePadding }) =>
-    noMobilePadding ? 'width: 100% !important; margin-left: 0 !important;' : ''};
+  ${({ $noMobilePadding }) =>
+    $noMobilePadding ? 'width: 100% !important; margin-left: 0 !important;' : ''};
 `
 
 type TInner = { metric: TMetric; hasTopbar: boolean; topbarBg: TColorName; hasShadow: boolean }

src/containers/thread/DashboardThread/SavingBar.tsx

@@ -7,7 +7,15 @@ import { SpaceGrow } from '@/widgets/Common'
 import YesOrNoButtons from '@/widgets/Buttons/YesOrNoButtons'
 
 import type { TSettingField } from './spec.d'
-import { Wrapper, HintWrapper, InfoIcon, HintText, Hint, ActionWrapper } from './styles/saving_bar'
+import {
+  NormalWrapper,
+  MinimalWrapper,
+  HintWrapper,
+  InfoIcon,
+  HintText,
+  Hint,
+  ActionWrapper,
+} from './styles/saving_bar'
 
 import { rollbackEdit, onSave } from './logic'
 
@@ -39,13 +47,16 @@ const SavingBar: FC<TProps> = ({
   onConfirm = log,
   ...restProps
 }) => {
+  // cannot pass minimal to Wrapper, cuz the wired issue on styled-components@6
+  const Wrapper = !minimal ? NormalWrapper : MinimalWrapper
+
   if (children !== null) {
     if (isTouched) {
       return (
-        <Wrapper direction="left" minimal={minimal} {...restProps}>
+        <Wrapper direction="left" {...restProps}>
           <Fragment>{children}</Fragment>
           <SpaceGrow />
-          <ActionWrapper minimal={minimal}>
+          <ActionWrapper $minimal={minimal}>
             <YesOrNoButtons
               cancelText="取消"
               confirmText="确定"
@@ -75,16 +86,16 @@ const SavingBar: FC<TProps> = ({
   if (!isTouched) return null
 
   return (
-    <Wrapper key={field} direction="right" minimal={minimal} {...restProps}>
+    <Wrapper direction="right" {...restProps}>
       <HintWrapper>
-        <InfoIcon minimal={minimal} />
-        <HintText minimal={minimal}>
+        <InfoIcon $minimal={minimal} />
+        <HintText $minimal={minimal}>
           {prefix}
           {hint && <Hint>{hint}</Hint>} ?
         </HintText>
       </HintWrapper>
       <SpaceGrow />
-      <ActionWrapper minimal={minimal}>
+      <ActionWrapper $minimal={minimal}>
         <YesOrNoButtons
           cancelText="取消"
           disabled={disabled}

src/containers/thread/DashboardThread/constant.tsx

@@ -210,8 +210,15 @@ export const BUILDIN_ALIAS_SUGGESTIONS = {
   doc: ['文档', '帮助中心'],
   upvote_bug: ['同样问题', '复现', '求解决'],
   todo: ['Todo', '已排期', '评估中', '计划中'],
-  doing: ['Doing', '完善中'],
+  wip: ['Wip', '完善中'],
   done: ['Done', '已解决'],
+  // state
+  feature: ['功能建议', '功能需求', '新功能'],
+  question: ['求助 / 疑问', '使用帮助'],
+  bug: ['问题上报', '缺陷', 'issue', 'bug'],
+  other: ['其他讨论', '其他话题'],
+  // TODO
+  state_other: ['其他讨论'],
 }
 
 export const BUILDIN_ALIAS = [
@@ -246,7 +253,7 @@ export const BUILDIN_ALIAS = [
     group: ALIAS_GROUP.KANBAN,
   },
   {
-    slug: 'doing',
+    slug: 'wip',
     name: '进行中',
     original: '进行中',
     group: ALIAS_GROUP.KANBAN,
@@ -257,6 +264,30 @@ export const BUILDIN_ALIAS = [
     original: '已完成',
     group: ALIAS_GROUP.KANBAN,
   },
+  {
+    slug: 'feature',
+    name: '功能建议',
+    original: '功能建议',
+    group: ALIAS_GROUP.KANBAN,
+  },
+  {
+    slug: 'bug',
+    name: '问题上报',
+    original: '问题上报',
+    group: ALIAS_GROUP.KANBAN,
+  },
+  {
+    slug: 'question',
+    name: '求助 / 疑问',
+    original: '求助 / 疑问',
+    group: ALIAS_GROUP.KANBAN,
+  },
+  {
+    slug: 'other',
+    name: '其他讨论',
+    original: '其他讨论',
+    group: ALIAS_GROUP.KANBAN,
+  },
   {
     slug: 'upvote',
     name: '投票',
@@ -415,7 +446,7 @@ export const ALIAS_TABS = [
     slug: DASHBOARD_ALIAS_ROUTE.THREAD,
   },
   {
-    title: '看板列',
+    title: '看板',
     slug: DASHBOARD_ALIAS_ROUTE.KANBAN,
   },
   {

src/containers/thread/DashboardThread/spec.d.ts

@@ -29,7 +29,7 @@ import type {
   TDashboardAliasRoute,
   TLinkItem,
   TChangeMode,
-  TNameAliasConfig,
+  TNameAlias,
   TSocialItem,
   TPagedArticles,
   TID,
@@ -41,6 +41,8 @@ import type {
   TDashboardSEOConfig,
 } from '@/spec'
 
+export { TNameAlias } from '@/spec'
+
 type TMenuGroupName = 'BASIC' | 'ANALYSIS' | 'CMS' | 'INTEGRATE'
 
 export type TOverview = {
@@ -116,8 +118,6 @@ export type TFooterSettings = {
   threads: TCommunityThread[]
 } & TLinkState
 
-export type TNameAlias = TNameAliasConfig
-
 export type TAdminSettings = {
   moderators: TModerator[]
   activeModerator: TUser | null

src/containers/thread/DashboardThread/store/index.ts

@@ -33,7 +33,7 @@ import type {
   TSizeSML,
   TColorName,
   TEnableConfig,
-  TNameAliasConfig,
+  TNameAlias,
   TChangeMode,
   TArticleEntries,
   TSocialItem,
@@ -82,7 +82,6 @@ import type {
   TAdminSettings,
   TTouched,
   TSettingField,
-  TNameAlias,
   TWidgetsSettings,
   TBroadcastSettings,
   TWidgetType,
@@ -415,7 +414,7 @@ const DashboardThread = T.model('DashboardThread', {
       )
 
       const mappedThreads = curCommunity.threads.map((pThread) => {
-        const aliasItem = find(propEq('slug', pThread.slug))(nameAlias) as TNameAliasConfig
+        const aliasItem = find(propEq('slug', pThread.slug))(nameAlias) as TNameAlias
 
         return {
           ...pThread,

src/containers/thread/DashboardThread/styles/alias/item.ts

@@ -40,7 +40,6 @@ export const ArrowIcon = styled(ArrowSVG)`
 `
 export const InputWrapper = styled.div`
   width: 180px;
-  margin-left: -10px;
 `
 export const Inputer = styled(Input)`
   height: 28px;

src/containers/thread/DashboardThread/styles/saving_bar.ts

@@ -5,38 +5,41 @@ import css, { theme } from '@/css'
 
 import InfoSVG from '@/icons/Save'
 
-type TWrapper = { direction: 'left' | 'right'; minimal: boolean } & TSpace
-export const Wrapper = styled.div<TWrapper>`
+type TWrapper = { direction: 'left' | 'right' } & TSpace
+export const NormalWrapper = styled.div<TWrapper>`
   ${css.row('align-center')};
   width: ${({ direction }) => (direction === 'right' ? 'calc(100% + 10px)' : '100%')};
   background: ${({ direction }) => `linear-gradient(to ${direction}, #f7f7f7 60%, transparent)`};
 
-  height: ${({ minimal }) => (minimal ? '34px' : '42px')}};
-  padding: ${({ minimal }) => (minimal ? '0 8px' : '0 10px')}};
-
+  height: 42px;
+  padding: 0 10px;
   border-radius: 10px;
 
   ${(props) => css.spaceMargins(props)};
 `
+export const MinimalWrapper = styled(NormalWrapper)`
+  height: 34px;
+  padding: 0 8px;
+`
 export const HintWrapper = styled.div`
   ${css.row('align-center')};
 `
-export const InfoIcon = styled(InfoSVG)<{ minimal: boolean }>`
+export const InfoIcon = styled(InfoSVG)<{ $minimal: boolean }>`
   ${css.size(13)};
   fill: ${theme('article.digest')};
   margin-right: 6px;
-  margin-top: ${({ minimal }) => (minimal ? '-1px' : 0)}};
+  margin-top: ${({ $minimal }) => ($minimal ? '-1px' : 0)}};
 `
-export const HintText = styled.div<{ minimal: boolean }>`
-  font-size: ${({ minimal }) => (minimal ? '11px' : '13px')}};
+export const HintText = styled.div<{ $minimal: boolean }>`
+  font-size: ${({ $minimal }) => ($minimal ? '11px' : '13px')}};
   color: ${theme('article.digest')};
 `
 export const Hint = styled.span`
   color: ${theme('article.title')};
   margin-left: 2px;
 `
-export const ActionWrapper = styled.div<{ minimal: boolean }>`
+export const ActionWrapper = styled.div<{ $minimal: boolean }>`
   ${css.row('align-center')};
 
-  ${({ minimal }) => (minimal ? ' transform: scale(0.85);  margin-right: -8px;' : '')};
+  ${({ $minimal }) => ($minimal ? ' transform: scale(0.85);  margin-right: -8px;' : '')};
 `

src/hooks/useNameAlias.ts

@@ -0,0 +1,37 @@
+import { useContext } from 'react'
+import { MobXProviderContext } from 'mobx-react'
+import { filter } from 'ramda'
+
+import { toJS } from '@/mobx'
+import type { TNameAlias } from '@/spec'
+
+/**
+ * NOTE: should use observer to wrap the component who use this hook
+ */
+const useNameAlias = (group = 'kanban'): Record<string, TNameAlias> => {
+  const { store } = useContext(MobXProviderContext)
+
+  if (store === null) {
+    throw new Error('Store cannot be null, please add a context provider')
+  }
+
+  const alias = {}
+  let aliasList = []
+
+  if (!group) {
+    aliasList = toJS(store.dashboardThread.nameAlias)
+  } else {
+    aliasList = filter(
+      (item: TNameAlias) => item.group === group,
+      toJS(store.dashboardThread.nameAlias),
+    )
+  }
+
+  aliasList.forEach((item) => {
+    alias[item.slug] = item
+  })
+
+  return alias
+}
+
+export default useNameAlias

src/hooks/usePublicThreads.ts

@@ -2,7 +2,7 @@ import { useContext } from 'react'
 import { MobXProviderContext } from 'mobx-react'
 import { find, propEq, reject } from 'ramda'
 
-import type { TCommunityThread, TLinkItem, TNameAliasConfig } from '@/spec'
+import type { TCommunityThread, TLinkItem, TNameAlias } from '@/spec'
 import { THREAD } from '@/constant/thread'
 
 import { toJS } from '@/mobx'
@@ -25,7 +25,7 @@ const usePublicThreads = (): TCommunityThread[] => {
 
   const enabledThreads = sortByIndex(threads.filter((thread) => enable[thread.slug]))
   const mappedThreads = enabledThreads.map((pThread) => {
-    const aliasItem = find(propEq('slug', pThread.slug))(nameAlias) as TNameAliasConfig
+    const aliasItem = find(propEq('slug', pThread.slug))(nameAlias) as TNameAlias
 
     return {
       ...pThread,

src/spec/dashboard.d.ts

@@ -44,7 +44,7 @@ export type TEnableConfig = {
   aboutMediaReport: boolean
 }
 
-export type TNameAliasConfig = {
+export type TNameAlias = {
   slug: string
   name: string
   original?: string
@@ -53,7 +53,7 @@ export type TNameAliasConfig = {
 
 export type TDashboardThreadConfig = {
   enable: TEnableConfig
-  nameAlias: TNameAliasConfig[]
+  nameAlias: TNameAlias[]
 }
 
 export type TDashboardSEOConfig = {

src/spec/index.ts

@@ -104,7 +104,7 @@ export type {
   TBroadcastArticleLayout,
   TBroadcastConfig,
   TEnableConfig,
-  TNameAliasConfig,
+  TNameAlias,
   TDashboardThreadConfig,
   TRSSType,
   TDashboardSEOConfig,