refactor: update app components structure

src/_nav.js

@@ -0,0 +1,321 @@
+import React from 'react'
+import CIcon from '@coreui/icons-react'
+import { NavLink } from 'react-router-dom'
+
+const _nav = [
+  {
+    _component: 'CNavItem',
+    as: NavLink,
+    anchor: 'Dashboard',
+    to: '/dashboard',
+    icon: <CIcon name="cil-speedometer" customClasses="nav-icon" />,
+    badge: {
+      color: 'info',
+      text: 'NEW',
+    },
+  },
+  {
+    _component: 'CNavTitle',
+    anchor: 'Theme',
+  },
+  {
+    _component: 'CNavItem',
+    as: NavLink,
+    anchor: 'Colors',
+    to: '/theme/colors',
+    icon: <CIcon name="cil-drop" customClasses="nav-icon" />,
+  },
+  {
+    _component: 'CNavItem',
+    as: NavLink,
+    anchor: 'Typography',
+    to: '/theme/typography',
+    icon: <CIcon name="cil-pencil" customClasses="nav-icon" />,
+  },
+  {
+    _component: 'CNavTitle',
+    anchor: 'Components',
+  },
+  {
+    _component: 'CNavGroup',
+    as: NavLink,
+    anchor: 'Base',
+    to: '/to',
+    icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
+    items: [
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Accordion',
+        to: '/base/accordion',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Breadcrumb',
+        to: '/base/breadcrumbs',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Cards',
+        to: '/base/cards',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Carousel',
+        to: '/base/carousels',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Collapse',
+        to: '/base/collapses',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'List group',
+        to: '/base/list-groups',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Navs & Tabs',
+        to: '/base/navs',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Pagination',
+        to: '/base/paginations',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Popovers',
+        to: '/base/popovers',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Progress',
+        to: '/base/progress',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Spinners',
+        to: '/base/spinners',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Tables',
+        to: '/base/tables',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Tooltips',
+        to: '/base/tooltips',
+      },
+    ],
+  },
+  {
+    _component: 'CNavGroup',
+    anchor: 'Buttons',
+    icon: <CIcon name="cil-cursor" customClasses="nav-icon" />,
+    items: [
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Buttons',
+        to: '/buttons/buttons',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Buttons groups',
+        to: '/buttons/button-groups',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Dropdowns',
+        to: '/buttons/dropdowns',
+      },
+    ],
+  },
+  {
+    _component: 'CNavGroup',
+    anchor: 'Forms',
+    icon: <CIcon name="cil-notes" customClasses="nav-icon" />,
+    items: [
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Form Control',
+        to: '/forms/form-control',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Select',
+        to: '/forms/select',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Checks & Radios',
+        to: '/forms/checks-radios',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Range',
+        to: '/forms/range',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Input Group',
+        to: '/forms/input-group',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Floating Labels',
+        to: '/forms/floating-labels',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Layout',
+        to: '/forms/layout',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Validation',
+        to: '/forms/validation',
+      },
+    ],
+  },
+  {
+    _component: 'CNavItem',
+    as: NavLink,
+    anchor: 'Charts',
+    to: '/charts',
+    icon: <CIcon name="cil-chart-pie" customClasses="nav-icon" />,
+  },
+  {
+    _component: 'CNavGroup',
+    anchor: 'Icons',
+    icon: <CIcon name="cil-star" customClasses="nav-icon" />,
+    items: [
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'CoreUI Free',
+        to: '/icons/coreui-icons',
+        badge: {
+          color: 'success',
+          text: 'NEW',
+        },
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'CoreUI Flags',
+        to: '/icons/flags',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'CoreUI Brands',
+        to: '/icons/brands',
+      },
+    ],
+  },
+  {
+    _component: 'CNavGroup',
+    anchor: 'Notifications',
+    icon: <CIcon name="cil-bell" customClasses="nav-icon" />,
+    items: [
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Alerts',
+        to: '/notifications/alerts',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Badges',
+        to: '/notifications/badges',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Modal',
+        to: '/notifications/modals',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Toasts',
+        to: '/notifications/toasts',
+      },
+    ],
+  },
+  {
+    _component: 'CNavItem',
+    as: NavLink,
+    anchor: 'Widgets',
+    to: '/widgets',
+    icon: <CIcon name="cil-calculator" customClasses="nav-icon" />,
+    badge: {
+      color: 'info',
+      text: 'NEW',
+    },
+  },
+  {
+    _component: 'CNavTitle',
+    anchor: 'Extras',
+  },
+  {
+    _component: 'CNavGroup',
+    anchor: 'Pages',
+    icon: <CIcon name="cil-star" customClasses="nav-icon" />,
+    items: [
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Login',
+        to: '/login',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Register',
+        to: '/register',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Error 404',
+        to: '/404',
+      },
+      {
+        _component: 'CNavItem',
+        as: NavLink,
+        anchor: 'Error 500',
+        to: '/500',
+      },
+    ],
+  },
+]
+
+export default _nav

src/components/AppContent.js

@@ -0,0 +1,37 @@
+import React, { Suspense } from 'react'
+import { Redirect, Route, Switch } from 'react-router-dom'
+import { CContainer, CSpinner } from '@coreui/react'
+
+// routes config
+import routes from '../routes'
+
+const AppContent = () => {
+  return (
+    <CContainer lg>
+      <Suspense fallback={<CSpinner color="primary" />}>
+        <Switch>
+          {routes.map((route, idx) => {
+            return (
+              route.component && (
+                <Route
+                  key={idx}
+                  path={route.path}
+                  exact={route.exact}
+                  name={route.name}
+                  render={(props) => (
+                    <>
+                      <route.component {...props} />
+                    </>
+                  )}
+                />
+              )
+            )
+          })}
+          <Redirect from="/" to="/dashboard" />
+        </Switch>
+      </Suspense>
+    </CContainer>
+  )
+}
+
+export default React.memo(AppContent)

src/components/AppHeader.js

@@ -13,7 +13,9 @@ import {
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 
-import { AppBreadcrumb, AppHeaderDropdown } from '../containers/index'
+import { AppBreadcrumb } from './index'
+
+import { AppHeaderDropdown } from './header/index'
 
 const AppHeader = () => {
   const dispatch = useDispatch()

src/components/AppSidebar.js

@@ -12,7 +12,7 @@ import {
 import CIcon from '@coreui/icons-react'
 
 // sidebar nav config
-import navigation from '../containers/_nav'
+import navigation from '../_nav'
 
 const AppSidebar = () => {
   const dispatch = useDispatch()

src/components/header/index.js

@@ -0,0 +1,3 @@
+import AppHeaderDropdown from './AppHeaderDropdown'
+
+export { AppHeaderDropdown }

src/components/index.js

@@ -0,0 +1,17 @@
+import AppBreadcrumb from './AppBreadcrumb'
+import AppContent from './AppContent'
+import AppFooter from './AppFooter'
+import AppHeader from './AppHeader'
+import AppHeaderDropdown from './header/AppHeaderDropdown'
+import DefaultLayout from '../layout/DefaultLayout'
+import AppSidebar from './AppSidebar'
+
+export {
+  AppBreadcrumb,
+  AppContent,
+  AppFooter,
+  AppHeader,
+  AppHeaderDropdown,
+  DefaultLayout,
+  AppSidebar,
+}

src/index.js

@@ -1,7 +1,5 @@
-// import 'react-app-polyfill/ie11' // For IE 11 support TODO: remove in final version
 import 'react-app-polyfill/stable'
 import 'core-js'
-import './polyfill'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'

src/layout/DefaultLayout.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { TheContent, AppSidebar, AppFooter, AppHeader } from '../containers/index'
+import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'
 
 const DefaultLayout = () => {
   return (
@@ -8,7 +8,7 @@ const DefaultLayout = () => {
       <div className="wrapper d-flex flex-column min-vh-100 bg-light">
         <AppHeader />
         <div className="body flex-grow-1 px-3">
-          <TheContent />
+          <AppContent />
         </div>
         <AppFooter />
       </div>