Indexer and Search page work

frontend/src/Search/SearchIndex.js

@@ -0,0 +1,291 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageJumpBar from 'Components/Page/PageJumpBar';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import { align, icons, sortDirections } from 'Helpers/Props';
+import NoIndexer from 'Indexer/NoIndexer';
+import * as keyCodes from 'Utilities/Constants/keyCodes';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import translate from 'Utilities/String/translate';
+import MovieIndexFilterMenu from './Menus/MovieIndexFilterMenu';
+import MovieIndexSortMenu from './Menus/MovieIndexSortMenu';
+import MovieEditorFooter from './MovieEditorFooter.js';
+import MovieIndexTableConnector from './Table/MovieIndexTableConnector';
+import styles from './IndexerIndex.css';
+
+function getViewComponent() {
+  return MovieIndexTableConnector;
+}
+
+class SearchIndex extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      scroller: null,
+      jumpBarItems: { order: [] },
+      jumpToCharacter: null,
+      searchType: null,
+      lastToggled: null
+    };
+  }
+
+  componentDidMount() {
+    this.setJumpBarItems();
+
+    window.addEventListener('keyup', this.onKeyUp);
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      sortKey,
+      sortDirection
+    } = this.props;
+
+    if (sortKey !== prevProps.sortKey ||
+        sortDirection !== prevProps.sortDirection ||
+        hasDifferentItemsOrOrder(prevProps.items, items)
+    ) {
+      this.setJumpBarItems();
+    }
+
+    if (this.state.jumpToCharacter != null) {
+      this.setState({ jumpToCharacter: null });
+    }
+  }
+
+  //
+  // Control
+
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
+  }
+
+  setJumpBarItems() {
+    const {
+      items,
+      sortKey,
+      sortDirection
+    } = this.props;
+
+    // Reset if not sorting by sortTitle
+    if (sortKey !== 'sortTitle') {
+      this.setState({ jumpBarItems: { order: [] } });
+      return;
+    }
+
+    const characters = _.reduce(items, (acc, item) => {
+      let char = item.sortTitle.charAt(0);
+
+      if (!isNaN(char)) {
+        char = '#';
+      }
+
+      if (char in acc) {
+        acc[char] = acc[char] + 1;
+      } else {
+        acc[char] = 1;
+      }
+
+      return acc;
+    }, {});
+
+    const order = Object.keys(characters).sort();
+
+    // Reverse if sorting descending
+    if (sortDirection === sortDirections.DESCENDING) {
+      order.reverse();
+    }
+
+    const jumpBarItems = {
+      characters,
+      order
+    };
+
+    this.setState({ jumpBarItems });
+  }
+
+  //
+  // Listeners
+
+  onJumpBarItemPress = (jumpToCharacter) => {
+    this.setState({ jumpToCharacter });
+  }
+
+  onSearchPress = (query) => {
+    console.log('index', query);
+    this.props.onSearchPress({ query });
+  }
+
+  onKeyUp = (event) => {
+    const jumpBarItems = this.state.jumpBarItems.order;
+    if (event.path.length === 4) {
+      if (event.keyCode === keyCodes.HOME && event.ctrlKey) {
+        this.setState({ jumpToCharacter: jumpBarItems[0] });
+      }
+      if (event.keyCode === keyCodes.END && event.ctrlKey) {
+        this.setState({ jumpToCharacter: jumpBarItems[jumpBarItems.length - 1] });
+      }
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      totalItems,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
+      sortKey,
+      sortDirection,
+      onScroll,
+      onSortSelect,
+      onFilterSelect,
+      ...otherProps
+    } = this.props;
+
+    const {
+      scroller,
+      jumpBarItems,
+      jumpToCharacter
+    } = this.state;
+
+    const ViewComponent = getViewComponent();
+    const isLoaded = !!(!error && isPopulated && items.length && scroller);
+    const hasNoIndexer = !totalItems;
+
+    return (
+      <PageContent>
+        <PageToolbar>
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+            collapseButtons={false}
+          >
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label={translate('Options')}
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
+            <PageToolbarSeparator />
+
+            <MovieIndexSortMenu
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              isDisabled={hasNoIndexer}
+              onSortSelect={onSortSelect}
+            />
+
+            <MovieIndexFilterMenu
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              isDisabled={hasNoIndexer}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <div className={styles.pageContentBodyWrapper}>
+          <PageContentBody
+            registerScroller={this.setScrollerRef}
+            className={styles.contentBody}
+            innerClassName={styles.tableInnerContentBody}
+            onScroll={onScroll}
+          >
+            {
+              isFetching && !isPopulated &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && !!error &&
+                <div className={styles.errorMessage}>
+                  {getErrorMessage(error, 'Failed to load movie from API')}
+                </div>
+            }
+
+            {
+              isLoaded &&
+                <div className={styles.contentBodyContainer}>
+                  <ViewComponent
+                    scroller={scroller}
+                    items={items}
+                    filters={filters}
+                    sortKey={sortKey}
+                    sortDirection={sortDirection}
+                    jumpToCharacter={jumpToCharacter}
+                    {...otherProps}
+                  />
+                </div>
+            }
+
+            {
+              !error && isPopulated && !items.length &&
+                <NoIndexer totalItems={totalItems} />
+            }
+          </PageContentBody>
+
+          {
+            isLoaded && !!jumpBarItems.order.length &&
+              <PageJumpBar
+                items={jumpBarItems}
+                onItemPress={this.onJumpBarItemPress}
+              />
+          }
+        </div>
+
+        <MovieEditorFooter
+          isFetching={isFetching}
+          onSearchPress={this.onSearchPress}
+        />
+      </PageContent>
+    );
+  }
+}
+
+SearchIndex.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  totalItems: PropTypes.number.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
+  isSmallScreen: PropTypes.bool.isRequired,
+  onSortSelect: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired,
+  onSearchPress: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired
+};
+
+export default SearchIndex;