refactor the network layer

Author: mydearxym

.eslintrc.js

@@ -22,6 +22,7 @@ module.exports = {
     'no-nested-ternary': 0, // TODO
     'no-shadow': 0, //TODO: currently just for entry
     'no-return-assign': 0, //TODO currently only for BookStore
+    'prefer-promise-reject-errors': 0,
     'react/jsx-no-bind': 0,
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/forbid-prop-types': 0,

containers/CheatSheetViewer/logic.js

@@ -2,6 +2,7 @@ import R from 'ramda'
 
 import Prism from 'mastani-codehighlight'
 import { makeDebugger } from '../../utils/functions'
+import network from '../../utils/network'
 
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('L:cheatsheetViewer')
@@ -37,15 +38,42 @@ export const convertTaskTag = R.compose(
   R.replace(/<li>\[x\] /g, '<li class="task-done">')
 )
 
+const CheatsheetCDN =
+  'https://raw.githubusercontent.com/mydearxym/mastani-cheatsheets/master'
+
 export function getData(which) {
   setTimeout(() => {
-    cheatsheetViewer.SR71$.getCheatsheet(which)
+    const url = `${CheatsheetCDN}/${which}.md`
+    network.GET(url).then(res => {
+      /* debug('GET ', res) */
+      if (res.error) return handleError(res)
+
+      let source = ''
+      try {
+        source = transMarkDownforRender(res)
+      } catch (err) {
+        return handleError({ error: 'parse_error' })
+      }
+      handleLoaded(source)
+    })
+    /* cheatsheetViewer.SR71$.getCheatsheet(which) */
   }, 2000)
   cheatsheetViewer.markState({
     state: 'loading',
   })
 }
 
+function handleError(res) {
+  switch (res.error) {
+    case 404:
+      return handle404Error()
+    case 'parse_error':
+      return handleParseError()
+    default:
+      debug(res)
+  }
+}
+
 function handleParseError(errMsg) {
   cheatsheetViewer.markState({
     current: '',
@@ -55,8 +83,7 @@ function handleParseError(errMsg) {
   Prism.highlightAll()
 }
 
-const is404 = v => R.trim(v) === '404: Not Found'
-function handle404() {
+function handle404Error() {
   cheatsheetViewer.markState({
     current: '',
     state: '404',
@@ -75,22 +102,5 @@ function handleLoaded(source) {
 
 export function init(selectedStore) {
   cheatsheetViewer = selectedStore
-  //   debug('cheatsheetviewer current: ', cheatsheetViewer.current)
-
-  cheatsheetViewer.SR71$.cheatsheet().subscribe(res => {
-    // console.info('res: ', res)
-    if (is404(res)) {
-      handle404()
-    } else {
-      let source = ''
-
-      try {
-        source = transMarkDownforRender(res)
-      } catch (err) {
-        handleParseError(err)
-        return false
-      }
-      handleLoaded(source)
-    }
-  })
+  debug(cheatsheetViewer)
 }

containers/PostsViewer/index.js

@@ -9,6 +9,7 @@ import { inject, observer } from 'mobx-react'
 
 // import Link from 'next/link'
 
+import { Button } from '../../components'
 import { makeDebugger, storeSelector } from '../../utils/functions'
 import * as logic from './logic'
 import { Wrapper } from './styles'
@@ -17,13 +18,29 @@ const debug = makeDebugger('C:PostsViewer')
 
 class PostsViewerContainer extends React.Component {
   componentWillMount() {
-    debug('mount')
     logic.init(this.props.postsViewer)
   }
 
   render() {
     debug('postsViewer: ', this.props.postsViewer.data)
-    return <Wrapper>PostsViewer container!</Wrapper>
+    return (
+      <Wrapper>
+        PostsViewer container!
+        <div>
+          <Button type="primary" onClick={logic.createPost}>
+            createPost (mutate)
+          </Button>
+          &nbsp;&nbsp;
+          <Button type="primary" onClick={logic.postList}>
+            postList (query)
+          </Button>
+          &nbsp;&nbsp;
+          <Button type="primary" onClick={logic.cheatsheet}>
+            cheatsheet
+          </Button>
+        </div>
+      </Wrapper>
+    )
   }
 }
 

containers/PostsViewer/logic.js

@@ -1,16 +1,59 @@
 // import R from 'ramda'
 
 import { makeDebugger } from '../../utils/functions'
+import network from '../../utils/network'
+import S from './schema'
 
 /* eslint-disable no-unused-vars */
 const debug = makeDebugger('L:PostsViewer')
 /* eslint-enable no-unused-vars */
 
 let postsViewer = null
 
-export function someMethod() {}
+function handleError(res) {
+  debug(`handleError [ ${res.error}]: ${res.details}`)
+}
+
+// mutation 之后修改 cache
+// https://www.apollographql.com/docs/react/basics/mutations.html
+export function createPost() {
+  const variables = {
+    username: 'seifefefefen',
+    nickname: 'xi2e',
+    bio: 'fuckman',
+    company: 'infomedia',
+  }
+
+  network.mutate(S.createUser, variables).then(res => {
+    if (res.error) return handleError(res)
+    debug('mutate: ', res)
+  })
+}
+
+export function postList() {
+  network.query(S.allUser2).then(res => {
+    if (res.error) return handleError(res)
+    debug('query: ', res)
+  })
+}
+
+const CheatsheetCDN =
+  'https://raw.githubusercontent.com/mydearxym/mastani-cheatsheets/master'
+export function cheatsheet() {
+  // const which = 'elixir' // good
+  /* const which = 'react' // syntax error */
+  const which = 'whatever' // not found
+
+  const url = `${CheatsheetCDN}/${which}.md`
+  debug(url)
+
+  network.GET(url).then(res => {
+    /* if (res.error) return handleError(res) */
+    debug('GET ', res)
+  })
+}
 
 export function init(selectedStore) {
-  debug(postsViewer)
   postsViewer = selectedStore
+  debug(postsViewer)
 }

containers/PostsViewer/schema.js

@@ -0,0 +1,41 @@
+import gql from 'graphql-tag'
+
+const allUser2 = gql`
+  {
+    allUsers2 {
+      entries {
+        username
+        id
+        nickname
+      }
+      totalCount
+      pageSize
+    }
+  }
+`
+
+const createUser = gql`
+  mutation(
+    $username: String
+    $nickname: String
+    $bio: String
+    $company: String
+  ) {
+    createUser(
+      username: $username
+      nickname: $nickname
+      bio: $bio
+      company: $company
+    ) {
+      username
+      bio
+    }
+  }
+`
+
+const schema = {
+  allUser2,
+  createUser,
+}
+
+export default schema

package.json

@@ -95,8 +95,15 @@
   "dependencies": {
     "accepts": "^1.3.4",
     "antd": "2.13.5",
+    "apollo-cache-inmemory": "^1.1.4",
+    "apollo-client": "^2.0.4",
+    "apollo-link": "^1.0.7",
+    "apollo-link-error": "^1.0.3",
+    "apollo-link-http": "^1.3.2",
+    "apollo-link-retry": "^2.1.1",
     "debug": "3.1.0",
     "glob": "^7.1.2",
+    "graphql-tag": "^2.6.1",
     "intl": "^1.2.5",
     "isomorphic-fetch": "^2.2.1",
     "mastani-codehighlight": "0.0.5",
@@ -107,6 +114,7 @@
     "next": "4.2.1",
     "path-match": "^1.2.4",
     "polished": "1.8.0",
+    "promise-timeout": "^1.1.1",
     "prop-types": "^15.5.10",
     "ramda": "0.25.0",
     "randomcolor": "^0.5.3",

stores/PostsViewerStore/index.js

@@ -18,6 +18,10 @@ const PostsViewerStore = t
       return getParent(self)
     },
 
+    get SR71$() {
+      return self.root.SR71$
+    },
+
     get data() {
       return self.root.posts.current
     },