Add the ability to download and import downloaded analysis bundles.

samccone · Mar 28, 2020 · 794e9ae · 794e9ae
1 parent b39fc11
commit 794e9ae
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 32 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -39,7 +39,7 @@ class App extends Component {
                             (location.state).duplicateNodeModules
                           }
                           selected={params.get("selected")}
-                          hierarchy={location.state.hierachy}
+                          hierarchy={location.state.hierarchy}
                         />
                       );
                     }}

diff --git a/src/bundle/Bundle.tsx b/src/bundle/Bundle.tsx
@@ -106,6 +106,15 @@ class Bundle extends Component<BundleProps, BundleState> {
     };
   }
 
+  download() {
+    const blob = new Blob([JSON.stringify(this.props)], {type : 'application/json'});
+    const objectURL = URL.createObjectURL(blob);
+    const a: HTMLAnchorElement = document.createElement('a');
+    a.setAttribute('download', 'bundle-buddy-share.json');
+    a.href = objectURL;
+    a.click();
+  }
+
   changeSelected(selected: string) {
     window.history.pushState(
       { ...window.history.state, selected },
@@ -176,6 +185,7 @@ class Bundle extends Component<BundleProps, BundleState> {
 
     return (
       <div>
+        <button onClick={() => this.download()}>download analaysis</button>
         <div>
           <_untypedByTypeByChart
             totalsByType={totalsByType}

diff --git a/src/import/Describe.tsx b/src/import/Describe.tsx
@@ -1,13 +1,33 @@
 import React, { Component } from "react";
+import { readFileAsText } from "./file_reader";
 import { Link } from "react-router-dom";
+import {ImportHistory, ProcessedHistory} from "../types";
 // noopener noreferrer
 
-class DescribeImport extends Component {
-  constructor(props: {}) {
+class DescribeImport extends Component<{history: ImportHistory}> {
+  existingImportInput: React.RefObject<HTMLInputElement & {files: FileList}> ;
+
+  constructor(props: {history: ImportHistory}) {
     super(props);
+    this.existingImportInput = React.createRef();
   }
 
-  state: {} = {};
+async onExistingImportInput() {
+    const file = this.existingImportInput.current?.files[0];
+    if (file == null) {
+      return;
+    }
+
+    const contents = await readFileAsText(file);
+    const previousState = JSON.parse(contents);
+
+    ((this.props.history as unknown) as ProcessedHistory).push(
+      "/bundle",
+      previousState
+    )
+  }
+
+  state: never;
 
   render() {
     const selected = window.location.pathname;
@@ -50,6 +70,16 @@ class DescribeImport extends Component {
             </button>
           </div>
         </div>
+        <div className="flex">
+          <button tabIndex={-1}>Import existing project
+            <input
+                type="file"
+                ref={this.existingImportInput}
+                accept=".json"
+                onInput={async () => await this.onExistingImportInput()}
+              />
+          </button>
+        </div>
       </div>
     );
   }

diff --git a/src/import/Import.tsx b/src/import/Import.tsx
@@ -12,8 +12,15 @@ class Import extends Component<{imported:boolean}> {
     const {imported} = this.props
     return (
       <div>
-        <Describe />
         <Switch>
+          <Route exact path="/" component={
+            (h: {history: History}) => {
+              return (
+                <Describe history={h.history as any} />
+              )
+            }
+           }
+          />
           <Route exact path="/webpack" component={WebpackImport} />
           <Route exact path="/webpack/resolve" component={
             (h: {history: History}) => {

diff --git a/src/resolve/process.ts b/src/resolve/process.ts
@@ -264,7 +264,7 @@ export function transform(
     }))
   };
 
-  const hierachy = nodesToTreeMap(trimmedNodes);
+  const hierarchy = nodesToTreeMap(trimmedNodes);
 
-  return { rollups, trimmedNetwork, duplicateNodeModules, hierachy };
+  return { rollups, trimmedNetwork, duplicateNodeModules, hierarchy };
 }
diff --git a/src/types.ts b/src/types.ts
@@ -9,14 +9,40 @@ export interface ImportResolveState {
   sourceMapFileTransform?: string;
 }
 
+export interface ProcessedImportState {
+  trimmedNetwork: TrimmedNetwork;
+  hierarchy: TreemapNode[];
+  rollups: {
+    value: number;
+    fileTypes: {
+      pct: number;
+      name: string;
+      totalBytes: number;
+    }[];
+    directories: {
+      pct: number;
+      name: string;
+      totalBytes: number;
+      color?: string;
+    }[];
+  };
+  duplicateNodeModules: Array<{
+    key: string;
+    value: string[];
+  }>;
+}
+
 export interface TreemapNode {
   parent: string;
   name: string;
   totalBytes?: number;
 }
 
+export type ProcessedHistory = History<ProcessedImportState>;
+export type ImportHistory = History<ImportResolveState>;
+
 export interface ImportProps {
-  history: History<ImportResolveState>;
+  history: ImportHistory;
   imported: boolean;
 }
 
@@ -25,7 +51,7 @@ export interface BundleProps {
   rollups: ProcessedImportState["rollups"];
   duplicateNodeModules: ProcessedImportState["duplicateNodeModules"];
   selected: string | null;
-  hierarchy: ProcessedImportState["hierachy"];
+  hierarchy: ProcessedImportState["hierarchy"];
 }
 
 export interface BundleState {
@@ -41,7 +67,7 @@ export interface BundleNetworkCount {
 }
 
 export interface ResolveProps {
-  history: History<ImportResolveState>;
+  history: ImportHistory;
   graphNodes: GraphNodes;
   processedSourceMap: ProcessedSourceMap;
   graphFileTransform?: string;
@@ -53,28 +79,7 @@ export interface TrimmedNetwork {
   edges: Edge[];
 }
 
-export interface ProcessedImportState {
-  trimmedNetwork: TrimmedNetwork;
-  hierachy: TreemapNode[];
-  rollups: {
-    value: number;
-    fileTypes: {
-      pct: number;
-      name: string;
-      totalBytes: number;
-    }[];
-    directories: {
-      pct: number;
-      name: string;
-      totalBytes: number;
-      color?: string;
-    }[];
-  };
-  duplicateNodeModules: Array<{
-    key: string;
-    value: string[];
-  }>;
-}
+
 
 export interface Edge {
   source: string;