@blaze-cms/plugin-search-ui 0.110.0-alpha.1

package/src/components/SearchPublishedContent/SearchPublishedContent.js

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { useDebounce } from '@blaze-react/utils/lib/customHooks';
+import useSearchResults from '../useSearchResults';
+import { SEARCH_PUBLISHED, DEFAULT_RESULTS_KEYS, SEARCH_BUTTON } from '../../constants';
+
+const SearchPublishedContent = ({
+  entities,
+  children,
+  resultKeys,
+  getIsOpenSearchBar,
+  SearchIcon,
+  CloseIcon,
+  className,
+  onChange,
+  placeholder,
+  onEnterPress,
+  inputRef,
+  isSearchBarOpen,
+  fields
+}) => {
+  const [displaySearchBar, setDisplaySearchBar] = useState(isSearchBarOpen);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [previousSearchTerm, setPreviousSearchTerm] = useState(null);
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const [{ loading, results }, setQueryParams] = useSearchResults({
+    queryKey: SEARCH_PUBLISHED,
+    resultKeys,
+    entities,
+    fields
+  });
+
+  useEffect(
+    () => {
+      if (isSearchBarOpen !== displaySearchBar) {
+        setDisplaySearchBar(isSearchBarOpen);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isSearchBarOpen]
+  );
+
+  useEffect(
+    () => {
+      if (inputRef && inputRef.current && displaySearchBar) {
+        inputRef.current.focus();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [displaySearchBar]
+  );
+
+  useEffect(
+    () => {
+      if (debouncedSearchTerm && debouncedSearchTerm !== previousSearchTerm) {
+        setQueryParams({ value: debouncedSearchTerm });
+        setPreviousSearchTerm(debouncedSearchTerm);
+      }
+    },
+    [debouncedSearchTerm, previousSearchTerm, setQueryParams]
+  );
+
+  const handleOnChange = ({ target: { value = '' } = {} }) => {
+    onChange(value);
+    setSearchTerm(value);
+  };
+
+  const handleKeyPress = event => {
+    const onEnter = event.key === 'Enter';
+    onEnter && onEnterPress();
+  };
+
+  const handleSearchBar = () => {
+    const voidSearchTerm = '';
+    displaySearchBar && setSearchTerm(voidSearchTerm);
+    handleOnChange({ value: voidSearchTerm });
+    if (isSearchBarOpen !== null) {
+      getIsOpenSearchBar(!displaySearchBar);
+    }
+    setDisplaySearchBar(!displaySearchBar);
+  };
+
+  const searchWrapperClassname = classnames('search__wrapper', {
+    'search__wrapper--toggle-display': displaySearchBar,
+    'search__wrapper--toggle': !displaySearchBar
+  });
+
+  const triggerClassname = classnames('search__icon', {
+    open: displaySearchBar
+  });
+
+  return (
+    <div className={`search-wrapper ${className}`}>
+      <div className="search search--header search--toggle">
+        <div className={searchWrapperClassname}>
+          <input
+            data-testid="search-input"
+            onKeyPress={handleKeyPress}
+            placeholder={placeholder}
+            type="text"
+            onChange={handleOnChange}
+            value={searchTerm}
+            ref={inputRef}
+          />
+          <button type="button" className="icon-button icon-button--search icon-button--toggle">
+            <SearchIcon />
+          </button>
+        </div>
+        <div
+          role="button"
+          className={triggerClassname}
+          onClick={handleSearchBar}
+          id={SEARCH_BUTTON}
+          title={SEARCH_BUTTON}>
+          {!displaySearchBar ? <SearchIcon /> : <CloseIcon />}
+        </div>
+      </div>
+      <div className="search-modal">
+        {children({ results: results.length && searchTerm ? results : [], loading })}
+      </div>
+    </div>
+  );
+};
+
+SearchPublishedContent.propTypes = {
+  entities: PropTypes.array,
+  children: PropTypes.func.isRequired,
+  resultKeys: PropTypes.string,
+  getIsOpenSearchBar: PropTypes.func,
+  SearchIcon: PropTypes.func,
+  CloseIcon: PropTypes.func,
+  onChange: PropTypes.func,
+  onEnterPress: PropTypes.func,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  inputRef: PropTypes.object,
+  isSearchBarOpen: PropTypes.bool,
+  fields: PropTypes.array
+};
+
+SearchPublishedContent.defaultProps = {
+  entities: ['published_page'],
+  placeholder: '',
+  resultKeys: DEFAULT_RESULTS_KEYS,
+  onChange: () => {},
+  onEnterPress: () => {},
+  getIsOpenSearchBar: state => state,
+  SearchIcon: () => <i className="material-icons">search</i>,
+  CloseIcon: () => <i className="material-icons">close</i>,
+  className: '',
+  inputRef: null,
+  isSearchBarOpen: null,
+  fields: []
+};
+
+export default SearchPublishedContent;

package/src/components/SearchPublishedContent/index.js

@@ -0,0 +1,3 @@
+import SearchPublishedContent from './SearchPublishedContent';
+
+export default SearchPublishedContent;

package/src/components/useLocalStorage/index.js

@@ -0,0 +1,3 @@
+import useLocalStorage from './useLocalStorage';
+
+export default useLocalStorage;

package/src/components/useLocalStorage/useLocalStorage.js

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    const item = window.localStorage.getItem(key);
+    return item ? JSON.parse(item) : initialValue;
+  });
+
+  const setValue = value => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setStoredValue(valueToStore);
+    window.localStorage.setItem(key, JSON.stringify(valueToStore));
+  };
+
+  return [storedValue, setValue];
+}
+
+export default useLocalStorage;

package/src/components/useSearch/index.js

@@ -0,0 +1,3 @@
+import useSearch from './useSearch';
+
+export default useSearch;

package/src/components/useSearch/useSearch.js

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+import { useLazyQuery } from 'react-apollo';
+import searchQueries from '../../application/query';
+
+function useSearch({ queryKey, resultKeys, entities = [], fields }) {
+  const [queryParams, setParams] = useState({ limit: 20, offset: 0, value: '' });
+  const [searchedValue, setSearchedValue] = useState(null);
+  const [previousOffset, setPreviousOffset] = useState(null);
+  const buildSearchQuery = searchQueries[queryKey];
+  const [
+    getSearchResults,
+    {
+      loading,
+      data: { search: { results, jsonResults, total } } = {
+        search: { results: [], total: 0 }
+      }
+    }
+  ] = useLazyQuery(buildSearchQuery({ resultKeys }));
+
+  const handleQueryParams = newQueryParams => {
+    setParams({ ...queryParams, ...newQueryParams });
+  };
+
+  useEffect(
+    () => {
+      const { limit, offset, value } = queryParams;
+      const isNewValueSet = value && value !== searchedValue;
+      const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
+      const parsedEntities = entities.length
+        ? entities.map(entity => ({
+            match: { docType: entity }
+          }))
+        : [];
+
+      if (isNewValueSet || isNewOffsetSet) {
+        getSearchResults({
+          variables: {
+            limit,
+            offset,
+            rawQuery: {
+              query: {
+                bool: {
+                  must: [
+                    {
+                      query_string: {
+                        query: value,
+                        fields,
+                        type: 'most_fields'
+                      }
+                    },
+                    {
+                      bool: {
+                        should: parsedEntities
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          }
+        });
+        setSearchedValue(value);
+        setPreviousOffset(offset);
+      }
+    },
+    [
+      queryParams,
+      queryParams.limit,
+      queryParams.value,
+      queryParams.offset,
+      searchedValue,
+      previousOffset,
+      getSearchResults,
+      entities,
+      fields
+    ]
+  );
+
+  return [
+    { searchedValue: queryParams.value, loading, data: { results: results || jsonResults, total } },
+    handleQueryParams
+  ];
+}
+
+export default useSearch;

package/src/components/useSearchResults/index.js

@@ -0,0 +1,3 @@
+import useSearchResults from './useSearchResults';
+
+export default useSearchResults;

package/src/components/useSearchResults/useSearchResults.js

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import useSearch from '../useSearch';
+
+function useSearchResults({ queryKey, resultKeys, entities, fields }) {
+  const [
+    {
+      searchedValue,
+      loading,
+      data: { results, total }
+    },
+    setParams
+  ] = useSearch({ queryKey, resultKeys, entities, fields });
+  const [currentResults, setCurrentResults] = useState([]);
+  const [allResults, setAllResults] = useState([]);
+
+  useEffect(
+    () => {
+      if (currentResults.length !== results.length) {
+        setAllResults([...allResults, ...results]);
+        setCurrentResults(results);
+      }
+    },
+    [allResults, currentResults, currentResults.length, results]
+  );
+
+  const clearList = params => {
+    setAllResults([]);
+    setParams({ ...params, offset: 0 });
+  };
+
+  const setQueryParams = params => {
+    params.value !== searchedValue ? clearList(params) : setParams(params);
+  };
+
+  return [{ loading, results: allResults, total }, setQueryParams];
+}
+
+export default useSearchResults;

package/src/constants.js

@@ -0,0 +1,19 @@
+const SEARCH_ADMIN = 'SEARCH_ADMIN';
+const SEARCH_PUBLISHED = 'SEARCH_PUBLISHED';
+const SEARCH_RESULTS_OVER_SCAN_BUFFER = 0;
+const SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST = 186;
+const SEARCH_RESULTS_ITEM_SIZE = 105;
+const DEFAULT_RESULTS_KEYS = 'name, url';
+const SEARCH_BUTTON = 'search-button';
+const FILE = 'file';
+
+export {
+  SEARCH_ADMIN,
+  SEARCH_PUBLISHED,
+  SEARCH_RESULTS_OVER_SCAN_BUFFER,
+  SEARCH_RESULTS_ELEMETS_HEIGHT_ABOVE_LIST,
+  SEARCH_RESULTS_ITEM_SIZE,
+  DEFAULT_RESULTS_KEYS,
+  SEARCH_BUTTON,
+  FILE
+};

package/src/index.js

@@ -0,0 +1,5 @@
+import SearchAdmin from './components/SearchAdmin';
+import SearchPublishedContent from './components/SearchPublishedContent';
+import SearchBar from './components/SearchAdmin/SearchBar';
+
+export { SearchAdmin, SearchPublishedContent, SearchBar };