refactor(community page): use spec banner/content instead common ones

Author: mydearxym

components/CommunityContent/index.js

@@ -9,7 +9,6 @@ import { inject, observer } from 'mobx-react'
 
 import UserBanner from '../UserBanner'
 
-import ArticleBanner from '../ArticleBanner'
 import CommunitiesBanner from '../CommunitiesBanner'
 import CommunityBanner from '../CommunityBanner'
 
@@ -36,6 +35,7 @@ const BannerContent = ({ curRoute }) => {
     case ROUTE.ACTIVITIES: {
       return <ActivitiesRootBanner />
     }
+    /*
     case ROUTE.POST: {
       return <ArticleBanner />
     }
@@ -50,6 +50,8 @@ const BannerContent = ({ curRoute }) => {
         <ArticleBanner showStar={false} showWordCount={false} showLastSync />
       )
     }
+      */
+
     case ROUTE.USER: {
       return <UserBanner />
     }

containers/Banner/index.js

@@ -0,0 +1,77 @@
+/*
+ *
+ * CommunityContent
+ *
+ */
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+
+import PostsThread from '../PostsThread'
+import VideosThread from '../VideosThread'
+import ReposThread from '../ReposThread'
+import WikiThread from '../WikiThread'
+import JobsThread from '../JobsThread'
+import UsersThread from '../UsersThread'
+import CheatsheetThread from '../CheatsheetThread'
+
+import { Wrapper } from './styles'
+
+import { makeDebugger, storePlug, ROUTE } from '../../utils'
+import * as logic from './logic'
+
+/* eslint-disable-next-line */
+const debug = makeDebugger('C:CommunityContent')
+
+const ComunityContent = ({ curRoute }) => {
+  const { subPath } = curRoute
+  switch (subPath) {
+    case ROUTE.REPOS: {
+      return <ReposThread />
+    }
+    case ROUTE.USERS: {
+      return <UsersThread />
+    }
+    case ROUTE.VIDEOS: {
+      return <VideosThread />
+    }
+    case ROUTE.JOBS: {
+      return <JobsThread />
+    }
+    case ROUTE.WIKI: {
+      return <WikiThread />
+    }
+    case ROUTE.CHEATSHEET: {
+      return <CheatsheetThread />
+    }
+    default: {
+      return <PostsThread />
+    }
+  }
+}
+
+class CommunityContentContainer extends React.Component {
+  componentDidMount() {
+    const { communityContent } = this.props
+    logic.init(communityContent)
+  }
+
+  componentWillUnmount() {
+    logic.uninit()
+  }
+
+  render() {
+    const { communityContent } = this.props
+    const { curRoute } = communityContent
+
+    return (
+      <Wrapper>
+        <ComunityContent curRoute={curRoute} />
+      </Wrapper>
+    )
+  }
+}
+
+export default inject(storePlug('communityContent'))(
+  observer(CommunityContentContainer)
+)

containers/CommunityContent/index.js

@@ -0,0 +1,56 @@
+// 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
+let store = null
+
+/* eslint-disable-next-line */
+const debug = makeDebugger('L:CommunityContent')
+
+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) {
+  store = _store
+
+  debug(store)
+  if (sub$) return false
+  sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
+}
+
+export function uninit() {
+  if (!sub$) return false
+  debug('===== do uninit')
+  sub$.unsubscribe()
+  sub$ = null
+}

containers/CommunityContent/logic.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/CommunityContent/schema.js

@@ -0,0 +1,29 @@
+/*
+* CommunityContent store
+*
+*/
+
+import { types as t, getParent } from 'mobx-state-tree'
+// import R from 'ramda'
+
+import { markStates, makeDebugger } from '../../utils'
+/* eslint-disable-next-line */
+const debug = makeDebugger('S:CommunityContent')
+
+const CommunityContent = t
+  .model('CommunityContent', {})
+  .views(self => ({
+    get root() {
+      return getParent(self)
+    },
+    get curRoute() {
+      return self.root.curRoute
+    },
+  }))
+  .actions(self => ({
+    markState(sobj) {
+      markStates(sobj, self)
+    },
+  }))
+
+export default CommunityContent

containers/CommunityContent/store.js

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

components/CommunityContent/styles/index.js renamed to containers/CommunityContent/styles/index.js

@@ -7,15 +7,11 @@
 import React from 'react'
 import { inject, observer } from 'mobx-react'
 
+import CommunityContent from '../CommunityContent'
 import CommunitiesContent from '../CommunitiesContent'
 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'
 import { Wrapper } from './styles'
 
 import { makeDebugger, storePlug, ROUTE } from '../../utils'
@@ -33,23 +29,11 @@ const renderContent = curRoute => {
     case ROUTE.COMMUNITIES: {
       return <CommunitiesContent />
     }
-    case ROUTE.POST: {
-      return <PostContent />
-    }
-    case ROUTE.JOB: {
-      return <JobContent />
-    }
-    case ROUTE.VIDEO: {
-      return <VideoContent />
-    }
-    case ROUTE.REPO: {
-      return <RepoContent />
-    }
     case ROUTE.USER: {
       return <UserContent />
     }
     default: {
-      return <CommunityContent curRoute={curRoute} />
+      return <CommunityContent />
     }
   }
 }

components/CommunityContent/tests/index.test.js renamed to containers/CommunityContent/tests/index.test.js

@@ -32,8 +32,9 @@ export { default as UserBanner } from './UserBanner'
 export { default as CommunityBanner } from './CommunityBanner'
 export { default as CommunitiesBanner } from './CommunitiesBanner'
 /* contents */
-export { default as UserContent } from './UserContent'
+export { default as CommunityContent } from './CommunityContent'
 export { default as CommunitiesContent } from './CommunitiesContent'
+export { default as UserContent } from './UserContent'
 export { default as PostContent } from './PostContent'
 export { default as JobContent } from './JobContent'
 export { default as VideoContent } from './VideoContent'

containers/CommunityContent/tests/store.test.js

@@ -16,8 +16,8 @@ import {
   Route,
   BodyLayout,
   Header,
-  Banner,
-  Content,
+  CommunityBanner,
+  CommunityContent,
   Footer,
 } from '../containers'
 
@@ -181,8 +181,8 @@ export default class PageCommunity extends React.Component {
                   <Doraemon />
                   <BodyLayout>
                     <Header />
-                    <Banner />
-                    <Content />
+                    <CommunityBanner />
+                    <CommunityContent />
                     <Footer />
                   </BodyLayout>
                 </MultiLanguage>