feat: history migration from legacy request object

components/history/index.vue

@@ -85,7 +85,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   restHistory$,
@@ -101,7 +101,7 @@ import { setRESTRequest } from "~/newstore/RESTSession"
 
 export default defineComponent({
   props: {
-    page: { type: String, default: null },
+    page: { type: String as PropType<"rest" | "graphql">, default: null },
   },
   setup(props) {
     return {

components/history/rest/Card.vue

@@ -7,7 +7,7 @@
       :title="duration"
       @click="$emit('use-entry')"
     >
-      {{ entry.method }}
+      {{ entry.request.method }}
     </span>
     <span
       class="
@@ -24,7 +24,7 @@
       @click="$emit('use-entry')"
     >
       <span class="truncate">
-        {{ `${entry.endpoint}` }}
+        {{ entry.request.endpoint }}
       </span>
     </span>
     <ButtonSecondary
@@ -48,31 +48,53 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  useContext,
+} from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
+import { RESTHistoryEntry } from "~/newstore/history"
 
-export default {
+export default defineComponent({
   props: {
-    entry: { type: Object, default: () => {} },
+    entry: { type: Object as PropType<RESTHistoryEntry>, default: () => {} },
     showMore: Boolean,
   },
-  computed: {
-    duration() {
-      if (this.entry.meta.responseDuration) {
-        const responseDuration = this.entry.meta.responseDuration
+  setup(props) {
+    const {
+      app: { i18n },
+    } = useContext()
+    const $t = i18n.t.bind(i18n)
+
+    const duration = computed(() => {
+      if (props.entry.responseMeta.duration) {
+        const responseDuration = props.entry.responseMeta.duration
+        if (!responseDuration) return ""
+
         return responseDuration > 0
-          ? `${this.$t("request.duration")}: ${responseDuration}ms`
-          : this.$t("error.no_duration")
-      } else return this.$t("error.no_duration")
-    },
-    entryStatus() {
-      const foundStatusGroup = findStatusGroup(this.entry.statusCode)
+          ? `${$t("request.duration").toString()}: ${responseDuration}ms`
+          : $t("error.no_duration").toString()
+      } else return $t("error.no_duration").toString()
+    })
+
+    const entryStatus = computed(() => {
+      const foundStatusGroup = findStatusGroup(
+        props.entry.responseMeta.statusCode
+      )
       return (
         foundStatusGroup || {
           className: "",
         }
       )
-    },
+    })
+
+    return {
+      duration,
+      entryStatus,
+    }
   },
-}
+})
 </script>

helpers/types/HoppRESTRequest.ts

@@ -37,6 +37,7 @@ export type HoppRESTReqBody =
 
 export interface HoppRESTRequest {
   v: string
+  id?: string // Firebase Firestore ID
 
   name: string
   method: string
@@ -85,11 +86,19 @@ export function translateToNewRequest(x: any): HoppRESTRequest {
     // Old format
     const endpoint: string = `${x.url}${x.path}`
 
-    const headers: HoppRESTHeader[] = x.headers
+    const headers: HoppRESTHeader[] = x.headers ?? []
 
     // Remove old keys from params
-    const params: HoppRESTParam[] = (x.params as any[]).map(
-      ({ key, value, active }) => ({
+    const params: HoppRESTParam[] = (x.params ?? []).map(
+      ({
+        key,
+        value,
+        active,
+      }: {
+        key: string
+        value: string
+        active: boolean
+      }) => ({
         key,
         value,
         active,
@@ -117,6 +126,7 @@ export function translateToNewRequest(x: any): HoppRESTRequest {
       body,
       auth,
       v: RESTReqSchemaVersion,
+      id: x.id, // Pass-through Firebase Firestore ID
     }
 
     return result

newstore/history.ts

@@ -2,9 +2,46 @@ import eq from "lodash/eq"
 import { pluck } from "rxjs/operators"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import { completedRESTResponse$ } from "./RESTSession"
+import {
+  HoppRESTRequest,
+  translateToNewRequest,
+} from "~/helpers/types/HoppRESTRequest"
+
+export type RESTHistoryEntry = {
+  request: HoppRESTRequest
+
+  responseMeta: {
+    duration: number | null
+    statusCode: number | null
+  }
+
+  star: boolean
+
+  id?: string // For when Firebase Firestore is set
+}
+
+export function translateToNewRESTHistory(x: any): RESTHistoryEntry {
+  const request = translateToNewRequest(x)
+  const star = x.star ?? false
+  const duration = x.duration ?? null
+  const statusCode = x.status ?? null
+
+  const obj: RESTHistoryEntry = {
+    request,
+    star,
+    responseMeta: {
+      duration,
+      statusCode,
+    },
+  }
+
+  if (x.id) obj.id = x.id
+
+  return obj
+}
 
 export const defaultRESTHistoryState = {
-  state: [] as any[],
+  state: [] as RESTHistoryEntry[],
 }
 
 export const defaultGraphqlHistoryState = {
@@ -16,21 +53,24 @@ export const HISTORY_LIMIT = 50
 type RESTHistoryType = typeof defaultRESTHistoryState
 type GraphqlHistoryType = typeof defaultGraphqlHistoryState
 
-const HistoryDispatcher = defineDispatchers({
-  setEntries(
-    _: RESTHistoryType | GraphqlHistoryType,
-    { entries }: { entries: any[] }
-  ) {
+const RESTHistoryDispatchers = defineDispatchers({
+  setEntries(_: RESTHistoryType, { entries }: { entries: RESTHistoryEntry[] }) {
     return {
       state: entries,
     }
   },
-  addEntry(currentVal: RESTHistoryType | GraphqlHistoryType, { entry }) {
+  addEntry(
+    currentVal: RESTHistoryType,
+    { entry }: { entry: RESTHistoryEntry }
+  ) {
     return {
       state: [entry, ...currentVal.state].slice(0, HISTORY_LIMIT),
     }
   },
-  deleteEntry(currentVal: RESTHistoryType | GraphqlHistoryType, { entry }) {
+  deleteEntry(
+    currentVal: RESTHistoryType,
+    { entry }: { entry: RESTHistoryEntry }
+  ) {
     return {
       state: currentVal.state.filter((e) => !eq(e, entry)),
     }
@@ -40,7 +80,46 @@ const HistoryDispatcher = defineDispatchers({
       state: [],
     }
   },
-  toggleStar(currentVal: RESTHistoryType | GraphqlHistoryType, { entry }) {
+  toggleStar(
+    currentVal: RESTHistoryType,
+    { entry }: { entry: RESTHistoryEntry }
+  ) {
+    return {
+      state: currentVal.state.map((e) => {
+        if (eq(e, entry) && e.star !== undefined) {
+          return {
+            ...e,
+            star: !e.star,
+          }
+        }
+        return e
+      }),
+    }
+  },
+})
+
+const GQLHistoryDispatchers = defineDispatchers({
+  setEntries(_: GraphqlHistoryType, { entries }: { entries: any[] }) {
+    return {
+      state: entries,
+    }
+  },
+  addEntry(currentVal: GraphqlHistoryType, { entry }) {
+    return {
+      state: [entry, ...currentVal.state].slice(0, HISTORY_LIMIT),
+    }
+  },
+  deleteEntry(currentVal: GraphqlHistoryType, { entry }) {
+    return {
+      state: currentVal.state.filter((e) => !eq(e, entry)),
+    }
+  },
+  clearHistory() {
+    return {
+      state: [],
+    }
+  },
+  toggleStar(currentVal: GraphqlHistoryType, { entry }) {
     return {
       state: currentVal.state.map((e) => {
         if (eq(e, entry) && e.star !== undefined) {
@@ -57,32 +136,32 @@ const HistoryDispatcher = defineDispatchers({
 
 export const restHistoryStore = new DispatchingStore(
   defaultRESTHistoryState,
-  HistoryDispatcher
+  RESTHistoryDispatchers
 )
 
 export const graphqlHistoryStore = new DispatchingStore(
   defaultGraphqlHistoryState,
-  HistoryDispatcher
+  GQLHistoryDispatchers
 )
 
 export const restHistory$ = restHistoryStore.subject$.pipe(pluck("state"))
 export const graphqlHistory$ = graphqlHistoryStore.subject$.pipe(pluck("state"))
 
-export function setRESTHistoryEntries(entries: any[]) {
+export function setRESTHistoryEntries(entries: RESTHistoryEntry[]) {
   restHistoryStore.dispatch({
     dispatcher: "setEntries",
     payload: { entries },
   })
 }
 
-export function addRESTHistoryEntry(entry: any) {
+export function addRESTHistoryEntry(entry: RESTHistoryEntry) {
   restHistoryStore.dispatch({
     dispatcher: "addEntry",
     payload: { entry },
   })
 }
 
-export function deleteRESTHistoryEntry(entry: any) {
+export function deleteRESTHistoryEntry(entry: RESTHistoryEntry) {
   restHistoryStore.dispatch({
     dispatcher: "deleteEntry",
     payload: { entry },
@@ -96,7 +175,7 @@ export function clearRESTHistory() {
   })
 }
 
-export function toggleRESTHistoryEntryStar(entry: any) {
+export function toggleRESTHistoryEntryStar(entry: RESTHistoryEntry) {
   restHistoryStore.dispatch({
     dispatcher: "toggleStar",
     payload: { entry },
@@ -144,10 +223,11 @@ completedRESTResponse$.subscribe((res) => {
     if (res.type === "loading" || res.type === "network_fail") return
 
     addRESTHistoryEntry({
-      ...res.req,
-      type: res.type,
-      meta: res.meta,
-      statusCode: res.statusCode,
+      request: res.req,
+      responseMeta: {
+        duration: res.meta.responseDuration,
+        statusCode: res.statusCode,
+      },
       star: false,
     })
   }

newstore/localpersistence.ts

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

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "hoppscotch",
       "version": "1.12.0",
       "dependencies": {
         "@apollo/client": "^3.4.8",