refactor(redesign): community sub/unSub to thread right side, sticky style (#1008)

* refactor(redesign): CommunityBadge concept

* refactor(redesign): move subscribe/unsubscribe logic to JoinBadge

* refactor(joinBadge): naming and re-org

Author: mydearxym

src/components/CommunityStatesPad/SubscribedTitle.js

@@ -1,55 +1,15 @@
 import React from 'react'
 
-// import { ICON_CMD } from '@/config'
-// import { Wrapper } from './styles'
-import Tooltip from '@/components/Tooltip'
 import { NumberTitle } from './styles'
-import { PopoverInfo, PopTitle, PopDesc } from './styles/subscribed_title'
 
-const SubscribedBtn = ({ community, onUndoSubscribe }) => {
-  if (community.raw === 'home') {
-    return (
-      <NumberTitle small readOnly>
-        已加入
-      </NumberTitle>
-    )
-  }
-
-  return (
-    <Tooltip
-      placement="bottom"
-      content={
-        <PopoverInfo>
-          <PopTitle>点击可退出</PopTitle>
-          <PopDesc>退出后该社区将不会出现在你的左侧列表中</PopDesc>
-        </PopoverInfo>
-      }
-    >
-      <NumberTitle onClick={() => onUndoSubscribe(community)} small>
-        已加入
-      </NumberTitle>
-    </Tooltip>
-  )
-}
-
-const SubscribedTitle = ({ community, onSubscribe, onUndoSubscribe }) => (
-  <>
-    {community.viewerHasSubscribed ? (
-      <SubscribedBtn community={community} onUndoSubscribe={onUndoSubscribe} />
+const SubscribedTitle = ({ viewerHasSubscribed }) => (
+  <React.Fragment>
+    {viewerHasSubscribed ? (
+      <NumberTitle>已加入</NumberTitle>
     ) : (
-      <Tooltip
-        placement="bottom"
-        content={
-          <PopoverInfo>
-            <PopTitle>点击加入</PopTitle>
-            <PopDesc>加入后该社区将会出现在你的左侧列表中</PopDesc>
-          </PopoverInfo>
-        }
-      >
-        <NumberTitle onClick={() => onSubscribe(community)}>加入</NumberTitle>
-      </Tooltip>
+      <NumberTitle>加入</NumberTitle>
     )}
-  </>
+  </React.Fragment>
 )
 
 export default React.memo(SubscribedTitle)

src/components/CommunityStatesPad/index.js

@@ -29,8 +29,6 @@ const log = buildLog('c:CommunityStatesPad:index')
 
 const CommunityStatesPad = ({
   community,
-  onSubscribe,
-  onUndoSubscribe,
   onShowEditorList,
   onShowSubscriberList,
   withoutFounding,
@@ -52,11 +50,7 @@ const CommunityStatesPad = ({
     <Wrapper>
       <NumberSection active={viewerHasSubscribed}>
         {!isMobile && (
-          <SubscribedTitle
-            community={community}
-            onSubscribe={onSubscribe}
-            onUndoSubscribe={onUndoSubscribe}
-          />
+          <SubscribedTitle viewerHasSubscribed={viewerHasSubscribed} />
         )}
         <NumberGroup
           count={subscribersCount}
@@ -103,8 +97,6 @@ CommunityStatesPad.propTypes = {
     jobsCount: T.number,
     viewerHasSubscribed: T.bool,
   }),
-  onSubscribe: T.func,
-  onUndoSubscribe: T.func,
   onShowEditorList: T.func,
   onShowSubscriberList: T.func,
   withoutFounding: T.bool,
@@ -120,8 +112,6 @@ CommunityStatesPad.defaultProps = {
     jobsCount: 0,
     viewerHasSubscribed: false,
   },
-  onSubscribe: log,
-  onUndoSubscribe: log,
   onShowEditorList: log,
   onShowSubscriberList: log,
   withoutFounding: true,

src/components/Tooltip/ConfirmFooter.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button } from '@/components/Buttons'
+import Button from '@/components/Buttons/Button'
 import { Space } from '@/components/Common'
 
 import { FOOTER_BEHAVIOR } from './constant'

src/containers/digest/CommunityDigest/DigestView/ColumnView/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { contains } from 'ramda'
+import { Waypoint } from 'react-waypoint'
 
 import { ICON_CMD } from '@/config'
 import { NON_FILL_COMMUNITY } from '@/constant'
@@ -31,10 +32,9 @@ import {
 
 import {
   tabOnChange,
-  onSubscribe,
-  onUndoSubscribe,
   onShowEditorList,
   onShowSubscriberList,
+  setViewport,
 } from '../../logic'
 
 const CommunityLogoHolder = `${ICON_CMD}/community_logo_holder.svg`
@@ -99,8 +99,6 @@ const ColumnView = ({
             <CommunityBrief content={community} descExpand={descExpand} />
             <CommunityStatesPad
               community={community}
-              onSubscribe={onSubscribe}
-              onUndoSubscribe={onUndoSubscribe}
               onShowEditorList={onShowEditorList}
               onShowSubscriberList={onShowSubscriberList}
             />
@@ -116,6 +114,10 @@ const ColumnView = ({
           </TabBarWrapper>
         </BannerContentWrapper>
       </InnerWrapper>
+      <Waypoint
+        onEnter={() => setViewport(true)}
+        onLeave={() => setViewport(false)}
+      />
     </Wrapper>
   )
 }

src/containers/digest/CommunityDigest/DigestView/RowView/index.js

@@ -40,8 +40,6 @@ import {
 import { tabOnChange } from '../../logic'
 
 // import {
-//   onSubscribe,
-//   onUndoSubscribe,
 //   onShowEditorList,
 //   onShowSubscriberList,
 // } from '../../logic'

src/containers/digest/CommunityDigest/logic.js

@@ -41,24 +41,6 @@ export const tabOnChange = (activeThread) => {
   send(EVENT.THREAD_CHANGE, { data: { activeThread, topic: subPath } })
 }
 
-export const onSubscribe = (community) => {
-  if (!store.isLogin) return store.authWarning()
-  if (store.subscribeLoading) return false
-
-  // log('onSubscribe: ', community)
-  store.mark({ subscribeLoading: true })
-  sr71$.mutate(S.subscribeCommunity, { communityId: community.id })
-}
-
-export const onUndoSubscribe = (community) => {
-  if (!store.isLogin) return store.authWarning()
-  if (store.subscribeLoading) return false
-
-  // log('onUndoSubscribe: ', community)
-  store.mark({ subscribeLoading: true })
-  sr71$.mutate(S.unsubscribeCommunity, { communityId: community.id })
-}
-
 export const onShowEditorList = () => {
   const type = TYPE.USER_LISTER_COMMUNITY_EDITORS
   const data = {
@@ -85,8 +67,15 @@ export const toggleDescExpand = () => {
   store.mark({ descExpand: !descExpand })
 }
 
-const markLoading = (maybe = true) =>
-  store.mark({ loading: maybe, subscribeLoading: maybe })
+const markLoading = (maybe = true) => store.mark({ loading: maybe })
+
+/**
+ * set digest visiable in current viewport
+ * @param {Boolean} inView
+ */
+export const setViewport = (inViewport) => {
+  store.mark({ inViewport })
+}
 
 // ###############################
 // Data & Error handlers

src/containers/digest/CommunityDigest/schema.js

@@ -1,34 +1,12 @@
 import gql from 'graphql-tag'
-import { P, F } from '@/schemas'
+import { P } from '@/schemas'
 
 const community = gql`
   ${P.community}
 `
 
-const subscribeCommunity = gql`
-  mutation subscribeCommunity($communityId: ID!) {
-    subscribeCommunity(communityId: $communityId) {
-      ${F.community}
-      contributesDigest
-      threads {
-        title
-        raw
-      }
-    }
-  }
-`
-const unsubscribeCommunity = gql`
-  mutation unsubscribeCommunity($communityId: ID!) {
-    unsubscribeCommunity(communityId: $communityId) {
-      id
-    }
-  }
-`
-
 const schema = {
   community,
-  subscribeCommunity,
-  unsubscribeCommunity,
 }
 
 export default schema

src/containers/digest/CommunityDigest/store.js

@@ -13,7 +13,8 @@ const log = buildLog('S:CommunityDigest')
 const CommunityDigest = T.model('CommunityDigest', {
   loading: T.optional(T.boolean, false),
   descExpand: T.optional(T.boolean, false),
-  subscribeLoading: T.optional(T.boolean, false),
+
+  inViewport: T.optional(T.boolean, true),
 })
   .views((self) => ({
     get root() {

src/containers/thread/PostsThread/index.js

@@ -12,6 +12,7 @@ import { ICON } from '@/config'
 import { C11N, THREAD, ROUTE } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
 
+import CommunityJoinBadge from '@/containers/tool/CommunityJoinBadge'
 import TagsBar from '@/containers/unit/TagsBar'
 
 import Sticky from '@/components/Sticky'
@@ -30,6 +31,7 @@ import {
   LeftPart,
   RightPart,
   FilterWrapper,
+  BadgeWrapper,
   PublisherWrapper,
   StickyHolder,
 } from './styles'
@@ -97,6 +99,7 @@ const PostsThreadContainer = ({ postsThread: store }) => {
     accountInfo: {
       customization: { bannerLayout },
     },
+    isCommunityDigestInViewport,
   } = store
 
   const { subPath } = curRoute
@@ -147,7 +150,7 @@ const PostsThreadContainer = ({ postsThread: store }) => {
 
           {bannerLayout === C11N.DIGEST && (
             <RightPart>
-              <PublisherWrapper>
+              <PublisherWrapper show={isCommunityDigestInViewport}>
                 <DropdownButton
                   type="primary"
                   placement="bottom-end"
@@ -174,14 +177,12 @@ const PostsThreadContainer = ({ postsThread: store }) => {
                 >
                   {LabelText[subPath] || '发布帖子'}
                 </DropdownButton>
-
-                {/* <PublishButton
-                  label={LabelText[subPath] || '发布帖子'}
-                  onPublish={onContentCreate}
-                /> */}
               </PublisherWrapper>
 
-              <Sticky offsetTop={100}>
+              <Sticky offsetTop={55}>
+                <BadgeWrapper show={!isCommunityDigestInViewport}>
+                  <CommunityJoinBadge />
+                </BadgeWrapper>
                 <TagsBar
                   thread={THREAD.POST}
                   topic={topic}

src/containers/thread/PostsThread/store.js

@@ -84,6 +84,9 @@ const PostsThreadStore = T.model('PostsThreadStore', {
 
       return !isEmpty(curFilter) || !isEmpty(pagedPosts.entries)
     },
+    get isCommunityDigestInViewport() {
+      return self.root.communityDigest.inViewport
+    },
   }))
   .actions((self) => ({
     toastInfo(options) {