🔨 refactor(App.tsx): remove unused imports and components

✨ feat(App.tsx): simplify getVersion() function call
The imports and components that are no longer used have been removed to improve the code's readability and maintainability. The getVersion() function call has been simplified to make the code more concise and easier to read.

src/frontend/src/App.tsx

@@ -7,13 +7,11 @@ import _ from "lodash";
 import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
-import ExtraSidebar from "./components/ExtraSidebarComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import { ErrorBoundary } from "react-error-boundary";
 import CrashErrorComponent from "./components/CrashErrorComponent";
 import { TabsContext } from "./contexts/tabsContext";
-import MainPage from "./pages/MainPage";
 import { getVersion } from "./controllers/API";
 import Router from "./routes";
 import Header from "./components/headerComponent";
@@ -52,9 +50,7 @@ export default function App() {
   // Initialize state variable for the version
   const [version, setVersion] = useState("");
   useEffect(() => {
-    getVersion()
+    getVersion().then((data) => {
-      .then((res) => res.json())
-      .then((data) => {
       setVersion(data.version);
     });
   }, []);

src/frontend/src/contexts/tabsContext.tsx

@@ -7,19 +7,13 @@ import {
   useContext,
 } from "react";
 import { FlowType, NodeType } from "../types/flow";
-import { LangFlowState, TabsContextType } from "../types/tabs";
+import { TabsContextType } from "../types/tabs";
-import {
+import { updateIds, updateTemplate } from "../utils";
-  normalCaseToSnakeCase,
-  updateIds,
-  updateObject,
-  updateTemplate,
-} from "../utils";
 import { alertContext } from "./alertContext";
 import { typesContext } from "./typesContext";
-import { APITemplateType, TemplateVariableType } from "../types/api";
+import { APITemplateType } from "../types/api";
 import { v4 as uuidv4 } from "uuid";
 import { addEdge } from "reactflow";
-import _, { flow } from "lodash";
 import {
   readFlowsFromDatabase,
   deleteFlowFromDatabase,
@@ -415,10 +409,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     reactFlowInstance.setEdges(edges);
   }
 
-  const addFlow = async (flow?: FlowType, newProject?: Boolean): Promise<String> => {
+  const addFlow = async (
-    if(newProject){
+    flow?: FlowType,
+    newProject?: Boolean
+  ): Promise<String> => {
+    if (newProject) {
       let flowData = extractDataFromFlow(flow);
-      if(flowData.description == ""){
+      if (flowData.description == "") {
         flowData.description = "This is a new flow.";
       }
 
@@ -426,24 +423,26 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       const newFlow = createNewFlow(flowData, flow);
 
       try {
-        const id = await saveFlowToDatabase(newFlow);
+        const { id } = await saveFlowToDatabase(newFlow);
         // Change the id to the new id.
-        newFlow.id = id.id;
+        newFlow.id = id;
 
         // Add the new flow to the list of flows.
         addFlowToLocalState(newFlow);
 
         // Return the id
-        return id.id;
+        return id;
       } catch (error) {
         // Handle the error if needed
-        console.error('Error while adding flow:', error);
+        console.error("Error while adding flow:", error);
         throw error; // Re-throw the error so the caller can handle it if needed
       }
     } else {
-      paste({nodes: flow.data.nodes, edges: flow.data.edges}, {x:10, y:10})
+      paste(
+        { nodes: flow.data.nodes, edges: flow.data.edges },
+        { x: 10, y: 10 }
+      );
     }
-    
   };
 
   const extractDataFromFlow = (flow) => {