key form submit rework

dissorial · Jun 5, 2023 · b027948 · b027948
1 parent 0d1e4fb
commit b027948
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 12,776 deletions.
diff --git a/components/keyform/KeyForm.tsx b/components/keyform/KeyForm.tsx
@@ -1,20 +1,14 @@
-import { useState } from 'react';
-
 interface KeyFormProps {
   keyName: string;
   keyValue: string;
   setKeyValue: (key: string) => void;
 }
 
-import { CheckIcon } from '@heroicons/react/20/solid';
-
 const KeyForm: React.FC<KeyFormProps> = ({
   keyName,
   keyValue,
   setKeyValue,
 }) => {
-  const [isFocused, setIsFocused] = useState(false);
-
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setKeyValue(keyValue);
@@ -24,14 +18,6 @@ const KeyForm: React.FC<KeyFormProps> = ({
     setKeyValue(event.target.value);
   };
 
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-
   return (
     <form onSubmit={handleSubmit}>
       <div className="relative">
@@ -43,19 +29,9 @@ const KeyForm: React.FC<KeyFormProps> = ({
             type="password"
             value={keyValue}
             onChange={handleChange}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
             placeholder={`Enter ${keyName}`}
-            className="w-full pr-10 py-3 text-sm text-gray-300 placeholder-gray-500 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+            className="w-full px-2 py-3 text-sm text-gray-300 placeholder-gray-500 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
           />
-          {isFocused && (
-            <button
-              type="submit"
-              className="absolute inset-y-0 right-0 flex items-center mr-2 focus:outline-none"
-            >
-              <CheckIcon className="h-5 w-5 text-green-500 hover:text-green-600 transition-colors duration-200" />
-            </button>
-          )}
         </div>
       </div>
     </form>

diff --git a/hooks/useKeys.ts b/hooks/useKeys.ts
@@ -1,52 +1,57 @@
-import { useState, useEffect } from 'react';
-import { getItem } from '@/libs/localStorageKeys';
+import { useState } from 'react';
+import { getItem, setItem } from '@/libs/localStorageKeys';
 
 interface Keys {
   openAIapiKey: string;
-  setOpenAIapiKey: React.Dispatch<React.SetStateAction<string>>;
+  setOpenAIapiKey: (key: string) => void;
   pineconeApiKey: string;
-  setPineconeApiKey: React.Dispatch<React.SetStateAction<string>>;
+  setPineconeApiKey: (key: string) => void;
   pineconeEnvironment: string;
-  setPineconeEnvironment: React.Dispatch<React.SetStateAction<string>>;
+  setPineconeEnvironment: (key: string) => void;
   pineconeIndexName: string;
-  setPineconeIndexName: React.Dispatch<React.SetStateAction<string>>;
+  setPineconeIndexName: (key: string) => void;
+  handleKeyChange: (storageKey: string, keyValue: string) => void;
+  handleSubmitKeys: () => void;
 }
 
 const useKeys = (): Keys => {
-  const [openAIapiKey, setOpenAIapiKey] = useState<string>('');
-  const [pineconeApiKey, setPineconeApiKey] = useState<string>('');
-  const [pineconeEnvironment, setPineconeEnvironment] = useState<string>('');
-  const [pineconeIndexName, setPineconeIndexName] = useState<string>('');
-
-  useEffect(() => {
-    const storedOpenAIKey = getItem('openAIapiKey');
-    const storedPineconeKey = getItem('pineconeApiKey');
-    const storedPineconeEnvironment = getItem('pineconeEnvironment');
-    const storedPineconeIndexName = getItem('pineconeIndexName');
-
-    if (storedOpenAIKey) {
-      setOpenAIapiKey(storedOpenAIKey);
-    }
-    if (storedPineconeKey) {
-      setPineconeApiKey(storedPineconeKey);
-    }
-    if (storedPineconeEnvironment) {
-      setPineconeEnvironment(storedPineconeEnvironment);
-    }
-    if (storedPineconeIndexName) {
-      setPineconeIndexName(storedPineconeIndexName);
+  const [keys, setKeys] = useState({
+    openAIapiKey: getItem('openAIapiKey') || '',
+    pineconeApiKey: getItem('pineconeApiKey') || '',
+    pineconeEnvironment: getItem('pineconeEnvironment') || '',
+    pineconeIndexName: getItem('pineconeIndexName') || '',
+  });
+
+  const setKey = (keyName: string, keyValue: string) => {
+    setKeys((prev) => ({ ...prev, [keyName]: keyValue }));
+  };
+
+  const setOpenAIapiKey = (value: string) => setKey('openAIapiKey', value);
+  const setPineconeApiKey = (value: string) => setKey('pineconeApiKey', value);
+  const setPineconeEnvironment = (value: string) =>
+    setKey('pineconeEnvironment', value);
+  const setPineconeIndexName = (value: string) =>
+    setKey('pineconeIndexName', value);
+
+  const handleKeyChange = (storageKey: string, keyValue: string) => {
+    setItem(storageKey, keyValue);
+    setKey(storageKey, keyValue);
+  };
+
+  const handleSubmitKeys = () => {
+    for (const [storageKey, keyValue] of Object.entries(keys)) {
+      handleKeyChange(storageKey, keyValue);
     }
-  }, []);
+  };
 
   return {
-    openAIapiKey,
+    ...keys,
     setOpenAIapiKey,
-    pineconeApiKey,
     setPineconeApiKey,
-    pineconeEnvironment,
     setPineconeEnvironment,
-    pineconeIndexName,
     setPineconeIndexName,
+    handleKeyChange,
+    handleSubmitKeys,
   };
 };