feat(layout): simple layout mainly for digest (#1297)

* refactor: rm the expand desc staff

* refactor(layout): basic simple layout UI

* refactor(simple-layout): add route tab function

* refactor(layout): rm the holy grail layout

Author: mydearxym

src/containers/content/CommunityContent/HolyGrailLayout.tsx

@@ -3,13 +3,10 @@
  */
 
 import { FC, Fragment } from 'react'
-import { isMobile } from 'react-device-detect'
 
-import { C11N } from '@/constant'
 import { bond } from '@/utils/mobx'
 
 import ClassicLayout from './ClassicLayout'
-import HolyGrailLayout from './HolyGrailLayout'
 
 import type { TStore } from './store'
 import { useInit } from './logic'
@@ -21,20 +18,11 @@ type TProps = {
 const CommunityContentContainer: FC<TProps> = ({ communityContent: store }) => {
   useInit(store)
 
-  const { curThread, curCommunity, c11n, subscribedCommunitiesData } = store
-  const isClassicLayout = isMobile || c11n.bannerLayout === C11N.CLASSIC
+  const { curThread } = store
 
   return (
     <Fragment>
-      {isClassicLayout ? (
-        <ClassicLayout thread={curThread} />
-      ) : (
-        <HolyGrailLayout
-          thread={curThread}
-          community={curCommunity}
-          subscribedCommunities={subscribedCommunitiesData}
-        />
-      )}
+      <ClassicLayout thread={curThread} />
     </Fragment>
   )
 }

src/containers/content/CommunityContent/index.tsx

@@ -5,9 +5,6 @@ import type { TCommunity } from '@/spec'
 import { ICON_CMD } from '@/config'
 import { HCN, NON_FILL_COMMUNITY } from '@/constant'
 
-// import ExpandTexts from '../ExpandTexts'
-// import SocialList from '../SocialList'
-
 import CommunityJoinSign from '@/widgets/CommunityJoinSign'
 
 import {
@@ -26,12 +23,11 @@ const CommunityLogoHolder = `${ICON_CMD}/community_logo_holder.svg`
 
 type TProps = {
   community: TCommunity
-  descExpand: boolean
 }
 
-const CommunityBrief: FC<TProps> = ({ community, descExpand }) => {
+const CommunityBrief: FC<TProps> = ({ community }) => {
   return (
-    <Wrapper descExpand={descExpand}>
+    <Wrapper>
       <LogoWrapper>
         {community.logo ? (
           <Logo
@@ -45,7 +41,7 @@ const CommunityBrief: FC<TProps> = ({ community, descExpand }) => {
       </LogoWrapper>
       <CommunityInfo>
         <TitleWrapper>
-          <Title descExpand={descExpand}>
+          <Title>
             <TitleText>{community.title}</TitleText>
             {community.raw !== HCN && (
               <CommunityJoinSign
@@ -56,9 +52,6 @@ const CommunityBrief: FC<TProps> = ({ community, descExpand }) => {
             )}
           </Title>
         </TitleWrapper>
-        {/* <Desc>{community.desc}</Desc> */}
-        {/* <ExpandTexts descExpand={descExpand} desc={community.desc} /> */}
-        {/* {community.raw !== HCN && <SocialList />} */}
       </CommunityInfo>
     </Wrapper>
   )

src/containers/content/CommunityContent/styles/holy_grail_layout.ts

@@ -1,13 +1,12 @@
 import { FC, memo } from 'react'
 import { isMobile } from 'react-device-detect'
 
-import type { TC11NLayout, TThread, TCommunity, TMetric } from '@/spec'
+import type { TThread, TCommunity, TMetric } from '@/spec'
 import { EVENT } from '@/constant'
 import { send } from '@/utils/helper'
 
 import TabBar from '@/widgets/TabBar'
 import ViewportTracker from '@/widgets/ViewportTracker'
-// import CommunityStatesPad from '@/widgets/CommunityStatesPad'
 
 import CommunityBrief from './CommunityBrief'
 import AccountUnit from './AccountUnit'
@@ -27,53 +26,24 @@ import { setViewport } from '../logic'
 
 type TProps = {
   community: TCommunity
-  realtimeVisitors: number
-  descExpand: boolean
   activeThread: TThread
-  layout: TC11NLayout
   metric: TMetric
 }
 
-const ClassicLayout: FC<TProps> = ({
-  community,
-  realtimeVisitors,
-  descExpand,
-  activeThread,
-  layout,
-  metric,
-}) => {
+const ClassicLayout: FC<TProps> = ({ community, activeThread, metric }) => {
   return (
-    <Wrapper
-      testid="community-digest"
-      descExpand={descExpand}
-      // noSocial={contains(community.raw, NON_STANDARD_COMMUNITIES)}
-      noSocial
-      isMobile={isMobile}
-    >
-      <InnerWrapper
-        metric={metric}
-        descExpand={descExpand}
-        // noSocial={contains(community.raw, NON_STANDARD_COMMUNITIES)}
-        noSocial
-        isMobile={isMobile}
-      >
-        <BannerContentWrapper descExpand={descExpand}>
+    <Wrapper testid="community-digest" isMobile={isMobile}>
+      <InnerWrapper metric={metric} isMobile={isMobile}>
+        <BannerContentWrapper>
           <CommunityBaseInfo>
-            <CommunityBrief community={community} descExpand={descExpand} />
+            <CommunityBrief community={community} />
             <AccountUnit />
-            {/* <CommunityStatesPad
-              community={community}
-              onShowEditorList={onShowEditorList}
-              onShowSubscriberList={onShowSubscriberList}
-              realtimeVisitors={realtimeVisitors}
-            /> */}
           </CommunityBaseInfo>
           <TabBarWrapper>
             <TabBar
               source={community.threads}
               onChange={(data) => send(EVENT.COMMUNITY_THREAD_CHANGE, { data })}
               active={activeThread}
-              layout={layout}
               communityRaw={community.raw}
             />
           </TabBarWrapper>

src/containers/digest/CommunityDigest/ClassicLayout/CommunityBrief.tsx

@@ -0,0 +1,28 @@
+import { FC, memo } from 'react'
+
+import {
+  Wrapper,
+  Avatar,
+  NotifyIcon,
+  SubscribeButton,
+  SubText,
+  // SearchIcon,
+} from '../styles/simple_layout/account_unit'
+import { mockUsers } from '@/utils/mock'
+// import { onShowEditorList, onShowSubscriberList, setViewport } from '../logic'
+
+const AccountUnit: FC = () => {
+  // return <Wrapper>登入 / 注册</Wrapper>
+  return (
+    <Wrapper>
+      <SubscribeButton type="primary" ghost size="small">
+        <SubText>订阅</SubText>
+      </SubscribeButton>
+
+      <NotifyIcon />
+      <Avatar src={`${mockUsers(1)[0].avatar}`} />
+    </Wrapper>
+  )
+}
+
+export default memo(AccountUnit)

src/containers/digest/CommunityDigest/ClassicLayout/index.tsx

@@ -0,0 +1,60 @@
+import { FC, memo } from 'react'
+import { contains } from 'ramda'
+
+import type { TCommunity } from '@/spec'
+import { ICON_CMD } from '@/config'
+import { HCN, NON_FILL_COMMUNITY } from '@/constant'
+
+import CommunityJoinSign from '@/widgets/CommunityJoinSign'
+
+import {
+  Wrapper,
+  Logo,
+  LogoWrapper,
+  CommunityInfo,
+  TitleWrapper,
+  Title,
+  TitleText,
+  LogoHolder,
+} from '../styles/simple_layout/community_brief'
+import { subscribeCommunity, unsubscribeCommunity } from '../logic'
+
+const CommunityLogoHolder = `${ICON_CMD}/community_logo_holder.svg`
+
+type TProps = {
+  community: TCommunity
+}
+
+const CommunityBrief: FC<TProps> = ({ community }) => {
+  return (
+    <Wrapper>
+      <LogoWrapper>
+        {community.logo ? (
+          <Logo
+            noFill={contains(community.raw, NON_FILL_COMMUNITY)}
+            src={community.logo}
+            raw={community.raw}
+          />
+        ) : (
+          <LogoHolder src={CommunityLogoHolder} />
+        )}
+      </LogoWrapper>
+      <CommunityInfo>
+        <TitleWrapper>
+          <Title>
+            <TitleText>{community.title}</TitleText>
+            {community.raw !== HCN && (
+              <CommunityJoinSign
+                onFollow={() => subscribeCommunity(community.id)}
+                onUndoFollow={() => unsubscribeCommunity(community.id)}
+                hasFollowed={community.viewerHasSubscribed}
+              />
+            )}
+          </Title>
+        </TitleWrapper>
+      </CommunityInfo>
+    </Wrapper>
+  )
+}
+
+export default memo(CommunityBrief)

src/containers/digest/CommunityDigest/ExpandTexts.tsx

@@ -0,0 +1,28 @@
+import { FC, memo } from 'react'
+
+import type { TCommunityThread, TThread } from '@/spec'
+import { Wrapper, Title } from '../styles/simple_layout/thread_tab'
+
+type TProps = {
+  threads: TCommunityThread[]
+  active: string
+  onChange: (thread: TThread) => void
+}
+
+const ThreadTab: FC<TProps> = ({ active, threads, onChange }) => {
+  return (
+    <Wrapper>
+      {threads.map((item) => (
+        <Title
+          key={item.raw}
+          $active={active === item.raw}
+          onClick={() => onChange(item.raw)}
+        >
+          {item.title}
+        </Title>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default memo(ThreadTab)