jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Format

Browse source
This commit is contained in:
Gabriel Almeida 2023-05-22 08:39:03 -03:00
commit 3c3576e0ad
1 changed files with 144 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

289
src/frontend/src/App.tsx
View file

@ -16,153 +16,152 @@ import CrashErrorComponent from "./components/CrashErrorComponent";
import { TabsContext } from "./contexts/tabsContext"; import { TabsContext } from "./contexts/tabsContext";
export default function App() { export default function App() {
let { setCurrent, setShowSideBar, setIsStackedOpen } =
useContext(locationContext);
let location = useLocation();
useEffect(() => {
setCurrent(location.pathname.replace(/\/$/g, "").split("/"));
setShowSideBar(true);
setIsStackedOpen(true);
}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
const { hardReset } = useContext(TabsContext);
const {
errorData,
errorOpen,
setErrorOpen,
noticeData,
noticeOpen,
setNoticeOpen,
successData,
successOpen,
setSuccessOpen,
} = useContext(alertContext);
let { setCurrent, setShowSideBar, setIsStackedOpen } = // Initialize state variable for the list of alerts
useContext(locationContext); const [alertsList, setAlertsList] = useState<
let location = useLocation(); Array<{
useEffect(() => { type: string;
setCurrent(location.pathname.replace(/\/$/g, "").split("/")); data: { title: string; list?: Array<string>; link?: string };
setShowSideBar(true); id: string;
setIsStackedOpen(true); }>
}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]); >([]);
const { hardReset } = useContext(TabsContext);
const {
errorData,
errorOpen,
setErrorOpen,
noticeData,
noticeOpen,
setNoticeOpen,
successData,
successOpen,
setSuccessOpen,
} = useContext(alertContext);
// Initialize state variable for the list of alerts // Use effect hook to update alertsList when a new alert is added
const [alertsList, setAlertsList] = useState< useEffect(() => {
Array<{ // If there is an error alert open with data, add it to the alertsList
type: string; if (errorOpen && errorData) {
data: { title: string; list?: Array<string>; link?: string }; setErrorOpen(false);
id: string; 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,
]);
// Use effect hook to update alertsList when a new alert is added const removeAlert = (id: string) => {
useEffect(() => { setAlertsList((prevAlertsList) =>
// If there is an error alert open with data, add it to the alertsList prevAlertsList.filter((alert) => alert.id !== id)
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) => { return (
setAlertsList((prevAlertsList) => //need parent component with width and height
prevAlertsList.filter((alert) => alert.id !== id) <div className="h-full flex flex-col">
); <div className="flex grow-0 shrink basis-auto"></div>
}; <ErrorBoundary
onReset={() => {
return ( window.localStorage.removeItem("tabsData");
//need parent component with width and height window.localStorage.clear();
<div className="h-full flex flex-col"> hardReset();
<div className="flex grow-0 shrink basis-auto"></div> window.location.href = window.location.href;
<ErrorBoundary }}
onReset={() => { FallbackComponent={CrashErrorComponent}
window.localStorage.removeItem("tabsData"); >
window.localStorage.clear(); <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
hardReset(); <ExtraSidebar />
window.location.href = window.location.href; {/* Main area */}
}} <main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
FallbackComponent={CrashErrorComponent} {/* Primary column */}
> <div className="w-full h-full">
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden"> <TabsManagerComponent></TabsManagerComponent>
<ExtraSidebar /> </div>
{/* Main area */} </main>
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex"> </div>
{/* Primary column */} </ErrorBoundary>
<div className="w-full h-full"> <div></div>
<TabsManagerComponent></TabsManagerComponent> <div className="flex z-40 flex-col-reverse fixed bottom-5 left-5">
</div> {alertsList.map((alert) => (
</main> <div key={alert.id}>
</div> {alert.type === "error" ? (
</ErrorBoundary> <ErrorAlert
<div></div> key={alert.id}
<div className="flex z-40 flex-col-reverse fixed bottom-5 left-5"> title={alert.data.title}
{alertsList.map((alert) => ( list={alert.data.list}
<div key={alert.id}> id={alert.id}
{alert.type === "error" ? ( removeAlert={removeAlert}
<ErrorAlert />
key={alert.id} ) : alert.type === "notice" ? (
title={alert.data.title} <NoticeAlert
list={alert.data.list} key={alert.id}
id={alert.id} title={alert.data.title}
removeAlert={removeAlert} link={alert.data.link}
/> id={alert.id}
) : alert.type === "notice" ? ( removeAlert={removeAlert}
<NoticeAlert />
key={alert.id} ) : (
title={alert.data.title} <SuccessAlert
link={alert.data.link} key={alert.id}
id={alert.id} title={alert.data.title}
removeAlert={removeAlert} id={alert.id}
/> removeAlert={removeAlert}
) : ( />
<SuccessAlert )}
key={alert.id} </div>
title={alert.data.title} ))}
id={alert.id} </div>
removeAlert={removeAlert} <a
/> target={"_blank"}
)} href="https://logspace.ai/"
</div> className="absolute bottom-2 left-6 text-gray-300 px-2 rounded-lg text-xs cursor-pointer font-sans tracking-wide bg-gray-800 dark:bg-gray-300 dark:text-gray-800 "
))} >
</div> Created by Logspace
<a </a>
target={"_blank"} </div>
href="https://logspace.ai/" );
className="absolute bottom-2 left-6 text-gray-300 px-2 rounded-lg text-xs cursor-pointer font-sans tracking-wide bg-gray-800 dark:bg-gray-300 dark:text-gray-800 "
>
Created by Logspace
</a>
</div>
);
} }