refactor(article): remove community in article url (#1042)

* refactor(post-content): js -> ts

* refactor(footer): adjust BriefView for article page usage

* style(post-content): adjust with

* refactor(article-digest): adjust width & tsfy

* style(post-content): adjust sticker width

* refactor(post-thread): remove community info on jump link

* style(footer): adjust metric

Author: mydearxym

server/routes.js

@@ -1,4 +1,4 @@
-//
+/* eslint-disable @typescript-eslint/no-var-requires */
 
 const router = require('express').Router()
 const R = require('ramda')
@@ -78,7 +78,7 @@ router.route('/user/:userId').get((req, res) => {
 })
 
 // 帖子页
-router.route('/:community/post/:id').get((req, res) => {
+router.route('/post/:id').get((req, res) => {
   return renderAndCache({ req, res, path: '/post' })
 })
 

src/components/Buttons/Button.tsx

@@ -24,7 +24,7 @@ type TProps = {
   children?: React.ReactNode
   className?: string
   ghost?: boolean
-  type: 'primary' | 'red' | 'ghost'
+  type?: 'primary' | 'red' | 'ghost'
   size?: TSIZE_TSM
   onClick?: () => void
   loading?: boolean | null

src/components/PostItem/DigestView/DesktopView/Header.js

@@ -17,11 +17,11 @@ import {
   TagListWrapper,
 } from '../../styles/digest_view/header'
 
-const Header = ({ item, community, onUserSelect }) => {
+const Header = ({ item, onUserSelect }) => {
   return (
     <Wrapper>
       <Brief>
-        <Link href={`/${community}/${ROUTE.POST}/${item.id}`} passHref>
+        <Link href={`/${ROUTE.POST}/${item.id}`} passHref>
           <Title>{item.title}</Title>
         </Link>
         {item.linkAddr && (

src/components/PostItem/DigestView/index.js renamed to src/components/PostItem/DigestView/index.tsx

@@ -7,7 +7,7 @@
 import React, { useRef } from 'react'
 import { Waypoint } from 'react-waypoint'
 
-import { pluggedIn, buildLog, isElementInViewport } from '@/utils'
+import { pluggedIn, buildLog } from '@/utils'
 
 import Comments from '@/containers/unit/Comments'
 // import ArticleAuthorCard from '@/containers/unit/ArticleAuthorCard'
@@ -17,6 +17,8 @@ import ArticleFooter from '@/containers/unit/ArticleFooter'
 import Maybe from '@/components/Maybe'
 import MarkDownRender from '@/components/MarkDownRender'
 
+import type { TStore } from './store'
+
 import {
   Wrapper,
   InnerWrapper,
@@ -26,38 +28,47 @@ import {
   CommentsWrapper,
 } from './styles/desktop_view'
 
-import { useInit, articleInAnchor, articleOutAnchor } from './logic'
+import { useInit, checkAnchor } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:PostContent')
 
-const checkAnchor = (el) =>
-  isElementInViewport(el) ? articleInAnchor() : articleOutAnchor()
+type TProps = {
+  postContent?: TStore
+  testid?: string
+  metric?: string
+}
 
-const PostContentContainer = ({ postContent: store, metric }) => {
+const PostContentContainer: React.FC<TProps> = ({
+  postContent: store,
+  metric,
+  testid,
+}) => {
   useInit(store)
 
-  const { viewingData } = store
+  const { viewingArticle } = store
   const ref = useRef()
 
   return (
-    <Wrapper>
-      <Maybe test={viewingData.id}>
+    <Wrapper testid={testid}>
+      <Maybe test={viewingArticle.id}>
         <InnerWrapper>
           <Waypoint
             onEnter={() => checkAnchor(ref?.current)}
             onLeave={() => checkAnchor(ref?.current)}
           />
           <MainWrapper metric={metric}>
             <ArticleWrapper ref={ref}>
-              <MarkDownRender body={viewingData.body} />
+              <MarkDownRender body={viewingArticle.body} />
               <ArticleFooter />
             </ArticleWrapper>
+
             <Waypoint
               onEnter={() => checkAnchor(ref?.current)}
               onLeave={() => checkAnchor(ref?.current)}
             />
             <CommentsWrapper>
+              {/* @ts-ignore */}
               <Comments ssr />
             </CommentsWrapper>
           </MainWrapper>
@@ -70,4 +81,4 @@ const PostContentContainer = ({ postContent: store, metric }) => {
   )
 }
 
-export default pluggedIn(PostContentContainer)
+export default pluggedIn(PostContentContainer) as React.FC<TProps>

src/containers/content/PostContent/DesktopView.js renamed to src/containers/content/PostContent/DesktopView.tsx

@@ -16,6 +16,8 @@ import ArticleFooter from '@/containers/unit/ArticleFooter'
 import Maybe from '@/components/Maybe'
 import MarkDownRender from '@/components/MarkDownRender'
 
+import type { TStore } from './store'
+
 import {
   Wrapper,
   InnerWrapper,
@@ -29,21 +31,30 @@ import { useInit, articleInAnchor, articleOutAnchor } from './logic'
 /* eslint-disable-next-line */
 const log = buildLog('C:PostContent')
 
-const PostContentContainer = ({ postContent: store }) => {
+type TProps = {
+  postContent?: TStore
+  testid?: string
+}
+
+const PostContentContainer: React.FC<TProps> = ({
+  postContent: store,
+  testid = 'post-content',
+}) => {
   useInit(store)
-  const { viewingData } = store
+  const { viewingArticle } = store
 
   return (
-    <Wrapper>
-      <Maybe test={viewingData.id}>
+    <Wrapper testid={testid}>
+      <Maybe test={viewingArticle.id}>
         <InnerWrapper>
           <MainWrapper>
             <ArticleWrapper>
-              <MarkDownRender body={viewingData.body} />
+              <MarkDownRender body={viewingArticle.body} />
             </ArticleWrapper>
             <Waypoint onEnter={articleInAnchor} onLeave={articleOutAnchor} />
             <ArticleFooter />
             <CommentsWrapper>
+              {/* @ts-ignore */}
               <Comments ssr />
             </CommentsWrapper>
           </MainWrapper>
@@ -53,4 +64,4 @@ const PostContentContainer = ({ postContent: store }) => {
   )
 }
 
-export default pluggedIn(PostContentContainer)
+export default pluggedIn(PostContentContainer) as React.FC<TProps>

src/containers/content/PostContent/MobileView.js renamed to src/containers/content/PostContent/MobileView.tsx

@@ -1,12 +1,14 @@
 import { useEffect } from 'react'
 
 import { EVENT, ERR } from '@/constant'
-import { asyncSuit, buildLog, errRescue } from '@/utils'
+import { asyncSuit, buildLog, errRescue, isElementInViewport } from '@/utils'
 
+import type { TStore } from './store'
 import S from './schema'
 
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
+  /* @ts-ignore */
   receive: [EVENT.REFRESH_POSTS],
 })
 
@@ -16,20 +18,23 @@ let store = null
 /* eslint-disable-next-line */
 const log = buildLog('L:PostContent')
 
-export const articleInAnchor = () => {
+export const checkAnchor = (el: HTMLElement): void =>
+  isElementInViewport(el) ? articleInAnchor() : articleOutAnchor()
+
+export const articleInAnchor = (): void => {
   if (store) store.mark({ articleInViewport: true })
 }
 
-export const articleOutAnchor = () => {
+export const articleOutAnchor = (): void => {
   if (store) store.mark({ articleInViewport: false })
 }
 
-const loadPost = () => {
+const loadPost = (): void => {
   const { id } = store.viewingData
   sr71$.query(S.post, { id, userHasLogin: store.isLogin })
 }
 
-export const callInformer = () => store.callInformer()
+export const callInformer = (): void => store.callInformer()
 
 // ###############################
 // Data & Error handlers
@@ -48,7 +53,9 @@ const DataSolver = [
 const ErrSolver = [
   {
     match: asyncErr(ERR.GRAPHQL),
-    action: () => {},
+    action: () => {
+      //
+    },
   },
   {
     match: asyncErr(ERR.TIMEOUT),
@@ -64,16 +71,16 @@ const ErrSolver = [
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store, attachment) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     // log('effect init')
 
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
     return () => {
-      if (!sub$) return false
+      if (!sub$) return
       sr71$.stop()
       sub$.unsubscribe()
     }
-  }, [_store, attachment])
+  }, [_store])
 }

src/containers/content/PostContent/index.js renamed to src/containers/content/PostContent/index.tsx

@@ -0,0 +1,46 @@
+/*
+ * PostContentStore store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+
+import type { TRootStore, TRoute, TArticle } from '@/spec'
+import { markStates, buildLog } from '@/utils'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:PostContentStore')
+
+const PostContentStore = T.model('PostContentStore', {
+  articleInViewport: T.optional(T.boolean, true),
+})
+  .views((self) => ({
+    get curRoute(): TRoute {
+      const root = getParent(self) as TRootStore
+      return root.curRoute
+    },
+    get isLogin(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.account.isLogin
+    },
+    get viewingArticle(): TArticle {
+      const root = getParent(self) as TRootStore
+      return root.viewingArticle
+    },
+  }))
+  .actions((self) => ({
+    callInformer(): void {
+      const root = getParent(self) as TRootStore
+      root.callInformer()
+    },
+    setViewing(sobj: Record<string, unknown>): void {
+      const root = getParent(self) as TRootStore
+      root.setViewing(sobj)
+    },
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof PostContentStore>
+export default PostContentStore