diff --git a/frontend/app/Router.js b/frontend/app/Router.js index 74e8845f7..a2e36dd8f 100644 --- a/frontend/app/Router.js +++ b/frontend/app/Router.js @@ -186,9 +186,9 @@ class Router extends React.Component { } - - {/* */} - {/* */} + {/* */} + + {/* diff --git a/frontend/app/assets/index.html b/frontend/app/assets/index.html index a9d4b0f62..03300b45c 100644 --- a/frontend/app/assets/index.html +++ b/frontend/app/assets/index.html @@ -12,6 +12,7 @@ +

Loading...

diff --git a/frontend/app/components/Dashboard/NewDashboard.tsx b/frontend/app/components/Dashboard/NewDashboard.tsx index 77a784ec2..46901a87f 100644 --- a/frontend/app/components/Dashboard/NewDashboard.tsx +++ b/frontend/app/components/Dashboard/NewDashboard.tsx @@ -30,7 +30,9 @@ function NewDashboard(props) { if (dashboardId) { store.selectDashboardById(dashboardId); } else { - store.selectDefaultDashboard(); + store.selectDefaultDashboard().then((resp) => { + history.push(withSiteId(dashboardSelected(resp.dashboardId), siteId)); + }); } } diff --git a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx index 7f223bb55..5a02b25b7 100644 --- a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx +++ b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx @@ -24,7 +24,7 @@ function DashboardSideMenu(props) { {store.dashboards.map(item => ( { + let { handleModal } = React.useContext(ModalContext); + return ( +
+ Hello this is test +
+ ) +} function DashboardView(props) { + let { handleModal } = React.useContext(ModalContext); const { store } = props; const dashboard = store.selectedDashboard const list = dashboard?.widgets; + useEffect(() => { + handleModal() + }, []) return (
diff --git a/frontend/app/components/Dashboard/store/dashboardStore.ts b/frontend/app/components/Dashboard/store/dashboardStore.ts index 854565e1b..54e57d31c 100644 --- a/frontend/app/components/Dashboard/store/dashboardStore.ts +++ b/frontend/app/components/Dashboard/store/dashboardStore.ts @@ -217,14 +217,17 @@ export default class DashboardStore { } selectDefaultDashboard = () => { - if (this.dashboards.length > 0) { - const pinnedDashboard = this.dashboards.find(d => d.isPinned) - if (pinnedDashboard) { - this.selectedDashboard = pinnedDashboard - } else { - this.selectedDashboard = this.dashboards[0] + return new Promise((resolve, reject) => { + if (this.dashboards.length > 0) { + const pinnedDashboard = this.dashboards.find(d => d.isPinned) + if (pinnedDashboard) { + this.selectedDashboard = pinnedDashboard + } else { + this.selectedDashboard = this.dashboards[0] + } } - } + resolve(this.selectedDashboard) + }) } } diff --git a/frontend/app/components/Modal/Modal.js b/frontend/app/components/Modal/Modal.js index cb4738cd0..0d078cc69 100644 --- a/frontend/app/components/Modal/Modal.js +++ b/frontend/app/components/Modal/Modal.js @@ -1,13 +1,23 @@ -export default class Modal extends React.PureComponent { - constructor(props) { - super(props); - this.el = document.createElement('div'); - } +import React from "react"; +import ReactDOM from "react-dom"; +import { ModalContext } from "./modalContext"; +import ModalOverlay from "./ModalOverlay"; - render() { +const Modal = () => { + let { modalContent, handleModal, modal } = React.useContext(ModalContext); + if (modal) { return ReactDOM.createPortal( - this.props.children, - this.el, +
+ + {modalContent} + +
, + document.querySelector("#modal-root") ); - } -} \ No newline at end of file + } else return null; +}; + +export default Modal; diff --git a/frontend/app/components/Modal/ModalContext.js b/frontend/app/components/Modal/ModalContext.js index 197358f97..89c453a97 100644 --- a/frontend/app/components/Modal/ModalContext.js +++ b/frontend/app/components/Modal/ModalContext.js @@ -1,38 +1,18 @@ -const ModalContext = React.createContext({ - component: null, - props: {}, - content: null, - showModal: () => {}, - hideModal: () => {} -}); +import React from "react"; +import useModal from "./useModal"; +import Modal from "./modal"; -export class ModalProvider extends React.PureComponent { - showModal = (component, props = {}) => { - this.setState({ - component, - props - }); - }; +let ModalContext; +let { Provider } = (ModalContext = React.createContext()); - hideModal = () => this.setState({ - component: null, - props: {}, - }); +let ModalProvider = ({ children }) => { + let { modal, handleModal, modalContent } = useModal(); + return ( + + + {children} + + ); +}; - state = { - component: null, - props: {}, - showModal: this.showModal, - hideModal: this.hideModal - }; - - render() { - return ( - - {this.props.children} - - ); - } -} - -export const ModalConsumer = ModalContext.Consumer; +export { ModalContext, ModalProvider }; diff --git a/frontend/app/components/Modal/ModalOverlay.tsx b/frontend/app/components/Modal/ModalOverlay.tsx new file mode 100644 index 000000000..003f29ee6 --- /dev/null +++ b/frontend/app/components/Modal/ModalOverlay.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { ModalContext } from "App/components/Modal/modalContext"; +import useModal from 'App/components/Modal/useModal'; + +function ModalOverlay({ children }) { + let modal = useModal(); + // console.log('m', m); + + return ( +
modal.handleModal(false)} style={{ background: "rgba(0,0,0,0.8)", zIndex: '9999' }}> + {children} +
+ ); +} + +export default ModalOverlay; \ No newline at end of file diff --git a/frontend/app/components/Modal/useModal.ts b/frontend/app/components/Modal/useModal.ts new file mode 100644 index 000000000..edcf08e98 --- /dev/null +++ b/frontend/app/components/Modal/useModal.ts @@ -0,0 +1,15 @@ +import React from "react"; + +export default () => { + let [modal, setModal] = React.useState(false); + let [modalContent, setModalContent] = React.useState("I'm the Modal Content"); + + let handleModal = (content = false) => { + setModal(!modal); + if (content) { + setModalContent(content); + } + }; + + return { modal, handleModal, modalContent }; +}; diff --git a/frontend/app/initialize.js b/frontend/app/initialize.js index 96a527f14..026bb5e76 100644 --- a/frontend/app/initialize.js +++ b/frontend/app/initialize.js @@ -7,6 +7,7 @@ import store from './store'; import Router from './Router'; import DashboardStore from './components/Dashboard/store'; import { DashboardStoreProvider } from './components/Dashboard/store/store'; +import { ModalProvider } from './components/Modal/modalContext'; document.addEventListener('DOMContentLoaded', () => { @@ -14,9 +15,11 @@ document.addEventListener('DOMContentLoaded', () => { render( ( - - - + + + + + ), document.getElementById('app'),