Preparing the project structure for API connection

package.json

@@ -37,22 +37,28 @@
     "@mui/lab": "^5.0.0-alpha.69",
     "@mui/material": "^5.4.2",
     "@mui/utils": "^5.4.2",
+    "@reduxjs/toolkit": "^1.8.0",
     "@testing-library/jest-dom": "^5.16.2",
     "apexcharts": "^3.33.1",
+    "axios": "^0.26.0",
     "change-case": "^4.1.2",
     "date-fns": "^2.28.0",
     "formik": "^2.2.9",
     "framer-motion": "^6.2.6",
     "history": "^5.2.0",
+    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.2.3",
-    "react-router-dom": "^6.2.1",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "^5.0.0",
+    "redux-persist": "^6.0.0",
+    "reselect": "^4.1.5",
     "simplebar": "^5.3.6",
     "simplebar-react": "^2.3.6",
     "web-vitals": "^2.1.4",

src/App.js

@@ -1,21 +1,53 @@
-// routes
-import Router from './routes'
-// theme
-import ThemeConfig from './theme'
-import GlobalStyles from './theme/globalStyles'
-// components
-import ScrollToTop from './components/ScrollToTop'
-import { BaseOptionChartStyle } from './components/charts/BaseOptionChart'
+import { Component } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { BrowserRouter, Switch, Route } from 'react-router-dom'
+import { initSecurity, selectAuthModel } from '@src/store'
+import { Loader } from '@src/components'
+import { MainPage } from './pages'
+import './App.scss'
 
-// ----------------------------------------------------------------------
+class App extends Component {
+  static propTypes = {
+    auth: PropTypes.object,
+    initSecurity: PropTypes.func,
+    authModel: PropTypes.shape({
+      loaded: PropTypes.bool,
+      loading: PropTypes.bool,
+      error: PropTypes.string,
+      payload: PropTypes.object,
+    }),
+  }
 
-export default function App () {
-  return (
-    <ThemeConfig>
-      <ScrollToTop />
-      <GlobalStyles />
-      <BaseOptionChartStyle />
-      <Router />
-    </ThemeConfig>
-  )
+  componentDidMount () {
+    const params = new URLSearchParams(window.location.search)
+    const authCode = params.get('code')
+    this.props.initSecurity(authCode)
+  }
+
+  render () {
+    const { authModel } = this.props
+
+    return (
+      <BrowserRouter>
+        <Switch>
+          <Route path='/'>
+            {
+              authModel.loading || !authModel.loaded
+                ? <div className='app-loading'>
+                  <Loader />
+                </div>
+                : <MainPage auth={authModel.payload}></MainPage>
+            }
+          </Route>
+        </Switch>
+      </BrowserRouter>
+    )
+  }
 }
+
+const mapStateToProps = state => ({ authModel: selectAuthModel(state) })
+
+const mapDispatchToProps = { initSecurity }
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)

src/App.scss

@@ -0,0 +1,6 @@
+.app-loading {
+  display: flex row center center;
+
+  width: 100vw;
+  height: 100vh;
+}

src/components/Loader/Loader.js

@@ -0,0 +1,27 @@
+import { Component } from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import './Loader.scss'
+
+export default class Loader extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    small: PropTypes.bool,
+  }
+
+  render () {
+    const { className } = this.props
+    /**
+     * Loader from @link {https://codemyui.com/material-design-google-loader-in-css/}
+     */
+    return (
+      <div className={cn(className, 'showbox')}>
+        <div className='loader'>
+          <svg className='circular' viewBox='25 25 50 50'>
+            <circle className='path' cx='50' cy='50' r='20' fill='none' strokeWidth='2' strokeMiterlimit='10' />
+          </svg>
+        </div>
+      </div>
+    )
+  }
+}

src/components/Loader/Loader.scss

@@ -0,0 +1,97 @@
+$green: #008744;
+$blue: #0057E7;
+$red: #D62D20;
+$yellow: #FFA700;
+$white: #EEE;
+
+// scaling... any units
+$width: 100px;
+
+.loader {
+  position: relative;
+  width: $width;
+  margin: 0 auto;
+
+  &::before {
+    display: block;
+    padding-top: 100%;
+    content: "";
+  }
+}
+
+.circular {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  animation: rotate 2s linear infinite;
+  transform-origin: center center;
+}
+
+.path {
+  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+@keyframes color {
+  100%,
+  0% {
+    stroke: $red;
+  }
+
+  40% {
+    stroke: $blue;
+  }
+
+  66% {
+    stroke: $green;
+  }
+
+  80%,
+  90% {
+    stroke: $yellow;
+  }
+}
+
+// demo-specific
+body {
+  background-color: $white;
+}
+
+.showbox {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 5%;
+}

src/components/index.js

@@ -0,0 +1 @@
+export { default as Loader } from './Loader/Loader'

src/config/ConfigLoader.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { loadConfig } from './index'
+import { remotesManager } from '@src/remotes'
+
+export default class ConfigLoader extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = { isLoaded: false }
+  }
+
+  componentDidMount = async () => {
+    const config = await loadConfig()
+
+    remotesManager.initialize(config)
+    this.setState({ isLoaded: true })
+  }
+
+  render () {
+    if(!this.state.isLoaded)
+      return this.props.loading ? this.props.loading() : null
+
+    return this.props.ready(this.state.config)
+  }
+}

src/config/Splash/Splash.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Loader } from '@src/components'
+import './Splash.scss'
+
+export default class Splash extends React.Component {
+  render () {
+    return <div className='root-splash'>
+      <Loader />
+    </div>
+  }
+}

src/config/Splash/Splash.scss

@@ -0,0 +1,7 @@
+
+.root-splash {
+  display: flex row center center;
+
+  width: 100vw;
+  height: 100vh;
+}

src/config/index.js

@@ -0,0 +1,19 @@
+const config = {}
+
+const loadConfig = () => {
+  return fetch('/config.json')
+    .then(res => res.json())
+    .then((newconfig) => {
+      for(let prop in config) {
+        delete config[prop]
+      }
+      for(let prop in newconfig) {
+        config[prop] = newconfig[prop]
+      }
+
+      return config
+    })
+}
+
+export { loadConfig }
+export default config

src/index.js

@@ -1,21 +1,33 @@
-// scroll bar
-import 'simplebar/src/simplebar.css'
-
+import React from 'react'
+import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/integration/react'
 import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 import { HelmetProvider } from 'react-helmet-async'
 
-//
+import { store, persistor } from '@src/store'
+import ConfigLoader from '@src/config/ConfigLoader'
+import Splash from '@src/config/Splash/Splash'
+import './index.css'
 import App from './App'
+
 import * as serviceWorker from './serviceWorker'
 import reportWebVitals from './reportWebVitals'
-
-// ----------------------------------------------------------------------
+import 'simplebar/src/simplebar.css'
 
 ReactDOM.render(
   <HelmetProvider>
     <BrowserRouter>
-      <App />
+      <React.StrictMode>
+        <Provider store={store}>
+          <PersistGate loading={null} persistor={persistor}>
+            <ConfigLoader
+              ready={() => <App />}
+              loading={() => <Splash />}
+            />
+          </PersistGate>
+        </Provider>
+      </React.StrictMode>,
     </BrowserRouter>
   </HelmetProvider>,
   document.getElementById('root')
@@ -27,4 +39,4 @@ serviceWorker.unregister()
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
+reportWebVitals()

src/layouts/dashboard/DashboardSidebar.js

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import { Link as RouterLink, useLocation } from 'react-router-dom'
 // material
 import { styled } from '@mui/material/styles'
-import { Box, Link, Button, Drawer, Typography, Avatar, Stack } from '@mui/material'
+import { Box, Link, Drawer, Typography, Avatar, Stack } from '@mui/material'
 // mocks_
 import account from '../../_mocks_/account'
 // hooks
@@ -90,28 +90,6 @@ export default function DashboardSidebar ({ isOpenSidebar, onCloseSidebar }) {
           spacing={3}
           sx={{ pt: 5, borderRadius: 2, position: 'relative' }}
         >
-          <Box
-            component='img'
-            src='/static/illustrations/illustration_avatar.png'
-            sx={{ width: 100, position: 'absolute', top: -50 }}
-          />
-
-          <Box sx={{ textAlign: 'center' }}>
-            <Typography gutterBottom variant='h6'>
-              Get more?
-            </Typography>
-            <Typography variant='body2' sx={{ color: 'text.secondary' }}>
-              From only $69
-            </Typography>
-          </Box>
-
-          <Button
-            href='https://material-ui.com/store/items/minimal-dashboard/'
-            target='_blank'
-            variant='contained'
-          >
-            Upgrade to Pro
-          </Button>
         </Stack>
       </Box>
     </Scrollbar>