Skip to content

Commit 4678b12

Browse files
unwlsunwls
authored
Merge pull request #35 from REST-API-Client/docs/updateREADME.md
[2022/07/19] - README 작성
2 parents ceef7b7 + 23f7519 commit 4678b12

File tree

9 files changed

+261
-93
lines changed

9 files changed

+261
-93
lines changed

‎CHANGELOG.md

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
# Change Log
1+
# Changelog
22

3-
All notable changes to the "rest-api-tester" extension will be documented in this file.
3+
# 1.0.0
44

5-
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
6-
7-
## [Unreleased]
8-
9-
- Initial release
5+
Initial Release

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2022 REST API Tester
3+
Copyright (c) 2022 Unjin Jang
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

+167-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,168 @@
1-
# HTTP-Request-VSCode-Extension
1+
<div align="center">
2+
<a href="https://github.com/KatsuteDev/Background#readme">
3+
<img
4+
src="https://user-images.githubusercontent.com/83770081/179551561-e773aa66-db92-437a-be66-c7480f19d434.png"
5+
width="100"
6+
height="100"
7+
/>
8+
</a>
9+
<h3>REST API Client</h3>
10+
<h5>Simple and intuitive API Client made into a VSCode extension.</h5>
211

3-
Beginner Friendly API Endpoint Testing VSCode Extension
12+
<a href="https://marketplace.visualstudio.com/">Visual Studio Marketplace</a>
13+
•
14+
<a href="https://github.com/REST-API-Client/API-Client-VSCode-Extension">Repository</a>
15+
•
16+
<a href="https://github.com/REST-API-Client/API-Client-VSCode-Extension/blob/main/CHANGELOG.md">Releases</a>
17+
<br>
18+
19+
</div>
20+
21+
<br>
22+
23+
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.
24+
25+
![REST API Client preview](https://user-images.githubusercontent.com/83770081/179717335-7deb920c-1c96-44be-b44c-853ad198cd8e.gif)
26+
27+
<br>
28+
29+
- [🚀 Installation](#-installation)
30+
- [✨ Features](#-features)
31+
- [💻 Commands](#-commands)
32+
- [📚 Tech Stacks](#-tech-stacks)
33+
- [🗒 Changelog](#-changelog)
34+
- [👨🏻‍💻 Contributing](#-contributing)
35+
- [📋 License](#-license)
36+
37+
<br>
38+
39+
## 🚀 Installation
40+
41+
> ❗️ This extension is best paired with a dark-colored Visual Studio Code theme.
42+
43+
> ❗️ REST API Client cannot be installed or used when using a web version of Visual Studio Code
44+
45+
#### 🔐 Security and Privacy
46+
47+
- REST API Client **does not** collect or store any of your personal information or request data
48+
- REST API Client uses VSCode global state API in order to store your request history and favorites collections locally.
49+
50+
## ✨ Features
51+
52+
- Send a request and receive a response from your desired API endpoint.
53+
- Five request method
54+
- `GET`
55+
- `POST`
56+
- `PUT`
57+
- `PATCH`
58+
- `DELETE`
59+
- Various request options
60+
- Add parameter to your API endpoint
61+
- Add authorization option
62+
- Basic Authorization
63+
- Bearer Token
64+
- Add body data
65+
- Form data
66+
- x-www-form-urlencoded
67+
- Raw data
68+
- `Text`
69+
- `JavaScript`
70+
- `JSON`
71+
- `HTML`
72+
- Code snippet of your current request, provided up to 18 different languages with their specific variants, to copy and paste to your codebase.
73+
74+
![Code Snippet preview](https://user-images.githubusercontent.com/83770081/179729908-e20f4b05-2007-4bec-8473-b4944e882f86.gif)
75+
76+
- Resizable vertical menu
77+
- Various response body view format
78+
- Pretty
79+
- `JSON`
80+
- `HTML`
81+
- `Text`
82+
- Raw
83+
- `Plain Text`
84+
- Visual `HTML` preview of the response data
85+
- Basic metadata information
86+
- Status code and text
87+
- Response size
88+
- Approximate time measurement to receive a response from your request
89+
- Copy and paste code button
90+
- Response headers view mode
91+
- History collection sidebar
92+
- Favorites collection sidebar
93+
- Intuitive icon UI to favorite a request history or delete
94+
- Search bar to find your specific request history
95+
- Click and search from the sidebar collection
96+
97+
![Sidebar preview](https://user-images.githubusercontent.com/83770081/179733141-0fef0d7c-b179-4440-b624-a137ccb14e05.gif)
98+
99+
## 💻 Commands
100+
101+
Simply click Open Menu button or open the Command Palette and type the command below:
102+
103+
> `Command+P` or `Command + Shift + P` on **macOS** and `Ctrl+Shift+P` on **Windows/Linux**
104+
105+
<br>
106+
107+
| Command | Description |
108+
| ---------------------- | ------------------------ |
109+
| `> Start: New Request` | Create a API Client menu |
110+
111+
> ❗️ You can only create one panel at a time.
112+
113+
## 📚 Tech Stacks
114+
115+
#### This project was created using the following tech stacks:
116+
117+
<p>
118+
<img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white"/></a>&nbsp
119+
<img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white"/></a>&nbsp
120+
<img src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E"/></a>&nbsp
121+
<img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"/></a>&nbsp
122+
<img src="https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white"/></a>&nbsp
123+
<img src="https://img.shields.io/badge/Webpack-8DD6F9?style=for-the-badge&logo=Webpack&logoColor=white"/></a>&nbsp
124+
<img src="https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge&logo=babel&logoColor=white"/></a>&nbsp
125+
</p>
126+
127+
- **Extension** : [VS Code Extension API](https://code.visualstudio.com/api)
128+
- **UI** : [React JS](https://reactjs.org/), [Styled Components](https://styled-components.com/)
129+
- **HTTP/s Request**: [Axios](https://axios-http.com/)
130+
- **State Management Library** - [Zustand](https://zustand-demo.pmnd.rs/)
131+
- **Editor** : [Monaco Editor](https://www.npmjs.com/package/monaco-editor)
132+
- **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.)
133+
- **Code Snippet Generator** : [Postman-collection](https://www.npmjs.com/package/postman-collection), [Postman-Code-Generators](https://www.npmjs.com/package/postman-code-generators)
134+
135+
## 🗒 Changelog
136+
137+
#### Current version 1.0.0
138+
139+
Visit [here](https://github.com/REST-API-Client/API-Client-VSCode-Extension/blob/main/CHANGELOG.md) for a detailed release notes
140+
141+
## 👨🏻‍💻 Contributing
142+
143+
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.
144+
145+
I appreciate even the tiniest suggestion or contribution you make to this project.
146+
147+
#### 🪜 Step-by-step guide on how to make a pull request
148+
149+
1. Fork this Project from [here](https://github.com/REST-API-Client/API-Client-VSCode-Extension)
150+
2. Create your Branch &#8594; `git checkout -b feature/newFeature`
151+
3. Code up your outstanding logic &#8594; `console.log("Hello World")`
152+
4. Commit your Changes &#8594; `git commit -m "feat: Add some newFeature`
153+
5. Push to the Branch &#8594; `git push origin feature/newFeature`
154+
6. Vist your GitHub repository and open a Pull Request
155+
156+
#### 🏗 Running the extension locally for development
157+
158+
1. Run `git clone` from this [repository](https://github.com/REST-API-Client/API-Client-VSCode-Extension)
159+
2. Run npm install in order to install all the dependencies needed
160+
3. Press F5 to launch extension development mode
161+
162+
#### ⚠️ Bugs or Suggestions
163+
164+
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).
165+
166+
## 📋 License
167+
168+
This extension is released under the [MIT license](https://github.com/REST-API-Client/API-Client-VSCode-Extension/blob/main/LICENSE).

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"publisher": "unjinjang",
44
"displayName": "REST API Client",
55
"icon": "icons/images/icon.png",
6-
"description": "Simple and intuitive API Client VSCode extension.",
6+
"description": "Simple and intuitive API Client made into a VSCode extension.",
77
"version": "1.0.0",
88
"license": "MIT",
99
"bugs": {

‎src/MainWebViewPanel.js

+3
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ class MainWebViewPanel {
4242
this.mainPanel.webview.html = this.#getHtmlForWebView(this.mainPanel);
4343

4444
this.#receiveWebviewMessage();
45+
46+
return this.mainPanel;
4547
}
4648

4749
#receiveWebviewMessage() {
@@ -94,6 +96,7 @@ class MainWebViewPanel {
9496
method: this.#method,
9597
headers: this.#headers,
9698
data: this.#body,
99+
responseType: "text",
97100
};
98101

99102
const responseObject = await generateResponseObject(axiosConfiguration);

‎src/SidebarWebViewPanel.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,7 @@ class SidebarWebViewPanel {
5252
#receiveSidebarWebViewMessage() {
5353
this.#view.webview.onDidReceiveMessage(async ({ command, id, target }) => {
5454
if (command === COMMAND.START_APP) {
55-
const columnToShowIn = vscode.window.activeTextEditor
56-
? vscode.window.activeTextEditor.viewColumn
57-
: undefined;
58-
59-
return this.mainWebViewPanel
60-
? this.mainWebViewPanel.reveal(columnToShowIn)
61-
: vscode.commands.executeCommand(COMMAND.MAIN_WEB_VIEW_PANEL);
55+
vscode.commands.executeCommand(COMMAND.MAIN_WEB_VIEW_PANEL);
6256
} else if (command === COMMAND.ADD_TO_FAVORITES) {
6357
await this.stateManager.updateExtensionContext(
6458
COLLECTION.HISTORY_COLLECTION,

‎src/extension.js

+13-7
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export async function activate(context) {
1616
StateManager,
1717
SidebarWebViewProvider,
1818
);
19+
let currentPanel = null;
1920

2021
if (!StateManager.getExtensionContext(COLLECTION.HISTORY_COLLECTION)) {
2122
await StateManager.addExtensionContext(COLLECTION.HISTORY_COLLECTION, {
@@ -35,13 +36,18 @@ export async function activate(context) {
3536

3637
context.subscriptions.push(
3738
vscode.commands.registerCommand(COMMAND.MAIN_WEB_VIEW_PANEL, () => {
38-
MainWebViewProvider.initializeWebView();
39-
40-
SidebarWebViewProvider.mainWebViewPanel = MainWebViewProvider.mainPanel;
41-
42-
MainWebViewProvider.mainPanel.onDidDispose(() => {
43-
SidebarWebViewProvider.mainWebViewPanel = null;
44-
}, null);
39+
if (currentPanel) {
40+
currentPanel.reveal(vscode.ViewColumn.One);
41+
} else {
42+
currentPanel = MainWebViewProvider.initializeWebView();
43+
44+
SidebarWebViewProvider.mainWebViewPanel = MainWebViewProvider.mainPanel;
45+
46+
MainWebViewProvider.mainPanel.onDidDispose(() => {
47+
SidebarWebViewProvider.mainWebViewPanel = null;
48+
currentPanel = null;
49+
}, null);
50+
}
4551
}),
4652
);
4753
}

‎src/utils/generateResponseObject.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ async function generateResponseObject(configuration) {
4343

4444
const errorObject = {
4545
type: TYPE.RESPONSE,
46-
data: error.response.data,
46+
data: JSON.stringify(error.response.data),
4747
headers: headersArray,
4848
headersLength: headersSize,
4949
statusCode: error.response.status,

0 commit comments

Comments
 (0)