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

refactor: gql request object and history typing updates

Browse Source
This commit is contained in:
Andrew Bastin
2021-08-24 21:58:04 +05:30
parent c5f8ab3394
commit d1b2539d67
11 changed files with 240 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
newstore/GQLSession.ts
View File

@@ -1,35 +1,32 @@
import { distinctUntilChanged, pluck } from "rxjs/operators"
import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
import { useStream } from "~/helpers/utils/composables"
export type GQLHeader = {
key: string
value: string
active: boolean
}
import {
GQLHeader,
HoppGQLRequest,
makeGQLRequest,
} from "~/helpers/types/HoppGQLRequest"
type GQLSession = {
name: string
url: string
headers: GQLHeader[]
request: HoppGQLRequest
schema: string
query: string
variables: string
response: string
}
export const defaultGQLSession: GQLSession = {
name: "",
url: "https://rickandmortyapi.com/graphql",
headers: [],
schema: "",
query: `query GetCharacter($id: ID!) {
request: makeGQLRequest({
name: "",
url: "https://rickandmortyapi.com/graphql",
headers: [],
variables: `{ "id": "1" }`,
query: `query GetCharacter($id: ID!) {
character(id: $id) {
id
name
}
}`,
variables: `{ "id": "1" }`,
}),
schema: "",
response: "",
}
@@ -37,29 +34,44 @@ const dispatchers = defineDispatchers({
setSession(_: GQLSession, { session }: { session: GQLSession }) {
return session
},
setName(_: GQLSession, { newName }: { newName: string }) {
setName(curr: GQLSession, { newName }: { newName: string }) {
return {
name: newName,
request: {
...curr.request,
name: newName,
},
}
},
setURL(_: GQLSession, { newURL }: { newURL: string }) {
setURL(curr: GQLSession, { newURL }: { newURL: string }) {
return {
url: newURL,
request: {
...curr.request,
url: newURL,
},
}
},
setHeaders(_, { headers }: { headers: GQLHeader[] }) {
setHeaders(curr: GQLSession, { headers }: { headers: GQLHeader[] }) {
return {
headers,
request: {
...curr.request,
headers,
},
}
},
addHeader(curr: GQLSession, { header }: { header: GQLHeader }) {
return {
headers: [...curr.headers, header],
request: {
...curr.request,
headers: [...curr.request.headers, header],
},
}
},
removeHeader(curr: GQLSession, { headerIndex }: { headerIndex: number }) {
return {
headers: curr.headers.filter((_x, i) => i !== headerIndex),
request: {
...curr.request,
headers: curr.request.headers.filter((_x, i) => i !== headerIndex),
},
}
},
updateHeader(
@@ -70,19 +82,28 @@ const dispatchers = defineDispatchers({
}: { headerIndex: number; updatedHeader: GQLHeader }
) {
return {
headers: curr.headers.map((x, i) =>
i === headerIndex ? updatedHeader : x
),
request: {
...curr.request,
headers: curr.request.headers.map((x, i) =>
i === headerIndex ? updatedHeader : x
),
},
}
},
setQuery(_: GQLSession, { newQuery }: { newQuery: string }) {
setQuery(curr: GQLSession, { newQuery }: { newQuery: string }) {
return {
query: newQuery,
request: {
...curr.request,
query: newQuery,
},
}
},
setVariables(_: GQLSession, { newVariables }: { newVariables: string }) {
setVariables(curr: GQLSession, { newVariables }: { newVariables: string }) {
return {
variables: newVariables,
request: {
...curr.request,
variables: newVariables,
},
}
},
setResponse(_: GQLSession, { newResponse }: { newResponse: string }) {
@@ -193,34 +214,32 @@ export function setGQLSession(session: GQLSession) {
}
export function useGQLRequestName() {
return useStream(gqlName$, gqlSessionStore.value.name, (val) => {
return useStream(gqlName$, "", (newName) => {
gqlSessionStore.dispatch({
dispatcher: "setName",
payload: {
newName: val,
},
payload: { newName },
})
})
}
export const gqlName$ = gqlSessionStore.subject$.pipe(
pluck("name"),
pluck("request", "name"),
distinctUntilChanged()
)
export const gqlURL$ = gqlSessionStore.subject$.pipe(
pluck("url"),
pluck("request", "url"),
distinctUntilChanged()
)
export const gqlQuery$ = gqlSessionStore.subject$.pipe(
pluck("query"),
pluck("request", "query"),
distinctUntilChanged()
)
export const gqlVariables$ = gqlSessionStore.subject$.pipe(
pluck("variables"),
pluck("request", "variables"),
distinctUntilChanged()
)
export const gqlHeaders$ = gqlSessionStore.subject$.pipe(
pluck("headers"),
pluck("request", "headers"),
distinctUntilChanged()
)

82
newstore/history.ts
View File

@@ -6,6 +6,10 @@ import {
HoppRESTRequest,
translateToNewRequest,
} from "~/helpers/types/HoppRESTRequest"
import {
HoppGQLRequest,
translateToGQLRequest,
} from "~/helpers/types/HoppGQLRequest"
export type RESTHistoryEntry = {
v: number
@@ -22,7 +26,18 @@ export type RESTHistoryEntry = {
id?: string // For when Firebase Firestore is set
}
export function makeHistoryEntry(
export type GQLHistoryEntry = {
v: number
request: HoppGQLRequest
response: string
star: boolean
id?: string // For when Firestore ID is set
}
export function makeRESTHistoryEntry(
x: Omit<RESTHistoryEntry, "v">
): RESTHistoryEntry {
return {
@@ -31,6 +46,15 @@ export function makeHistoryEntry(
}
}
export function makeGQLHistoryEntry(
x: Omit<GQLHistoryEntry, "v">
): GQLHistoryEntry {
return {
v: 1,
...x,
}
}
export function translateToNewRESTHistory(x: any): RESTHistoryEntry {
if (x.v === 1) return x
@@ -40,15 +64,33 @@ export function translateToNewRESTHistory(x: any): RESTHistoryEntry {
const duration = x.duration ?? null
const statusCode = x.status ?? null
const obj: RESTHistoryEntry = {
v: 1,
const obj: RESTHistoryEntry = makeRESTHistoryEntry({
request,
star,
responseMeta: {
duration,
statusCode,
},
}
})
if (x.id) obj.id = x.id
return obj
}
export function translateToNewGQLHistory(x: any): GQLHistoryEntry {
if (x.v === 1) return x
// Legacy
const request = translateToGQLRequest(x)
const star = x.star ?? false
const response = x.response ?? ""
const obj: GQLHistoryEntry = makeGQLHistoryEntry({
request,
star,
response,
})
if (x.id) obj.id = x.id
@@ -60,7 +102,7 @@ export const defaultRESTHistoryState = {
}
export const defaultGraphqlHistoryState = {
state: [] as any[],
state: [] as GQLHistoryEntry[],
}
export const HISTORY_LIMIT = 50
@@ -114,17 +156,26 @@ const RESTHistoryDispatchers = defineDispatchers({
})
const GQLHistoryDispatchers = defineDispatchers({
setEntries(_: GraphqlHistoryType, { entries }: { entries: any[] }) {
setEntries(
_: GraphqlHistoryType,
{ entries }: { entries: GQLHistoryEntry[] }
) {
return {
state: entries,
}
},
addEntry(currentVal: GraphqlHistoryType, { entry }) {
addEntry(
currentVal: GraphqlHistoryType,
{ entry }: { entry: GQLHistoryEntry }
) {
return {
state: [entry, ...currentVal.state].slice(0, HISTORY_LIMIT),
}
},
deleteEntry(currentVal: GraphqlHistoryType, { entry }) {
deleteEntry(
currentVal: GraphqlHistoryType,
{ entry }: { entry: GQLHistoryEntry }
) {
return {
state: currentVal.state.filter((e) => !eq(e, entry)),
}
@@ -134,7 +185,10 @@ const GQLHistoryDispatchers = defineDispatchers({
state: [],
}
},
toggleStar(currentVal: GraphqlHistoryType, { entry }) {
toggleStar(
currentVal: GraphqlHistoryType,
{ entry }: { entry: GQLHistoryEntry }
) {
return {
state: currentVal.state.map((e) => {
if (eq(e, entry) && e.star !== undefined) {
@@ -197,21 +251,21 @@ export function toggleRESTHistoryEntryStar(entry: RESTHistoryEntry) {
})
}
export function setGraphqlHistoryEntries(entries: any[]) {
export function setGraphqlHistoryEntries(entries: GQLHistoryEntry[]) {
graphqlHistoryStore.dispatch({
dispatcher: "setEntries",
payload: { entries },
})
}
export function addGraphqlHistoryEntry(entry: any) {
export function addGraphqlHistoryEntry(entry: GQLHistoryEntry) {
graphqlHistoryStore.dispatch({
dispatcher: "addEntry",
payload: { entry },
})
}
export function deleteGraphqlHistoryEntry(entry: any) {
export function deleteGraphqlHistoryEntry(entry: GQLHistoryEntry) {
graphqlHistoryStore.dispatch({
dispatcher: "deleteEntry",
payload: { entry },
@@ -225,7 +279,7 @@ export function clearGraphqlHistory() {
})
}
export function toggleGraphqlHistoryEntryStar(entry: any) {
export function toggleGraphqlHistoryEntryStar(entry: GQLHistoryEntry) {
graphqlHistoryStore.dispatch({
dispatcher: "toggleStar",
payload: { entry },
@@ -238,7 +292,7 @@ completedRESTResponse$.subscribe((res) => {
if (res.type === "loading" || res.type === "network_fail") return
addRESTHistoryEntry(
makeHistoryEntry({
makeRESTHistoryEntry({
request: res.req,
responseMeta: {
duration: res.meta.responseDuration,

3
newstore/localpersistence.ts
View File

@@ -17,6 +17,7 @@ import {
setRESTHistoryEntries,
setGraphqlHistoryEntries,
translateToNewRESTHistory,
translateToNewGQLHistory,
} from "./history"
import {
restCollectionStore,
@@ -114,7 +115,7 @@ function setupHistoryPersistence() {
const graphqlHistoryData = JSON.parse(
window.localStorage.getItem("graphqlHistory") || "[]"
)
).map(translateToNewGQLHistory)
setRESTHistoryEntries(restHistoryData)
setGraphqlHistoryEntries(graphqlHistoryData)