[FIRST COMMIT]

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,85 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/

index.js

@@ -0,0 +1,168 @@
+import {
+  FlipperPlugin,
+  Button,
+  DetailSidebar,
+  FlexColumn,
+  SearchableTable,
+  Text,
+  Panel,
+  DataDescription,
+  ManagedDataInspector
+} from 'flipper'
+
+function tryConvertToJson (value) {
+  if (typeof value === 'string' && (
+    value.startsWith('{') || value.startsWith('[')
+  )) {
+    try {
+      return JSON.parse(value)
+    } catch (e) { }
+  }
+  return value
+}
+
+function formatTimestamp (timestamp) {
+  const date = new Date(timestamp)
+  return `${date.getHours().toString().padStart(2, '0')}:${
+    date.getMinutes().toString().padStart(2, '0'
+  )}:${date.getSeconds().toString().padStart(2, '0')}.${
+    date.getMilliseconds().toString().padStart(3, '0'
+  )}`
+}
+
+const COLUMN_SIZE = {
+  timeStamp: 100,
+  actionType: 'flex'
+}
+
+const COLUMNS = {
+  timeStamp: {
+    value: 'Time'
+  },
+  actionType: {
+    value: 'Action Type'
+  }
+}
+
+class FlipperReduxInspectorPlugin extends FlipperPlugin {
+  constructor (props) {
+    super(props)
+    this.id = 'RNReduxInspector'
+    this.defaultPersistedState = {
+      actions: []
+    }
+    this.state = {
+      selectedIds: []
+    }
+    this.handleClear = this.handleClear.bind(this)
+    this.handleRowHighlighted = this.handleRowHighlighted.bind(this)
+  }
+
+  static persistedStateReducer (
+    persistedState,
+    method,
+    data
+  ) {
+    return {
+      ...persistedState,
+      actions: [
+        ...persistedState.actions,
+        data
+      ]
+    }
+  }
+
+  handleClear () {
+    this.setState({ selectedIds: [] })
+    this.props.setPersistedState({ actions: [] })
+  }
+
+  handleRowHighlighted (keys) {
+    this.setState({ selectedIds: keys })
+  }
+
+  renderSidebar () {
+    const { selectedIds } = this.state
+    const selectedId = selectedIds.length !== 1 ? null : selectedIds[0]
+
+    if (selectedId != null) {
+      const { actions } = this.props.persistedState
+      const selectedData = actions.find(v => v.uniqueId === selectedId)
+
+      const {
+        payload,
+        prevState,
+        nextState
+      } = selectedData
+
+      const parsedPayload = tryConvertToJson(payload)
+      const parsedPrevState = tryConvertToJson(prevState)
+      const parsedNextState = tryConvertToJson(nextState)
+
+      return (
+        <div>
+          <Panel floating={false} heading='Payload'>
+            {
+              typeof parsedPayload !== 'object' ? <DataDescription type={typeof parsedPayload} value={parsedPayload} /> : (
+                <ManagedDataInspector data={parsedPayload} expandRoot />
+              )
+            }
+          </Panel>
+          <Panel floating={false} heading='State'>
+            {
+              typeof parsedNextState !== 'object' ? <DataDescription type={typeof parsedNextState} value={parsedNextState} /> : (
+                <ManagedDataInspector diff={parsedPrevState} data={parsedNextState} expandRoot />
+              )
+            }
+          </Panel>
+        </div>
+      )
+    } else {
+      return null
+    }
+  };
+
+  buildRow (row) {
+    return {
+      columns: {
+        timeStamp: {
+          value: <Text>{formatTimestamp(row.timeStamp)}</Text>,
+          filterValue: row.timeStamp
+        },
+        actionType: {
+          value: <Text>{row.actionType}</Text>,
+          filterValue: row.actionType
+        }
+      },
+      key: row.uniqueId,
+      copyText: JSON.stringify(row),
+      filterValue: `${row.actionType}`
+    }
+  }
+
+  render () {
+    const { actions } = this.props.persistedState
+    const rows = actions.map(v => this.buildRow(v))
+
+    return (
+      <FlexColumn grow>
+        <SearchableTable
+          key={this.constructor.id}
+          rowLineHeight={28}
+          floating={false}
+          multiline
+          columnSizes={COLUMN_SIZE}
+          columns={COLUMNS}
+          onRowHighlighted={this.handleRowHighlighted}
+          multiHighlight
+          rows={rows}
+          stickyBottom
+          actions={<Button onClick={this.handleClear}>Clear</Button>}
+        />
+        <DetailSidebar>{this.renderSidebar()}</DetailSidebar>
+      </FlexColumn>
+    )
+  }
+}
+
+export default FlipperReduxInspectorPlugin

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "flipper-rn-redux-inspector-plugin",
+  "version": "0.0.1",
+  "description": "Redux Inspector for flipper suppored react-native.",
+  "main": "index.js",
+  "keywords": ["flipper-plugin"],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "zrg-team",
+  "license": "ISC"
+}