refactor context wrapper
This commit is contained in:
anovazzi1
parent
d54da3b878
commit
ab1a4c9801
2 changed files with 121 additions and 122 deletions
|
|
@ -7,7 +7,7 @@ import ErrorAlert from "./alerts/error";
|
||||||
import NoticeAlert from "./alerts/notice";
|
import NoticeAlert from "./alerts/notice";
|
||||||
import SuccessAlert from "./alerts/success";
|
import SuccessAlert from "./alerts/success";
|
||||||
import ExtraSidebar from "./components/ExtraSidebarComponent";
|
import ExtraSidebar from "./components/ExtraSidebarComponent";
|
||||||
import { alertContext } from "./contexts/alertContext";
|
import { alertContext } from "./contexts/alertContext";
|
||||||
import { locationContext } from "./contexts/locationContext";
|
import { locationContext } from "./contexts/locationContext";
|
||||||
import FlowPage from "./pages/FlowPage";
|
import FlowPage from "./pages/FlowPage";
|
||||||
import Sidebar from "./components/SidebarComponent";
|
import Sidebar from "./components/SidebarComponent";
|
||||||
|
|
@ -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} =
|
let { setAtual, setShowSideBar, setIsStackedOpen } =
|
||||||
useContext(locationContext);
|
useContext(locationContext);
|
||||||
let location = useLocation();
|
let location = useLocation();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setAtual(location.pathname.replace(/\/$/g, "").split("/"));
|
setAtual(location.pathname.replace(/\/$/g, "").split("/"));
|
||||||
setShowSideBar(true);
|
setShowSideBar(true);
|
||||||
setIsStackedOpen(true);
|
setIsStackedOpen(true);
|
||||||
}, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
|
}, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
errorData,
|
errorData,
|
||||||
errorOpen,
|
errorOpen,
|
||||||
setErrorOpen,
|
setErrorOpen,
|
||||||
noticeData,
|
noticeData,
|
||||||
noticeOpen,
|
noticeOpen,
|
||||||
setNoticeOpen,
|
setNoticeOpen,
|
||||||
successData,
|
successData,
|
||||||
successOpen,
|
successOpen,
|
||||||
setSuccessOpen,
|
setSuccessOpen,
|
||||||
} = useContext(alertContext);
|
} = useContext(alertContext);
|
||||||
|
|
||||||
const [alertsList, setAlertsList] = useState([]);
|
const [alertsList, setAlertsList] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (errorOpen && errorData) {
|
if (errorOpen && errorData) {
|
||||||
setErrorOpen(false);
|
setErrorOpen(false);
|
||||||
setAlertsList((old) => {
|
setAlertsList((old) => {
|
||||||
let newAlertsList = [
|
let newAlertsList = [
|
||||||
...old,
|
...old,
|
||||||
{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
|
{ type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() },
|
||||||
];
|
];
|
||||||
return newAlertsList;
|
return newAlertsList;
|
||||||
});
|
});
|
||||||
} else if (noticeOpen && noticeData) {
|
} else if (noticeOpen && noticeData) {
|
||||||
setNoticeOpen(false);
|
setNoticeOpen(false);
|
||||||
setAlertsList((old) => {
|
setAlertsList((old) => {
|
||||||
let newAlertsList = [
|
let newAlertsList = [
|
||||||
...old,
|
...old,
|
||||||
{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
|
{ type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() },
|
||||||
];
|
];
|
||||||
return newAlertsList;
|
return newAlertsList;
|
||||||
});
|
});
|
||||||
} else if (successOpen && successData) {
|
} else if (successOpen && successData) {
|
||||||
setSuccessOpen(false);
|
setSuccessOpen(false);
|
||||||
setAlertsList((old) => {
|
setAlertsList((old) => {
|
||||||
let newAlertsList = [
|
let newAlertsList = [
|
||||||
...old,
|
...old,
|
||||||
{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
|
{ type: "success", data: _.cloneDeep(successData), id: _.uniqueId() },
|
||||||
];
|
];
|
||||||
return newAlertsList;
|
return newAlertsList;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
|
}, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]);
|
||||||
|
|
||||||
const removeAlert = (id: number) => {
|
const removeAlert = (id: number) => {
|
||||||
setAlertsList((prevAlertsList) =>
|
setAlertsList((prevAlertsList) =>
|
||||||
prevAlertsList.filter((alert) => alert.id !== id)
|
prevAlertsList.filter((alert) => alert.id !== id)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const user = {
|
const user = {
|
||||||
name: "Whitney Francis",
|
name: "Whitney Francis",
|
||||||
email: "whitney.francis@example.com",
|
email: "whitney.francis@example.com",
|
||||||
imageUrl:
|
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",
|
"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 userNavigation = [
|
const userNavigation = [
|
||||||
{ name: "Your Projects", href: "/" },
|
{ name: "Your Projects", href: "/" },
|
||||||
// {
|
// {
|
||||||
// name: "Account settings",
|
// name: "Account settings",
|
||||||
// href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
|
// href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser",
|
||||||
// },
|
// },
|
||||||
{ name: "Sign out", href: "/" },
|
{ name: "Sign out", href: "/" },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
//need parent component with width and height
|
//need parent component with width and height
|
||||||
<div className="h-full flex flex-col">
|
<div className="h-full flex flex-col">
|
||||||
|
<div className="flex grow-0 shrink basis-auto">
|
||||||
<div className="flex grow-0 shrink basis-auto">
|
<Header userNavigation={userNavigation} user={user}></Header>
|
||||||
<Header userNavigation={userNavigation} user={user}></Header>
|
</div>
|
||||||
</div>
|
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
|
||||||
<div className="flex grow shrink basis-auto min-h-0 flex-1 overflow-hidden">
|
<Sidebar />
|
||||||
<Sidebar />
|
<ExtraSidebar />
|
||||||
<ExtraSidebar />
|
|
||||||
|
|
||||||
{/* Main area */}
|
{/* Main area */}
|
||||||
<main className="min-w-0 flex-1 border-t border-gray-200 flex">
|
<main className="min-w-0 flex-1 border-t border-gray-200 flex">
|
||||||
{/* Primary column */}
|
{/* Primary column */}
|
||||||
<div className="w-full h-full">
|
<div className="w-full h-full">
|
||||||
<TabsManager></TabsManager>
|
<TabsManager></TabsManager>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
|
<div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
|
||||||
{alertsList.map((alert) => (
|
{alertsList.map((alert) => (
|
||||||
<div key={alert.id}>
|
<div key={alert.id}>
|
||||||
{alert.type === "error" ? (
|
{alert.type === "error" ? (
|
||||||
<ErrorAlert
|
<ErrorAlert
|
||||||
key={alert.id}
|
key={alert.id}
|
||||||
title={alert.data.title}
|
title={alert.data.title}
|
||||||
list={alert.data.list}
|
list={alert.data.list}
|
||||||
id={alert.id}
|
id={alert.id}
|
||||||
removeAlert={removeAlert}
|
removeAlert={removeAlert}
|
||||||
/>
|
/>
|
||||||
) : alert.type === "notice" ? (
|
) : alert.type === "notice" ? (
|
||||||
<NoticeAlert
|
<NoticeAlert
|
||||||
key={alert.id}
|
key={alert.id}
|
||||||
title={alert.data.title}
|
title={alert.data.title}
|
||||||
link={alert.data.link}
|
link={alert.data.link}
|
||||||
id={alert.id}
|
id={alert.id}
|
||||||
removeAlert={removeAlert}
|
removeAlert={removeAlert}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<SuccessAlert
|
<SuccessAlert
|
||||||
key={alert.id}
|
key={alert.id}
|
||||||
title={alert.data.title}
|
title={alert.data.title}
|
||||||
id={alert.id}
|
id={alert.id}
|
||||||
removeAlert={removeAlert}
|
removeAlert={removeAlert}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue