Refactor: move api calls to module

src/api.ts

@@ -0,0 +1,32 @@
+import { getExtensionVersion } from './utils'
+
+const API_HOST = 'https://chatgpt4google.com'
+// const API_HOST = 'http://localhost:3000'
+
+export interface PromotionResponse {
+  url: string
+  title?: string
+  text?: string
+  image?: { url: string; size?: number }
+  footer?: { text: string; url: string }
+  label?: { text: string; url: string }
+}
+
+export async function fetchPromotion(): Promise<PromotionResponse | null> {
+  return fetch(`${API_HOST}/api/p`, {
+    headers: {
+      'x-version': getExtensionVersion(),
+    },
+  }).then((r) => r.json())
+}
+
+export async function fetchExtensionConfigs(): Promise<{
+  chatgpt_webapp_model_name: string
+  openai_model_names: string[]
+}> {
+  return fetch(`${API_HOST}/api/config`, {
+    headers: {
+      'x-version': getExtensionVersion(),
+    },
+  }).then((r) => r.json())
+}

src/background/providers/chatgpt.ts

@@ -1,6 +1,6 @@
 import ExpiryMap from 'expiry-map'
 import { v4 as uuidv4 } from 'uuid'
-import { API_HOST } from '../../utils'
+import { fetchExtensionConfigs } from '../../api'
 import { fetchSSE } from '../fetch-sse'
 import { GenerateAnswerParams, Provider } from '../types'
 
@@ -49,8 +49,8 @@ export async function getChatGPTAccessToken(): Promise<string> {
 
 async function fetchModelName() {
   try {
-    const config = await fetch(`${API_HOST}/api/config`).then((r) => r.json())
-    return config.chatgpt_webapp_model_name
+    const configs = await fetchExtensionConfigs()
+    return configs.chatgpt_webapp_model_name
   } catch (err) {
     console.error(err)
     return null

src/content-script/ChatGPTContainer.tsx

@@ -1,10 +1,10 @@
-import { TriggerMode } from '../config'
+import { useState } from 'react'
 import useSWRImmutable from 'swr/immutable'
+import { fetchPromotion } from '../api'
+import { TriggerMode } from '../config'
 import ChatGPTCard from './ChatGPTCard'
-import Promotion from './Promotion'
-import { getPromotion } from './api'
-import { useState } from 'react'
 import { QueryStatus } from './ChatGPTQuery'
+import Promotion from './Promotion'
 
 interface Props {
   question: string
@@ -13,9 +13,11 @@ interface Props {
 
 function ChatGPTContainer(props: Props) {
   const [queryStatus, setQueryStatus] = useState<QueryStatus>()
-  const query = useSWRImmutable(queryStatus === 'success' ? 'promotion' : undefined, getPromotion, {
-    shouldRetryOnError: false,
-  })
+  const query = useSWRImmutable(
+    queryStatus === 'success' ? 'promotion' : undefined,
+    fetchPromotion,
+    { shouldRetryOnError: false },
+  )
   return (
     <>
       <div className="chat-gpt-card">

src/content-script/Promotion.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { captureEvent } from '../analytics'
-import { PromotionResponse } from './api'
+import type { PromotionResponse } from '../api'
 
 interface Props {
   data: PromotionResponse

src/options/ProviderSelect.tsx

@@ -1,17 +1,17 @@
 import { Button, Input, Select, Spinner, Tabs, useInput, useToasts } from '@geist-ui/core'
 import { FC, useCallback, useState } from 'react'
 import useSWR from 'swr'
+import { fetchExtensionConfigs } from '../api'
 import { getProviderConfigs, ProviderConfigs, ProviderType, saveProviderConfigs } from '../config'
-import { API_HOST } from '../utils'
 
 interface ConfigProps {
   config: ProviderConfigs
   models: string[]
 }
 
 async function loadModels(): Promise<string[]> {
-  const config = await fetch(`${API_HOST}/api/config`).then((r) => r.json())
-  return config.openai_model_names
+  const configs = await fetchExtensionConfigs()
+  return configs.openai_model_names
 }
 
 const ConfigPanel: FC<ConfigProps> = ({ config, models }) => {

src/utils.ts

@@ -11,6 +11,3 @@ export function detectSystemColorScheme() {
 export function getExtensionVersion() {
   return Browser.runtime.getManifest().version
 }
-
-export const API_HOST = 'https://chatgpt4google.com'
-// const API_HOST = 'http://localhost:3000'