Adding preview for AsyncStorage messages. (#392)

.gitignore

@@ -3,6 +3,7 @@ lerna-debug.log
 npm-debug.log*
 npm-debug.log
 .vscode
+.idea
 yarn.lock
 yarn-error.log
 .happypack

packages/reactotron-app/App/Commands/AsyncStorageValuesCommand.js

@@ -43,12 +43,12 @@ class AsyncStorageValuesCommand extends Component {
 
   render () {
     const { command } = this.props
-    const { payload = [] } = command
-    const rows = mapIndexed(this.renderItem, payload)
+    const { preview, value = [] } = command.payload
+    const rows = mapIndexed(this.renderItem, value)
     return (
-      <Command command={command} title={COMMAND_TITLE}>
+      <Command command={command} title={COMMAND_TITLE} preview={preview}>
         <div style={Styles.watches}>
-          {rows}
+          {rows.length > 0 ? rows : 'Empty storage.'}
         </div>
       </Command>
     )

packages/reactotron-react-native/src/plugins/async-storage.js

@@ -27,7 +27,7 @@ export default options => reactotron => {
   /**
    * Sends the contents of AsyncStorage to Reactotron.
    */
-  const reactotronShipStorageValues = () => {
+  const reactotronShipStorageValues = (methodName, args) => {
     AsyncStorage.getAllKeys(
       (_, keys) => AsyncStorage.multiGet(keys, (_, values = []) => {
         const valuesToSend = reject(
@@ -36,7 +36,12 @@ export default options => reactotron => {
         )
         // NOTE(steve): for now let's ship everything... until we get a UI in place
         // to make request/response calls
-        reactotron.send('asyncStorage.values.change', valuesToSend)
+        let previewArgs = ''
+        if (args && args.length > 1) {
+          previewArgs = Array.isArray(args[0]) ? `Array: ${args[0].length}` : args[0]
+        }
+        const preview = methodName ? `${methodName}(${previewArgs})` : ''
+        reactotron.send('asyncStorage.values.change', { preview, value: valuesToSend })
       })
     )
   }
@@ -45,8 +50,9 @@ export default options => reactotron => {
    * Swizzles one of the AsyncStorage public api functions.
    *
    * @param {function} originalMethod - The original function to override.
+   * @param {string} methodName - The original method name we are overriding.
    */
-  const reactotronStorageHijacker = originalMethod => (...args) => {
+  const reactotronStorageHijacker = (originalMethod, methodName) => (...args) => {
     // Depending on the call we could have the callback in one of any of the three args, walk backwards till we find the callback
     let oldCallback = args.length > 0 ? args[args.length - 1] : null
 
@@ -58,7 +64,7 @@ export default options => reactotron => {
     const newArgs = [
       ...args.slice(0, args.length - 1),
       (...cbArgs) => {
-        reactotronShipStorageValues()
+        reactotronShipStorageValues(methodName, args)
         oldCallback(...cbArgs)
       }
     ]
@@ -70,25 +76,25 @@ export default options => reactotron => {
     if (isSwizzled) return
 
     swizzSetItem = AsyncStorage.setItem
-    AsyncStorage.setItem = reactotronStorageHijacker(swizzSetItem)
+    AsyncStorage.setItem = reactotronStorageHijacker(swizzSetItem, 'setItem')
 
     swizzRemoveItem = AsyncStorage.removeItem
-    AsyncStorage.removeItem = reactotronStorageHijacker(swizzRemoveItem)
+    AsyncStorage.removeItem = reactotronStorageHijacker(swizzRemoveItem, 'removeItem')
 
     swizzMergeItem = AsyncStorage.mergeItem
-    AsyncStorage.mergeItem = reactotronStorageHijacker(swizzMergeItem)
+    AsyncStorage.mergeItem = reactotronStorageHijacker(swizzMergeItem, 'mergeItem')
 
     swizzClear = AsyncStorage.clear
-    AsyncStorage.clear = reactotronStorageHijacker(swizzClear)
+    AsyncStorage.clear = reactotronStorageHijacker(swizzClear, 'clear')
 
     swizzMultiSet = AsyncStorage.multiSet
-    AsyncStorage.multiSet = reactotronStorageHijacker(swizzMultiSet)
+    AsyncStorage.multiSet = reactotronStorageHijacker(swizzMultiSet, 'multiSet')
 
     swizzMultiRemove = AsyncStorage.multiRemove
-    AsyncStorage.multiRemove = reactotronStorageHijacker(swizzMultiRemove)
+    AsyncStorage.multiRemove = reactotronStorageHijacker(swizzMultiRemove, 'multiRemove')
 
     swizzMultiMerge = AsyncStorage.multiMerge
-    AsyncStorage.multiMerge = reactotronStorageHijacker(swizzMultiMerge)
+    AsyncStorage.multiMerge = reactotronStorageHijacker(swizzMultiMerge, 'multiMerge')
 
     isSwizzled = true
   }