From b21230c4d6899d921b3d95ed0973f1b924f59fba Mon Sep 17 00:00:00 2001
From: utin-francis-peter <utinfrancis.dev@gmail.com>
Date: Wed, 3 Jul 2024 12:34:13 +0100
Subject: [PATCH] chore: migrated to using custom Input component to address
 redundant twClasses

---
 frontend/src/components/Input.tsx         | 39 +++++++++++++++++
 frontend/src/components/types/index.ts    |  3 +-
 frontend/src/preferences/APIKeyModal.tsx  |  7 +--
 frontend/src/preferences/PromptsModal.tsx | 15 ++++---
 frontend/src/settings/APIKeys.tsx         |  8 ++--
 frontend/src/upload/Upload.tsx            | 53 ++++++++++++-----------
 6 files changed, 87 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/Input.tsx

diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
new file mode 100644
index 00000000..fe5cdba2
--- /dev/null
+++ b/frontend/src/components/Input.tsx
@@ -0,0 +1,39 @@
+import { InputProps } from './types';
+
+const Input = ({
+  id,
+  name,
+  type,
+  value,
+  isAutoFocused = false,
+  placeholder,
+  maxLength,
+  className,
+  hasSilverBorder,
+  children,
+  onChange,
+  onPaste,
+  onKeyDown,
+}: InputProps) => {
+  return (
+    <input
+      className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${
+        hasSilverBorder ? 'border-silver dark:border-silver/40' : ''
+      } ${className}`}
+      type={type}
+      id={id}
+      name={name}
+      autoFocus={isAutoFocused}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      value={value}
+      onChange={onChange}
+      onPaste={onPaste}
+      onKeyDown={onKeyDown}
+    >
+      {children}
+    </input>
+  );
+};
+
+export default Input;
diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 3cebc1c2..3ee65ec4 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -1,6 +1,6 @@
 export type TextAreaProps = {
   value: string | string[] | number;
-  isAutoFocused: boolean;
+  isAutoFocused?: boolean;
   id?: string;
   maxLength?: number;
   name?: string;
@@ -20,4 +20,5 @@ export type TextAreaProps = {
 
 export type InputProps = TextAreaProps & {
   type: 'text' | 'number';
+  hasSilverBorder?: boolean;
 };
diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx
index dd7a1b88..18cf53f3 100644
--- a/frontend/src/preferences/APIKeyModal.tsx
+++ b/frontend/src/preferences/APIKeyModal.tsx
@@ -4,6 +4,7 @@ import { ActiveState } from '../models/misc';
 import { selectApiKey, setApiKey } from './preferenceSlice';
 import { useMediaQuery, useOutsideAlerter } from './../hooks';
 import Modal from '../modals';
+import Input from '../components/Input';
 
 export default function APIKeyModal({
   modalState,
@@ -66,14 +67,14 @@ export default function APIKeyModal({
               key for llm. Currently, we support only OpenAI but soon many more.
               You can find it here.
             </p>
-            <input
+            <Input
               type="text"
-              className="h-10 w-full border-b-2 border-jet focus:outline-none"
+              className="h-10 border-b-2 border-jet focus:outline-none"
               value={key}
               maxLength={100}
               placeholder="API Key"
               onChange={(e) => setKey(e.target.value)}
-            />
+            ></Input>
           </article>
         );
       }}
diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
index c16ddd2c..ce634c86 100644
--- a/frontend/src/preferences/PromptsModal.tsx
+++ b/frontend/src/preferences/PromptsModal.tsx
@@ -1,5 +1,6 @@
 import { ActiveState } from '../models/misc';
 import Exit from '../assets/exit.svg';
+import Input from '../components/Input';
 
 function AddPrompt({
   setModalState,
@@ -34,13 +35,14 @@ function AddPrompt({
           Add your custom prompt and save it to DocsGPT
         </p>
         <div>
-          <input
+          <Input
             placeholder="Prompt Name"
             type="text"
-            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+            className="h-10 rounded-lg"
+            hasSilverBorder
             value={newPromptName}
             onChange={(e) => setNewPromptName(e.target.value)}
-          ></input>
+          ></Input>
           <div className="relative bottom-12 left-3 mt-[-3.00px]">
             <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
               Prompt Name
@@ -105,13 +107,14 @@ function EditPrompt({
           Edit your custom prompt and save it to DocsGPT
         </p>
         <div>
-          <input
+          <Input
             placeholder="Prompt Name"
             type="text"
-            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+            className="h-10 rounded-lg"
+            hasSilverBorder
             value={editPromptName}
             onChange={(e) => setEditPromptName(e.target.value)}
-          ></input>
+          ></Input>
           <div className="relative bottom-12 left-3 mt-[-3.00px]">
             <span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
               Prompt Name
diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index 8264af08..dda68663 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -10,6 +10,7 @@ import { selectSourceDocs } from '../preferences/preferenceSlice';
 import Exit from '../assets/exit.svg';
 import Trash from '../assets/trash.svg';
 import { useTranslation } from 'react-i18next';
+import Input from '../components/Input';
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 const embeddingsName =
   import.meta.env.VITE_EMBEDDINGS_NAME ||
@@ -237,12 +238,13 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           <span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
             {t('modals.createAPIKey.apiKeyName')}
           </span>
-          <input
+          <Input
             type="text"
-            className="h-[42px] w-full rounded-md border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+            className="rounded-md"
+            hasSilverBorder
             value={APIKeyName}
             onChange={(e) => setAPIKeyName(e.target.value)}
-          />
+          ></Input>
         </div>
         <div className="my-4">
           <Dropdown
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 0360e2e5..aa952f66 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -7,6 +7,7 @@ import { getDocs } from '../preferences/preferenceApi';
 import { setSelectedDocs, setSourceDocs } from '../preferences/preferenceSlice';
 import Dropdown from '../components/Dropdown';
 import { useTranslation } from 'react-i18next';
+import Input from '../components/Input';
 
 function Upload({
   modalState,
@@ -272,7 +273,9 @@ function Upload({
     },
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     const { name, value } = e.target;
     if (name === 'search_queries' && value.length > 0) {
       setRedditData({
@@ -323,12 +326,12 @@ function Upload({
 
         {activeTab === 'file' && (
           <>
-            <input
+            <Input
               type="text"
-              className="h-[42px] w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
+              className="border-gray-5000 dark:text-silver"
               value={docName}
               onChange={(e) => setDocName(e.target.value)}
-            ></input>
+            ></Input>
             <div className="relative bottom-12 left-2 mt-[-20px]">
               <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
                 {t('modals.uploadDoc.name')}
@@ -373,25 +376,25 @@ function Upload({
             />
             {urlType.label !== 'Reddit' ? (
               <>
-                <input
+                <Input
                   placeholder={`Enter ${t('modals.uploadDoc.name')}`}
                   type="text"
-                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+                  hasSilverBorder
                   value={urlName}
                   onChange={(e) => setUrlName(e.target.value)}
-                ></input>
+                ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
                     {t('modals.uploadDoc.name')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder={t('modals.uploadDoc.urlLink')}
                   type="text"
-                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+                  hasSilverBorder
                   value={url}
                   onChange={(e) => setUrl(e.target.value)}
-                ></input>
+                ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
                     {t('modals.uploadDoc.link')}
@@ -400,66 +403,66 @@ function Upload({
               </>
             ) : (
               <>
-                <input
+                <Input
                   placeholder="Enter client ID"
                   type="text"
-                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+                  hasSilverBorder
                   name="client_id"
                   value={redditData.client_id}
                   onChange={handleChange}
-                ></input>
+                ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
                     {t('modals.uploadDoc.reddit.id')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder="Enter client secret"
                   type="text"
-                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+                  hasSilverBorder
                   name="client_secret"
                   value={redditData.client_secret}
                   onChange={handleChange}
-                ></input>
+                ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
                     {t('modals.uploadDoc.reddit.secret')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder="Enter user agent"
                   type="text"
-                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+                  hasSilverBorder
                   name="user_agent"
                   value={redditData.user_agent}
                   onChange={handleChange}
-                ></input>
+                ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
                     {t('modals.uploadDoc.reddit.agent')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder="Enter search queries"
                   type="text"
-                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+                  hasSilverBorder
                   name="search_queries"
                   value={redditData.search_queries}
                   onChange={handleChange}
-                ></input>
+                ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
                     {t('modals.uploadDoc.reddit.searchQueries')}
                   </span>
                 </div>
-                <input
+                <Input
                   placeholder="Enter number of posts"
                   type="number"
-                  className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
+                  hasSilverBorder
                   name="number_posts"
                   value={redditData.number_posts}
                   onChange={handleChange}
-                ></input>
+                ></Input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
                     {t('modals.uploadDoc.reddit.numberOfPosts')}