Components: refactored rest of the components to use new state. Minor changes to exports, imports and props

client/src/components/SearchBar/SearchBar.tsx

@@ -1,42 +1,33 @@
 import { useRef, useEffect, KeyboardEvent } from 'react';
 
 // Redux
-import { connect } from 'react-redux';
-import { createNotification } from '../../store/actions';
+import { useDispatch, useSelector } from 'react-redux';
 
 // Typescript
-import {
-  App,
-  Category,
-  Config,
-  GlobalState,
-  NewNotification,
-} from '../../interfaces';
+import { App, Category } from '../../interfaces';
 
 // CSS
 import classes from './SearchBar.module.css';
 
 // Utils
 import { searchParser, urlParser, redirectUrl } from '../../utility';
+import { State } from '../../store/reducers';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../store';
 
-interface ComponentProps {
-  createNotification: (notification: NewNotification) => void;
+interface Props {
   setLocalSearch: (query: string) => void;
   appSearchResult: App[] | null;
   bookmarkSearchResult: Category[] | null;
-  config: Config;
-  loading: boolean;
 }
 
-const SearchBar = (props: ComponentProps): JSX.Element => {
-  const {
-    setLocalSearch,
-    createNotification,
-    config,
-    loading,
-    appSearchResult,
-    bookmarkSearchResult,
-  } = props;
+export const SearchBar = (props: Props): JSX.Element => {
+  const { config, loading } = useSelector((state: State) => state.config);
+
+  const dispatch = useDispatch();
+  const { createNotification } = bindActionCreators(actionCreators, dispatch);
+
+  const { setLocalSearch, appSearchResult, bookmarkSearchResult } = props;
 
   const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
 
@@ -126,12 +117,3 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
     </div>
   );
 };
-
-const mapStateToProps = (state: GlobalState) => {
-  return {
-    config: state.config.config,
-    loading: state.config.loading,
-  };
-};
-
-export default connect(mapStateToProps, { createNotification })(SearchBar);