From e1a2bd11a9e812549be6338642397b4d824db162 Mon Sep 17 00:00:00 2001
From: Siddhant Rai <siddhant.rai.5686@gmail.com>
Date: Wed, 6 Mar 2024 16:01:53 +0530
Subject: [PATCH] fix: upload dropdown also combined

---
 frontend/src/components/Dropdown.tsx |  52 ++++--
 frontend/src/upload/Upload.tsx       | 252 +++++++++++++--------------
 2 files changed, 158 insertions(+), 146 deletions(-)

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index cc570893..5654b430 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -8,26 +8,52 @@ function Dropdown({
   showDelete,
   onDelete,
 }: {
-  options: string[] | { name: string; id: string; type: string }[];
-  selectedValue: string;
+  options:
+    | string[]
+    | { name: string; id: string; type: string }[]
+    | { label: string; value: string }[];
+  selectedValue: string | { label: string; value: string };
   onSelect:
     | ((value: string) => void)
-    | ((value: { name: string; id: string; type: string }) => void);
+    | ((value: { name: string; id: string; type: string }) => void)
+    | ((value: { label: string; value: string }) => void);
   showDelete?: boolean;
   onDelete?: (value: string) => void;
 }) {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <div className="relative mt-2 w-32">
+    <div
+      className={
+        typeof selectedValue === 'string'
+          ? 'relative mt-2 w-32'
+          : 'relative w-full align-middle'
+      }
+    >
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex w-full cursor-pointer items-center border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
-          isOpen ? 'rounded-t-xl' : 'rounded-xl'
+        className={`flex w-full cursor-pointer items-center justify-between border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
+          isOpen
+            ? typeof selectedValue === 'string'
+              ? 'rounded-t-xl'
+              : 'rounded-t-2xl'
+            : typeof selectedValue === 'string'
+            ? 'rounded-xl'
+            : 'rounded-full'
         }`}
       >
-        <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
-          {selectedValue}
-        </span>
+        {typeof selectedValue === 'string' ? (
+          <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
+            {selectedValue}
+          </span>
+        ) : (
+          <span
+            className={`overflow-hidden text-ellipsis dark:text-bright-gray ${
+              !selectedValue && 'text-silver'
+            }`}
+          >
+            {selectedValue ? selectedValue.label : 'From URL'}
+          </span>
+        )}
         <img
           src={Arrow2}
           alt="arrow"
@@ -41,7 +67,7 @@ function Dropdown({
           {options.map((option: any, index) => (
             <div
               key={index}
-              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
+              className="hover:eerie-black flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
             >
               <span
                 onClick={() => {
@@ -50,7 +76,11 @@ function Dropdown({
                 }}
                 className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
               >
-                {typeof option === 'string' ? option : option.name}
+                {typeof option === 'string'
+                  ? option
+                  : option.name
+                  ? option.name
+                  : option.label}
               </span>
               {showDelete && onDelete && (
                 <button onClick={() => onDelete(option)} className="p-2">
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index c9c5cde4..2dd059bf 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -4,61 +4,9 @@ import { useDropzone } from 'react-dropzone';
 import { useDispatch } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
-import Arrow2 from '../assets/dropdown-arrow.svg';
 import { setSourceDocs } from '../preferences/preferenceSlice';
-type urlOption = {
-  label: string,
-  value: string
-} | null
-function DropdownUrlType({
-  options,
-  selectedOption,
-  onSelect,
-}: {
-  options: urlOption[];
-  selectedOption: urlOption;
-  onSelect: (value: urlOption) => void;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <div className="relative w-full align-middle">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className={`${isOpen ? 'rounded-t-2xl' : 'rounded-full'} flex w-full cursor-pointer justify-between border-2 border-silver dark:border-chinese-silver bg-white p-3 dark:bg-transparent`}
-      >
-        <span className={`overflow-hidden text-ellipsis dark:text-bright-gray ${!selectedOption && 'text-silver'}`}>
-          {selectedOption ? selectedOption.label : 'From URL'}
-        </span>
-        <img
-          src={Arrow2}
-          alt="arrow"
-          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
-            } h-3 w-3 transition-transform mt-1`}
-        />
-      </button>
-      {isOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-1 rounded-b-xl border-2 border-silver dark:border-chinese-silver bg-white dark:bg-dark-charcoal  shadow-lg">
-          {options.map((option, index) => (
-            <div
-              key={index}
-              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe dark:text-bright-gray text-sonic-silver hover:eerie-black "
-            >
-              <span
-                onClick={() => {
-                  onSelect(option);
-                  setIsOpen(false);
-                }}
-                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap px-1 py-3"
-              >
-                {option?.label}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+import Dropdown from '../components/Dropdown';
+
 export default function Upload({
   modalState,
   setModalState,
@@ -67,13 +15,17 @@ export default function Upload({
   setModalState: (state: ActiveState) => void;
 }) {
   const [docName, setDocName] = useState('');
-  const [urlName, setUrlName] = useState('')
-  const [url, setUrl] = useState('')
-  const urlOptions: urlOption[] = [
+  const [urlName, setUrlName] = useState('');
+  const [url, setUrl] = useState('');
+  const urlOptions: { label: string; value: string }[] = [
     { label: 'Crawler', value: 'crawler' },
     // { label: 'Sitemap', value: 'sitemap' },
-    { label: 'Link', value: 'url' }]
-  const [urlType, setUrlType] = useState<urlOption>(null)
+    { label: 'Link', value: 'url' },
+  ];
+  const [urlType, setUrlType] = useState<{ label: string; value: string }>({
+    label: '',
+    value: '',
+  });
   const [activeTab, setActiveTab] = useState<string>('file');
   const [files, setfiles] = useState<File[]>([]);
   const [progress, setProgress] = useState<{
@@ -116,8 +68,9 @@ export default function Upload({
             setProgress(undefined);
             setModalState('INACTIVE');
           }}
-          className={`rounded-3xl bg-purple-30 px-4 py-2 text-sm font-medium text-white ${isCancellable ? '' : 'hidden'
-            }`}
+          className={`rounded-3xl bg-purple-30 px-4 py-2 text-sm font-medium text-white ${
+            isCancellable ? '' : 'hidden'
+          }`}
         >
           Finish
         </button>
@@ -210,7 +163,7 @@ export default function Upload({
   };
 
   const uploadRemote = () => {
-    console.log("here")
+    console.log('here');
     const formData = new FormData();
     formData.append('name', urlName);
     formData.append('user', 'local');
@@ -257,87 +210,115 @@ export default function Upload({
   } else {
     view = (
       <>
-        <p className="text-xl text-jet dark:text-bright-gray">Upload New Documentation</p>
-        <div >
+        <p className="text-xl text-jet dark:text-bright-gray">
+          Upload New Documentation
+        </p>
+        <div>
           <button
             onClick={() => setActiveTab('file')}
-            className={`${activeTab === 'file' ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400' : 'text-sonic-silver  hover:text-purple-30'} text-sm font-semibold mr-4 px-[20px] py-[5px] rounded-full`}>
+            className={`${
+              activeTab === 'file'
+                ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
+                : 'text-sonic-silver  hover:text-purple-30'
+            } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
+          >
             From File
           </button>
           <button
             onClick={() => setActiveTab('remote')}
-            className={`${activeTab === 'remote' ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400' : 'text-sonic-silver  hover:text-purple-30'} text-sm font-semibold mr-4 px-[20px] py-[5px] rounded-full`}>
+            className={`${
+              activeTab === 'remote'
+                ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
+                : 'text-sonic-silver  hover:text-purple-30'
+            } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
+          >
             Remote
           </button>
         </div>
-        {
-          activeTab === 'file' && (
-            <>
-              <input
-                type="text"
-                className="h-10 w-full rounded-full border-2 border-gray-5000 dark:text-silver dark:bg-transparent px-3 outline-none"
-                value={docName}
-                onChange={(e) => setDocName(e.target.value)}
-              ></input>
-              <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                <span className="bg-white px-2 text-xs text-gray-4000 dark:text-silver dark:bg-outer-space">Name</span>
-              </div>
-              <div {...getRootProps()}>
-                <span className="rounded-3xl border border-purple-30 dark:bg-purple-taupe px-4 py-2 font-medium text-purple-30 dark:text-silver hover:cursor-pointer">
-                  <input type="button" {...getInputProps()} />
-                  Choose Files
-                </span>
-              </div>
-              <p className="mb-0 italic text-xs text-gray-4000">
-                Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
+        {activeTab === 'file' && (
+          <>
+            <input
+              type="text"
+              className="h-10 w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
+              value={docName}
+              onChange={(e) => setDocName(e.target.value)}
+            ></input>
+            <div className="relative bottom-12 left-2 mt-[-18.39px]">
+              <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                Name
+              </span>
+            </div>
+            <div {...getRootProps()}>
+              <span className="rounded-3xl border border-purple-30 px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:bg-purple-taupe dark:text-silver">
+                <input type="button" {...getInputProps()} />
+                Choose Files
+              </span>
+            </div>
+            <p className="mb-0 text-xs italic text-gray-4000">
+              Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
+            </p>
+            <div className="mt-0">
+              <p className="mb-[14px] font-medium text-eerie-black dark:text-light-gray">
+                Uploaded Files
               </p>
-              <div className="mt-0">
-                <p className="mb-[14px] font-medium text-eerie-black dark:text-light-gray">Uploaded Files</p>
-                {files.map((file) => (
-                  <p key={file.name} className="text-gray-6000">
-                    {file.name}
-                  </p>
-                ))}
-                {files.length === 0 && <p className="text-gray-6000 dark:text-light-gray">None</p>}
-              </div>
-            </>
-          )
-        }
-        {
-          activeTab === 'remote' && (
-            <>
-              <DropdownUrlType onSelect={(value: urlOption) => setUrlType(value)} selectedOption={urlType} options={urlOptions} />
-              <input
-                placeholder='Enter name'
-                type="text"
-                className="h-10 w-full rounded-full border-2 border-silver dark:text-silver dark:bg-transparent px-3 outline-none"
-                value={urlName}
-                onChange={(e) => setUrlName(e.target.value)}
-              ></input>
-              <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                <span className="bg-white px-2 text-xs text-silver dark:text-silver dark:bg-outer-space">Name</span>
-              </div>
-              <input
-                placeholder='URL Link'
-                type="text"
-                className="h-10 w-full rounded-full border-2 border-silver dark:text-silver dark:bg-transparent px-3 outline-none"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-              ></input>
-              <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                <span className="bg-white px-2 text-xs text-silver dark:text-silver dark:bg-outer-space">Link</span>
-              </div>
-            </>
-          )
-        }
+              {files.map((file) => (
+                <p key={file.name} className="text-gray-6000">
+                  {file.name}
+                </p>
+              ))}
+              {files.length === 0 && (
+                <p className="text-gray-6000 dark:text-light-gray">None</p>
+              )}
+            </div>
+          </>
+        )}
+        {activeTab === 'remote' && (
+          <>
+            <Dropdown
+              options={urlOptions}
+              selectedValue={urlType}
+              onSelect={(value: { label: string; value: string }) =>
+                setUrlType(value)
+              }
+            />
+            <input
+              placeholder="Enter name"
+              type="text"
+              className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+              value={urlName}
+              onChange={(e) => setUrlName(e.target.value)}
+            ></input>
+            <div className="relative bottom-12 left-2 mt-[-18.39px]">
+              <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                Name
+              </span>
+            </div>
+            <input
+              placeholder="URL Link"
+              type="text"
+              className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            ></input>
+            <div className="relative bottom-12 left-2 mt-[-18.39px]">
+              <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                Link
+              </span>
+            </div>
+          </>
+        )}
         <div className="flex flex-row-reverse">
           <button
-            onClick={activeTab === 'file' ? uploadFile : uploadRemote} 
-            className={`ml-6 rounded-3xl bg-purple-30 text-white cursor-pointer ${files.length > 0 && docName.trim().length > 0
-              ? ''
-              : 'bg-opacity-75 text-opacity-80'
-              } py-2 px-6`}
-            disabled={(files.length === 0 || docName.trim().length === 0) && (activeTab === 'file') } // Disable the button if no file is selected or docName is empty
+            onClick={activeTab === 'file' ? uploadFile : uploadRemote}
+            className={`ml-6 cursor-pointer rounded-3xl bg-purple-30 text-white ${
+              files.length > 0 && docName.trim().length > 0
+                ? ''
+                : 'bg-opacity-75 text-opacity-80'
+            } py-2 px-6`}
+            disabled={
+              (files.length === 0 || docName.trim().length === 0) &&
+              activeTab === 'file'
+            } // Disable the button if no file is selected or docName is empty
           >
             Train
           </button>
@@ -347,7 +328,7 @@ export default function Upload({
               setfiles([]);
               setModalState('INACTIVE');
             }}
-            className="font-medium dark:text-light-gray cursor-pointer"
+            className="cursor-pointer font-medium dark:text-light-gray"
           >
             Cancel
           </button>
@@ -358,10 +339,11 @@ export default function Upload({
 
   return (
     <article
-      className={`${modalState === 'ACTIVE' ? 'visible' : 'hidden'
-        } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
     >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white dark:bg-outer-space p-6 shadow-lg">
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space">
         {view}
       </article>
     </article>