feat: support caching of query results

Author: ifyour

package.json

@@ -38,7 +38,9 @@
   ],
   "dependencies": {
     "@raycast/api": "^1.48.9",
+    "@types/lodash": "^4.14.191",
     "change-case": "^4.1.2",
+    "lodash": "^4.17.21",
     "node-fetch": "^3.3.1"
   },
   "devDependencies": {

src/constants.ts

@@ -1,3 +1,8 @@
+/**
+ * The unique key for LocalStorage
+ */
+export const CODE_VAR_HISTORY = "CODE_VAR_HISTORY";
+
 /**
  * Turn on the type of query needed on demand
  */

src/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+import { debounce } from "lodash";
 import { Action, ActionPanel, List, Icon, Clipboard, showToast, Toast } from "@raycast/api";
+import { queryVariableNames, getHistory, deleteAllHistory, deleteHistoryItem } from "./useQuery";
 import type { Result } from "./types";
-import { queryVariableNames } from "./useQuery";
 
 export default function Command() {
   const cancelRef = React.useRef<AbortController | null>(null);
@@ -14,12 +15,19 @@ export default function Command() {
     };
   }, []);
 
-  const onSearchTextChange = async (searchContent: string) => {
+  const onSearchTextChange = async (text: string) => {
     cancelRef.current?.abort();
+    const searchContent = text.trim();
     if (!searchContent) {
       setVariableNames([]);
       return;
     }
+    const cache = await getHistory(searchContent);
+    if (cache.length > 0) {
+      setVariableNames(cache);
+      setLoading(false);
+      return;
+    }
     cancelRef.current = new AbortController();
     try {
       setLoading(true);
@@ -41,16 +49,15 @@ export default function Command() {
   return (
     <List
       isLoading={loading}
-      onSearchTextChange={onSearchTextChange}
+      onSearchTextChange={debounce(onSearchTextChange, 500, { trailing: true })}
       searchBarPlaceholder="Please enter variable name"
-      throttle
     >
       {variableNames.map((variableName) => (
         <List.Item
           key={variableName.type}
           title={variableName.value}
           subtitle={variableName.type}
-          icon={Icon.Stars}
+          icon={variableName.query ? Icon.Clock : Icon.Stars}
           actions={
             <ActionPanel>
               <ActionPanel.Section>
@@ -61,6 +68,26 @@ export default function Command() {
                   icon={{ source: Icon.CopyClipboard }}
                 />
               </ActionPanel.Section>
+
+              <ActionPanel.Section title="History">
+                {variableName.query && (
+                  <Action
+                    title="Remove From History"
+                    onAction={async () => {
+                      await deleteHistoryItem(variableName);
+                    }}
+                    icon={{ source: Icon.Trash }}
+                    shortcut={{ modifiers: ["cmd"], key: "d" }}
+                  />
+                )}
+                <Action
+                  title="Clear All History"
+                  onAction={async () => {
+                    await deleteAllHistory();
+                  }}
+                  icon={{ source: Icon.ExclamationMark }}
+                />
+              </ActionPanel.Section>
             </ActionPanel>
           }
         />

src/types.ts

@@ -3,6 +3,7 @@ import type { CASES } from "./constants";
 export interface Result {
   value: string;
   type: (typeof CASES)[number];
+  query?: string;
 }
 
 export interface ChatCompletion {

src/useQuery.ts

@@ -1,19 +1,36 @@
 import * as changeCase from "change-case";
-import { LocalStorage, getPreferenceValues } from "@raycast/api";
+import { LocalStorage, getPreferenceValues, showToast, Toast } from "@raycast/api";
 import fetch from "node-fetch";
 
-import { CASES } from "./constants";
+import { CASES, CODE_VAR_HISTORY } from "./constants";
 import type { Result, ChatCompletion } from "./types";
 
-// todo：Return results directly from query history
-export async function getSearchHistory(): Promise<Result[]> {
-  const historyString = (await LocalStorage.getItem("history")) as string;
+export async function getHistory(queryText: string): Promise<Result[]> {
+  const historyString = (await LocalStorage.getItem(`${CODE_VAR_HISTORY}_${queryText}`)) as string;
   if (historyString === undefined) return [];
   const items: Result[] = JSON.parse(historyString);
   return items;
 }
 
-export async function queryVariableNames(content: string, signal?: AbortSignal): Promise<Result[]> {
+export async function deleteAllHistory() {
+  await LocalStorage.clear();
+  showToast({
+    style: Toast.Style.Success,
+    title: "Success",
+    message: "Cleared search history",
+  });
+}
+
+export async function deleteHistoryItem(result: Result) {
+  await LocalStorage.removeItem(`${CODE_VAR_HISTORY}_${result.query}`);
+  showToast({
+    style: Toast.Style.Success,
+    title: "Success",
+    message: "Removed from history",
+  });
+}
+
+export async function queryVariableNames(queryText: string, signal?: AbortSignal): Promise<Result[]> {
   const { entrypoint, apiKey } = getPreferenceValues<{ entrypoint: string; apiKey: string }>();
 
   const response = await fetch(entrypoint, {
@@ -28,7 +45,7 @@ export async function queryVariableNames(content: string, signal?: AbortSignal):
       messages: [
         {
           role: "user",
-          content: `Translate to en: \n\n ${content}`,
+          content: `Translate to en: \n\n ${queryText}`,
         },
       ],
     }),
@@ -41,15 +58,29 @@ export async function queryVariableNames(content: string, signal?: AbortSignal):
     let result: Result[] = [];
     try {
       const text = (content?.choices?.[0]?.message?.content || "").replace(/\n/g, "").replace(/\./g, "").trim();
-      result = CASES.map((type) => {
-        if (type === "capitalCase") {
-          return { value: changeCase[type](text.replace(/ /g, "")), type };
+      result = CASES.map((caseType) => {
+        if (caseType === "capitalCase") {
+          return {
+            value: changeCase[caseType](text.replace(/ /g, "")),
+            type: caseType,
+          };
         }
-        return { value: changeCase[type](text), type };
+        return {
+          value: changeCase[caseType](text),
+          type: caseType,
+        };
       });
     } catch (error) {
       result = [];
     }
+
+    if (queryText && result.length > 0) {
+      await LocalStorage.setItem(
+        `${CODE_VAR_HISTORY}_${queryText}`,
+        JSON.stringify(result.map((item) => ({ ...item, query: queryText })))
+      );
+    }
+
     return result;
   }
 }

yarn.lock

@@ -124,6 +124,11 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/lodash@^4.14.191":
+  version "4.14.191"
+  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
+  integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
+
 "@types/[email protected]":
   version "18.8.3"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.8.3.tgz#ce750ab4017effa51aed6a7230651778d54e327c"
@@ -877,6 +882,11 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"