refactor: implement updated equality heuristics for hopprestrequest struct

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -162,8 +162,8 @@ import {
   HoppRESTRequest,
   safelyExtractRESTRequest,
   translateToNewRequest,
+  isEqualHoppRESTRequest,
 } from "@hoppscotch/data"
-import isEqual from "lodash/isEqual"
 import * as E from "fp-ts/Either"
 import {
   useI18n,
@@ -349,9 +349,9 @@ const selectRequest = () => {
     const currentFullReq = getRESTRequest()
 
     // Check if whether user clicked the same request or not
-    if (!isActive.value) {
+    if (!isActive.value && currentReqWithNoChange !== undefined) {
       // Check if there is any changes done on the current request
-      if (isEqual(currentReqWithNoChange, currentFullReq)) {
+      if (isEqualHoppRESTRequest(currentReqWithNoChange, currentFullReq)) {
         setRestReq(props.request)
         if (props.saveRequest)
           emit("select", {

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -157,11 +157,11 @@
 import { ref, computed } from "@nuxtjs/composition-api"
 import {
   HoppRESTRequest,
+  isEqualHoppRESTRequest,
   safelyExtractRESTRequest,
   translateToNewRequest,
 } from "@hoppscotch/data"
 import * as E from "fp-ts/Either"
-import isEqual from "lodash/isEqual"
 import {
   useI18n,
   useToast,
@@ -277,8 +277,7 @@ const isActive = computed(
   () =>
     active.value &&
     active.value.originLocation === "team-collection" &&
-    active.value.requestID === props.requestIndex &&
-    isEqual(active.value.req, props.request)
+    active.value.requestID === props.requestIndex
 )
 
 const dragStart = ({ dataTransfer }: DragEvent) => {
@@ -333,9 +332,9 @@ const selectRequest = () => {
     const currentFullReq = getRESTRequest()
 
     // Check if whether user clicked the same request or not
-    if (!isActive.value) {
+    if (!isActive.value && currentReqWithNoChange) {
       // Check if there is any changes done on the current request
-      if (isEqual(currentReqWithNoChange, currentFullReq)) {
+      if (isEqualHoppRESTRequest(currentReqWithNoChange, currentFullReq)) {
         setRestReq(props.request)
         if (props.saveRequest)
           emit("select", {

packages/hoppscotch-app/components/history/index.vue

@@ -113,13 +113,16 @@
 
 <script setup lang="ts">
 import { computed, ref, Ref } from "@nuxtjs/composition-api"
-import { HoppRESTRequest, safelyExtractRESTRequest } from "@hoppscotch/data"
+import {
+  HoppRESTRequest,
+  isEqualHoppRESTRequest,
+  safelyExtractRESTRequest,
+} from "@hoppscotch/data"
 import groupBy from "lodash/groupBy"
 import { useTimeAgo } from "@vueuse/core"
 import { pipe } from "fp-ts/function"
 import * as A from "fp-ts/Array"
 import * as E from "fp-ts/Either"
-import isEqual from "lodash/isEqual"
 import {
   useI18n,
   useReadonlyStream,
@@ -231,7 +234,9 @@ const setRestReq = (request: HoppRESTRequest | null | undefined) => {
   setRESTRequest(safelyExtractRESTRequest(request, getDefaultRESTRequest()))
 }
 
-const useHistory = (entry: HistoryEntry) => {
+// NOTE: For GQL, the HistoryGraphqlCard component already implements useEntry
+// (That is not a really good behaviour tho ¯\_(ツ)_/¯)
+const useHistory = (entry: RESTHistoryEntry) => {
   const currentFullReq = getRESTRequest()
   // Initial state trigers a popup
   if (!clickedHistory.value) {
@@ -240,7 +245,12 @@ const useHistory = (entry: HistoryEntry) => {
     return
   }
   // Checks if there are any change done in current request and the history request
-  if (!isEqual(currentFullReq, clickedHistory.value.request)) {
+  if (
+    !isEqualHoppRESTRequest(
+      currentFullReq,
+      clickedHistory.value.request as HoppRESTRequest
+    )
+  ) {
     clickedHistory.value = entry
     confirmChange.value = true
   } else {
@@ -342,7 +352,7 @@ const deleteHistory = (entry: HistoryEntry) => {
 }
 
 const toggleStar = (entry: HistoryEntry) => {
-  //History entry type specified because function does not know the type
+  // History entry type specified because function does not know the type
   if (props.page === "rest")
     toggleRESTHistoryEntryStar(entry as RESTHistoryEntry)
   else toggleGraphqlHistoryEntryStar(entry as GQLHistoryEntry)

packages/hoppscotch-app/package.json

@@ -58,7 +58,7 @@
     "@codemirror/tooltip": "^0.19.16",
     "@codemirror/view": "^0.19.48",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^0.1.0",
-    "@hoppscotch/data": "workspace:^0.4.0",
+    "@hoppscotch/data": "workspace:^0.4.2",
     "@hoppscotch/js-sandbox": "workspace:^2.0.0",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/composition-api": "^0.32.0",

packages/hoppscotch-app/pages/index.vue

@@ -25,11 +25,11 @@ import {
   watch,
 } from "@nuxtjs/composition-api"
 import { Subscription } from "rxjs"
-import isEqual from "lodash/isEqual"
 import {
   HoppRESTRequest,
   HoppRESTAuthOAuth2,
   safelyExtractRESTRequest,
+  isEqualHoppRESTRequest,
 } from "@hoppscotch/data"
 import {
   getRESTRequest,
@@ -102,8 +102,7 @@ function setupRequestSync(
     ) {
       const request = await loadRequestFromSync()
       if (request) {
-        // setRESTRequest(request)
-        if (!isEqual(request, getRESTRequest())) {
+        if (!isEqualHoppRESTRequest(request, getRESTRequest())) {
           requestForSync.value = request
           confirmSync.value = true
         }