fix: dependecnies sorting avoif recoil read only

ccontrols · Jul 25, 2020 · 5f454dc · 5f454dc
1 parent 9a9c85a
commit 5f454dc
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 30 deletions.
diff --git a/core/core/src/utility.ts b/core/core/src/utility.ts
@@ -120,3 +120,8 @@ export interface ImportName {
 export interface Imports {
   [key: string]: ImportName[];
 }
+
+/**
+ * default export keyword
+ */
+export const defaultExport = 'default';
diff --git a/ui/blocks/src/ComponentDeps/BaseComponentDeps.tsx b/ui/blocks/src/ComponentDeps/BaseComponentDeps.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import { StoryComponent } from '@component-controls/core';
+import { StoryComponent, defaultExport } from '@component-controls/core';
 import { usePackage } from '@component-controls/store';
 import { Dependencies } from './Dependencies';
 
@@ -37,7 +37,19 @@ export const BaseComponentDeps: FC<BaseComponentDepsProps> = ({
             ));
         return {
           name,
-          imports: importObj[name],
+          imports: [...importObj[name]].sort((a, b) => {
+            if (a.importedName === defaultExport) {
+              return -1;
+            } else if (b.importedName === defaultExport) {
+              return 1;
+            }
+            if (a.importedName > b.importedName) {
+              return -1;
+            } else if (a.importedName < b.importedName) {
+              return 1;
+            }
+            return 0;
+          }),
           packageName,
           peer: packageName
             ? peerDependenciesKeys.includes(packageName)

diff --git a/ui/blocks/src/ComponentDeps/Dependencies.tsx b/ui/blocks/src/ComponentDeps/Dependencies.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable react/display-name */
 import React, { FC, useMemo } from 'react';
 import { Flex, Box } from 'theme-ui';
-import { ImportName } from '@component-controls/core';
+import { ImportName, defaultExport } from '@component-controls/core';
 import { Table, Tag, ExternalLink } from '@component-controls/components';
 
-const defaultExport = 'default';
 export interface Dependency {
   /**
    * import name (can include /dist/ folders)
@@ -72,32 +71,16 @@ export const Dependencies: FC<DependenciesProps> = ({ dependencies }) => {
               flexWrap: 'wrap',
             }}
           >
-            {value
-              .sort((a, b) => {
-                if (a.importedName === defaultExport) {
-                  return -1;
-                } else if (b.importedName === defaultExport) {
-                  return 1;
-                }
-                if (a.importedName > b.importedName) {
-                  return -1;
-                } else if (a.importedName < b.importedName) {
-                  return 1;
-                }
-                return 0;
-              })
-              .map(v => (
-                <Tag
-                  variant="tag.rightmargin"
-                  key={`${v.name}`}
-                  borderSize={1}
-                  color={
-                    v.importedName === defaultExport ? 'green' : 'lightgrey'
-                  }
-                >
-                  {v.importedName === defaultExport ? v.name : v.importedName}
-                </Tag>
-              ))}
+            {value.map(v => (
+              <Tag
+                variant="tag.rightmargin"
+                key={`${v.name}`}
+                borderSize={1}
+                color={v.importedName === defaultExport ? 'green' : 'lightgrey'}
+              >
+                {v.importedName === defaultExport ? v.name : v.importedName}
+              </Tag>
+            ))}
           </Flex>
         ),
       },