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

refactor context wrapper

Browse source
This commit is contained in:
anovazzi1 2023-02-27 14:13:46 -03:00
commit ab1a4c9801
2 changed files with 121 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

240
space_flow/src/App.tsx
View file

@ -16,134 +16,132 @@ import { TabsProvider } from "./contexts/tabsContext";
import { TabsManager } from "./pages/FlowPage/flowManager"; import { TabsManager } from "./pages/FlowPage/flowManager";
export default function App() { export default function App() {
var _ = require("lodash"); var _ = require("lodash");
let { setAtual, setShowSideBar, setIsStackedOpen } =
useContext(locationContext);
let location = useLocation();
useEffect(() => {
setAtual(location.pathname.replace(/\/$/g, "").split("/"));
setShowSideBar(true);
setIsStackedOpen(true);
}, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
let { setAtual, setShowSideBar, setIsStackedOpen} = const {
useContext(locationContext); errorData,
let location = useLocation(); errorOpen,
useEffect(() => { setErrorOpen,
setAtual(location.pathname.replace(/\/$/g, "").split("/")); noticeData,
setShowSideBar(true); noticeOpen,
setIsStackedOpen(true); setNoticeOpen,
}, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]); successData,
successOpen,
setSuccessOpen,
} = useContext(alertContext);
const { const [alertsList, setAlertsList] = useState([]);
errorData,
errorOpen,
setErrorOpen,
noticeData,
noticeOpen,
setNoticeOpen,
successData,
successOpen,
setSuccessOpen,
} = useContext(alertContext);
const [alertsList, setAlertsList] = useState([]); 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, successData, successOpen]);
useEffect(() => { const removeAlert = (id: number) => {
if (errorOpen && errorData) { setAlertsList((prevAlertsList) =>
setErrorOpen(false); prevAlertsList.filter((alert) => alert.id !== id)
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, successData, successOpen]);
const removeAlert = (id: number) => { const user = {
setAlertsList((prevAlertsList) => name: "Whitney Francis",
prevAlertsList.filter((alert) => alert.id !== id) email: "whitney.francis@example.com",
); imageUrl:
}; "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
};
const user = { const userNavigation = [
name: "Whitney Francis", { name: "Your Projects", href: "/" },
email: "whitney.francis@example.com", // {
imageUrl: // name: "Account settings",
"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", // href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
}; // },
{ name: "Sign out", href: "/" },
];
const userNavigation = [ return (
{ name: "Your Projects", href: "/" }, //need parent component with width and height
// { <div className="h-full flex flex-col">
// name: "Account settings", <div className="flex grow-0 shrink basis-auto">
// href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser", <Header userNavigation={userNavigation} user={user}></Header>
// }, </div>
{ name: "Sign out", href: "/" }, <div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
]; <Sidebar />
<ExtraSidebar />
return ( {/* Main area */}
//need parent component with width and height <main className="min-w-0 flex-1 border-t border-gray-200 flex">
<div className="h-full flex flex-col"> {/* Primary column */}
<div className="w-full h-full">
<div className="flex grow-0 shrink basis-auto"> <TabsManager></TabsManager>
<Header userNavigation={userNavigation} user={user}></Header> </div>
</div> </main>
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden"> </div>
<Sidebar /> <div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
<ExtraSidebar /> {alertsList.map((alert) => (
<div key={alert.id}>
{/* Main area */} {alert.type === "error" ? (
<main className="min-w-0 flex-1 border-t border-gray-200 flex"> <ErrorAlert
{/* Primary column */} key={alert.id}
<div className="w-full h-full"> title={alert.data.title}
<TabsManager></TabsManager> list={alert.data.list}
</div> id={alert.id}
</main> removeAlert={removeAlert}
</div> />
<div className="flex z-50 flex-col-reverse fixed bottom-5 left-5"> ) : alert.type === "notice" ? (
{alertsList.map((alert) => ( <NoticeAlert
<div key={alert.id}> key={alert.id}
{alert.type === "error" ? ( title={alert.data.title}
<ErrorAlert link={alert.data.link}
key={alert.id} id={alert.id}
title={alert.data.title} removeAlert={removeAlert}
list={alert.data.list} />
id={alert.id} ) : (
removeAlert={removeAlert} <SuccessAlert
/> key={alert.id}
) : alert.type === "notice" ? ( title={alert.data.title}
<NoticeAlert id={alert.id}
key={alert.id} removeAlert={removeAlert}
title={alert.data.title} />
link={alert.data.link} )}
id={alert.id} </div>
removeAlert={removeAlert} ))}
/> </div>
) : ( </div>
<SuccessAlert );
key={alert.id}
title={alert.data.title}
id={alert.id}
removeAlert={removeAlert}
/>
)}
</div>
))}
</div>
</div>
);
} }

1
space_flow/src/contexts/index.tsx
View file

@ -5,6 +5,7 @@ import { TabsProvider } from "./tabsContext";
import { TypesProvider } from "./typesContext"; import { TypesProvider } from "./typesContext";
export default function ContextWrapper({ children }) { export default function ContextWrapper({ children }) {
//element to wrap all context
return ( return (
<> <>
<LocationProvider> <LocationProvider>