use event to initialize selected records on datwhen data loaded

lib/FindLocation/FindLocation.js

@@ -1,170 +1,70 @@
-import keyBy from 'lodash/keyBy';
-import PropTypes from 'prop-types';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { useCallback, useRef, useState } from 'react';
 
-import { ColumnManager } from '@folio/stripes/smart-components';
+import { Button } from '@folio/stripes/components';
 
-import { EVENT_EMMITER_EVENTS } from '../constants';4
-import { FindRecords } from '../FindRecords';
-import {
-  useCampuses,
-  useEventEmitter,
-  useInstitutions,
-  useLibraries,
-} from '../hooks';
-import {
-  COLUMN_MAPPING,
-  COLUMN_NAMES,
-  NON_TOGGLEABLE_COLUMNS,
-  SORTABLE_COLUMNS,
-} from './configs'
-import { FindLocationFilters } from './FindLocationFilters';
-import { useLocationsRecords } from './useLocationsRecords';
+import { FindLocationLookup } from './FindLocationLookup';
 
 export const FindLocation = (props) => {
   const {
-    idPrefix,
-    isMultiSelect,
-    modalLabel,
-    onRecordsSelect,
-    resultsPaneTitle,
-    sortableColumns,
+    id,
+    disabled,
+    marginBottom0,
+    onClose,
+    renderTrigger,
+    searchButtonStyle,
+    searchLabel,
+    trigerless,
     ...rest
   } = props;
 
-  const eventEmitter = useEventEmitter();
-
-  const [selectedLocations, setSelectedLocations] = useState({});
-  const [filters, setFilters] = useState({});
-
-  const { institutions, isLoading: isInstitutionsLoading } = useInstitutions();
-  const { campuses, isLoading: isCampusesLoading } = useCampuses();
-  const { libraries, isLoading: isLibrariesLoading } = useLibraries();
-
-  const institutionsMap = useMemo(() => keyBy(institutions, 'id'), [institutions]);
-  const campusessMap = useMemo(() => keyBy(campuses, 'id'), [campuses]);
-  const librariesMap = useMemo(() => keyBy(libraries, 'id'), [libraries]);
-
-  const { locations, isLoading: isLocationsLoading } = useLocationsRecords({
-    filters,
-    selectedLocations,
-    institutionsMap,
-    campusessMap,
-    librariesMap,
-  });
-
-  useEffect(() => {
-    const eventType = EVENT_EMMITER_EVENTS.FIND_RECORDS_SELECTED_CHANGED;
-    const callback = ({ detail: assignment }) => setSelectedLocations(assignment);
-
-    eventEmitter.on(eventType, callback);
-
-    return () => {
-      eventEmitter.off(eventType, callback);
-    };
-  }, [eventEmitter]);
-
-  const columnMapping = useMemo(() => ({
-    ...COLUMN_MAPPING,
-    ...(
-      isMultiSelect
-      ? { [COLUMN_NAMES.isAssigned]: <FormattedMessage id="stripes-acq-components.find-location.results.column.assignment" /> }
-      : {}
-    )
-  }), [isMultiSelect]);
-
-  const resultsFormatter = useMemo(() => ({
-    [COLUMN_NAMES.name]: ({ name }) => name,
-    [COLUMN_NAMES.code]: ({ code }) => code,
-    [COLUMN_NAMES.institution]: ({ institutionId }) => institutionsMap[institutionId]?.name,
-    [COLUMN_NAMES.campus]: ({ campusId }) => campusessMap[campusId]?.name,
-    [COLUMN_NAMES.library]: ({ libraryId }) => librariesMap[libraryId]?.name,
-    [COLUMN_NAMES.isActive]: ({ isActive }) => (
-      <FormattedMessage id={`stripes-acq-components.find-location.results.column.status.${ isActive ? 'active': 'inactive'}`} />
-    ),
-    [COLUMN_NAMES.isAssigned]: ({ id }) => (
-      <FormattedMessage id={`stripes-acq-components.filter.assignment.${ selectedLocations[id] ? 'assigned': 'unassigned'}`} />
-    ),
-  }), [
-    campusessMap,
-    institutionsMap,
-    librariesMap,
-    selectedLocations,
+  const modalTriggerRef = useRef();
+  const [openModal, setOpenModal] = useState(false);
+
+  const onModalClose = useCallback((data) => {
+    setOpenModal(false);
+    onClose?.(data);
+  }, [onClose]);
+
+  const renderDefaultTrigger = useCallback(() => {
+    return (
+      <Button
+        id={id}
+        buttonRef={modalTriggerRef}
+        buttonStyle={searchButtonStyle}
+        disabled={disabled}
+        key="searchButton"
+        marginBottom0={marginBottom0}
+        onClick={() => setOpenModal(true)}
+      >
+        {searchLabel}
+      </Button>
+    );
+  }, [
+    disabled,
+    id,
+    marginBottom0,
+    searchButtonStyle,
   ]);
 
-  const refreshRecords = useCallback((filters) => setFilters(filters), []);
-
-  const isLoading = (
-    isLocationsLoading
-    || isInstitutionsLoading
-    || isCampusesLoading
-    || isLibrariesLoading
-  );
-
-  const renderFilters = useCallback((activeFilters, applyFilters) => (
-    <FindLocationFilters
-      activeFilters={activeFilters}
-      applyFilters={applyFilters}
-      disabled={isLoading}
-      isMultiSelect={isMultiSelect}
-      institutions={institutions}
-      campuses={campuses}
-      libraries={libraries}
-    />
-  ), [
-    campuses,
-    institutions,
-    isMultiSelect,
-    isLoading,
-    libraries,
-  ]);
+  const renderTriggerButton = useCallback(() => {
+    return renderTrigger
+      ? renderTrigger({
+        buttonRef: modalTriggerRef,
+        onClick: () => setOpenModal(true),
+      })
+      : renderDefaultTrigger();
+  }, []);
 
   return (
-    <ColumnManager
-      id="find-locations"
-      columnMapping={columnMapping}
-      excludeKeys={NON_TOGGLEABLE_COLUMNS}
-    >
-      {({ renderColumnsMenu, visibleColumns }) => (
-        <FindRecords
-          modalLabel={modalLabel}
-          resultsPaneTitle={resultsPaneTitle}
-          idPrefix={idPrefix}
-          visibleColumns={visibleColumns}
-          sortableColumns={sortableColumns}
-          columnMapping={columnMapping}
-          resultsFormatter={resultsFormatter}
-          records={locations}
-          totalCount={locations.length}
-          refreshRecords={refreshRecords}
-          isMultiSelect={isMultiSelect}
-          isLoading={isLoading}
-          selectRecords={onRecordsSelect}
-          stickyFirstColumn={isMultiSelect}
-          renderActionMenu={() => renderColumnsMenu}
-          renderFilters={renderFilters}
+    <>
+      {!trigerless && renderTriggerButton()}
+      {(openModal || trigerless) && (
+        <FindLocationLookup
+          onClose={onModalClose}
+          trigerless
           {...rest}
         />
       )}
-    </ColumnManager>
-  );
-};
-
-FindLocation.propTypes = {
-  idPrefix: PropTypes.string,
-  isMultiSelect: PropTypes.bool,
-  modalLabel: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  onRecordsSelect: PropTypes.func.isRequired,
-  resultsPaneTitle: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  sortableColumns: PropTypes.arrayOf(PropTypes.string),
-  visibleColumns: PropTypes.arrayOf(PropTypes.string),
-};
-
-FindLocation.defaultProps = {
-  idPrefix: 'FindLocation-',
-  isMultiSelect: false,
-  modalLabel: <FormattedMessage id="stripes-acq-components.find-location.modal.label" />,
-  resultsPaneTitle: <FormattedMessage id="stripes-acq-components.find-location.results.heading" />,
-  sortableColumns: SORTABLE_COLUMNS,
+    </>
+  )
 };