refactor(thread): add basic blog thread && re-org & clean up (#1102)

* chore: basic setup

* chore: clean warnings

* chore: tmp solve the postsThread ts convert

* chore(blog): basic thread setup

* chore(posts): clean up unused thread

* chore(clean up): remove cheatsheet thread

* chore(clean up): remove wiki thread

Author: mydearxym

config/config.json

@@ -61,8 +61,6 @@
   "GITHUB_CPS_TEAM": "https://github.com/orgs/coderplanets/people",
   "ISSUE_ADDR": "https://github.com/coderplanets/coderplanets_web/issues",
   "MENTION_USER_ADDR": "https://coderplanets.com/users/",
-  "COMMUNITY_WIKI": "https://github.com/coderplanets/cps_wiki/blob/master",
-  "COMMUNITY_CHEATSHEET": "https://github.com/coderplanets/cps_cheatsheets/blob/master",
   "//--- contact configs ---//": "",
   "EMAIL_CLUB": "club@group.coderplanets.com",
   "EMAIL_SUPPORT": "support@group.coderplanets.com",

config/index.ts

@@ -31,8 +31,6 @@ export const {
   GITHUB_CPS_TEAM,
   ISSUE_ADDR,
   MENTION_USER_ADDR,
-  COMMUNITY_WIKI,
-  COMMUNITY_CHEATSHEET,
   EMAIL_CLUB,
   EMAIL_SUPPORT,
   EMAIL_HELLO,

server/routes.js

@@ -124,6 +124,11 @@ router.route('/:community/help-center').get((req, res) => {
   return renderAndCache({ req, res, path: '/help-center' })
 })
 
+// NOTE:  TMP: 博客
+router.route('/:community/blogs').get((req, res) => {
+  return renderAndCache({ req, res, path: '/home/blogs' })
+})
+
 // 社区主页
 router.route('/:community/:thread').get((req, res) => {
   if (

src/components/Buttons/DropdownButton/OptionPanel.js renamed to src/components/Buttons/DropdownButton/OptionPanel.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import { FC, memo } from 'react'
 import T from 'prop-types'
 
 import { ICON } from '@/config'
 import { cutRest } from '@/utils'
+import type { TOption } from './index'
 
 import {
   Wrapper,
@@ -37,7 +38,13 @@ const LinkBlock = ({ children, link }) => {
   )
 }
 
-const OptionPanel = ({ options, onClick, panelMinWidth }) => {
+type TProps = {
+  options: TOption[]
+  panelMinWidth: string
+  onClick?: (key?: string) => void
+}
+
+const OptionPanel: FC<TProps> = ({ options, onClick, panelMinWidth }) => {
   return (
     <Wrapper panelMinWidth={panelMinWidth}>
       {options.map((item, index) => (
@@ -49,7 +56,7 @@ const OptionPanel = ({ options, onClick, panelMinWidth }) => {
           {/* common_check icon is special, smaller than normal icons,
           and check icon is always the first icon */}
           <IconWrapper>
-            <Icon src={item.icon} index={index} bigger={index === 0} />
+            <Icon src={item.icon} index={index} />
           </IconWrapper>
           <Intro>
             <Header>
@@ -64,22 +71,4 @@ const OptionPanel = ({ options, onClick, panelMinWidth }) => {
   )
 }
 
-OptionPanel.propTypes = {
-  onClick: T.func,
-  options: T.arrayOf(
-    T.shape({
-      title: T.stirng,
-      desc: T.string,
-      icon: T.string,
-      link: T.string,
-    }),
-  ),
-  panelMinWidth: T.string.isRequired,
-}
-
-OptionPanel.defaultProps = {
-  options: [],
-  onClick: console.log,
-}
-
-export default React.memo(OptionPanel)
+export default memo(OptionPanel)

src/components/Buttons/DropdownButton/index.js

@@ -0,0 +1,70 @@
+import { FC, ReactNode, memo } from 'react'
+
+import { ICON_CMD } from '@/config'
+import { buildLog } from '@/utils'
+
+import type { TTooltipPlacement } from '@/spec'
+
+import Tooltip from '@/components/Tooltip'
+import OptionPanel from './OptionPanel'
+
+import {
+  Wrapper,
+  ButtonWrapper,
+  DropdownButtonWrapper,
+  Divider,
+  MoreIcon,
+} from '../styles/dropdown_button'
+
+const log = buildLog('C:PostsThread')
+
+export type TOption = {
+  title: string
+  key: string
+  desc?: string
+  icon?: string
+  link?: string
+}
+
+type TProps = {
+  children: ReactNode
+  options: TOption[]
+  placement?: TTooltipPlacement
+  panelMinWidth?: string
+  onClick: (key?: string) => void
+}
+
+// <UpIcon src={`${ICON_CMD}/works/vote_up.svg`} />
+const DropdownButton: FC<TProps> = ({
+  children,
+  options,
+  onClick = log,
+  placement = 'bottom',
+  panelMinWidth = '100%',
+}) => {
+  return (
+    <Wrapper>
+      <ButtonWrapper onClick={onClick}>{children}</ButtonWrapper>
+      <Tooltip
+        placement={placement}
+        trigger="click"
+        hideOnClick={false}
+        content={
+          <OptionPanel
+            options={options}
+            onClick={onClick}
+            panelMinWidth={panelMinWidth}
+          />
+        }
+        noPadding
+      >
+        <DropdownButtonWrapper>
+          <MoreIcon src={`${ICON_CMD}/works/vote_up.svg`} onClick={onClick} />
+        </DropdownButtonWrapper>
+      </Tooltip>
+      <Divider />
+    </Wrapper>
+  )
+}
+
+export default memo(DropdownButton)

src/components/Buttons/DropdownButton/index.tsx

@@ -26,8 +26,9 @@ const log = buildLog('c:PromotionList:index')
 type TProps = {
   show?: boolean
   onAbout?: () => void
-  items: TItem[]
+  items?: TItem[]
   intervalSec?: number
+  onClose?: () => void
 }
 
 const PromotionList: FC<TProps> = ({

src/components/PromotionList/index.tsx

@@ -1,15 +1,10 @@
 import { FC, memo } from 'react'
 import {
   TabPostIcon,
-  TabTechIcon,
   TabRadarIcon,
-  TabShareIcon,
   TabUserIcon,
-  TabCityIcon,
   TabJobIcon,
-  TabWikiIcon,
   TabRepoIcon,
-  TabCheatsheetIcon,
   // user
   TabLikesIcon,
   TabPublishIcon,
@@ -27,21 +22,11 @@ type TProps = {
 
 const TabIcon: FC<TProps> = ({ raw, active, small }) => {
   switch (raw) {
-    case 'tech': {
-      /* @ts-ignore */
-      return <TabTechIcon $active={active} $small={small} />
-    }
-
     case 'radar': {
       /* @ts-ignore */
       return <TabRadarIcon $active={active} $small={small} />
     }
 
-    case 'share': {
-      /* @ts-ignore */
-      return <TabShareIcon $active={active} $small={small} />
-    }
-
     case 'user': {
       /* @ts-ignore */
       return <TabUserIcon $active={active} $small={small} />
@@ -52,26 +37,11 @@ const TabIcon: FC<TProps> = ({ raw, active, small }) => {
       return <TabJobIcon $active={active} $small={small} />
     }
 
-    case 'city': {
-      /* @ts-ignore */
-      return <TabCityIcon $active={active} $small={small} />
-    }
-
-    case 'wiki': {
-      /* @ts-ignore */
-      return <TabWikiIcon $active={active} $small={small} />
-    }
-
     case 'repo': {
       /* @ts-ignore */
       return <TabRepoIcon $active={active} $small={small} />
     }
 
-    case 'cheatsheet': {
-      /* @ts-ignore */
-      return <TabCheatsheetIcon $active={active} $small={small} />
-    }
-
     case 'favorites': {
       /* @ts-ignore */
       return <TabFavoritesIcon $active={active} $small={small} />

src/components/Switcher/Tabs/LocalIcon.tsx

@@ -3,14 +3,10 @@ import styled from 'styled-components'
 // import Img from '@/Img'
 import { theme, css } from '@/utils'
 import TabPostSVG from '@/SvgIcons/TabPostSVG'
-import TabTechSVG from '@/SvgIcons/TabTechSVG'
 import TabRadarSVG from '@/SvgIcons/TabRadarSVG'
-import TabShareSVG from '@/SvgIcons/TabShareSVG'
 import TabUserSVG from '@/SvgIcons/TabUserSVG'
-import TabCitySVG from '@/SvgIcons/TabCitySVG'
 import TabJobSVG from '@/SvgIcons/TabJobSVG'
 //
-import TabWikiSVG from '@/SvgIcons/TabWikiSVG'
 import TabRepoSVG from '@/SvgIcons/TabRepoSVG'
 import TabCheatsheetSVG from '@/SvgIcons/TabCheatsheetSVG'
 
@@ -40,13 +36,9 @@ const commonIcon = (comp) => {
 }
 
 export const TabPostIcon = commonIcon(TabPostSVG)
-export const TabTechIcon = commonIcon(TabTechSVG)
 export const TabRadarIcon = commonIcon(TabRadarSVG)
-export const TabShareIcon = commonIcon(TabShareSVG)
 export const TabUserIcon = commonIcon(TabUserSVG)
-export const TabCityIcon = commonIcon(TabCitySVG)
 export const TabJobIcon = commonIcon(TabJobSVG)
-export const TabWikiIcon = commonIcon(TabWikiSVG)
 export const TabRepoIcon = commonIcon(TabRepoSVG)
 export const TabCheatsheetIcon = commonIcon(TabCheatsheetSVG)
 

src/components/Switcher/styles/tabs/local_icon.ts

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