feat(Pages): add Repo page for SSR & refactor

Author: mydearxym

components/ContentBanner/ReactionNumbers.js

@@ -16,9 +16,9 @@ const ReactionNumbers = ({ data: { views, favoritedCount, starredCount } }) => (
       <NumberTitle dead>浏览</NumberTitle>
       <NumberItem dead>{prettyNum(views)}</NumberItem>
     </NumberSection>
-    <NumberDivider />
     {starredCount >= 0 ? (
       <React.Fragment>
+        <NumberDivider />
         <NumberSection>
           <NumberTitle>喜欢</NumberTitle>
           <NumberItem>{numberWithCommas(starredCount)}</NumberItem>

containers/Banner/index.js

@@ -11,6 +11,7 @@ import UserBanner from '../UserBanner'
 import PostBanner from '../PostBanner'
 import JobBanner from '../JobBanner'
 import VideoBanner from '../VideoBanner'
+import RepoBanner from '../RepoBanner'
 import CommunitiesBanner from '../CommunitiesBanner'
 import CommunityBanner from '../CommunityBanner'
 
@@ -45,6 +46,9 @@ const BannerContent = ({ curRoute }) => {
     case ROUTE.VIDEO: {
       return <VideoBanner />
     }
+    case ROUTE.REPO: {
+      return <RepoBanner />
+    }
     case ROUTE.USER: {
       return <UserBanner />
     }

containers/Content/index.js

@@ -12,6 +12,7 @@ import CheatSheetContent from '../CheatSheetContent'
 import PostContent from '../PostContent'
 import JobContent from '../JobContent'
 import VideoContent from '../VideoContent'
+import RepoContent from '../RepoContent'
 import UserContent from '../UserContent'
 
 import CommunityContent from '../../components/CommunityContent'
@@ -42,6 +43,9 @@ const renderContent = curRoute => {
     case ROUTE.VIDEO: {
       return <VideoContent />
     }
+    case ROUTE.REPO: {
+      return <RepoContent />
+    }
     case ROUTE.USER: {
       return <UserContent />
     }

containers/RepoBanner/index.js

@@ -0,0 +1,33 @@
+/*
+ *
+ * RepoBanner
+ *
+ */
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+
+import { ContentBanner } from '../../components'
+
+import { makeDebugger, storePlug } from '../../utils'
+
+import * as logic from './logic'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('C:RepoBanner')
+/* eslint-enable no-unused-vars */
+
+class RepoBannerContainer extends React.Component {
+  componentWillMount() {
+    const { repoBanner } = this.props
+    logic.init(repoBanner)
+  }
+
+  render() {
+    const { repoBanner } = this.props
+    const { viewingRepoData } = repoBanner
+
+    return <ContentBanner data={viewingRepoData} />
+  }
+}
+
+export default inject(storePlug('repoBanner'))(observer(RepoBannerContainer))

containers/RepoBanner/logic.js

@@ -0,0 +1,52 @@
+// import R from 'ramda'
+
+import { makeDebugger, $solver, asyncErr, ERR } from '../../utils'
+import SR71 from '../../utils/network/sr71'
+
+// import S from './schema'
+
+const sr71$ = new SR71()
+let sub$ = null
+
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('L:RepoBanner')
+/* eslint-enable no-unused-vars */
+
+let store = null
+
+export function someMethod() {}
+
+// ###############################
+// Data & Error handlers
+// ###############################
+
+const DataSolver = []
+const ErrSolver = [
+  {
+    match: asyncErr(ERR.CRAPHQL),
+    action: ({ details }) => {
+      debug('ERR.CRAPHQL -->', details)
+    },
+  },
+  {
+    match: asyncErr(ERR.TIMEOUT),
+    action: ({ details }) => {
+      debug('ERR.TIMEOUT -->', details)
+    },
+  },
+  {
+    match: asyncErr(ERR.NETWORK),
+    action: ({ details }) => {
+      debug('ERR.NETWORK -->', details)
+    },
+  },
+]
+
+export function init(_store) {
+  if (store) return false
+  store = _store
+
+  debug(store)
+  if (sub$) sub$.unsubscribe()
+  sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+}

containers/RepoBanner/schema.js

@@ -0,0 +1,23 @@
+import gql from 'graphql-tag'
+
+const simpleMutation = gql`
+  mutation($id: ID!) {
+    post(id: $id) {
+      id
+    }
+  }
+`
+const simpleQuery = gql`
+  query($filter: filter!) {
+    post(id: $id) {
+      id
+    }
+  }
+`
+
+const schema = {
+  simpleMutation,
+  simpleQuery,
+}
+
+export default schema

containers/RepoBanner/store.js

@@ -0,0 +1,33 @@
+/*
+* RepoBanner store
+*
+*/
+
+import { types as t, getParent } from 'mobx-state-tree'
+// import R from 'ramda'
+
+import { markStates, makeDebugger, stripMobx } from '../../utils'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('S:RepoBanner')
+/* eslint-enable no-unused-vars */
+
+const RepoBanner = t
+  .model('RepoBanner', {})
+  .views(self => ({
+    get root() {
+      return getParent(self)
+    },
+    get curRoute() {
+      return self.root.curRoute
+    },
+    get viewingRepoData() {
+      return stripMobx(self.root.viewing.repo)
+    },
+  }))
+  .actions(self => ({
+    markState(sobj) {
+      markStates(sobj, self)
+    },
+  }))
+
+export default RepoBanner

containers/RepoBanner/styles/index.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+// import Img from '../../../components/Img'
+// import { theme } from '../../../utils'
+
+export const Wrapper = styled.div``
+export const Title = styled.div``

containers/RepoBanner/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import RepoBanner from '../index'
+
+describe('TODO <RepoBanner />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})

containers/RepoBanner/tests/store.test.js

@@ -0,0 +1,12 @@
+/*
+* RepoBanner store test
+*
+*/
+
+// import R from 'ramda'
+
+// import RepoBanner from '../index'
+
+it('TODO: store test RepoBanner', () => {
+  expect(1 + 1).toBe(2)
+})