feat: Add uploadFlow function to import from JSON button

src/frontend/src/components/DropdownButtonComponent/index.tsx

@@ -1,14 +1,15 @@
-import { useState } from "react";
+import { Fragment, useState } from "react";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import { dropdownButtonPropsType } from "../../types/components";
+import { Transition } from "@headlessui/react";
 
 export default function DropdownButton({
   firstButtonName,
   onFirstBtnClick,
   options,
 }: dropdownButtonPropsType): JSX.Element {
-  const [showOptions, setShowOptions] = useState(false);
+  const [showOptions, setShowOptions] = useState<boolean>(false);
 
   return (
     <div className="align-center relative flex">
@@ -36,20 +37,29 @@ export default function DropdownButton({
           )}
         </button>
       </div>
-      {showOptions && (
+      <Transition
-        <div className="absolute top-10 w-full">
+        show={showOptions}
-          {options.map(({ name, onBtnClick }) => (
+        leave="transition ease-in duration-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        as={Fragment}
+        enter="transition ease-in duration-100"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+      >
+        <div className="absolute top-10 w-full bg-background pb-0.5 pr-0.5 pl-0.5 rounded-lg shadow-lg ">
+          {options.map(({ name, onBtnClick }, index) => (
             <Button
-              className="w-full"
+              className="w-full mt-1"
               variant="primary"
               onClick={onBtnClick}
-              key={name}
+              key={index}
             >
               {name}
             </Button>
           ))}
         </div>
-      )}
+      </Transition>
     </div>
   );
 }

src/frontend/src/pages/MainPage/index.tsx

@@ -8,8 +8,9 @@ import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { TabsContext } from "../../contexts/tabsContext";
 import DropdownButton from "../../components/DropdownButtonComponent";
 export default function HomePage(): JSX.Element {
-  const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
+  const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow, uploadFlow } =
     useContext(TabsContext);
+  const dropdownOptions = [{name: "Import from JSON", onBtnClick: () => uploadFlow(true)}]
 
   // Set a null id
   useEffect(() => {
@@ -53,12 +54,12 @@ export default function HomePage(): JSX.Element {
                   navigate("/flow/" + id);
                 });
               }}
-              options={[{name: "Import from JSON", onBtnClick: () => console.log('imported')}]}
+              options={dropdownOptions}
             />
           </div>
         </div>
         <span className="main-page-description-text">
-          Manage your personal projects. Download or upload your collection.
+          Manage your personal projects. Download or upload your collection. 
         </span>
         <div className="main-page-flows-display">
           {flows.map((flow, idx) => (