Fix : Tree generation for vscode

package.json

@@ -1,17 +1,17 @@
 {
-  "name": "reactree",
-  "displayName": "ReacTree",
-  "description": "React hierarchy tree visualizer and navigation tool",
-  "version": "1.0.7",
+  "name": "reactreev2",
+  "displayName": "ReacTreeV2",
+  "description": "Fixed - React hierarchy tree visualizer and navigation tool",
+  "version": "2.0.0",
   "icon": "icon.png",
-  "publisher": "ReacTreeDev",
+  "publisher": "abhi11verma",
   "preview": false,
   "engines": {
     "vscode": "^1.74.3"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/oslabs-beta/ReacTree/tree/main"
+    "url": "https://github.com/abhi11verma/ReacTreeV2"
   },
   "categories": [
     "Other"

src/extension.ts

@@ -4,18 +4,24 @@ import ReacTreePanel from './panel';
 export function activate(extContext: vscode.ExtensionContext) {
   extContext.subscriptions.push(
     vscode.commands.registerCommand('reacTree.start', () => {
-      ReacTreePanel.createOrShow(extContext);
+      const activeEditor = vscode.window.activeTextEditor;
+      if (activeEditor) {
+        const currentFilePath = activeEditor.document.uri.fsPath;
+        ReacTreePanel.createOrShow(extContext, currentFilePath);
+      } else {
+        vscode.window.showInformationMessage('No active editor found.');
+      }
     })
   );
-  
+
   // Create reacTree status bar button
   const item = vscode.window.createStatusBarItem(
     vscode.StatusBarAlignment.Right
   );
 
   item.command = 'reacTree.start';
   item.tooltip = 'Activate ReacTree';
-  item.text = '$(type-hierarchy) Start Tree';
+  item.text = '$(type-hierarchy) View Tree';
   item.show();
 }
 

src/panel.ts

@@ -12,8 +12,10 @@ export default class ReacTreePanel {
   private readonly _extContext: vscode.ExtensionContext;
   private parser: Parser | undefined;
   private _disposables: vscode.Disposable[] = [];
+  private currentFilePath: string;
 
-  public static createOrShow(extContext: vscode.ExtensionContext) {
+
+  public static createOrShow(extensionContext: vscode.ExtensionContext, filePath: string) {
     const column = vscode.window.activeTextEditor
       ? vscode.window.activeTextEditor.viewColumn
       : undefined;
@@ -25,18 +27,22 @@ export default class ReacTreePanel {
     } else {
       // ReactPanel.currentPanel = new ReactPanel(extensionPath, column || vscode.ViewColumn.One);
       ReacTreePanel.currentPanel = new ReacTreePanel(
-        extContext,
-        vscode.ViewColumn.Two
+        extensionContext,
+        vscode.ViewColumn.Two,
+        filePath
       );
     }
   }
 
   private constructor(
     extContext: vscode.ExtensionContext,
-    column: vscode.ViewColumn
+    column: vscode.ViewColumn,
+    filePath: string
   ) {
     this._extContext = extContext;
     this._extensionUri = extContext.extensionUri;
+    this.currentFilePath = filePath;
+
     // Not added - state preserver**
 
     // Create and show a new webview panel
@@ -63,10 +69,17 @@ export default class ReacTreePanel {
     // This happens when the user closes the panel or when the panel is closed programatically
     this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
 
+    // Send the current file path to the webview
+    this._panel.webview.postMessage({
+      type: 'currentFilePath',
+      value: this.currentFilePath
+    });
+
     // Handle messages from the webview
     this._panel.webview.onDidReceiveMessage(
       async (msg: any) => {
         switch (msg.type) {
+          // TODO : Removed manual file selection support and repurposed the existing tree generation functionality
           case 'onFile':
             if (!msg.value) break; //if doesnt work change to return
             this.parser = new Parser(msg.value);
@@ -117,10 +130,11 @@ export default class ReacTreePanel {
       vscode.Uri.joinPath(this._extensionUri, 'out', 'main.wv.js')
     );
 
-    const styleUri = webview.asWebviewUri(
-      vscode.Uri.joinPath(this._extensionUri, 'media', 'styles.css')
-    );
-
+    // TODO: Fix this later for customizing the view
+    // const styleUri = webview.asWebviewUri(
+    //   vscode.Uri.joinPath(this._extensionUri, 'media', 'styles.css')
+    // );
+    // <link rel="stylesheet" href="${styleUri}">
     // Use a nonce to whitelist which scripts can be run
     const nonce = getNonce();
 
@@ -130,7 +144,7 @@ export default class ReacTreePanel {
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>reacttree</title>
-        <link rel="stylesheet" href="${styleUri}">
+
       </head>
       <body>
         <div id="root"></div>

src/webview/components/Navbar.tsx

@@ -17,32 +17,33 @@ interface vscode {
 declare const vscode: vscode;
 
 const Navbar = ({ rootFile }: any) => {
-  // onChange function that will send a message to the extension when the user selects a file
-  const fileMessage = (e: any) => {
-    const filePath = e.target.files[0].path;
-    // Reset event target value to null so the same file selection causes onChange event to trigger
-    e.target.value = null;
-    if (filePath) {
-      vscode.postMessage({
-        type: "onFile",
-        value: filePath
-      });
-    }
-  };
+ // Listen for messages from the extension
+  React.useEffect(() => {
+    window.addEventListener('message', (event) => {
+      const message = event.data;
+      if (message.type === 'currentFilePath') {
+        sendFileMessage(message.value);
+      } else if (message.type === 'parsed-data') {
+        console.log('Restoring tree data:', message.value); // Add log
+      }
+    });
+  }, []);
 
+  // onChange function that will send a message to the extension when the user selects a file
+function sendFileMessage(filePath: string) {
+  vscode.postMessage({
+    type: 'onFile',
+    value: filePath,
+  });
+}
   console.log('ROOT', rootFile)
 
   // Render section
   return (
     <div className="navbar">
-      <input type="file" name="file" id="file" className="inputfile" onChange={(e) => {fileMessage(e);}}/>
       <div className='navbarContents'>
-        <label id='inputLabel' htmlFor="file">
-          {/* <FontAwesomeIcon icon={faDownload}/> */}
-          <strong id="strong_file">{rootFile ? ` ${rootFile}` : ' Select File'}</strong>
-          <FileUploadRoundedIcon htmlColor='var(--vscode-settings-focusedRowBorder)' style={{fontSize:20, position: 'relative', top: '4px'}}/>
-        </label>
-        {/* <ClearIcon style={{fontSize:15, marginTop: 2}}/>   */}
+        <label  className='navbarLabel' htmlFor="file-upload">
+          </label>
       </div>
     </div>
   );