[wip] state tree viewer

Author: mydearxym

components/StateTree/index.js

@@ -0,0 +1,31 @@
+/*
+ *
+ * StateTree
+ *
+ */
+
+import React from 'react'
+import ReactJson from 'react-json-view'
+
+/* import PropTypes from 'prop-types' */
+
+import { makeDebugger } from '../../utils/functions'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:StateTree:index')
+/* eslint-enable no-unused-vars */
+
+const StateTree = ({ json }) => {
+  return (
+    <div>
+      <ReactJson src={json} collapsed={1} />
+    </div>
+  )
+}
+
+StateTree.propTypes = {
+  // https://www.npmjs.com/package/prop-types
+}
+
+StateTree.defaultProps = {}
+
+export default StateTree

components/StateTree/tests/index.test.js

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

containers/Preview/index.js

@@ -6,13 +6,15 @@
 
 import React from 'react'
 import { inject, observer } from 'mobx-react'
+import dynamic from 'next/dynamic'
 
 // import Link from 'next/link'
 
 import { makeDebugger, storeSelector } from '../../utils/functions'
 import * as logic from './logic'
 
 import ThemeSelector from '../../components/ThemeSelector'
+/* import StateTree from '../../components/StateTree' */
 
 import {
   TheTitle,
@@ -26,6 +28,10 @@ import {
   CloserInner,
 } from './styles'
 
+const StateTreeWithNoSSR = dynamic(import('../../components/StateTree'), {
+  ssr: false,
+})
+
 const debug = makeDebugger('C:Preview')
 
 const CloseBtn = ({ type }) => (
@@ -42,6 +48,7 @@ const AccountViewer = ({ themeKeys, curTheme }) => {
       <TheTitle>
         <span>主题</span>
       </TheTitle>
+
       <ThemeSelector
         themeKeys={themeKeys}
         curTheme={curTheme}
@@ -60,13 +67,16 @@ class PreviewContainer extends React.Component {
   render() {
     const { visible, type, themeKeys, curTheme } = this.props.preview
 
+    /* debug('this.props.preview: ', this.props.preview.root.toJSON()) */
+
     return (
       <div>
         <PreviewOverlay visible={visible} onClick={logic.closePreview} />
         <PreviewWrapper visible={visible} type={type}>
           <CloseBtn type={type} />
           <PreviewContent>
             <PreviewHeader>Preview header</PreviewHeader>
+            <StateTreeWithNoSSR json={this.props.preview.root.toJSON()} />
             <PreviewBody>
               <h2>Preview body</h2>
               {type === 'account' ? (

docs/ideas.md

@@ -56,6 +56,7 @@
 
 ## TODO
 
+- [ ] add [MSTViewer](https://github.com/mac-s-g/react-json-view)
 - [ ] update to prism [latestest](https://github.com/PrismJS/prism/releases)
 - [ ] use styled-component extend to refator
 - [ ] use header section footer main ... html tags

package.json

@@ -115,6 +115,7 @@
     "react-dom": "16.0.0",
     "react-icons": "^2.2.5",
     "react-intl": "2.4.0",
+    "react-json-view": "^1.14.0",
     "react-keydown": "^1.9.4",
     "react-masonry-component": "^6.0.1",
     "react-svg": "^2.1.22",

pages/index.js

@@ -19,21 +19,21 @@ global.Intl = require('intl')
 
 export default class Index extends React.Component {
   static getInitialProps({ req }) {
-    const isServer = !!req
+    /* const isServer = !!req */
     /* eslint-disable no-underscore-dangle */
     /* eslint-disable no-undef */
     const { locale, messages } = req || window.__NEXT_DATA__.props
     const langSetup = {}
     langSetup[locale] = messages
-    const store = initRootStore(isServer, langSetup)
+    const store = initRootStore(langSetup)
     /* eslint-enable no-undef */
 
-    return { isServer, version: store.version, messages, locale, langSetup }
+    return { version: store.version, messages, locale, langSetup }
   }
 
   constructor(props) {
     super(props)
-    this.store = initRootStore(props.isServer, props.langSetup)
+    this.store = initRootStore(props.langSetup)
   }
 
   render() {

stores/PreviewStore/index.js

@@ -12,7 +12,10 @@ import { types as t, getParent } from 'mobx-state-tree'
 const PreviewStore = t
   .model('PreviewStore', {
     visible: t.optional(t.boolean, false),
-    type: t.optional(t.enumeration('visibleType', ['post', 'account']), 'post'),
+    type: t.optional(
+      t.enumeration('previewType', ['post', 'account', 'mst-state']),
+      'post'
+    ),
     // header:
     // body:
   })

stores/RootStore/index.js

@@ -31,6 +31,7 @@ const debug = makeDebugger('S:rootStore')
 
 const rootStore = t
   .model({
+    version: t.optional(t.string, 'old'),
     // domain modal
     route: t.optional(RouteStore, {}),
     communities: t.optional(CommunitiesStore, CommunitiesDefaults),
@@ -71,9 +72,6 @@ const rootStore = t
     get SR71$() {
       return getEnv(self).SR71$
     },
-    get version() {
-      return '0.0.1'
-    },
     get locale() {
       return self.appLocale
     },

stores/index.js

@@ -11,13 +11,16 @@ import SR71$ from '../utils/SR71'
 
 let rootStore = null
 
-const createRootStore = (isServer, langSetup) => {
-  return RootStore.create({ appLangs: langSetup }, { SR71$ })
+const createRootStore = langSetup => {
+  return RootStore.create(
+    { version: 'fake from the server', appLangs: langSetup },
+    { SR71$ }
+  )
 }
 
-function initRootStore(isServer = false, langSetup) {
+function initRootStore(langSetup) {
   if (rootStore === null) {
-    rootStore = createRootStore(isServer, langSetup)
+    rootStore = createRootStore(langSetup)
   }
 
   /*

yarn.lock

@@ -1308,6 +1308,10 @@ balanced-match@^1.0.0:
   version "1.0.0"
   resolved "http://r.cnpmjs.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
 
+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+
 base64-js@^1.0.2:
   version "1.2.1"
   resolved "http://r.cnpmjs.org/base64-js/download/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
@@ -3097,7 +3101,13 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.15, fbjs@^0.8.16:
+fbemitter@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/fbemitter/-/fbemitter-2.1.1.tgz#523e14fdaf5248805bb02f62efc33be703f51865"
+  dependencies:
+    fbjs "^0.8.4"
+
+fbjs@^0.8.0, fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.4:
   version "0.8.16"
   resolved "http://r.cnpmjs.org/fbjs/download/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3244,6 +3254,13 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
+flux@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/flux/-/flux-3.1.3.tgz#d23bed515a79a22d933ab53ab4ada19d05b2f08a"
+  dependencies:
+    fbemitter "^2.0.0"
+    fbjs "^0.8.0"
+
 follow-redirects@0.0.7:
   version "0.0.7"
   resolved "http://r.cnpmjs.org/follow-redirects/download/follow-redirects-0.0.7.tgz#34b90bab2a911aa347571da90f22bd36ecd8a919"
@@ -5090,6 +5107,10 @@ lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "http://r.cnpmjs.org/lodash.cond/download/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
 
+lodash.curry@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+
 lodash.debounce@^4.0.0, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "http://r.cnpmjs.org/lodash.debounce/download/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -5098,6 +5119,10 @@ lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "http://r.cnpmjs.org/lodash.flattendeep/download/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
 
+lodash.flow@^3.3.0:
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "http://r.cnpmjs.org/lodash.get/download/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -6398,6 +6423,10 @@ punycode@^1.4.1:
   version "1.4.1"
   resolved "http://r.cnpmjs.org/punycode/download/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
+pure-color@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
+
 q@^1.4.1:
   version "1.5.0"
   resolved "http://r.cnpmjs.org/q/download/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
@@ -6828,6 +6857,15 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-base16-styling@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.5.3.tgz#3858f24e9c4dd8cbd3f702f3f74d581ca2917269"
+  dependencies:
+    base16 "^1.0.0"
+    lodash.curry "^4.0.1"
+    lodash.flow "^3.3.0"
+    pure-color "^1.2.0"
+
 react-content-loader@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/react-content-loader/-/react-content-loader-1.5.1.tgz#6a3da8feaa99abf8c1dfd622e40603f31416bd0a"
@@ -6885,6 +6923,14 @@ react-intl@2.4.0:
     intl-relativeformat "^2.0.0"
     invariant "^2.1.1"
 
+react-json-view@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.npmjs.org/react-json-view/-/react-json-view-1.14.0.tgz#c4b2b50c99a5b28c926e9bd670b096a390cdc29f"
+  dependencies:
+    flux "^3.1.3"
+    react-base16-styling "^0.5.3"
+    react-textarea-autosize "^5.1.0"
+
 react-keydown@^1.9.4:
   version "1.9.4"
   resolved "http://r.cnpmjs.org/react-keydown/download/react-keydown-1.9.4.tgz#22718ac95edb64dd840dfc4350abf7e693ea0b7f"
@@ -6966,6 +7012,12 @@ react-test-renderer@16.0.0:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
 
+react-textarea-autosize@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-5.2.1.tgz#2b78f9067180f41b08ac59f78f1581abadd61e54"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-toolbox@^2.0.0-beta.11:
   version "2.0.0-beta.12"
   resolved "https://registry.npmjs.org/react-toolbox/-/react-toolbox-2.0.0-beta.12.tgz#1d9dd7cc41e3b35dabdce5eb100a8068eee88c45"