diff --git a/langflow/frontend/src/App.tsx b/langflow/frontend/src/App.tsx index 51b2b0f2e..e34d24ac0 100644 --- a/langflow/frontend/src/App.tsx +++ b/langflow/frontend/src/App.tsx @@ -8,7 +8,6 @@ import SuccessAlert from "./alerts/success"; import ExtraSidebar from "./components/ExtraSidebarComponent"; import { alertContext } from "./contexts/alertContext"; import { locationContext } from "./contexts/locationContext"; -import Sidebar from "./components/SidebarComponent"; import Header from "./components/HeaderComponent"; import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerComponent"; @@ -36,38 +35,45 @@ export default function App() { setSuccessOpen, } = useContext(alertContext); - const [alertsList, setAlertsList] = useState,link?:string},id:string}>>([]); +// Initialize state variable for the list of alerts +const [alertsList, setAlertsList] = useState,link?:string},id:string}>>([]); - useEffect(() => { - if (errorOpen && errorData) { - setErrorOpen(false); - setAlertsList((old) => { - let newAlertsList = [ - ...old, - { type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() }, - ]; - return newAlertsList; - }); - } else if (noticeOpen && noticeData) { - setNoticeOpen(false); - setAlertsList((old) => { - let newAlertsList = [ - ...old, - { type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() }, - ]; - return newAlertsList; - }); - } else if (successOpen && successData) { - setSuccessOpen(false); - setAlertsList((old) => { - let newAlertsList = [ - ...old, - { type: "success", data: _.cloneDeep(successData), id: _.uniqueId() }, - ]; - return newAlertsList; - }); - } - }, [_, errorData, errorOpen, noticeData, noticeOpen, setErrorOpen, setNoticeOpen, setSuccessOpen, successData, successOpen]); +// 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 + if (errorOpen && errorData) { + setErrorOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } + // If there is a notice alert open with data, add it to the alertsList + else if (noticeOpen && noticeData) { + setNoticeOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } + // If there is a success alert open with data, add it to the alertsList + else if (successOpen && successData) { + setSuccessOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "success", data: _.cloneDeep(successData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } +}, [_, errorData, errorOpen, noticeData, noticeOpen, setErrorOpen, setNoticeOpen, setSuccessOpen, successData, successOpen]); const removeAlert = (id: string) => { setAlertsList((prevAlertsList) => @@ -82,9 +88,7 @@ export default function App() {
- - {/* Main area */}
{/* Primary column */} diff --git a/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx b/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx index 25d6ab89b..7a112fd29 100644 --- a/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx +++ b/langflow/frontend/src/components/ExtraSidebarComponent/index.tsx @@ -25,12 +25,6 @@ export default function ExtraSidebar() { {extraNavigation.title} -
{extraNavigation.options ? ( diff --git a/langflow/frontend/src/components/HeaderComponent/index.tsx b/langflow/frontend/src/components/HeaderComponent/index.tsx index 4bb25ea4f..40611e9c4 100644 --- a/langflow/frontend/src/components/HeaderComponent/index.tsx +++ b/langflow/frontend/src/components/HeaderComponent/index.tsx @@ -4,7 +4,6 @@ import { MoonIcon, SunIcon, } from '@heroicons/react/24/outline' -import Breadcrumb from '../breadcrumbComponent' import { alertContext } from '../../contexts/alertContext' import { useLayer } from 'react-laag' import AlertDropdown from '../../alerts/alertDropDown' @@ -25,25 +24,8 @@ export default function Header(){ const {dark, setDark} = useContext(darkContext); return (
- {/* Logo area */} -
- - Your Company - -
- {/* Desktop nav area */} -
-
- -
+
diff --git a/langflow/frontend/src/components/SidebarComponent/index.tsx b/langflow/frontend/src/components/SidebarComponent/index.tsx deleted file mode 100644 index 9901614a5..000000000 --- a/langflow/frontend/src/components/SidebarComponent/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import SidebarButton from "./sidebarButton"; -import { BsPlusSquare } from "react-icons/bs"; -import { classNames } from "../../utils"; -import { ChevronRightIcon } from "@heroicons/react/24/outline"; -import { useContext } from "react"; -import { sidebarNavigation } from "../../entities/sidebarNav"; -import { locationContext } from "../../contexts/locationContext"; - -export default function Sidebar() { - let { showSideBar, isStackedOpen, setIsStackedOpen } = - useContext(locationContext); - let current = false; - return ( -
-
- -
-
- ); -} diff --git a/langflow/frontend/src/components/SidebarComponent/sidebarButton/index.tsx b/langflow/frontend/src/components/SidebarComponent/sidebarButton/index.tsx deleted file mode 100644 index d98b95f9f..000000000 --- a/langflow/frontend/src/components/SidebarComponent/sidebarButton/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { classNames } from "../../../utils" -import { Link } from "react-router-dom" -import { useContext } from "react" -import { locationContext } from "../../../contexts/locationContext"; -import { sidebarNavigationItemType } from "../../../types/entities"; - -export default function SidebarButton({item}:{item:sidebarNavigationItemType}){ - let {current}= useContext(locationContext); - return ( - <> - - {item.name} -