storing poject current

src/@core/layouts/components/navbar/NavbarUser.js

@@ -5,6 +5,9 @@ import UserDropdown from './UserDropdown'
 import NavbarSearch from './NavbarSearch'
 import NotificationDropdown from './NotificationDropdown'
 
+import SelectProject from './SelectProject'
+
+
 // ** Third Party Components
 import { Sun, Moon } from 'react-feather'
 import { NavItem, NavLink } from 'reactstrap'
@@ -25,11 +28,18 @@ const NavbarUser = props => {
   return (
     <ul className='nav navbar-nav align-items-center ml-auto'>
       {/* <IntlDropdown /> */}
+      <NavItem className='d-none d-lg-block'>
+        <NavLink className='nav-link-style'>
+          <SelectProject />
+        </NavLink>
+      </NavItem>
+      
       <NavItem className='d-none d-lg-block'>
         <NavLink className='nav-link-style'>
           <ThemeToggler />
         </NavLink>
       </NavItem>
+
       {/* <NavbarSearch /> */}
       {/* <CartDropdown /> */}
       {/* <NotificationDropdown /> */}

src/@core/layouts/components/navbar/SelectProject.js

+import { useState, useEffect, Fragment } from 'react'
+import AsyncSelect from 'react-select/async'
+import { useSelector, useDispatch } from 'react-redux'
+import { selectThemeColors } from '@utils'
+import { getData_projects } from '@src/views/settings/store/actions'
+import { handleProjectSelected } from '@store/actions/navbar'
+
+
+// 
+const SelectProject = props => {
+
+    const dispatch = useDispatch()
+    const store = useSelector(state => state.projectsettings)
+    const [dataProject, setProjectData] = useState([])
+    
+    const filterProjects = inputValue => {
+        return dataProject.filter(i => i.label.toLowerCase().includes(inputValue.toLowerCase()))
+      }
+    
+    const loadOptions = (inputValue, callback) => {
+    
+        setTimeout(() => {
+          callback(filterProjects(inputValue))
+        }, 2000)
+      }
+    const handleInputChange = newValue => { 
+        const val = newValue.replace(/\W/g, '')
+        return val
+      }
+    const handleChange = value => {
+        console.log(value)
+        dispatch(handleProjectSelected(value))
+        
+    }
+    useEffect(() => {
+        if (!store.allDataProjects || store.allDataProjects.length < 1) {
+              dispatch(getData_projects({
+                start: 0,
+                length: 1000,
+                q: null
+            }))
+            }
+        }, [dispatch])
+
+    useEffect(() => {
+        if (store.allDataProjects !== null) {
+          const proj = store.allDataProjects.map(elm => {
+            return {
+              value: elm.id,
+              label: elm.app_name
+            }
+          }) 
+          setProjectData(proj)
+          
+      console.log(proj)
+        }
+      }, [store.allDataProjects])
+
+return  <Fragment>
+    { dataProject.length > 0 ? <AsyncSelect
+        isClearable={false}
+        className='react-select'
+        classNamePrefix='select'
+        name='callback-react-select'
+        loadOptions={loadOptions}
+        defaultOptions
+        onInputChange={handleInputChange}
+        onChange={handleChange}
+        theme={selectThemeColors}
+        /> : <div>Loading...</div> }
+</Fragment>
+}
+
+export default SelectProject
\ No newline at end of file

src/redux/actions/navbar/index.js

@@ -24,3 +24,4 @@ export const updateBookmarked = id => {
 
 // ** Handle Bookmarks & Main Search Queries
 export const handleSearchQuery = val => dispatch => dispatch({ type: 'HANDLE_SEARCH_QUERY', val })
+export const handleProjectSelected = val => dispatch => dispatch({ type: 'HANDLE_PROJECT_SELECTED', val })

src/redux/reducers/navbar/index.js

@@ -2,13 +2,16 @@
 const initialState = {
   suggestions: [],
   bookmarks: [],
-  query: ''
+  query: '',
+  projectCurrent: null
 }
 
 const navbarReducer = (state = initialState, action) => {
   switch (action.type) {
     case 'HANDLE_SEARCH_QUERY':
       return { ...state, query: action.val }
+    case 'HANDLE_PROJECT_SELECTED':
+      return { ...state, projectCurrent: action.val }
     case 'GET_BOOKMARKS':
       return { ...state, suggestions: action.data, bookmarks: action.bookmarks }
     case 'UPDATE_BOOKMARKED':