WIP General Search.

client/src/components/Dashboard/Dashboard.js

@@ -1,27 +1,29 @@
 import React from 'react';
-import {Switch, Route} from 'react-router';
+import { Switch, Route } from 'react-router';
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 import DialogsContainer from 'components/DialogsContainer';
 import PreferencesContent from 'components/Preferences/PreferencesContent';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
+import Search from 'containers/Dashboard/GeneralSearch/Search';
 
-export default function() {
+export default function () {
   return (
-    <div className="dashboard dashboard--preferences">
+    <div className='dashboard'>
       <Switch>
-        <Route path="/dashboard/preferences">
+        <Route path='/dashboard/preferences'>
           <Sidebar />
           <PreferencesSidebar />
           <PreferencesContent />
         </Route>
 
-        <Route path="/dashboard">
+        <Route path='/dashboard'>
           <Sidebar />
           <DashboardContent />
         </Route>
       </Switch>
+      <Search />
       <DialogsContainer />
     </div>
   );
-}
+}

client/src/components/Dashboard/DashboardTopbar.js

@@ -14,9 +14,16 @@ import {
 import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
 import Icon from 'components/Icon';
-import Search from 'containers/Dashboard/GeneralSearch/Search';
+import SearchConnect from 'connectors/Search.connect';
+import { compose } from 'utils';
 
-function DashboardTopbar({ pageTitle, pageSubtitle, editViewId }) {
+function DashboardTopbar({
+  pageTitle,
+  pageSubtitle,
+  editViewId,
+  globalSearchShow,
+  openGlobalSearch,
+}) {
   const history = useHistory();
 
   const handlerClickEditView = () => {
@@ -70,8 +77,13 @@ function DashboardTopbar({ pageTitle, pageSubtitle, editViewId }) {
       <div class='dashboard__topbar-right'>
         <Navbar class='dashboard__topbar-navbar'>
           <NavbarGroup>
-            {/* <Button className={Classes.MINIMAL} icon="home" text="Search" /> */}
-            <Search className />
+            <Button
+              onClick={() => openGlobalSearch(true)}
+              className={Classes.MINIMAL}
+              icon='home'
+              text='Search'
+            />
+
             <Button
               className={Classes.MINIMAL}
               icon='document'
@@ -100,4 +112,7 @@ const mapStateToProps = (state) => ({
   editViewId: state.dashboard.topbarEditViewId,
 });
 
-export default connect(mapStateToProps)(DashboardTopbar);
+export default compose(
+  SearchConnect,
+  connect(mapStateToProps)
+)(DashboardTopbar);

client/src/connectors/Search.connect.js

@@ -3,11 +3,19 @@ import t from 'store/types';
 import { generalSearch } from 'store/search/search.actions';
 
 export const mapStateToProps = (state, props) => ({
-  resultSearch: state.GeneralSearch,
+  resultSearch: state.globalSearch.searches,
+  globalSearchShow: state.globalSearch.isOpen,
 });
 
 export const mapDispatchToProps = (dispatch) => ({
-  generalSearch: (result) => dispatch(generalSearch(result)),
+  openGlobalSearch: (result) =>
+    dispatch({
+      type: t.OPEN_SEARCH,
+    }),
+  closeGlobalSearch: (result) =>
+    dispatch({
+      type: t.CLOSE_SEARCH,
+    }),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps);

client/src/containers/Dashboard/GeneralSearch/Search.js

@@ -1,71 +1,41 @@
 import React, { useEffect, useState } from 'react';
 import { Omnibar } from '@blueprintjs/select';
-import { MenuItem, Button, Classes } from '@blueprintjs/core';
-import { useAsync } from 'react-use';
-import * as Yup from 'yup';
-import { useFormik } from 'formik';
-import Icon from 'components/Icon';
+import { MenuItem } from '@blueprintjs/core';
 import { compose } from 'utils';
 import SearchConnect from 'connectors/Search.connect';
 
-function Search({}) {
-  const [isOpen, setIsOpen] = useState(false);
-
+function Search({
+  resultSearch,
+  globalSearchShow,
+  openGlobalSearch,
+  closeGlobalSearch,
+}) {
   const items = [
     { title: 'The Shawshank Redemption', year: 1994 },
     { title: 'The Godfather', year: 1972 },
     { title: 'The Godfather: Part II', year: 1974 },
   ];
 
-  const validationSchema = Yup.object().shape({
-    name: Yup.string().required(),
-  });
-  const formik = useFormik({
-    enableReinitialize: true,
-    validationSchema: validationSchema,
-    initialValues: {},
-  });
-  const renderSearch = (search, { handleClick, modifiers }) => (
+  const renderSearch = (search, { handleClick }) => (
     <MenuItem
-      active={modifiers.active}
-      key={search.id}
-      text={search.name}
-      label={search.name}
+      key={search.year}
+      text={search.title}
+      label={search.title}
       onClick={handleClick}
     />
   );
 
-  const filterSearch = (query, search, _index, exactMatch) => {
-    // const normalizedTitle = search.toLowerCase();
-    // const normalizedQuery = query.toLowerCase();
-    // if (exactMatch) {
-    //   return normalizedTitle === normalizedQuery;
-    // } else {
-    //   return `${search} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-    // }
-    return search;
-  };
-  const handleClick = () => setIsOpen(true);
-  const handleClose = () => setIsOpen(false);
-
   return (
     <div>
-      <Button
-        className={Classes.MINIMAL}
-        icon='home'
-        text='Search'
-        onClick={handleClick}
-      />
       <Omnibar
-        isOpen={isOpen}
+        className={'navbar-omnibar'}
+        isOpen={globalSearchShow}
         noResults={<MenuItem disabled={true} text='No results.' />}
-        onClose={handleClose}
+        onClose={() => closeGlobalSearch(false)}
         resetOnSelect={true}
         itemRenderer={renderSearch}
         items={items}
-        // onItemSelect={}
-        itemListPredicate={filterSearch}
-        // style={{ position: 'absolute', canter: '50%' }}
+        // onItemSelect={onItemsSelect()}
       />
     </div>
   );

client/src/store/reducers.js

@@ -14,7 +14,7 @@ import financialStatements from './financialStatement/financialStatements.reduce
 import itemCategories from './itemCategories/itemsCategory.reducer';
 import settings from './settings/settings.reducer';
 import manualJournals from './manualJournals/manualJournals.reducers';
-import search from './search/search.reducer';
+import globalSearch from './search/search.reducer';
 
 export default combineReducers({
   authentication,
@@ -31,5 +31,5 @@ export default combineReducers({
   items,
   itemCategories,
   settings,
-  search,
+  globalSearch,
 });

client/src/store/search/search.actions.js

@@ -1,5 +1,19 @@
 import t from 'store/types';
 
+export function openSearch(result) {
+  return {
+    type: t.OPEN_SEARCH,
+    result,
+  };
+}
+
+export function closeSearch(result) {
+  return {
+    type: t.ClOSE_SEARCH,
+    result,
+  };
+}
+
 export function generalSearch(name, result) {
   return {
     type: t.SEARCH_SUCCESS,

client/src/store/search/search.reducer.js

@@ -2,32 +2,14 @@ import t from 'store/types';
 import { createReducer } from '@reduxjs/toolkit';
 
 const initialState = {
-  searches: {},
-  searchTitle: 'Title',
   isOpen: false,
 };
 
 export default createReducer(initialState, {
-  [t.SEARCH_SUCCESS]: (state, action) => {
-    const _result = {};
-
-    action.searches.forEach((search) => {
-      _result[search.id] = search;
-    });
-
-    state.searches = {
-      ...state.searches,
-      ..._result,
-    };
+  [t.OPEN_SEARCH]: (state, action) => {
+    state.isOpen = true;
+  },
+  [t.CLOSE_SEARCH]: (state, action) => {
+    state.isOpen = false;
   },
 });
-
-//  return state = action.result;
-// if (typeof state === 'undefined') {
-//   return initialState;
-// }
-
-// state.search[action.name] = {
-//   isOpen: true,
-//   payload: action.payload || {},
-// };

client/src/store/search/search.type.js

@@ -1,5 +1,5 @@
 export default {
-  SEARCH_SUCCESS: 'SEARCH_SUCCESS',
-  SEARCH_FAILURE: 'SEARCH_FAILURE',
-  SEARCH_REQUEST: 'SEARCH_REQUEST',
+  SEARCH_SUCCESS:'SEARCH_SUCCESS',
+  OPEN_SEARCH: 'OPEN_SEARCH',
+  CLOSE_SEARCH: 'CLOSE_SEARCH',
 };

client/src/style/pages/dashboard.scss

@@ -55,6 +55,7 @@
           color: #1552C8;
         }
       }
+      
     }
 
     &-user{
@@ -92,6 +93,11 @@
       &:hover{
         background: $light-gray2;
       }
+      &::before{
+        background: escape-svg($breadcrumbs-collapsed-icon) center center;
+        width: 15px;
+        height: 15px;
+      }
     }
   }
 
@@ -209,6 +215,7 @@
     }
   }
 
+  
   &__page-content{
     // padding: 22px;
   }
@@ -269,4 +276,19 @@
 .navbar--dashboard-views{
   box-shadow: 0 0 0;
   border-bottom: 1px solid #EAEAEA;
+}
+.navbar-omnibar{
+  -webkit-filter: blur(0);
+  filter: blur(0);
+  opacity: 1;
+  top: 20vh;
+  left: calc(50% - 250px);
+  z-index: 21;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
+    0 4px 8px rgba(16, 22, 26, 0.2), 0 18px 46px 6px rgba(16, 22, 26, 0.2);
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
+    0 18px 46px 6px rgba(16, 22, 26, 0.2);
+  background-color: #fff;
+  width: 500px;
 }