chore(links): header links re-org & related pages content, footer

Author: mydearxym

.huskyrc

@@ -1,5 +1,6 @@
 {
   "hooks": {
+    "pre-commit": "pretty-quick --staged && npm run lint:staged",
     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
   }
 }

src/containers/content/SubscribeContent/Actions/Detail.js renamed to src/containers/content/SubscribeContent/Actions/Detail.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FC, memo } from 'react'
 
 import { ICON_CMD } from '@/config'
 
@@ -7,18 +7,16 @@ import EmailSubscriber from '@/widgets/EmailSubscriber'
 import { Br, SpaceGrow } from '@/widgets/Common'
 // TODO: extract to Email Subscriber
 
-import { Wrapper, Title, Desc, Dot, CopyIcon } from '../styles/actions/detail'
+import { Wrapper, Title, Desc, CopyIcon } from '../styles/actions/detail'
 import { notifyCopy } from '../logic'
 
-const Detail = () => {
+const Detail: FC = () => {
   const [copyState, copyToClipboard] = useCopyToClipboard()
 
-  const rss = 'https://coderplanets.com/rss/javascript'
+  const rss = 'https://coderplanets.com/javascript/rss'
   return (
     <Wrapper>
-      <Title>
-        <Dot /> Email 订阅
-      </Title>
+      <Title>Email 订阅</Title>
       <Desc>
         <EmailSubscriber
           activeByDefault
@@ -28,7 +26,6 @@ const Detail = () => {
       </Desc>
       <Br top={50} />
       <Title>
-        <Dot />
         RSS 订阅
         <SpaceGrow />
         <div
@@ -45,4 +42,4 @@ const Detail = () => {
   )
 }
 
-export default Detail
+export default memo(Detail)

src/containers/content/SubscribeContent/Actions/index.js

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import Detail from './Detail'
+
+import { Wrapper, InnerWrapper } from '../styles/actions'
+
+const Actions: FC = () => {
+  return (
+    <Wrapper>
+      <InnerWrapper>
+        <Detail />
+      </InnerWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(Actions)

src/containers/content/SubscribeContent/Actions/index.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable max-len */
+import { FC, memo } from 'react'
+
+import Linker from '@/widgets/Linker'
+
+import { Wrapper, Title, P, Bold, Ul, Li } from '../styles/content'
+
+const Content: FC = () => {
+  return (
+    <Wrapper>
+      <Title>关于内容订阅</Title>
+      <P>
+        CoderPlanets 子社区以及版块的内容可通过邮件或者 RSS
+        订阅。但目前因为社区内容较少以及开发精力受限，
+        <Bold>相关功能还未开始开发</Bold>
+        。如果你有这方面的建议，
+        <Linker
+          src="/feedback"
+          external={false}
+          text="欢迎参与共建"
+          inline
+          left={4}
+          right={4}
+        />
+      </P>
+      <br />
+      <br />
+      <Title>一些基本承诺</Title>
+      <Ul>
+        <Li>所有内容均可订阅。</Li>
+        <Li>会尽量遵循最新的 RSS 协议标准。</Li>
+        <Li>可以自定义订阅内容的粒度。</Li>
+      </Ul>
+    </Wrapper>
+  )
+}
+
+export default memo(Content)

src/containers/content/SubscribeContent/Content/index.js

@@ -1,50 +1,49 @@
-//
-
 /*
  *
  * SubscribeContent
  *
  */
+import { FC } from 'react'
 
-import React from 'react'
-import T from 'prop-types'
-
+import type { TMetric } from '@/spec'
+import { METRIC } from '@/constant'
 import { buildLog } from '@/utils/logger'
 import { pluggedIn } from '@/utils/mobx'
 
 import Content from './Content'
 import Actions from './Actions'
 
+import type { TStore } from './store'
 import { Wrapper, InnerWrapper, StickyWrapper } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:SubscribeContent')
 
-const SubscribeContentContainer = ({ subscribeContent: store, testid }) => {
-  useInit(store)
+type TProps = {
+  subscribeContent?: TStore
+  testid?: string
+  metric?: TMetric
+}
 
-  const { subscribeView } = store
+const SubscribeContentContainer = ({
+  subscribeContent: store,
+  testid = 'subscribe-content',
+  metric = METRIC.SUBSCRIBE,
+}) => {
+  useInit(store)
 
   return (
     <Wrapper testid={testid}>
-      <InnerWrapper>
+      <InnerWrapper metric={metric}>
         <Content />
         <StickyWrapper offsetTop={200}>
-          <Actions view={subscribeView} />
+          <Actions />
         </StickyWrapper>
       </InnerWrapper>
     </Wrapper>
   )
 }
 
-SubscribeContentContainer.propTypes = {
-  subscribeContent: T.any.isRequired,
-  testid: T.string,
-}
-
-SubscribeContentContainer.defaultProps = {
-  testid: 'subscribe-content',
-}
-
-export default pluggedIn(SubscribeContentContainer)
+// @ts-ignore
+export default pluggedIn(SubscribeContentContainer) as FC<TProps>

src/containers/content/SubscribeContent/Content/index.tsx

@@ -1,11 +1,14 @@
 import { useEffect } from 'react'
 // import { } from 'ramda'
 
-import { cutRest } from '@/utils/helper'
+import { CopyToClipboardState } from 'react-use/lib/useCopyToClipboard'
+import { cutRest, toast } from '@/utils/helper'
 import { buildLog } from '@/utils/logger'
 // import S from './service'
 
-let store = null
+import type { TStore } from './store'
+
+let store: TStore | undefined
 
 /* eslint-disable-next-line */
 const log = buildLog('L:SubscribeContent')
@@ -15,7 +18,7 @@ const log = buildLog('L:SubscribeContent')
  *
  * @param {String} view - view type default | detail
  */
-export const changeView = (view) => {
+export const changeView = (view: string): void => {
   store.mark({ subscribeView: view })
 }
 
@@ -24,19 +27,18 @@ export const changeView = (view) => {
  *
  * @param {*} { error, value }
  */
-export const notifyCopy = ({ error, value }) => {
-  const type = !error ? 'info' : 'error'
-  const title = !error ? '已复制到剪切板' : '复制到剪切板出错'
-  const msg = !error ? cutRest(value, 10) : error
+export const notifyCopy = ({ error, value }: CopyToClipboardState): void => {
+  const toastTitle = !error ? '已复制到剪切板' : '复制到剪切板出错'
+  const toastDesc = !error ? cutRest(value, 10) : error
 
-  store.toast(type, { title, msg, position: 'topCenter' })
+  toast('info', toastTitle, toastDesc as string)
 }
 
 // ###############################
 // init & uninit handlers
 // ###############################
 
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     log('useInit: ', store)

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

@@ -3,26 +3,20 @@
  *
  */
 
-import { types as T, getParent } from 'mobx-state-tree'
+import { types as T, Instance } from 'mobx-state-tree'
 // import {} from 'ramda'
 
 import { markStates } from '@/utils/mobx'
 
 const SubscribeContent = T.model('SubscribeContent', {
   subscribeView: T.optional(T.enumeration(['default', 'detail']), 'default'),
 })
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-  }))
+  .views((self) => ({}))
   .actions((self) => ({
-    toast(type, options) {
-      self.root.toast(type, options)
-    },
-    mark(sobj) {
+    mark(sobj: Record<string, unknown>): void {
       markStates(sobj, self)
     },
   }))
 
+export type TStore = Instance<typeof SubscribeContent>
 export default SubscribeContent

src/containers/content/SubscribeContent/logic.js renamed to src/containers/content/SubscribeContent/logic.ts

@@ -1,29 +1,23 @@
 import styled from 'styled-components'
 
 import Img from '@/Img'
-import DotDivider from '@/widgets/DotDivider'
 
 import { theme } from '@/utils/themes'
 import css from '@/utils/css'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
+  margin-top: 100px;
 `
 export const Title = styled.div`
   ${css.flex('align-center')};
   color: ${theme('thread.articleTitle')};
   font-weight: bold;
-  font-size: 16px;
-  margin-bottom: 8px;
-  padding-left: 8px;
-`
-export const Dot = styled(DotDivider)`
-  background: ${theme('thread.articleTitle')};
-  margin-right: 8px;
+  font-size: 14px;
+  margin-bottom: 12px;
 `
 export const Desc = styled.div`
   color: ${theme('thread.articleDigest')};
-  padding-left: 25px;
   word-break: break-all;
 `
 export const CopyIcon = styled(Img)`