REST-API-Client · unwls · Jul 19, 2022 · Jul 19, 2022 · Jul 19, 2022 · Jul 19, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,5 @@
-# Change Log
+# Changelog
 
-All notable changes to the "rest-api-tester" extension will be documented in this file.
+# 1.0.0
 
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
-
-## [Unreleased]
-
-- Initial release
+Initial Release
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 REST API Tester
+Copyright (c) 2022 Unjin Jang
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,3 +1,168 @@
-# HTTP-Request-VSCode-Extension
+<div align="center">
+  <a href="https://github.com/KatsuteDev/Background#readme">
+    <img
+      src="https://user-images.githubusercontent.com/83770081/179551561-e773aa66-db92-437a-be66-c7480f19d434.png"
+      width="100"
+      height="100"
+    />
+  </a>
+  <h3>REST API Client</h3>
+  <h5>Simple and intuitive API Client made into a VSCode extension.</h5>
 
-Beginner Friendly API Endpoint Testing VSCode Extension
+<a href="https://marketplace.visualstudio.com/">Visual Studio Marketplace</a>
+•
+<a href="https://github.com/REST-API-Client/API-Client-VSCode-Extension">Repository</a>
+•
+<a href="https://github.com/REST-API-Client/API-Client-VSCode-Extension/blob/main/CHANGELOG.md">Releases</a>
+<br>
+
+</div>
+
+<br>
+
+Visual Studio Code extension to send basic HTTP/S requests and receive a response with an intuitive UI within Visual Studio code to enhance work productivity.
+
+![REST API Client preview](https://user-images.githubusercontent.com/83770081/179717335-7deb920c-1c96-44be-b44c-853ad198cd8e.gif)
+
+<br>
+
+- [🚀 Installation](#-installation)
+- [✨ Features](#-features)
+- [💻 Commands](#-commands)
+- [📚 Tech Stacks](#-tech-stacks)
+- [🗒 Changelog](#-changelog)
+- [👨🏻‍💻 Contributing](#-contributing)
+- [📋 License](#-license)
+
+<br>
+
+## 🚀 Installation
+
+> ❗️ This extension is best paired with a dark-colored Visual Studio Code theme.
+
+> ❗️ REST API Client cannot be installed or used when using a web version of Visual Studio Code
+
+#### 🔐 Security and Privacy
+
+- REST API Client **does not** collect or store any of your personal information or request data
+- REST API Client uses VSCode global state API in order to store your request history and favorites collections locally.
+
+## ✨ Features
+
+- Send a request and receive a response from your desired API endpoint.
+- Five request method
+  - `GET`
+  - `POST`
+  - `PUT`
+  - `PATCH`
+  - `DELETE`
+- Various request options
+  - Add parameter to your API endpoint
+  - Add authorization option
+    - Basic Authorization
+    - Bearer Token
+  - Add body data
+    - Form data
+    - x-www-form-urlencoded
+    - Raw data
+      - `Text`
+      - `JavaScript`
+      - `JSON`
+      - `HTML`
+- Code snippet of your current request, provided up to 18 different languages with their specific variants, to copy and paste to your codebase.
+
+![Code Snippet preview](https://user-images.githubusercontent.com/83770081/179729908-e20f4b05-2007-4bec-8473-b4944e882f86.gif)
+
+- Resizable vertical menu
+- Various response body view format
+  - Pretty
+    - `JSON`
+    - `HTML`
+    - `Text`
+  - Raw
+    - `Plain Text`
+  - Visual `HTML` preview of the response data
+- Basic metadata information
+  - Status code and text
+  - Response size
+  - Approximate time measurement to receive a response from your request
+- Copy and paste code button
+- Response headers view mode
+- History collection sidebar
+- Favorites collection sidebar
+- Intuitive icon UI to favorite a request history or delete
+- Search bar to find your specific request history
+- Click and search from the sidebar collection
+
+![Sidebar preview](https://user-images.githubusercontent.com/83770081/179733141-0fef0d7c-b179-4440-b624-a137ccb14e05.gif)
+
+## 💻 Commands
+
+Simply click Open Menu button or open the Command Palette and type the command below:
+
+> `Command+P` or `Command + Shift + P` on **macOS** and `Ctrl+Shift+P` on **Windows/Linux**
+
+<br>
+
+| Command                | Description              |
+| ---------------------- | ------------------------ |
+| `> Start: New Request` | Create a API Client menu |
+
+> ❗️ You can only create one panel at a time.
+
+## 📚 Tech Stacks
+
+#### This project was created using the following tech stacks:
+
+<p>
+  <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white"/></a>&nbsp
+  <img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white"/></a>&nbsp
+  <img src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E"/></a>&nbsp
+  <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"/></a>&nbsp
+  <img src="https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white"/></a>&nbsp
+  <img src="https://img.shields.io/badge/Webpack-8DD6F9?style=for-the-badge&logo=Webpack&logoColor=white"/></a>&nbsp
+  <img src="https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge&logo=babel&logoColor=white"/></a>&nbsp
+</p>
+
+- **Extension** : [VS Code Extension API](https://code.visualstudio.com/api)
+- **UI** : [React JS](https://reactjs.org/), [Styled Components](https://styled-components.com/)
+- **HTTP/s Request**: [Axios](https://axios-http.com/)
+- **State Management Library** - [Zustand](https://zustand-demo.pmnd.rs/)
+- **Editor** : [Monaco Editor](https://www.npmjs.com/package/monaco-editor)
+- **Local DB** : [VSCode extension global state API](https://code.visualstudio.com/api/extension-capabilities/common-capabilities#:~:text=globalState%20%3A%20A%20global%20storage%20where,using%20setKeysForSync%20method%20on%20globalState%20.)
+- **Code Snippet Generator** : [Postman-collection](https://www.npmjs.com/package/postman-collection), [Postman-Code-Generators](https://www.npmjs.com/package/postman-code-generators)
+
+## 🗒 Changelog
+
+#### Current version 1.0.0
+
+Visit [here](https://github.com/REST-API-Client/API-Client-VSCode-Extension/blob/main/CHANGELOG.md) for a detailed release notes
+
+## 👨🏻‍💻 Contributing
+
+If you have a suggestion that would make this project better, please fork this repository from [here](https://github.com/REST-API-Client/API-Client-VSCode-Extension) and create a pull request.
+
+I appreciate even the tiniest suggestion or contribution you make to this project.
+
+#### 🪜 Step-by-step guide on how to make a pull request
+
+1. Fork this Project from [here](https://github.com/REST-API-Client/API-Client-VSCode-Extension)
+2. Create your Branch &#8594; `git checkout -b feature/newFeature`
+3. Code up your outstanding logic &#8594; `console.log("Hello World")`
+4. Commit your Changes &#8594; `git commit -m "feat: Add some newFeature`
+5. Push to the Branch &#8594; `git push origin feature/newFeature`
+6. Vist your GitHub repository and open a Pull Request
+
+#### 🏗 Running the extension locally for development
+
+1. Run `git clone` from this [repository](https://github.com/REST-API-Client/API-Client-VSCode-Extension)
+2. Run npm install in order to install all the dependencies needed
+3. Press F5 to launch extension development mode
+
+#### ⚠️ Bugs or Suggestions
+
+If you found any bugs while using this extension or you have a suggestion please post it in [issues](https://github.com/REST-API-Client/API-Client-VSCode-Extension/issues).
+
+## 📋 License
+
+This extension is released under the [MIT license](https://github.com/REST-API-Client/API-Client-VSCode-Extension/blob/main/LICENSE).
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "publisher": "unjinjang",
   "displayName": "REST API Client",
   "icon": "icons/images/icon.png",
-  "description": "Simple and intuitive API Client VSCode extension.",
+  "description": "Simple and intuitive API Client made into a VSCode extension.",
   "version": "1.0.0",
   "license": "MIT",
   "bugs": {

diff --git a/src/MainWebViewPanel.js b/src/MainWebViewPanel.js
@@ -42,6 +42,8 @@ class MainWebViewPanel {
     this.mainPanel.webview.html = this.#getHtmlForWebView(this.mainPanel);
 
     this.#receiveWebviewMessage();
+
+    return this.mainPanel;
   }
 
   #receiveWebviewMessage() {
@@ -94,6 +96,7 @@ class MainWebViewPanel {
       method: this.#method,
       headers: this.#headers,
       data: this.#body,
+      responseType: "text",
     };
 
     const responseObject = await generateResponseObject(axiosConfiguration);

diff --git a/src/SidebarWebViewPanel.js b/src/SidebarWebViewPanel.js
@@ -52,13 +52,7 @@ class SidebarWebViewPanel {
   #receiveSidebarWebViewMessage() {
     this.#view.webview.onDidReceiveMessage(async ({ command, id, target }) => {
       if (command === COMMAND.START_APP) {
-        const columnToShowIn = vscode.window.activeTextEditor
-          ? vscode.window.activeTextEditor.viewColumn
-          : undefined;
-
-        return this.mainWebViewPanel
-          ? this.mainWebViewPanel.reveal(columnToShowIn)
-          : vscode.commands.executeCommand(COMMAND.MAIN_WEB_VIEW_PANEL);
+        vscode.commands.executeCommand(COMMAND.MAIN_WEB_VIEW_PANEL);
       } else if (command === COMMAND.ADD_TO_FAVORITES) {
         await this.stateManager.updateExtensionContext(
           COLLECTION.HISTORY_COLLECTION,

diff --git a/src/extension.js b/src/extension.js
@@ -16,6 +16,7 @@ export async function activate(context) {
     StateManager,
     SidebarWebViewProvider,
   );
+  let currentPanel = null;
 
   if (!StateManager.getExtensionContext(COLLECTION.HISTORY_COLLECTION)) {
     await StateManager.addExtensionContext(COLLECTION.HISTORY_COLLECTION, {
@@ -35,13 +36,18 @@ export async function activate(context) {
 
   context.subscriptions.push(
     vscode.commands.registerCommand(COMMAND.MAIN_WEB_VIEW_PANEL, () => {
-      MainWebViewProvider.initializeWebView();
-
-      SidebarWebViewProvider.mainWebViewPanel = MainWebViewProvider.mainPanel;
-
-      MainWebViewProvider.mainPanel.onDidDispose(() => {
-        SidebarWebViewProvider.mainWebViewPanel = null;
-      }, null);
+      if (currentPanel) {
+        currentPanel.reveal(vscode.ViewColumn.One);
+      } else {
+        currentPanel = MainWebViewProvider.initializeWebView();
+
+        SidebarWebViewProvider.mainWebViewPanel = MainWebViewProvider.mainPanel;
+
+        MainWebViewProvider.mainPanel.onDidDispose(() => {
+          SidebarWebViewProvider.mainWebViewPanel = null;
+          currentPanel = null;
+        }, null);
+      }
     }),
   );
 }
diff --git a/src/utils/generateResponseObject.js b/src/utils/generateResponseObject.js
@@ -43,7 +43,7 @@ async function generateResponseObject(configuration) {
 
       const errorObject = {
         type: TYPE.RESPONSE,
-        data: error.response.data,
+        data: JSON.stringify(error.response.data),
         headers: headersArray,
         headersLength: headersSize,
         statusCode: error.response.status,