Merge pull request #2368 from JohnDuprey/dev

Recent Pages

Author: JohnDuprey

src/components/utilities/CippActionsOffcanvas.jsx

@@ -67,6 +67,7 @@ const CippOffcanvasCard = ({ action, key }) => {
               title={`${action.label} - Details`}
               state={offcanvasVisible}
               hideFunction={() => setOffcanvasVisible(false)}
+              modal={true}
             />
           )}
         </CCardBody>

src/hooks/useNavFavouriteCheck.jsx

@@ -1,32 +1,55 @@
 import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useSelector } from 'react-redux'
+import routes from 'src/routes'
 
 export const useNavFavouriteCheck = (navigation) => {
   const favourites = useSelector((state) => state.app.userSettingsDefaults?.favourites)
-
+  const recentPages = useSelector((state) => state.app.recentPages)
+  const newNavigation = [{ component: CNavTitle, name: 'Home' }]
   if (Array.isArray(favourites)) {
-    const newNavigation = [
-      { component: CNavTitle, name: 'Favourites' },
-      {
+    newNavigation.push({
+      component: CNavGroup,
+      section: 'favourites',
+      name: 'Favourites',
+      to: '/favorites',
+      icon: <FontAwesomeIcon icon={'star'} className="nav-icon" />,
+      items: favourites.map((item) => {
+        //console.log(item)
+        return {
+          name: item.value.name,
+          to: item.value.to,
+          component: CNavItem,
+        }
+      }),
+    })
+  }
+  if (Array.isArray(recentPages)) {
+    var items = []
+
+    recentPages.map((path) => {
+      const item = routes.find((route) => route.path === path)
+      if (item?.path) {
+        items.push({
+          name: item.name,
+          to: item.path,
+          component: CNavItem,
+        })
+      }
+    })
+    if (items.length > 0) {
+      items = items.slice(0, 5)
+      newNavigation.push({
         component: CNavGroup,
-        section: 'favourites',
-        name: 'Favourites',
-        to: '/favorites',
-        icon: <FontAwesomeIcon icon={'star'} className="nav-icon" />,
-        items: favourites.map((item) => {
-          //console.log(item)
-          return {
-            name: item.value.name,
-            to: item.value.to,
-            component: CNavItem,
-          }
-        }),
-      },
-      { component: CNavTitle, name: 'Dashboard' },
-      ...navigation,
-    ]
-    return newNavigation
+        section: 'recent',
+        name: 'Recent Pages',
+        to: '/recent',
+        icon: <FontAwesomeIcon icon={'history'} className="nav-icon" />,
+        items: items,
+      })
+    }
   }
-  return navigation
+  newNavigation.push(...navigation)
+
+  return newNavigation
 }

src/layout/DefaultLayout.jsx

@@ -1,17 +1,21 @@
-import React, { useEffect, Suspense, useCallback } from 'react'
+import React, { useEffect, Suspense, useCallback, useState } from 'react'
 import { AppFooter, AppHeader, AppSidebar } from 'src/components/layout'
 import { FullScreenLoading, ModalRoot, FastSwitcherModal, Toasts } from 'src/components/utilities'
 import { useDispatch, useSelector } from 'react-redux'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router-dom'
 import { CContainer } from '@coreui/react'
 import { toggleSwitcher } from 'src/store/features/switcher'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useMediaPredicate } from 'react-media-hook'
+import { setRecentPages } from 'src/store/features/app'
 
 const DefaultLayout = () => {
   const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
   const themePreference = useSelector((state) => state.app.currentTheme)
+  const recentPages = useSelector((state) => state.app.recentPages)
+  const [lastPage, setLastPage] = useState('')
   const dispatch = useDispatch()
+  const location = useLocation()
 
   let theme
   if (themePreference === 'default') {
@@ -25,6 +29,25 @@ const DefaultLayout = () => {
     document.body.dataset.theme = theme
   })
 
+  useEffect(() => {
+    if (recentPages[0] !== location.pathname && lastPage !== location.pathname) {
+      var currentPages = []
+      currentPages.push(lastPage)
+      if (recentPages.length > 0) {
+        recentPages.forEach((page) => {
+          if (page !== lastPage) {
+            currentPages.push(page)
+          }
+        })
+      }
+      currentPages = currentPages.slice(0, 10)
+      if (currentPages.length > 0) {
+        dispatch(setRecentPages({ recentPages: currentPages }))
+      }
+    }
+    setLastPage(location.pathname)
+  }, [location.pathname, recentPages, dispatch, lastPage, setLastPage])
+
   const handleFastSwitcher = useCallback(() => {
     dispatch(toggleSwitcher())
   }, [dispatch])

src/store/features/app.js

@@ -13,6 +13,7 @@ const initialState = {
   TenantListSelector: false,
   defaultColumns: {},
   newUserDefaults: {},
+  recentPages: [],
 }
 
 export const appSlice = createSlice({
@@ -58,6 +59,9 @@ export const appSlice = createSlice({
         state[key] = action.payload?.userSettings[key]
       })
     },
+    setRecentPages: (state, action) => {
+      state.recentPages = action.payload?.recentPages
+    },
   },
 })
 
@@ -75,6 +79,7 @@ export const {
   setUserSettings,
   setDefaultColumns,
   setNewUserDefaults,
+  setRecentPages,
 } = appSlice.actions
 
 export default persistReducer(