btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: wire remaining request actions

Browse Source
This commit is contained in:
liyasthomas
2021-07-25 11:15:53 +05:30
parent 4508e309c2
commit 56c2e1094d
10 changed files with 122 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/app/Shortcuts.vue
View File

@@ -8,6 +8,7 @@
flex
p-2
top-0
z-10
items-center
sticky
justify-between

2
components/app/SlideOver.vue
View File

@@ -10,7 +10,7 @@
>
<div
v-show="show"
class="inset-0 transition-opacity z-10 fixed"
class="inset-0 transition-opacity z-20 fixed"
@keydown.esc="close()"
>
<div

24
components/collections/SaveRequest.vue
View File

@@ -11,10 +11,9 @@
</label>
<input
id="selectLabelSaveReq"
v-model="requestData.name"
v-model="requestName"
class="input"
type="text"
@keyup.enter="saveRequestAs"
/>
<label class="font-semibold text-xs px-4 pt-4 pb-4">
Select Location
@@ -47,6 +46,7 @@
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
import * as teamUtils from "~/helpers/teams/utils"
import {
saveRESTRequestAs,
@@ -54,20 +54,23 @@ import {
editGraphqlRequest,
saveGraphqlRequestAs,
} from "~/newstore/collections"
import { getRESTRequest, useRESTRequestName } from "~/newstore/RESTSession"
export default {
export default defineComponent({
props: {
// mode can be either "graphql" or "rest"
mode: { type: String, default: "rest" },
show: Boolean,
editingRequest: { type: Object, default: () => {} },
},
setup() {
return {
requestName: useRESTRequestName(),
}
},
data() {
return {
defaultRequestName: "Untitled Request",
path: "Path will appear here",
requestData: {
name: undefined,
name: this.requestName,
collectionIndex: undefined,
folderName: undefined,
requestIndex: undefined,
@@ -114,10 +117,7 @@ export default {
return
}
const requestUpdated = {
...this.$props.editingRequest,
name: this.$data.requestData.name,
}
const requestUpdated = getRESTRequest()
// Filter out all REST file inputs
if (this.mode === "rest" && requestUpdated.bodyParams) {
@@ -180,5 +180,5 @@ export default {
this.$emit("hide-modal")
},
},
}
})
</script>

5
components/collections/my/Request.vue
View File

@@ -109,6 +109,8 @@
</template>
<script>
import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
import { setRESTRequest } from "~/newstore/RESTSession"
export default {
props: {
request: { type: Object, default: () => {} },
@@ -158,8 +160,7 @@ export default {
requestIndex: this.requestIndex,
},
})
else
this.$store.commit("postwoman/selectRequest", { request: this.request })
else setRESTRequest(translateToNewRequest(this.request))
},
dragStart({ dataTransfer }) {
this.dragging = !this.dragging

5
components/collections/teams/Request.vue
View File

@@ -102,6 +102,8 @@
</template>
<script>
import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
import { setRESTRequest } from "~/newstore/RESTSession"
export default {
props: {
request: { type: Object, default: () => {} },
@@ -145,8 +147,7 @@ export default {
requestID: this.requestIndex,
},
})
else
this.$store.commit("postwoman/selectRequest", { request: this.request })
else setRESTRequest(translateToNewRequest(this.request))
},
removeRequest() {
this.$emit("remove-request", {

1
components/http/ImportCurl.vue
View File

@@ -102,6 +102,7 @@ export default defineComponent({
setRESTRequest(
makeRESTRequest({
name: "Untitled request",
endpoint,
method,
params,

53
components/http/Request.vue
View File

@@ -116,7 +116,7 @@
:label="$t('clear_all')"
icon="clear_all"
@click.native="
clearContent('', $event)
clearContent()
$refs.sendOptions.tippy().hide()
"
/>
@@ -127,7 +127,7 @@
:label="$t('save')"
:shortcut="[getSpecialKey(), 'S']"
outline
@click.native="newSendRequest"
@click.native="showSaveRequestModal = true"
/>
<span class="inline-flex">
<tippy
@@ -147,7 +147,7 @@
</template>
<input
id="request-name"
v-model="name"
v-model="requestName"
:placeholder="$t('request_name')"
name="request-name"
type="text"
@@ -167,7 +167,7 @@
:label="$t('save_to_collections')"
icon="create_new_folder"
@click.native="
saveRequest()
showSaveRequestModal = true
$refs.saveOptions.tippy().hide()
"
/>
@@ -182,21 +182,34 @@
:show="showCodegenModal"
@hide-modal="showCodegenModal = false"
/>
<CollectionsSaveRequest
mode="rest"
:show="showSaveRequestModal"
@hide-modal="showSaveRequestModal = false"
/>
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
import {
updateRESTResponse,
restEndpoint$,
setRESTEndpoint,
restMethod$,
updateRESTMethod,
resetRESTRequest,
useRESTRequestName,
} from "~/newstore/RESTSession"
import { getPlatformSpecialKey } from "~/helpers/platformutils"
import { runRESTRequest$ } from "~/helpers/RequestRunner"
export default {
export default defineComponent({
setup() {
return {
requestName: useRESTRequestName(),
}
},
data() {
return {
newMethod$: "",
@@ -218,6 +231,7 @@ export default {
showCodegenModal: false,
navigatorShare: navigator.share,
loading: false,
showSaveRequestModal: false,
}
},
subscriptions() {
@@ -252,6 +266,33 @@ export default {
}
)
},
copyRequest() {
if (navigator.share) {
const time = new Date().toLocaleTimeString()
const date = new Date().toLocaleDateString()
navigator
.share({
title: "Hoppscotch",
text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
url: window.location.href,
})
.then(() => {})
.catch(() => {})
} else {
const dummy = document.createElement("input")
document.body.appendChild(dummy)
dummy.value = window.location.href
dummy.select()
document.execCommand("copy")
document.body.removeChild(dummy)
this.$toast.info(this.$t("copied_to_clipboard"), {
icon: "done",
})
}
},
clearContent() {
resetRESTRequest()
},
},
}
})
</script>

3
helpers/types/HoppRESTRequest.ts
View File

@@ -23,6 +23,7 @@ export type HoppRESTReqBody = {
export interface HoppRESTRequest {
v: string
name: string
method: string
endpoint: string
params: HoppRESTParam[]
@@ -80,6 +81,7 @@ export function translateToNewRequest(x: any): HoppRESTRequest {
})
)
const name = x.name
const method = x.method
const preRequestScript = x.preRequestScript
@@ -88,6 +90,7 @@ export function translateToNewRequest(x: any): HoppRESTRequest {
const body = parseRequestBody(x)
const result: HoppRESTRequest = {
name,
endpoint,
headers,
params,

65
newstore/RESTSession.ts
View File

@@ -119,21 +119,24 @@ type RESTSession = {
testResults: HoppTestResult | null
}
const defaultRESTSession: RESTSession = {
request: {
v: RESTReqSchemaVersion,
endpoint: "https://httpbin.org/get",
params: [],
headers: [],
method: "GET",
preRequestScript: "// pw.env.set('variable', 'value');",
testScript: "// pw.expect('variable').toBe('value');",
body: {
contentType: "application/json",
body: "",
isRaw: false,
},
const defaultRESTRequest: HoppRESTRequest = {
v: RESTReqSchemaVersion,
endpoint: "https://httpbin.org/get",
name: "Untitled request",
params: [],
headers: [],
method: "GET",
preRequestScript: "// pw.env.set('variable', 'value');",
testScript: "// pw.expect('variable').toBe('value');",
body: {
contentType: "application/json",
body: "",
isRaw: false,
},
}
const defaultRESTSession: RESTSession = {
request: defaultRESTRequest,
response: null,
testResults: null,
}
@@ -144,6 +147,14 @@ const dispatchers = defineDispatchers({
request: req,
}
},
setRequestName(curr: RESTSession, { newName }: { newName: string }) {
return {
request: {
...curr.request,
name: newName,
},
}
},
setEndpoint(curr: RESTSession, { newEndpoint }: { newEndpoint: string }) {
const paramsInNewURL = getParamsInURL(newEndpoint)
const updatedParams = recalculateParams(
@@ -362,6 +373,10 @@ export function setRESTRequest(req: HoppRESTRequest) {
})
}
export function resetRESTRequest() {
setRESTRequest(defaultRESTRequest)
}
export function setRESTEndpoint(newEndpoint: string) {
restSessionStore.dispatch({
dispatcher: "setEndpoint",
@@ -371,6 +386,15 @@ export function setRESTEndpoint(newEndpoint: string) {
})
}
export function setRESTRequestName(newName: string) {
restSessionStore.dispatch({
dispatcher: "setRequestName",
payload: {
newName,
},
})
}
export function addRESTParam(newParam: HoppRESTParam) {
restSessionStore.dispatch({
dispatcher: "addParam",
@@ -507,6 +531,11 @@ export const restRequest$ = restSessionStore.subject$.pipe(
distinctUntilChanged()
)
export const restRequestName$ = restRequest$.pipe(
pluck("name"),
distinctUntilChanged()
)
export const restEndpoint$ = restSessionStore.subject$.pipe(
pluck("request", "endpoint"),
distinctUntilChanged()
@@ -608,3 +637,11 @@ export function useRESTRequestBody(): Ref<HoppRESTReqBody> {
setRESTReqBody
)
}
export function useRESTRequestName(): Ref<string> {
return useStream(
restRequestName$,
restSessionStore.value.request.name,
setRESTRequestName
)
}

66
pages/index.vue
View File

@@ -287,13 +287,6 @@
</Pane>
</Splitpanes>
<CollectionsSaveRequest
mode="rest"
:show="showSaveRequestModal"
@hide-modal="hideRequestModal"
:editing-request="editRequest"
/>
<HttpTokenList
:show="showTokenListModal"
:tokens="tokens"
@@ -449,7 +442,6 @@ export default defineComponent({
showTokenListModal: false,
showTokenRequest: false,
showTokenRequestList: false,
showSaveRequestModal: false,
editRequest: {},
files: [],
filenames: "",
@@ -1291,35 +1283,6 @@ export default defineComponent({
},
})
},
copyRequest() {
if (navigator.share) {
const time = new Date().toLocaleTimeString()
const date = new Date().toLocaleDateString()
navigator
.share({
title: "Hoppscotch",
text: `Hoppscotch • Open source API development ecosystem at ${time} on ${date}`,
url: window.location.href,
})
.then(() => {})
.catch(() => {})
} else {
const dummy = document.createElement("input")
document.body.appendChild(dummy)
dummy.value = window.location.href
dummy.select()
document.execCommand("copy")
document.body.removeChild(dummy)
this.$refs.copyRequest.innerHTML = this.doneButton
this.$toast.info(this.$t("copied_to_clipboard"), {
icon: "done",
})
setTimeout(
() => (this.$refs.copyRequest.innerHTML = this.copyButton),
1000
)
}
},
setRouteQueryState() {
const flat = (key) => (this[key] !== "" ? `${key}=${this[key]}&` : "")
const deep = (key) => {
@@ -1448,35 +1411,6 @@ export default defineComponent({
1000
)
},
saveRequest() {
let urlAndPath = parseUrlAndPath(this.uri)
this.editRequest = {
url: decodeURI(urlAndPath.url),
path: decodeURI(urlAndPath.path),
method: this.method,
auth: this.auth,
httpUser: this.httpUser,
httpPassword: this.httpPassword,
passwordFieldType: this.passwordFieldType,
bearerToken: this.bearerToken,
headers: this.headers,
params: this.params,
bodyParams: this.bodyParams,
rawParams: this.rawParams,
rawInput: this.rawInput,
contentType: this.contentType,
requestType: this.requestType,
preRequestScript:
this.showPreRequestScript == true ? this.preRequestScript : null,
testScript: this.testScript,
name: this.requestName,
}
this.showSaveRequestModal = true
},
hideRequestModal() {
this.showSaveRequestModal = false
this.editRequest = {}
},
setExclude(excludedField, excluded) {
const update = clone(this.URL_EXCLUDES)