feat(App.tsx, FlowPage/index.tsx): add version number to the footer of the app to show the current version of LangFlow

refactor(App.tsx): remove redundant code that initializes the version state variable and fetches the version number from the API in FlowPage component instead

src/frontend/src/App.tsx

@@ -47,13 +47,6 @@ export default function App() {
     }>
   >([]);
 
-  // Initialize state variable for the version
-  const [version, setVersion] = useState("");
-  useEffect(() => {
-    getVersion().then((data) => {
-      setVersion(data.version);
-    });
-  }, []);
   // Use effect hook to update alertsList when a new alert is added
   useEffect(() => {
     // If there is an error alert open with data, add it to the alertsList
@@ -157,14 +150,6 @@ export default function App() {
           </div>
         ))}
       </div>
-      <a
-        target={"_blank"}
-        href="https://logspace.ai/"
-        className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
-      >
-        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
-        <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
-      </a>
     </div>
   );
 }

src/frontend/src/pages/FlowPage/index.tsx

@@ -1,7 +1,8 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import Page from "./components/PageComponent";
 import { TabsContext } from "../../contexts/tabsContext";
 import { useParams } from "react-router-dom";
+import { getVersion } from "../../controllers/API";
 
 export default function FlowPage() {
   const { flows, tabId, setTabId } = useContext(TabsContext);
@@ -9,6 +10,15 @@ export default function FlowPage() {
   useEffect(() => {
     setTabId(id);
   }, [id]);
+
+    // Initialize state variable for the version
+    const [version, setVersion] = useState("");
+    useEffect(() => {
+      getVersion().then((data) => {
+        setVersion(data.version);
+      });
+    }, []);
+    
   return (
     <div className="h-full w-full overflow-hidden">
       {flows.length > 0 &&
@@ -16,6 +26,14 @@ export default function FlowPage() {
         flows.findIndex((flow) => flow.id === tabId) !== -1 && (
           <Page flow={flows.find((flow) => flow.id === tabId)} />
         )}
+      <a
+        target={"_blank"}
+        href="https://logspace.ai/"
+        className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
+      >
+        {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
+        <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
+      </a>
     </div>
   );
 }