Pages Membership

:exit

:q

src/pages/App/App.js

@@ -1,12 +1,11 @@
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import {DesktopLayout} from "./DesktopLayout";
 import {useMediaQuery} from 'react-responsive';
 import {useStore} from "../../utils/useStore";
-import {useHistory} from "react-router-dom";
-
+import {ModalLoader} from "../../component/Modal/ModalLoader";
+import {ModalLoaderContext} from "../../utils/modal";
 
 export const App = () => {
-  // TODO: add mobile layout
   const store = useStore();
   const mediaQuery = {
     isDesktop: useMediaQuery({minWidth: 1024}),
@@ -15,11 +14,23 @@ export const App = () => {
     isNotMobile: useMediaQuery({minWidth: 768}),
   };
 
+  const [modalLoading, setModalLoading] = useState(false);
+  const [modalText, setModalText] = useState(undefined);
+  const modalContextValue = {
+    setLoading: setModalLoading,
+    setText: setModalText,
+  };
+
   useEffect(() => {
     store.ui.setMediaQuery(mediaQuery);
   });
-//   const isMobileDevice = useMediaQuery({
-//     query: "(min-device-width: 480px)",
-//   });
-  return <DesktopLayout/>;
+
+  return (
+      <>
+        <ModalLoader isOpen={modalLoading} text={modalText}/>
+        <ModalLoaderContext.Provider value={modalContextValue}>
+          <DesktopLayout/>
+        </ModalLoaderContext.Provider>
+      </>
+  );
 };