Feature/UI (#5)

* wip cli * fix * fix * wip * fix * fix * suggestのバグ修正 * fix * ux * update snapshot * MAX制限 * fix * fix --------- Co-authored-by: nusuke <[email protected]>
nusuke · Mar 10, 2024 · 3dd1da2 · 3dd1da2
1 parent 1754c72
commit 3dd1da2
Show file tree

Hide file tree

Showing 9 changed files with 1,211 additions and 667 deletions.
diff --git a/build.zip b/build.zip
diff --git a/src/app/feature/jq/queryInput.tsx b/src/app/feature/jq/queryInput.tsx
@@ -1,27 +1,61 @@
-import { useEffect, useState } from "react";
-import { useDebounce } from "./useDebuonce";
+import { useEffect, useRef, useState } from "react";
+import {
+  getHistory,
+  remoevHistoryAll,
+  removeHistory,
+} from "../../../lib/queryHistoryFromLocalStrage";
 
 type P = {
   initialJqQuery: string;
 };
 export const QueryInput: React.FC<P> = (props) => {
   const [jqQuery, setJqQuery] = useState<string>(props.initialJqQuery);
-  const debouncedInputText = useDebounce(jqQuery ?? "", 200);
+  const [jqQueryHistories, setJqQueryHistory] = useState<string[]>([]);
+  const [historyKeyIndex, setHistoryKeyIndex] = useState(-1);
+  const [suggestMode, setSuggestMode] = useState(false);
+  const queryInputSuggestRef = useRef<HTMLButtonElement>(null);
+
+  const updateHistoryFromLocalStrage = async () => {
+    const res = await getHistory();
+    setJqQueryHistory(res ?? []);
+  };
 
   useEffect(() => {
     chrome.runtime.sendMessage({
+      type: "query",
+      text: props.initialJqQuery,
+    });
+
+    updateHistoryFromLocalStrage();
+  }, []);
+
+  useEffect(() => {
+    setSuggestMode(false);
+  }, [props.initialJqQuery]);
+
+  // ↑↓で履歴をinput要素にセットする
+  useEffect(() => {
+    if (historyKeyIndex >= 0 && jqQueryHistories.length > historyKeyIndex) {
+      setJqQuery(jqQueryHistories[historyKeyIndex]);
+    }
+  }, [historyKeyIndex]);
+
+  // Enterや送信ボタンでjq発火
+  const executeJq = async (jqQuery: string) => {
+    setSuggestMode(false);
+    await chrome.runtime.sendMessage({
       type: "query",
       text: jqQuery,
     });
-  }, [debouncedInputText]);
 
-  function onClickHandler() {
-    return () => {
-      const url = new URL(document.URL);
-      url.searchParams.set("chromeExtentionJqQuery", jqQuery);
-      history.pushState(null, "", url.toString());
-    };
-  }
+    if (jqQuery) {
+      updateHistoryFromLocalStrage();
+    }
+    setJqQuery(jqQuery);
+    const url = new URL(document.URL);
+    url.searchParams.set("chromeExtentionJqQuery", jqQuery);
+    history.pushState(null, "", url.toString());
+  };
 
   return (
     <form
@@ -30,23 +64,104 @@ export const QueryInput: React.FC<P> = (props) => {
         e.preventDefault();
       }}
     >
-      <input
-        type="text"
-        placeholder="jq query. ex: keys"
-        className="queryInputInput"
-        onChange={(e) => {
-          setJqQuery(e.currentTarget.value);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            onClickHandler();
-          }
-        }}
-        value={jqQuery}
-      />
-      <button className="queryInputShareButton" onClick={onClickHandler()}>
-        Set URL
-      </button>
+      <div className="queryInputSearchBox">
+        <div className="queryInputSearchBoxInputWrapper">
+          <input
+            id="queryInputForm"
+            type="text"
+            placeholder="jq query. ex: keys"
+            className="queryInputInput"
+            autoComplete="off"
+            onChange={(e) => {
+              setJqQuery(e.currentTarget.value);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                setSuggestMode(false);
+                executeJq(jqQuery);
+                e.preventDefault();
+                e.stopPropagation();
+              }
+              if (e.key === "ArrowUp") {
+                setHistoryKeyIndex((s) => (s >= 0 ? s - 1 : 0));
+                !suggestMode && setSuggestMode(true);
+              }
+              if (e.key === "ArrowDown") {
+                setHistoryKeyIndex((s) =>
+                  s + 1 >= jqQueryHistories.length ? s : s + 1
+                );
+                !suggestMode && setSuggestMode(true);
+              }
+              if (e.ctrlKey && e.key === "r") {
+                setSuggestMode((s) => !s);
+              }
+              if (e.key === "Escape") {
+                setSuggestMode(false);
+              }
+            }}
+            onBlur={() => {
+              setSuggestMode(false);
+            }}
+            value={jqQuery}
+          />
+          <button
+            className="queryInputHistoryButton"
+            onClick={() => setSuggestMode((s) => !s)}
+          >
+            {suggestMode ? "×" : "history"}
+          </button>
+        </div>
+        <button
+          className="queryInputShareButton"
+          onClick={() => executeJq(jqQuery)}
+        >
+          Set URL
+        </button>
+      </div>
+
+      {suggestMode && jqQueryHistories.length > 0 && (
+        <ul className="queryInputSuggest">
+          {jqQueryHistories.map((queryHistory) => (
+            <li key={queryHistory} className="queryInputSuggestList">
+              <button
+                className={`${
+                  queryHistory === jqQuery ? "queryInputSuggest--active" : ""
+                } queryInputSuggestButton`}
+                onClick={() => {
+                  executeJq(queryHistory);
+                }}
+                ref={queryHistory === jqQuery ? queryInputSuggestRef : null}
+              >
+                {queryHistory}
+              </button>
+              <button
+                className="queryInputSuggestRemoveButton"
+                onClick={() => {
+                  if (confirm(`Can I delete the query "${queryHistory}"?`)) {
+                    removeHistory(queryHistory, jqQueryHistories);
+                    window.location.reload();
+                  }
+                }}
+              >
+                ×
+              </button>
+            </li>
+          ))}
+          <li>
+            <button
+              className="queryInputSuggestAllRemoveButton"
+              onClick={async () => {
+                if (confirm(`Delete all`)) {
+                  await remoevHistoryAll();
+                  window.location.reload();
+                }
+              }}
+            >
+              all remove.
+            </button>
+          </li>
+        </ul>
+      )}
     </form>
   );
 };
diff --git a/src/app/feature/jq/useDebuonce.ts b/src/app/feature/jq/useDebuonce.ts