From ab1a4c9801331dc9b0c450a521555fc5fe61b6ae Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 14:13:46 -0300 Subject: [PATCH] refactor context wrapper --- space_flow/src/App.tsx | 242 +++++++++++++++--------------- space_flow/src/contexts/index.tsx | 1 + 2 files changed, 121 insertions(+), 122 deletions(-) diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index 32b87e72f..e3e53ecff 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -7,7 +7,7 @@ import ErrorAlert from "./alerts/error"; import NoticeAlert from "./alerts/notice"; import SuccessAlert from "./alerts/success"; import ExtraSidebar from "./components/ExtraSidebarComponent"; -import { alertContext } from "./contexts/alertContext"; +import { alertContext } from "./contexts/alertContext"; import { locationContext } from "./contexts/locationContext"; import FlowPage from "./pages/FlowPage"; import Sidebar from "./components/SidebarComponent"; @@ -16,134 +16,132 @@ import { TabsProvider } from "./contexts/tabsContext"; import { TabsManager } from "./pages/FlowPage/flowManager"; 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 } = + useContext(locationContext); + let location = useLocation(); + useEffect(() => { + setAtual(location.pathname.replace(/\/$/g, "").split("/")); + setShowSideBar(true); + setIsStackedOpen(true); + }, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]); - const { - errorData, - errorOpen, - setErrorOpen, - noticeData, - noticeOpen, - setNoticeOpen, - successData, - successOpen, - setSuccessOpen, - } = useContext(alertContext); + const { + errorData, + errorOpen, + setErrorOpen, + noticeData, + noticeOpen, + setNoticeOpen, + successData, + successOpen, + setSuccessOpen, + } = useContext(alertContext); - const [alertsList, setAlertsList] = useState([]); + 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(() => { + 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]); - const removeAlert = (id: number) => { - setAlertsList((prevAlertsList) => - prevAlertsList.filter((alert) => alert.id !== id) - ); - }; + const removeAlert = (id: number) => { + setAlertsList((prevAlertsList) => + prevAlertsList.filter((alert) => alert.id !== id) + ); + }; - const user = { - name: "Whitney Francis", - 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 = { + name: "Whitney Francis", + 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 userNavigation = [ - { name: "Your Projects", href: "/" }, - // { - // name: "Account settings", - // href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser", - // }, - { name: "Sign out", href: "/" }, - ]; + const userNavigation = [ + { name: "Your Projects", href: "/" }, + // { + // name: "Account settings", + // href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser", + // }, + { name: "Sign out", href: "/" }, + ]; - return ( - //need parent component with width and height -
- -
-
-
-
- - + return ( + //need parent component with width and height +
+
+
+
+
+ + - {/* Main area */} -
- {/* Primary column */} -
- -
-
-
-
- {alertsList.map((alert) => ( -
- {alert.type === "error" ? ( - - ) : alert.type === "notice" ? ( - - ) : ( - - )} -
- ))} -
-
- ); + {/* Main area */} +
+ {/* Primary column */} +
+ +
+
+
+
+ {alertsList.map((alert) => ( +
+ {alert.type === "error" ? ( + + ) : alert.type === "notice" ? ( + + ) : ( + + )} +
+ ))} +
+
+ ); } diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx index c4a22cad6..8ad06ab0b 100644 --- a/space_flow/src/contexts/index.tsx +++ b/space_flow/src/contexts/index.tsx @@ -5,6 +5,7 @@ import { TabsProvider } from "./tabsContext"; import { TypesProvider } from "./typesContext"; export default function ContextWrapper({ children }) { + //element to wrap all context return ( <>