🔨 Refactored and 🧠 Overmind ...Dependencies/elements and ...Dependencies/index (#2670)

* refactored ...Dependencies/elements and ...Dependencies/index; updated NotOwnedSandboxInfo/NotOwnedSandboxInfo

* changed the import order

* Fix order

Author: mkamranhamid

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/elements.ts

@@ -0,0 +1,109 @@
+// @flow
+
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import getDefinition from '@codesandbox/common/lib/templates';
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
+import { WorkspaceSubtitle } from '../elements';
+
+import AddVersion from './AddVersion';
+import { VersionEntry } from './VersionEntry';
+import AddResource from './AddResource';
+import ExternalResource from './ExternalResource';
+
+import { ErrorMessage } from './elements';
+
+export const Dependencies: FunctionComponent = () => {
+  const {
+    state: { editor },
+    actions: { workspace, editor: editorSignals },
+  } = useOvermind();
+
+  const sandbox = editor.currentSandbox;
+
+  if (!editor.parsedConfigurations.package) {
+    return <ErrorMessage>Unable to find package.json</ErrorMessage>;
+  }
+
+  const { parsed, error } = editor.parsedConfigurations.package;
+
+  if (error) {
+    return (
+      <ErrorMessage>
+        We weren
+        {"'"}t able to parse the package.json
+      </ErrorMessage>
+    );
+  }
+
+  const dependencies = parsed.dependencies || {};
+  // const devDependencies = parsed.devDependencies || {};
+
+  const templateDefinition = getDefinition(sandbox.template);
+
+  return (
+    <div>
+      <Margin bottom={0}>
+        {Object.keys(dependencies)
+          .sort()
+          .map(dep => (
+            <VersionEntry
+              key={dep}
+              dependencies={dependencies}
+              dependency={dep}
+              onRemove={name => editorSignals.npmDependencyRemoved({ name })}
+              onRefresh={(name, version) =>
+                editorSignals.addNpmDependency({
+                  name,
+                  version,
+                })
+              }
+            />
+          ))}
+        {/* {Object.keys(devDependencies).length > 0 && (
+      <WorkspaceSubtitle>Development Dependencies</WorkspaceSubtitle>
+    )}
+    {Object.keys(devDependencies)
+      .sort()
+      .map(dep => (
+        <VersionEntry
+          key={dep}
+          dependencies={devDependencies}
+          dependency={dep}
+          onRemove={name => signals.editor.npmDependencyRemoved({ name })}
+          onRefresh={(name, version) =>
+            signals.editor.addNpmDependency({
+              name,
+              version,
+            })
+          }
+        />
+      ))} */}
+        <AddVersion>Add Dependency</AddVersion>
+      </Margin>
+      {templateDefinition.externalResourcesEnabled && (
+        <div>
+          <WorkspaceSubtitle>External Resources</WorkspaceSubtitle>
+          {(sandbox.externalResources || []).map(resource => (
+            <ExternalResource
+              key={resource}
+              resource={resource}
+              removeResource={() =>
+                workspace.externalResourceRemoved({
+                  resource,
+                })
+              }
+            />
+          ))}
+          <AddResource
+            addResource={resource =>
+              workspace.externalResourceAdded({
+                resource,
+              })
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useOvermind } from 'app/overmind';
-import Dependencies from '../../Dependencies';
+import { Dependencies } from '../../Dependencies';
 import Files from '../../Files';
 import { Project } from '../../Project';
 import { WorkspaceItem } from '../../WorkspaceItem';