refactor(publish-workflow): add illegal & non-author alert (#1188)

* refactor(user-page): load works only when use is maker

* refactor(comments): audition concept

* refactor(article-editor): not author warning

* refactor(article-editor): add IllegalWarning concept

* refactor(article-editor): extract IllegalWarning to widget

* refactor(works): basic publish rules

* refactor(works): publish rules ux

* refactor(works): publish text adjust

* refactor(works): teammates manage

* refactor(works): allow allow author edit

Author: mydearxym

src/containers/content/UserContent/logic.ts

@@ -78,6 +78,14 @@ const loadEditableCommunities = () => {
   sr71$.query(S.editableCommunities, { login, filter })
 }
 
+const loadPublishedWorks = (): void => {
+  const { viewingUser: user } = store
+  if (!user.isMaker) return
+
+  const filter = { page: 1, size: 10 }
+  sr71$.query(S.pagedPublishedWorks, { login: user.login, filter })
+}
+
 const DataSolver = [
   {
     match: asyncRes('follow'),
@@ -91,6 +99,13 @@ const DataSolver = [
     match: asyncRes('editableCommunities'),
     action: ({ editableCommunities }) => {
       store.mark({ pagedEditableCommunities: editableCommunities })
+      loadPublishedWorks()
+    },
+  },
+  {
+    match: asyncRes('pagedPublishedWorks'),
+    action: ({ pagedPublishedWorks }) => {
+      store.mark({ pagedWorks: pagedPublishedWorks })
     },
   },
   {

src/containers/content/UserContent/schema.ts

@@ -36,11 +36,27 @@ const editableCommunities = gql`
   }
 `
 
+const pagedPublishedWorks = `
+  query($login: String!, $filter: PagedFilter!) {
+    pagedPublishedWorks(login: $login, filter: $filter) {
+      entries {
+        id
+        title
+        cover
+        desc
+        homeLink
+      }
+      ${F.pagi}
+    }
+  }
+`
+
 const schema = {
   follow,
   undoFollow,
   user,
   editableCommunities,
+  pagedPublishedWorks,
 }
 
 export default schema

src/containers/editor/ArticleEditor/index.tsx

@@ -10,8 +10,9 @@ import { METRIC } from '@/constant'
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
-import { ArchiveAlert } from '@/widgets/dynamic'
+import { ArchiveAlert, IllegalWarning } from '@/widgets/dynamic'
 
+import NoticeBar from '@/widgets/NoticeBar'
 import CommunityTagSetter from '@/containers/tool/CommunityTagSetter'
 import RichEditor from '@/containers/editor/RichEditor'
 import CommunityBadgeSelector from '@/widgets/CommunityBadgeSelector'
@@ -53,8 +54,11 @@ const ArticleEditorContainer: FC<TProps> = ({
     texts,
     thread,
     editData,
+    viewingArticle,
+    allowEdit,
   } = store
 
+  const { meta } = viewingArticle
   const { title, body } = editData
 
   const initEditor = mode === 'publish' || body !== '{}'
@@ -70,6 +74,14 @@ const ArticleEditorContainer: FC<TProps> = ({
           />
         )}
         <ContentWrapper>
+          {!allowEdit && (
+            <NoticeBar
+              type="notice"
+              content="只有作者可以编辑本内容。"
+              left={25}
+            />
+          )}
+
           {isArchived && (
             <ArchiveAlert date={archivedAt} top={12} bottom={20} left={25} />
           )}
@@ -94,6 +106,13 @@ const ArticleEditorContainer: FC<TProps> = ({
         </ContentWrapper>
         <div>
           <CommunityBadgeSelector community={communityData} mode={mode} />
+
+          {mode === 'update' && !meta.isLegal && (
+            <IllegalWarning
+              illegalReason={meta.illegalReason}
+              illegalWords={meta.illegalWords}
+            />
+          )}
           <PublishRules thread={thread} />
         </div>
       </InnerWrapper>

src/containers/editor/ArticleEditor/schema.ts

@@ -176,6 +176,9 @@ const post = gql`
       copyRight
       archivedAt
       isArchived
+      author {
+        ${F.author}
+      }
 
       originalCommunity {
         ${F.community}
@@ -187,6 +190,9 @@ const post = gql`
 
       meta {
         thread
+        isLegal
+        illegalReason
+        illegalWords
       }
     
       document {
@@ -206,6 +212,10 @@ const job = gql`
       archivedAt
       isArchived
 
+      author {
+        ${F.author}
+      }
+
       originalCommunity {
         ${F.community}
       }
@@ -216,6 +226,9 @@ const job = gql`
 
       meta {
         thread
+        isLegal
+        illegalReason
+        illegalWords
       }
     
       document {
@@ -244,6 +257,9 @@ const radar = gql`
 
       meta {
         thread
+        isLegal
+        illegalReason
+        illegalWords
       }
     
       document {

src/containers/editor/ArticleEditor/store.ts

@@ -14,6 +14,7 @@ import type {
   TTag,
   TArticleThread,
   TSubmitState,
+  TAccount,
 } from '@/spec'
 import { ARTICLE_THREAD } from '@/constant'
 
@@ -51,10 +52,22 @@ const ArticleEditor = T.model('ArticleEditor', {
       const root = getParent(self) as TRootStore
       return root.account.isLogin
     },
+    get accountInfo(): TAccount {
+      const root = getParent(self) as TRootStore
+      return root.account.accountInfo
+    },
     get viewingArticle(): TArticle {
       const root = getParent(self) as TRootStore
       return toJS(root.viewing.viewingArticle)
     },
+    get allowEdit(): boolean {
+      const slf = self as TStore
+      const { mode, accountInfo, viewingArticle } = slf
+
+      return (
+        mode === 'update' && accountInfo.login === viewingArticle.author?.login
+      )
+    },
     get thread(): TArticleThread {
       const root = getParent(self) as TRootStore
       return toJS(root.viewing.viewingThread)
@@ -138,7 +151,17 @@ const ArticleEditor = T.model('ArticleEditor', {
     },
     get submitState(): TSubmitState {
       const slf = self as TStore
-      return pick(['publishing', 'publishDone', 'isReady', 'isArchived'], slf)
+      return pick(
+        [
+          'publishing',
+          'publishDone',
+          'isReady',
+          'isArchived',
+          'mode',
+          'isArticleAuthor',
+        ],
+        slf,
+      )
     },
   }))
   .actions((self) => ({

src/containers/editor/WorksEditor/Content/BasicInfoPart/index.tsx

@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
 import { filter, includes } from 'ramda'
 
-import type { TSelectOption } from '@/spec'
+import type { TSelectOption, TUser } from '@/spec'
 
 import Checker from '@/widgets/Checker'
 import Select from '@/widgets/Select'
@@ -32,6 +32,10 @@ import {
   checkerOnChange,
   addSocial,
   citiesOnChange,
+  searchUser,
+  addTeammate,
+  removeTeammate,
+  closeSearchedUsers,
 } from '../../logic'
 
 const cityOptions = [
@@ -53,9 +57,14 @@ const cityOptions = [
 type TProps = {
   inputData: TInputData
   socialOptions: TSelectOption[]
+  searchedUsers: TUser[]
 }
 
-const BasicInfoPart: FC<TProps> = ({ inputData, socialOptions }) => {
+const BasicInfoPart: FC<TProps> = ({
+  inputData,
+  socialOptions,
+  searchedUsers,
+}) => {
   const {
     cover,
     title,
@@ -198,7 +207,16 @@ const BasicInfoPart: FC<TProps> = ({ inputData, socialOptions }) => {
       <Section>
         <Label>团队成员</Label>
         <TeamsWrapper>
-          <UserList users={teammates} layout="create-works" withSetter />
+          <UserList
+            users={teammates}
+            layout="create-works"
+            onAdd={addTeammate}
+            onRemove={removeTeammate}
+            onClose={closeSearchedUsers}
+            onSearch={searchUser}
+            searchedUsers={searchedUsers}
+            withSetter
+          />
         </TeamsWrapper>
       </Section>
     </Wrapper>

src/containers/editor/WorksEditor/Content/NamePart.tsx

@@ -1,8 +1,11 @@
 import { FC, memo, useEffect, useRef } from 'react'
 
 import { TEditMode } from '@/spec'
-import type { TInputData } from '../spec'
+import { nilOrEmpty } from '@/utils/validator'
+
+import PublishRules from './PublishRules'
 
+import type { TInputData } from '../spec'
 import { Wrapper, Input, Title, Desc } from '../styles/content/name_part'
 import { inputOnChange } from '../logic'
 
@@ -26,12 +29,13 @@ const NamePart: FC<TProps> = ({ mode, inputData }) => {
   return (
     <Wrapper ref={ref}>
       {mode === 'publish' ? <Title>发布作品</Title> : <Title>更新作品</Title>}
-      <Desc>你（们）的作品名称是 ？</Desc>
+      <Desc>你（们）的作品名字是 ？</Desc>
       <Input
         value={title || ''}
         onChange={(e) => inputOnChange(e, 'title')}
         autoFocus
       />
+      {nilOrEmpty(title) && <PublishRules />}
     </Wrapper>
   )
 }

src/containers/editor/WorksEditor/Content/PublishRules.tsx

@@ -0,0 +1,83 @@
+import { FC, memo, useState, Fragment, useCallback } from 'react'
+import Link from 'next/link'
+
+import { ROUTE } from '@/constant'
+
+import {
+  Wrapper,
+  ToggleTitle,
+  Section,
+  DoTitle,
+  DoNotTitle,
+  Ul,
+  Li,
+  Bold,
+  Strike,
+  TextLink,
+} from '../styles/content/publish_rules'
+
+const PublishRules: FC = () => {
+  const [showDetail, setShowDetail] = useState(false)
+
+  const toggleDetail = useCallback(() => {
+    setShowDetail(!showDetail)
+  }, [showDetail])
+
+  return (
+    <Wrapper>
+      <ToggleTitle onClick={toggleDetail} showDetail={showDetail}>
+        {!showDetail ? (
+          <Fragment>发布须知</Fragment>
+        ) : (
+          <Fragment>收起</Fragment>
+        )}
+      </ToggleTitle>
+      {showDetail && (
+        <Fragment>
+          <Section>
+            <DoTitle>欢迎发布:</DoTitle>
+            <Ul>
+              <Li>
+                各平台能提高开发者 / 设计师 / 产品生产力的软件工具，插件或服务。
+              </Li>
+              <Li>你参与编写和设计的库，框架等各种作品。</Li>
+              <Li>字体，图标，UI/UX模板手稿等人机交互类的设计资源或服务。</Li>
+              <Li> 各类辅助管理工具或服务。 </Li>
+              <Li>品牌，运营，增长，统计等工具或服务。</Li>
+              <Li>硬件产品，物联网，VR, 机器人等类似项目。</Li>
+            </Ul>
+          </Section>
+          <Section>
+            <DoNotTitle>不适合发布:</DoNotTitle>
+            <Ul>
+              <Li>
+                你没有参与的项目。如果你是个喜欢收集的 Hunter，
+                <Link href={`/${ROUTE.COOL_GUIDE}`} passHref>
+                  <TextLink>酷导航</TextLink>
+                </Link>
+                是最合适的地方。
+              </Li>
+              <Li>
+                Markdown 类项目, 包括但不限于排行榜, 资料收集,
+                面经题库，课程培训等。
+              </Li>
+              <Li>聚合类项目，包括但不限于 xx 导航，xx 热榜等。</Li>
+              <Li>后台管理模板，xx 商城系统，xx 手脚架。</Li>
+              <Li>
+                和开发者（广义上包括 IT 从业者）关系不大的项目。
+                简单来讲，如果你要发布的项目主要目标用户不是 IT
+                从业者，那么通常就不适合。 这里是垂直社区，
+                <Bold>不是 APP 应用商店</Bold>。
+              </Li>
+              <Li>
+                三天或一周时间写的 <Strike>Demo</Strike> 项目, 天才例外。
+              </Li>
+            </Ul>
+          </Section>
+        </Fragment>
+      )}
+    </Wrapper>
+  )
+}
+
+export default memo(PublishRules)