-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathscript.js
142 lines (127 loc) · 4.98 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"
import axios from "axios"
import prettyBytes from "pretty-bytes"
import setupEditors from "./setupEditor"
const form = document.querySelector("[data-form]")
const queryParamsContainer = document.querySelector("[data-query-params]")
const requestHeadersContainer = document.querySelector("[data-request-headers]")
const keyValueTemplate = document.querySelector("[data-key-value-template]")
const responseHeadersContainer = document.querySelector(
"[data-response-headers]"
)
// for add button on query-params
document
.querySelector("[data-add-query-param-btn]")
.addEventListener("click", () => {
//appending key value pair
queryParamsContainer.append(createKeyValuePair())
})
// for add button on request-header
document
.querySelector("[data-add-request-header-btn]")
.addEventListener("click", () => {
requestHeadersContainer.append(createKeyValuePair())
})
// Append a new key value pairs
queryParamsContainer.append(createKeyValuePair())
requestHeadersContainer.append(createKeyValuePair())
// interceptor request
axios.interceptors.request.use((request) => {
// if we already have customData we don't want to overwrite it we use empty object {}
request.customData = request.customData || {}
request.customData.startTime = new Date().getTime()
return request
})
function updateEndTime(response) {
response.customData = response.customData || {}
response.customData.time =
new Date().getTime() - response.config.customData.startTime
return response
}
// interceptors response
// when success updateEndTime
axios.interceptors.response.use(updateEndTime, (e) => {
// this func all we do is update the end time so we can figure out how longer request took
// if failure it will e.response
return Promise.reject(updateEndTime(e.response))
})
const { requestEditor, updateResponseEditor } = setupEditors()
// add event listener submit on form
form.addEventListener("submit", (e) => {
e.preventDefault()
let data
try {
// take JSON from document try to convert it to object otherwise null if nothing is there
data = JSON.parse(requestEditor.state.doc.toString() || null)
} catch (e) {
alert("JSON data is malformed")
return
}
// the way axios works you need to pass an object that has a key and a value
axios({
url: document.querySelector("[data-url]").value,
method: document.querySelector("[data-method]").value,
params: keyValuePairsToObjects(queryParamsContainer),
headers: keyValuePairsToObjects(requestHeadersContainer),
data, // this comes from above
})
// for catching any error like failed request etc
.catch((e) => e)
// Response JavaScript
.then((response) => {
document
.querySelector("[data-response-section]")
.classList.remove("d-none") //if make response remove d-none class
updateResponseDetails(response)
updateResponseEditor(response.data)
updateResponseHeaders(response.headers)
console.log(response)
})
})
// if we make a request you can see it in the details section of Response
function updateResponseDetails(response) {
document.querySelector("[data-status]").textContent = response.status
document.querySelector("[data-time]").textContent = response.customData.time
// Convert bytes to a human readable string: 1337 → 1.34 kB
document.querySelector("[data-size]").textContent = prettyBytes(
JSON.stringify(response.data).length +
JSON.stringify(response.headers).length
)
}
// if we make a request you can see it in the header section
function updateResponseHeaders(headers) {
responseHeadersContainer.innerHTML = ""
// Object.entries allows us to get an array of all our key value pairs
Object.entries(headers).forEach(([key, value]) => {
const keyElement = document.createElement("div")
keyElement.textContent = key
// append key to responseHeadersContainer
responseHeadersContainer.append(keyElement)
const valueElement = document.createElement("div")
valueElement.textContent = value
// append value to responseHeadersContainer
responseHeadersContainer.append(valueElement)
})
}
function createKeyValuePair() {
const element = keyValueTemplate.content.cloneNode(true)
// get the button and add a event listener
element.querySelector("[data-remove-btn]").addEventListener("click", (e) => {
e.target.closest("[data-key-value-pair]").remove()
})
return element
}
// this function used in axios for changing html to JS
function keyValuePairsToObjects(container) {
const pairs = container.querySelectorAll("[data-key-value-pair]")
// convert this pairs to array bydefault they are nodelist
return [...pairs].reduce((data, pair) => {
const key = pair.querySelector("[data-key]").value
const value = pair.querySelector("[data-value]").value
if (key === "") return data
// if key is not empty we want to take the data spread it out and add a new key value
// pair for the data
return { ...data, [key]: value }
}, {})
}