rename interface

src/containers/NetworkPanel/NetworkDetails/index.tsx

@@ -1,19 +1,19 @@
-import { useMemo } from "react"
-import { Tabs } from "@/components/Tabs"
-import { INetworkRequest } from "@/helpers/networkHelpers"
-import { HeaderView } from "../HeaderView"
-import { RequestView, RequestViewFooter } from "./RequestView"
-import { ResponseView } from "./ResponseView"
-import { TracingView } from "./TracingView"
-import { ResponseRawView } from "./ResponseRawView"
-import { useNetworkTabs } from "@/hooks/useNetworkTabs"
-import { CloseButton } from "@/components/CloseButton"
-import { useApolloTracing } from "@/hooks/useApolloTracing"
-import { useToggle } from "@/hooks/useToggle"
-import { useShareMessage } from "../../../hooks/useShareMessage"
+import { useMemo } from 'react'
+import { Tabs } from '@/components/Tabs'
+import { ICompleteNetworkRequest } from '@/helpers/networkHelpers'
+import { HeaderView } from '../HeaderView'
+import { RequestView, RequestViewFooter } from './RequestView'
+import { ResponseView } from './ResponseView'
+import { TracingView } from './TracingView'
+import { ResponseRawView } from './ResponseRawView'
+import { useNetworkTabs } from '@/hooks/useNetworkTabs'
+import { CloseButton } from '@/components/CloseButton'
+import { useApolloTracing } from '@/hooks/useApolloTracing'
+import { useToggle } from '@/hooks/useToggle'
+import { useShareMessage } from '../../../hooks/useShareMessage'
 
 export interface INetworkDetailsProps {
-  data: INetworkRequest
+  data: ICompleteNetworkRequest
   onClose: () => void
 }
 
@@ -30,7 +30,7 @@ export const NetworkDetails = (props: INetworkDetailsProps) => {
   const { shareNetworkRequest } = useShareMessage()
   const operation = data.request.primaryOperation.operation
   const isShareable = useMemo(
-    () => ["query", "mutation"].includes(operation),
+    () => ['query', 'mutation'].includes(operation),
     [operation]
   )
 
@@ -50,8 +50,8 @@ export const NetworkDetails = (props: INetworkDetailsProps) => {
       }
       tabs={[
         {
-          id: "headers",
-          title: "Headers",
+          id: 'headers',
+          title: 'Headers',
           component: (
             <HeaderView
               requestHeaders={requestHeaders}
@@ -60,8 +60,8 @@ export const NetworkDetails = (props: INetworkDetailsProps) => {
           ),
         },
         {
-          id: "request",
-          title: "Request",
+          id: 'request',
+          title: 'Request',
           component: (
             <RequestView
               onShare={isShareable ? handleShare : undefined}
@@ -77,8 +77,8 @@ export const NetworkDetails = (props: INetworkDetailsProps) => {
           ),
         },
         {
-          id: "response",
-          title: "Response",
+          id: 'response',
+          title: 'Response',
           component: (
             <ResponseView
               onShare={isShareable ? handleShare : undefined}
@@ -88,8 +88,8 @@ export const NetworkDetails = (props: INetworkDetailsProps) => {
           ),
         },
         {
-          id: "response-raw",
-          title: "Response (Raw)",
+          id: 'response-raw',
+          title: 'Response (Raw)',
           component: (
             <ResponseRawView
               onShare={isShareable ? handleShare : undefined}
@@ -100,8 +100,8 @@ export const NetworkDetails = (props: INetworkDetailsProps) => {
         ...(tracing
           ? [
               {
-                id: "tracing",
-                title: "Tracing",
+                id: 'tracing',
+                title: 'Tracing',
                 component: <TracingView response={responseBody} />,
               },
             ]

src/containers/NetworkPanel/index.tsx

@@ -3,7 +3,7 @@ import RegexParser from 'regex-parser'
 import { SplitPaneLayout } from '@/components/Layout'
 import { onNavigate } from '@/services/networkMonitor'
 import { IWebSocketNetworkRequest } from '@/hooks/useWebSocketNetworkMonitor'
-import { INetworkRequest } from '@/helpers/networkHelpers'
+import { ICompleteNetworkRequest } from '@/helpers/networkHelpers'
 import { NetworkTable, INetworkTableDataRow } from './NetworkTable'
 import { NetworkDetails } from './NetworkDetails'
 import { Toolbar } from '../Toolbar'
@@ -18,7 +18,7 @@ import { IClearWebRequestsOptions } from '../../hooks/useNetworkMonitor'
 interface NetworkPanelProps {
   selectedRowId: string | number | null
   setSelectedRowId: (selectedRowId: string | number | null) => void
-  networkRequests: INetworkRequest[]
+  networkRequests: ICompleteNetworkRequest[]
   webSocketNetworkRequests: IWebSocketNetworkRequest[]
   clearWebRequests: (opts?: IClearWebRequestsOptions) => void
 }
@@ -35,14 +35,14 @@ const getRegex = (str: string) => {
 }
 
 const filterNetworkRequests = (
-  networkRequests: INetworkRequest[],
+  networkRequests: ICompleteNetworkRequest[],
   filterValue: string,
   options: {
     isInverted: boolean
     isRegex: boolean
     operationFilters: IOperationFilters
   }
-): { results: INetworkRequest[]; errorMessage?: string } => {
+): { results: ICompleteNetworkRequest[]; errorMessage?: string } => {
   const regexResult =
     options.isRegex && filterValue ? getRegex(filterValue) : null
   if (regexResult?.errorMessage) {

src/containers/SearchPanel/index.tsx

@@ -1,16 +1,16 @@
-import { useMemo } from "react"
-import { INetworkRequest } from "@/helpers/networkHelpers"
-import { useSearch } from "@/hooks/useSearch"
-import { NetworkTabs } from "@/hooks/useNetworkTabs"
-import { getSearchResults, ISearchResult } from "@/services/searchService"
-import { SearchResults } from "./SearchResults"
-import { Header } from "@/components/Header"
-import { CloseButton } from "@/components/CloseButton"
-import { SearchInput } from "@/components/SearchInput"
-import { IWebSocketNetworkRequest } from "@/hooks/useWebSocketNetworkMonitor"
+import { useMemo } from 'react'
+import { ICompleteNetworkRequest } from '@/helpers/networkHelpers'
+import { useSearch } from '@/hooks/useSearch'
+import { NetworkTabs } from '@/hooks/useNetworkTabs'
+import { getSearchResults, ISearchResult } from '@/services/searchService'
+import { SearchResults } from './SearchResults'
+import { Header } from '@/components/Header'
+import { CloseButton } from '@/components/CloseButton'
+import { SearchInput } from '@/components/SearchInput'
+import { IWebSocketNetworkRequest } from '@/hooks/useWebSocketNetworkMonitor'
 
 interface ISearchPanelProps {
-  networkRequests: INetworkRequest[]
+  networkRequests: ICompleteNetworkRequest[]
   webSocketNetworkRequests: IWebSocketNetworkRequest[]
   onResultClick: (
     searchResult: ISearchResult,
@@ -39,7 +39,7 @@ export const SearchPanel = (props: ISearchPanelProps) => {
           />
         }
       >
-        <div className="flex items-center pl-2" style={{ height: "3.5rem" }}>
+        <div className="flex items-center pl-2" style={{ height: '3.5rem' }}>
           <h2 className="font-bold">Search</h2>
         </div>
       </Header>

src/helpers/getSearchContent.ts

@@ -1,34 +1,34 @@
-import { stringify } from "./safeJson"
-import { IHeader, INetworkRequest } from "@/helpers/networkHelpers"
+import { stringify } from './safeJson'
+import { IHeader, ICompleteNetworkRequest } from '@/helpers/networkHelpers'
 
 const stringifyHeaders = (headers: IHeader[] = []) => {
   return headers
     .map((header) => {
       return `${header.name}: ${header.value}`
     })
-    .join(", ")
+    .join(', ')
 }
 
 export const getHeaderSearchContent = (
-  networkRequest: INetworkRequest
+  networkRequest: ICompleteNetworkRequest
 ): string => {
   const requestHeaderText = stringifyHeaders(networkRequest.request.headers)
   const responseHeaderText = stringifyHeaders(networkRequest.response?.headers)
-  return [requestHeaderText, responseHeaderText].join(", ")
+  return [requestHeaderText, responseHeaderText].join(', ')
 }
 
 export const getRequestSearchContent = (
-  networkRequest: INetworkRequest
+  networkRequest: ICompleteNetworkRequest
 ): string => {
   return networkRequest.request.body
     .map((body) => {
-      return body.query + " " + stringify(body.variables)
+      return body.query + ' ' + stringify(body.variables)
     })
-    .join(", ")
+    .join(', ')
 }
 
 export const getResponseSearchContent = (
-  networkRequest: INetworkRequest
+  networkRequest: ICompleteNetworkRequest
 ): string => {
-  return networkRequest.response?.body || ""
+  return networkRequest.response?.body || ''
 }

src/helpers/networkHelpers.ts

@@ -8,7 +8,7 @@ export interface IHeader {
   value?: string
 }
 
-export interface INetworkRequest {
+export interface ICompleteNetworkRequest {
   id: string
   status: number
   url: string
@@ -39,8 +39,8 @@ export interface INetworkRequest {
  * and populated before we output from the useNetworkMonitor hook.
  * */
 export interface IIncompleteNetworkRequest
-  extends Omit<INetworkRequest, 'request'> {
-  request?: Partial<INetworkRequest['request']>
+  extends Omit<ICompleteNetworkRequest, 'request'> {
+  request?: Partial<ICompleteNetworkRequest['request']>
 }
 
 /**
@@ -74,7 +74,7 @@ const isNetworkRequest = (
  */
 export const isRequestComplete = (
   networkRequest: IIncompleteNetworkRequest
-): networkRequest is INetworkRequest => {
+): networkRequest is ICompleteNetworkRequest => {
   return (
     networkRequest.request !== undefined &&
     networkRequest.request.headers !== undefined &&