refactor: groupher community demo (#1285)

* style(groupher): fake a full thread groupher demo

* style(misc): community banner & article headers

* style(article-page): asjust pure layout

* refactor: adjust roadmap layout

* style(kanban-thread): asjust icon & action layout

* refactor(roadmap): style & text adjust

* style: article navi arrow

* feat: simplify the footer

* fix(ci): ts build error for dynamic import components

Author: mydearxym

src/containers/content/ArticleContent/DesktopView/ArticleLayout.tsx

@@ -11,9 +11,12 @@ import type { TMetric } from '@/spec'
 import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
-import { ArticleFooter, Comments } from '@/containers/dynamic'
+// import { Comments } from '@/containers/dynamic'
+
 import ArticleSticker from '@/containers/tool/ArticleSticker'
+import ArticleFooter from '@/containers/unit/ArticleFooter'
 import ArtimentBody from '@/widgets/ArtimentBody'
+import Comments from '@/containers/unit/Comments'
 import Linker from '@/widgets/Linker'
 
 import ViewportTracker from '@/widgets/ViewportTracker'

src/containers/content/ArticleContent/DesktopView/BlogLayout/ArticleTab.tsx

@@ -3,8 +3,10 @@ import { FC, useRef, Fragment } from 'react'
 import type { TBlog, TMetric } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
-import { ArticleFooter, Comments } from '@/containers/dynamic'
+// import { Comments } from '@/containers/dynamic'
+// import ArticleFooter from '@/containers/unit/ArticleFooter'
 import ArtimentBody from '@/widgets/ArtimentBody'
+import Comments from '@/containers/unit/Comments'
 import Linker from '@/widgets/Linker'
 import ViewportTracker from '@/widgets/ViewportTracker'
 
@@ -37,7 +39,7 @@ const ArticleTab: FC<TProps> = ({ metric, article }) => {
         <ArticleWrapper ref={ref}>
           <Linker src={article.linkAddr} right={10} bottom={25} hint="原文:" />
           <ArtimentBody document={article.document} />
-          <ArticleFooter metric={metric} />
+          {/* <ArticleFooter metric={metric} /> */}
         </ArticleWrapper>
 
         <ViewportTracker

src/containers/content/ArticleContent/DesktopView/WorksLayout/ArticleTab.tsx

@@ -3,8 +3,9 @@ import { FC, useRef, Fragment } from 'react'
 import type { TWorks, TMetric } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
-import { ArticleFooter, Comments } from '@/containers/dynamic'
+import ArticleFooter from '@/containers/unit/ArticleFooter'
 import ArtimentBody from '@/widgets/ArtimentBody'
+import Comments from '@/containers/unit/Comments'
 
 import ViewportTracker from '@/widgets/ViewportTracker'
 

src/containers/content/ArticleContent/MobileView/index.tsx

@@ -10,9 +10,11 @@ import dynamic from 'next/dynamic'
 import { buildLog } from '@/utils/logger'
 import { bond } from '@/utils/mobx'
 
-import { ArticleFooter, Comments } from '@/containers/dynamic'
+import ArticleFooter from '@/containers/unit/ArticleFooter'
+import Comments from '@/containers/unit/Comments'
 import Maybe from '@/widgets/Maybe'
 import ViewportTracker from '@/widgets/ViewportTracker'
+import MarkDownRender from '@/widgets/MarkDownRender'
 
 import type { TStore } from '../store'
 
@@ -26,13 +28,6 @@ import {
 
 import { useInit, articleInAnchor, articleOutAnchor } from '../logic'
 
-export const MarkDownRender = dynamic(
-  () => import('@/widgets/MarkDownRender'),
-  {
-    ssr: false,
-  },
-)
-
 /* eslint-disable-next-line */
 const log = buildLog('C:PostContent')
 

src/containers/content/CommunityContent/HolyGrailLayout.tsx

@@ -5,16 +5,16 @@
  */
 
 import { FC, memo } from 'react'
-import dynamic from 'next/dynamic'
 
 import { TCommunity, TThread } from '@/spec'
 
 import { C11N, EVENT } from '@/constant'
 import { send } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 
+import ThreadSidebar from '@/containers/thread/ThreadSidebar'
 import TabBar from '@/widgets/TabBar'
-import { LavaLampLoading } from '@/widgets/dynamic'
+// import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
 
 import ThreadContent from './ThreadContent'
 import SubscribedList from './SubscribedList'
@@ -29,15 +29,6 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('C:CommunityContent')
 
-const ThreadSidebar = dynamic(
-  () => import('@/containers/thread/ThreadSidebar'),
-  {
-    /* eslint-disable react/display-name */
-    loading: () => <LavaLampLoading size="small" />,
-    ssr: false,
-  },
-)
-
 type TProps = {
   thread: TThread
   community: TCommunity

src/containers/content/CommunityContent/ThreadContent.tsx

@@ -3,12 +3,12 @@ import { FC, memo } from 'react'
 import type { TThread } from '@/spec'
 import { THREAD } from '@/constant'
 
-// import ArticlesThread from '@/containers//thread/ArticlesThread'
-// import GtdThread from '@/containers//thread/GtdThread'
-// import ChangeThread from '@/containers//thread/ChangelogThread'
+import ArticlesThread from '@/containers//thread/ArticlesThread'
+import GtdThread from '@/containers//thread/GtdThread'
+import ChangeThread from '@/containers//thread/ChangelogThread'
 // import ReposThread from '@/containers/thread/ReposThread'
 import CperMapThread from '@/containers/thread/CperMapThread'
-// import AboutThread from '@/containers/thread/AboutThread'
+import AboutThread from '@/containers/thread/AboutThread'
 import HelpThread from '@/containers/thread/HelpThread'
 
 import WipThread from './WipThread'
@@ -19,10 +19,6 @@ type TProps = {
 
 const ThreadContent: FC<TProps> = ({ thread }) => {
   switch (thread) {
-    case THREAD.KANBAN: {
-      return <WipThread title="看板" />
-    }
-
     case THREAD.INTERVIEW: {
       return <WipThread title="开发者访谈" />
     }
@@ -43,18 +39,32 @@ const ThreadContent: FC<TProps> = ({ thread }) => {
       return <WipThread title="违规账户信息" />
     }
 
-    case THREAD.CPER:
+    case THREAD.CPER: {
       return <CperMapThread />
+    }
 
-    case THREAD.MAP:
+    case THREAD.MAP: {
       return <CperMapThread />
+    }
 
-    default:
-      // return <AboutThread />
-      // return <GtdThread />
-      // return <ChangeThread />
-      // return <ArticlesThread />
+    case THREAD.ABOUT: {
+      return <AboutThread />
+    }
+
+    case THREAD.ROADMAP: {
+      return <GtdThread />
+    }
+
+    case THREAD.CHANGELOG: {
+      return <ChangeThread />
+    }
+
+    case THREAD.HELP: {
       return <HelpThread />
+    }
+
+    default:
+      return <ArticlesThread />
   }
 }
 

src/containers/content/ExploreContent/Banner.tsx

@@ -22,22 +22,21 @@ import {
   IntroWrapper,
   IntroTitle,
   IntroDesc,
-  SloganTextWrapper,
   CreateCommunityLink,
   SearchIcon,
 } from './styles/banner'
 
 import { searchOnChange } from './logic'
 
-export const SloganText = dynamic(() => import('./SloganText'), {
-  /* eslint-disable react/display-name */
-  loading: () => <SloganTextWrapper>心爱的作品</SloganTextWrapper>,
-  ssr: false,
-})
-
 /* eslint-disable-next-line */
 const log = buildLog('C:CommunitiesBanner')
 
+const SloganText = dynamic(() => import('./SloganText'), {
+  // eslint-disable-next-line react/display-name
+  loading: () => <div />,
+  ssr: false,
+})
+
 type TProps = {
   searchStatus: TSearchState
 }
@@ -75,6 +74,7 @@ const Banner: FC<TProps> = ({
           <IntroDesc>
             <Space right={24} />
             或者，来为你
+            {/* @ts-ignore */}
             <SloganText />
             <Link href={`/${ROUTE.APPLY_COMMUNITY}`} passHref>
               <CreateCommunityLink>建立一个社区</CreateCommunityLink>

src/containers/content/ExploreContent/CommunityCard.tsx

@@ -2,12 +2,12 @@ import { FC, memo } from 'react'
 import { isEmpty, contains } from 'ramda'
 import Link from 'next/link'
 
-import type { TCommunity, TID } from '@/spec'
+import type { TCommunity } from '@/spec'
 import { NON_FILL_COMMUNITY } from '@/constant'
 import { prettyNum, cutRest } from '@/utils/helper'
 
 import { SpaceGrow } from '@/widgets/Common'
-import { TrendLine } from '@/widgets/dynamic'
+import TrendLine from '@/widgets/TrendLine'
 
 import SubscribeBtn from './SubscribeBtn'
 

src/containers/content/ExploreContent/SloganText.tsx

@@ -1,4 +1,4 @@
-import { FC, memo, useEffect, useState } from 'react'
+import { Fragment, memo, useEffect, useState } from 'react'
 import { AnimateOnChange } from 'react-animation'
 
 import { SloganTextWrapper } from './styles/banner'
@@ -23,7 +23,7 @@ const fixAnimationStockIfNeed = (): void => {
   }
 }
 
-const SlogenText: FC = () => {
+const SlogenText = () => {
   const [index, setIndex] = useState(0)
 
   useEffect(() => {
@@ -40,15 +40,15 @@ const SlogenText: FC = () => {
   })
 
   return (
-    <>
+    <Fragment>
       「
       <AnimateOnChange durationOut={500}>
         <SloganTextWrapper highlight onClick={fixAnimationStockIfNeed}>
           {coolThings[index]}
         </SloganTextWrapper>
       </AnimateOnChange>
       」
-    </>
+    </Fragment>
   )
 }
 

src/containers/content/HaveADrinkContent/index.tsx

@@ -15,6 +15,7 @@ import useShortcut from '@/hooks/useShortcut'
 
 import type { TStore } from './store'
 import Header from './Header'
+// import Body from './Body'
 import Footer from './Footer'
 
 import { Wrapper, InnerWrapper, LoadingSentence } from './styles'
@@ -68,6 +69,7 @@ const HaveADrinkContentContainer: FC<TProps> = ({
           category={category}
           pagiState={pagiState}
         />
+        {/* @ts-ignore */}
         <Body
           view={view}
           category={category}