chore(article-display): drawer & simple page content, share, collect etc .. (#1207)

mydearxym · web-flow · commit d13471fe7a9b · 2021-12-01T11:45:48.000+08:00
* chore(report): adjust hide logic &amp; text

* chore(share): fix demo values

* chore(collection): setup for demo

* chore(collection): setup for demo
diff --git a/config/config.json b/config/config.json
@@ -50,7 +50,7 @@
   "DEFAULT_USER_AVATAR": "https://cps-oss.oss-cn-shanghai.aliyuncs.com/icons/cmd/alien_user3.svg",
   "GRAPHQL_ENDPOINT": "http://localhost:4001/graphiql",
   "SITE_URL": "https://coderplanets.com",
-  "SITE_URL_SHORT": "https://cper.co",
+  "SITE_URL_SHORT": "https://coderplanets.com",
   "GITHUB": "https://github.com/coderplanets",
   "GITHUB_WEB_ADDR": "https://github.com/coderplanets/coderplanets_web",
   "GITHUB_SERVER_ADDR": "https://github.com/coderplanets/coderplanets_server",
diff --git a/src/containers/tool/AbuseReport/Header.tsx b/src/containers/tool/AbuseReport/Header.tsx
@@ -1,5 +1,6 @@
 import { FC, memo } from 'react'
 
+import type { TArticle } from '@/spec'
 import { REPORT_TYPE } from '@/constant'
 import { ICON } from '@/config'
 
@@ -27,9 +28,10 @@ type TProps = {
   type: string
   view: 'main' | 'detail'
   activeItem: TREPORT_ITEM
+  article: TArticle
 }
 
-const Header: FC<TProps> = ({ type, view, activeItem }) => {
+const Header: FC<TProps> = ({ type, view, activeItem, article }) => {
   return (
     <Wrapper showShadow={view === 'detail'}>
       <ReportIcon src={`${ICON}/article/report-solid.svg`} />
@@ -38,7 +40,7 @@ const Header: FC<TProps> = ({ type, view, activeItem }) => {
       ) : (
         <Text>举报{getCustomTitle(type)}</Text>
       )}
-      <ContentTitle>这是一首简单的小情歌</ContentTitle>
+      <ContentTitle>{article.title}</ContentTitle>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/ReportContent/Main.tsx b/src/containers/tool/AbuseReport/ReportContent/Main.tsx
@@ -35,7 +35,7 @@ const Main: FC<TProps> = ({ items, activeItem }) => {
             </Option>
           ))}
       </OptionsWrapper>
-      <FooterPanel>感谢你用实际行动为社区净化作出贡献。</FooterPanel>
+      <FooterPanel>感谢你为社区净化作出贡献，我们将尽快处理。</FooterPanel>
     </Wrapper>
   )
 }
diff --git a/src/containers/tool/AbuseReport/defaults/article.ts b/src/containers/tool/AbuseReport/defaults/article.ts
@@ -28,7 +28,7 @@ const items = [
       '包括但不限于盗版话题讨论，未授权转载，人身攻击，无根据造谣等内容。',
   },
   {
-    title: '坏问题',
+    title: '劣质问题',
     raw: REPORT.ARTICLE.BAD_QUESTION,
     checked: false,
     detail:
diff --git a/src/containers/tool/AbuseReport/index.tsx b/src/containers/tool/AbuseReport/index.tsx
@@ -33,12 +33,17 @@ const AbuseReportContainer: FC<TProps> = ({
   testid = 'abuse-report',
 }) => {
   useInit(store)
-  const { show, type, view, itemsData, activeItem } = store
+  const { show, type, view, itemsData, activeItem, viewingArticle } = store
 
   return (
     <Modal width="500px" show={show} showCloseBtn onClose={() => close()}>
       <Wrapper testid={testid}>
-        <Header type={type} view={view} activeItem={activeItem} />
+        <Header
+          type={type}
+          view={view}
+          activeItem={activeItem}
+          article={viewingArticle}
+        />
         <ReportContent view={view} items={itemsData} activeItem={activeItem} />
         <Footer view={view} />
       </Wrapper>
diff --git a/src/containers/tool/AbuseReport/logic.ts b/src/containers/tool/AbuseReport/logic.ts
@@ -37,7 +37,7 @@ export const selectItem = (checkedItemRaw: string): void => {
   store.mark({ checkedItemRaw, view: 'detail' })
 }
 
-export const close = (): void => store.mark({ show: false, view: 'main' })
+export const close = (): void => store.reset()
 
 const DataResolver = [
   {
@@ -79,6 +79,7 @@ export const useInit = (_store: TStore): void => {
     log('useInit: ', store)
     return () => {
       if (!sub$) return
+
       sr71$.stop()
       sub$.unsubscribe()
       sub$ = null
diff --git a/src/containers/tool/AbuseReport/store.ts b/src/containers/tool/AbuseReport/store.ts
@@ -7,7 +7,7 @@ import { find, propEq } from 'ramda'
 
 import { REPORT_TYPE } from '@/constant'
 
-import type { TCommunity, TRootStore } from '@/spec'
+import type { TCommunity, TArticle, TRootStore } from '@/spec'
 import { markStates, toJS } from '@/utils/mobx'
 import { buildLog } from '@/utils/logger'
 
@@ -47,7 +47,10 @@ const AbuseReport = T.model('AbuseReport', {
     get itemsData(): TREPORT_ITEM[] {
       return toJS(self.items || [])
     },
-
+    get viewingArticle(): TArticle {
+      const root = getParent(self) as TRootStore
+      return root.viewingArticle
+    },
     get activeItem(): TREPORT_ITEM {
       const { itemsData, checkedItemRaw } = self as TStore
       const findItem = find(
@@ -59,6 +62,12 @@ const AbuseReport = T.model('AbuseReport', {
     },
   }))
   .actions((self) => ({
+    reset(): void {
+      self.show = false
+      self.view = 'main'
+      self.checkedItemRaw = null
+      self.items = null
+    },
     mark(sobj: Record<string, unknown>): void {
       markStates(sobj, self)
     },
diff --git a/src/containers/tool/AbuseReport/styles/header.ts b/src/containers/tool/AbuseReport/styles/header.ts
@@ -26,6 +26,7 @@ export const Text = styled.div`
 `
 export const ContentTitle = styled.div`
   color: ${theme('thread.articleDigest')};
+  ${css.cutRest('300px')};
   font-size: 15px;
   margin-left: 3px;
   margin-right: 3px;
diff --git a/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx b/src/containers/tool/ArticleSticker/RightSticker/DefaultSticker.tsx
@@ -1,13 +1,13 @@
 import { FC, memo } from 'react'
 
 import type { TArticle } from '@/spec'
-import { shareTo } from '@/utils/helper'
+import { shareTo, addCollection } from '@/utils/helper'
 
 import IconButton from '@/widgets/Buttons/IconButton'
 import Upvote from '@/widgets/Upvote'
 
 import { Wrapper } from '../styles/right_sticker/default_sticker'
-import { collectArticle, handleUpvote } from '../logic'
+import { handleUpvote } from '../logic'
 
 type TProps = {
   show: boolean
@@ -25,7 +25,7 @@ const ArticleSticker: FC<TProps> = ({ show, article }) => {
       />
       <IconButton
         path="article/collect-bookmark.svg"
-        onClick={collectArticle}
+        onClick={() => addCollection()}
         size={23}
         mLeft={2}
         mTop={18}
diff --git a/src/containers/tool/ArticleSticker/logic.ts b/src/containers/tool/ArticleSticker/logic.ts
@@ -1,8 +1,7 @@
 import { useEffect } from 'react'
 // import { } from 'ramda'
 
-import { EVENT } from '@/constant'
-import { send, authWarn } from '@/utils/helper'
+import { authWarn } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 import asyncSuit from '@/utils/async'
 import { matchArticleUpvotes } from '@/utils/macros'
@@ -26,12 +25,6 @@ export const toggleTocMenu = (): void => {
   store.mark({ isTocMenuOpened, isLeftStickerLocked })
 }
 
-export const collectArticle = (): void => {
-  send(EVENT.SET_FAVORITE_CONTENT, {
-    data: { thread: store.activeThread },
-  })
-}
-
 export const handleUpvote = (viewerHasUpvoted: boolean): void => {
   if (!store.isLogin) return authWarn({ hideToast: true })
 
diff --git a/src/containers/tool/CollectionFolder/Setter.tsx b/src/containers/tool/CollectionFolder/Setter.tsx
@@ -1,6 +1,7 @@
 import { FC, memo, useCallback } from 'react'
-import { TID } from '@/spec'
+import { TID, TArticle } from '@/spec'
 
+import NoticeBar from '@/widgets/NoticeBar'
 import Button from '@/widgets/Buttons/Button'
 import { Space } from '@/widgets/Common'
 import Folder from '@/widgets/Folder'
@@ -15,52 +16,41 @@ import {
 } from './styles/setter'
 
 import {
-  setContent,
-  unSetContent,
+  // setContent,
+  // unSetContent,
   switchToCreator,
   switchToUpdater,
 } from './logic'
 
 type TProps = {
   show: boolean
   selectedId: TID
+  article: TArticle
 }
 
-const Setter: FC<TProps> = ({ show, selectedId }) => {
+const Setter: FC<TProps> = ({ show, selectedId, article }) => {
   const handleMenu = useCallback((key) => {
     if (key === 'edit') switchToUpdater()
   }, [])
 
   return (
     <Wrapper show={show}>
       <Header>
-        添加<Artiment>某篇文章或讨论</Artiment>到收藏夹
+        添加<Artiment>{article.title}</Artiment>到收藏夹
       </Header>
+      <NoticeBar
+        type="notice"
+        content="抱歉，收藏功能前端部分尚未完成，暂不可用。如果你对 UI/UX 或功能有建议，欢迎移步 /feedback 参与讨论。"
+        bottom={20}
+        top={20}
+      />
       <ListWrapper>
         <FolderWrapper>
           <Folder onMenuClick={handleMenu} lock />
         </FolderWrapper>
 
         <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
-        </FolderWrapper>
-        <FolderWrapper>
-          <Folder lock />
+          <Folder />
         </FolderWrapper>
       </ListWrapper>
       <Footer>
diff --git a/src/containers/tool/CollectionFolder/index.tsx b/src/containers/tool/CollectionFolder/index.tsx
@@ -77,6 +77,7 @@ const CollectionFolderContainer: FC<TProps> = ({
           <Setter
             // entries={entries}
             show={isSetterView}
+            article={viewingArticle}
             selectedId="1"
           />
           <Creator data={editCategoryData} show={isCreatorView} />
diff --git a/src/containers/tool/CollectionFolder/styles/metric.ts b/src/containers/tool/CollectionFolder/styles/metric.ts
@@ -1,2 +1,2 @@
-export const MODAL_MIN_HEIGHT = '55vh'
+export const MODAL_MIN_HEIGHT = '48vh'
 export const holder = 1
diff --git a/src/containers/tool/CollectionFolder/styles/setter.ts b/src/containers/tool/CollectionFolder/styles/setter.ts
@@ -27,6 +27,7 @@ export const Header = styled.div`
 `
 export const Artiment = styled.div`
   color: ${theme('thread.articleTitle')};
+  ${css.cutRest('200px')};
   font-size: 15px;
   margin-left: 5px;
   margin-right: 5px;
diff --git a/src/containers/tool/Drawer/AddOn/ShareButton.tsx b/src/containers/tool/Drawer/AddOn/ShareButton.tsx
@@ -1,15 +1,17 @@
 import { FC, memo } from 'react'
 
+import { shareTo } from '@/utils/helper'
 import IconButton from '@/widgets/Buttons/IconButton'
 
 const ShareButton: FC = () => {
   return (
     <IconButton
+      onClick={shareTo}
       path="article/share.svg"
-      size={19}
-      mTop={7}
+      size={18}
+      mTop={8}
       mLeft={-1}
-      hint="分享本文"
+      hint="分享内容"
       hintPlacement="bottom"
       dimWhenIdle
     />
diff --git a/src/containers/tool/Share/IFrameBoard.tsx b/src/containers/tool/Share/IFrameBoard.tsx
@@ -12,7 +12,7 @@ import {
 
 const IFrameBoard: FC = () => {
   const code =
-    '<iframe width="560" height="315" src="https://www.youtube.com/embed/5KnkUBBVqis" title="YouTube video player" frameborder="0"></iframe>'
+    '<iframe width="560" height="315" src="https://coderplanets.com/embed/example" title="example" frameborder="0"></iframe>'
   return (
     <Wrapper>
       <Header>
diff --git a/src/containers/tool/Share/styles/link_board.ts b/src/containers/tool/Share/styles/link_board.ts
@@ -32,4 +32,6 @@ export const BoxWrapper = styled.div`
   margin-top: 8px;
   margin-left: -8px;
 `
-export const Inputer = styled(Input)``
+export const Inputer = styled(Input)`
+  width: 380px;
+`
diff --git a/src/containers/unit/ArticleFooter/Actions/index.tsx b/src/containers/unit/ArticleFooter/Actions/index.tsx
@@ -39,7 +39,7 @@ const Actions: FC<TProps> = ({
         <Text active={showOperationList}>日志</Text>
       </Item> */}
       {/* <DotDivider space={8} /> */}
-      <Item onClick={() => report('USER')}>
+      <Item onClick={() => report('ARTICLE')}>
         <Text>举报</Text>
       </Item>
     </Wrapper>
diff --git a/src/containers/viewer/ArticleViewer/BlogViewer/ArticleInfo.tsx b/src/containers/viewer/ArticleViewer/BlogViewer/ArticleInfo.tsx
@@ -2,8 +2,8 @@ import { memo, FC } from 'react'
 
 import type { TArticle } from '@/spec'
 import { BLOG_TAB, BLOG_TAB_ITEMS } from '@/constant'
-import { ICON } from '@/config'
 
+import { addCollection } from '@/utils/helper'
 import DotDivider from '@/widgets/DotDivider'
 import Upvote from '@/widgets/Upvote'
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
@@ -37,8 +37,8 @@ const ArticleInfo: FC<TProps> = ({ article, tab }) => {
         <BaseWrapper>
           <ArticleBaseStats article={article} container="drawer" />
           <DotDivider space={10} />
-          <CollectWrapper>
-            <CollectIcon src={`${ICON}/article/collect-bookmark.svg`} />
+          <CollectWrapper onClick={() => addCollection()}>
+            <CollectIcon />
             <CollectText>收藏</CollectText>
           </CollectWrapper>
         </BaseWrapper>
diff --git a/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx b/src/containers/viewer/ArticleViewer/PostViewer/ArticleInfo.tsx
@@ -1,8 +1,8 @@
 import { memo, FC } from 'react'
 
 import type { TArticle } from '@/spec'
-import { ICON } from '@/config'
 
+import { addCollection } from '@/utils/helper'
 import DotDivider from '@/widgets/DotDivider'
 import Upvote from '@/widgets/Upvote'
 import ArticleBaseStats from '@/widgets/ArticleBaseStats'
@@ -29,8 +29,8 @@ const ArticleInfo: FC<TProps> = ({ article }) => {
       <BaseWrapper>
         <ArticleBaseStats article={article} container="drawer" />
         <DotDivider space={10} />
-        <CollectWrapper>
-          <CollectIcon src={`${ICON}/article/collect-bookmark.svg`} />
+        <CollectWrapper onClick={() => addCollection()}>
+          <CollectIcon />
           <CollectText>收藏</CollectText>
         </CollectWrapper>
       </BaseWrapper>
diff --git a/src/containers/viewer/ArticleViewer/index.tsx b/src/containers/viewer/ArticleViewer/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import { FC } from 'react'
+import dynamic from 'next/dynamic'
 
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
@@ -20,6 +21,13 @@ import { useInit } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:ArticleViewer')
 
+const CollectionFolder = dynamic(
+  () => import('@/containers/tool/CollectionFolder'),
+  {
+    ssr: false,
+  },
+)
+
 type TProps = {
   articleViewer?: TStore
   testid?: string
@@ -34,6 +42,7 @@ const ArticleViewerContainer: FC<TProps> = ({
 
   return (
     <Wrapper testid={testid}>
+      <CollectionFolder />
       <Viewer
         article={viewingArticle}
         loading={loading}
diff --git a/src/containers/viewer/ArticleViewer/styles/blog_viewer/article_info.ts b/src/containers/viewer/ArticleViewer/styles/blog_viewer/article_info.ts
diff --git a/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts b/src/containers/viewer/ArticleViewer/styles/post_viewer/article_info.ts
diff --git a/utils/helper.ts b/utils/helper.ts

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ const Main: FC<TProps> = ({ items, activeItem }) => {`
`35`	`35`	`</Option>`
`36`	`36`	`))}`
`37`	`37`	`</OptionsWrapper>`
`38`		`- <FooterPanel>感谢你用实际行动为社区净化作出贡献。</FooterPanel>`
	`38`	`+ <FooterPanel>感谢你为社区净化作出贡献，我们将尽快处理。</FooterPanel>`
`39`	`39`	`</Wrapper>`
`40`	`40`	`)`
`41`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ const items = [`
`28`	`28`	`'包括但不限于盗版话题讨论，未授权转载，人身攻击，无根据造谣等内容。',`
`29`	`29`	`},`
`30`	`30`	`{`
`31`		`- title: '坏问题',`
	`31`	`+ title: '劣质问题',`
`32`	`32`	`raw: REPORT.ARTICLE.BAD_QUESTION,`
`33`	`33`	`checked: false,`
`34`	`34`	`detail:`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export const selectItem = (checkedItemRaw: string): void => {`
`37`	`37`	`store.mark({ checkedItemRaw, view: 'detail' })`
`38`	`38`	`}`
`39`	`39`
`40`		`-export const close = (): void => store.mark({ show: false, view: 'main' })`
	`40`	`+export const close = (): void => store.reset()`
`41`	`41`
`42`	`42`	`const DataResolver = [`
`43`	`43`	`{`
`@@ -79,6 +79,7 @@ export const useInit = (_store: TStore): void => {`
`79`	`79`	`log('useInit: ', store)`
`80`	`80`	`return () => {`
`81`	`81`	`if (!sub$) return`
	`82`	`+`
`82`	`83`	`sr71$.stop()`
`83`	`84`	`sub$.unsubscribe()`
`84`	`85`	`sub$ = null`
Original file line number	Diff line number	Diff line change
@@ -26,6 +26,7 @@ export const Text = styled.div`
`26`	`26`	`
`27`	`27`	export const ContentTitle = styled.div`
`28`	`28`	`color: ${theme('thread.articleDigest')};`
	`29`	`+ ${css.cutRest('300px')};`
`29`	`30`	`font-size: 15px;`
`30`	`31`	`margin-left: 3px;`
`31`	`32`	`margin-right: 3px;`