feat(overmind-devtools-client): sort object keys alphabetically

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/components/Inspector/index.tsx

@@ -1,11 +1,12 @@
-import { createElement, FunctionComponent, useState, memo } from 'react'
-import { isObject, isArray } from './utils'
-import { isValidJson } from '../../overmind/utils'
-import * as styles from './styles'
 import { css } from 'emotion'
-import { colors } from '../../theme'
+import { FunctionComponent, createElement, memo, useState } from 'react'
 import { FaEdit } from 'react-icons/fa'
 
+import { isValidJson } from '../../overmind/utils'
+import { colors } from '../../theme'
+import * as styles from './styles'
+import { isArray, isObject } from './utils'
+
 function renderValue({
   path,
   value,
@@ -215,7 +216,10 @@ const Nested: FunctionComponent<NestedProps> = memo(
             <span className={styles.keyCount}>
               {isArray
                 ? keys.length + ' items'
-                : keys.slice(0, 3).join(', ') + '...'}
+                : keys
+                    .sort()
+                    .slice(0, 3)
+                    .join(', ') + '...'}
             </span>
             {endBracket}
           </PathTools>
@@ -257,18 +261,20 @@ const Nested: FunctionComponent<NestedProps> = memo(
                   selectedStatePath,
                 })
               )
-            : Object.keys(value).map((key) =>
-                renderValue({
-                  path: path.concat((path ? '.' : '') + key),
-                  value: value[key],
-                  renderPaths,
-                  expandedPaths,
-                  onClickPath,
-                  onSubmitState,
-                  onToggleExpand,
-                  selectedStatePath,
-                })
-              )}
+            : Object.keys(value)
+                .sort()
+                .map((key) =>
+                  renderValue({
+                    path: path.concat((path ? '.' : '') + key),
+                    value: value[key],
+                    renderPaths,
+                    expandedPaths,
+                    onClickPath,
+                    onSubmitState,
+                    onToggleExpand,
+                    selectedStatePath,
+                  })
+                )}
         </div>
         <div className={styles.bracket(false)}>{endBracket}</div>
       </div>