feat(Pages): add Video page for SSR

Author: mydearxym

components/AuthorCard/ReactonNumbers.js

@@ -7,21 +7,26 @@ import {
   Number,
 } from './styles/reaction_numbers'
 
-const ReactionNumbers = ({ user }) => (
-  <Wrapper>
-    <ReactionNum>
-      <NumDesc>声望</NumDesc>
-      <Number>{user.achievement.reputation}</Number>
-    </ReactionNum>
-    <ReactionNum>
-      <NumDesc>关注者</NumDesc>
-      <Number>{user.followersCount}</Number>
-    </ReactionNum>
-    <ReactionNum>
-      <NumDesc>关注中</NumDesc>
-      <Number>{user.followingsCount}</Number>
-    </ReactionNum>
-  </Wrapper>
-)
+const ReactionNumbers = ({ user }) => {
+  // early user has no reutation
+  const achievement = user.achievement || { reputation: 0 }
+
+  return (
+    <Wrapper>
+      <ReactionNum>
+        <NumDesc>声望</NumDesc>
+        <Number>{achievement.reputation}</Number>
+      </ReactionNum>
+      <ReactionNum>
+        <NumDesc>关注者</NumDesc>
+        <Number>{user.followersCount}</Number>
+      </ReactionNum>
+      <ReactionNum>
+        <NumDesc>关注中</NumDesc>
+        <Number>{user.followingsCount}</Number>
+      </ReactionNum>
+    </Wrapper>
+  )
+}
 
 export default ReactionNumbers

components/ContentBanner/ReactionNumbers.js

@@ -13,7 +13,7 @@ import { prettyNum, numberWithCommas } from '../../utils'
 const ReactionNumbers = ({ data: { views, favoritedCount, starredCount } }) => (
   <NumbersInfo>
     <NumberSection dead>
-      <NumberTitle dead>阅读</NumberTitle>
+      <NumberTitle dead>浏览</NumberTitle>
       <NumberItem dead>{prettyNum(views)}</NumberItem>
     </NumberSection>
     <NumberDivider />

containers/Banner/index.js

@@ -10,6 +10,7 @@ import { inject, observer } from 'mobx-react'
 import UserBanner from '../UserBanner'
 import PostBanner from '../PostBanner'
 import JobBanner from '../JobBanner'
+import VideoBanner from '../VideoBanner'
 import CommunitiesBanner from '../CommunitiesBanner'
 import CommunityBanner from '../CommunityBanner'
 
@@ -41,6 +42,9 @@ const BannerContent = ({ curRoute }) => {
     case ROUTE.JOB: {
       return <JobBanner />
     }
+    case ROUTE.VIDEO: {
+      return <VideoBanner />
+    }
     case ROUTE.USER: {
       return <UserBanner />
     }

containers/Content/index.js

@@ -11,6 +11,7 @@ import CommunitiesContent from '../CommunitiesContent'
 import CheatSheetContent from '../CheatSheetContent'
 import PostContent from '../PostContent'
 import JobContent from '../JobContent'
+import VideoContent from '../VideoContent'
 import UserContent from '../UserContent'
 
 import CommunityContent from '../../components/CommunityContent'
@@ -38,6 +39,9 @@ const renderContent = curRoute => {
     case ROUTE.JOB: {
       return <JobContent />
     }
+    case ROUTE.VIDEO: {
+      return <VideoContent />
+    }
     case ROUTE.USER: {
       return <UserContent />
     }

containers/VideoBanner/index.js

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

containers/VideoBanner/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:VideoBanner')
+/* 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/VideoBanner/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/VideoBanner/store.js

@@ -0,0 +1,33 @@
+/*
+ * VideoBanner 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:VideoBanner')
+/* eslint-enable no-unused-vars */
+
+const VideoBanner = t
+  .model('VideoBanner', {})
+  .views(self => ({
+    get root() {
+      return getParent(self)
+    },
+    get curRoute() {
+      return self.root.curRoute
+    },
+    get viewingVideoData() {
+      return stripMobx(self.root.viewing.video)
+    },
+  }))
+  .actions(self => ({
+    markState(sobj) {
+      markStates(sobj, self)
+    },
+  }))
+
+export default VideoBanner

containers/VideoBanner/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/VideoBanner/tests/index.test.js

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