reselect#createSelector JavaScript Examples

visibleTodosSelector = createSelector(
  todosSelector,
  visibilityFilterSelector,
  (todos, visibilityFilter) => {
    switch (visibilityFilter) {
      case 'SHOW_COMPLETED':
        return todos.filter((t) => t.completed)
      case 'SHOW_ACTIVE':
        return todos.filter((t) => !t.completed)
      case 'SHOW_ALL':
      default:
        return todos
    }
  }
)

OwnersList = connect(createSelector(
    ownersListOpenSelector,
    ownersListResultsSelector,
    (show, owners) => ({
        show,
        owners
    })
), {
    onSearch: search,
    onClose: () => clearOwners()
})(
    // not rendering the modal at all when show is false is useful to reset internal state on every load
    branch(({ show }) => !show, renderNothing)(OwnersModal)
)

visibleTodosSelector = createSelector(
  todosSelector,
  visibilityFilterSelector,
  (todos, visibilityFilter) => {
    switch (visibilityFilter) {
      case "SHOW_COMPLETED":
        return todos.filter((t) => t.completed);
      case "SHOW_ACTIVE":
        return todos.filter((t) => !t.completed);
      case "SHOW_ALL":
      default:
        return todos;
    }
  }
)

mapLayersSelector = createSelector(
    layersSelector,
    additionalLayersSelector,
    landedPropertyParcelleSelector,
    getDefaultStyle,
    getSelectedStyle,
    (l1 = [], additionaLayers = [], parcelle, defaultStyle, selectedStyle) => ([
        ...l1,
        // raster layer
        ...additionaLayers.filter(({ id }) => id === CADASTRAPP_RASTER_LAYER_ID).map(({options}) => options),
        // vector layer to highlight the current parcelle
        ...(parcelle?.feature ? [{
            id: 'vector-layer',
            features: [{
                ...(parcelle?.feature ?? {}),
                style: parcelle?.ufFeature ? selectedStyle : defaultStyle // if the ufFeature has been retrieved, so highlight it
            }],
            type: "vector",
            name: "searchPoints",
            visibility: true
        }] : [])])
)

selectAll = (entity, hydrationLevels = 0) =>{
  const hydrate = applyHydration(entity, hydrationLevels);

  return createSelector(
    selectEntities,
    (allEntities) => (
      hydrate(allEntities)(Object.values(allEntities[entity.key] || {}))
    )
  );
}

getFormattedReminder = createSelector(
  [getReminder],
  (reminder) => {
    if (!reminder) return null;

    return {
      id: reminder.id,
      description: reminder.description,
      color: reminder.color,
      city: reminder.city,
      ...millisToDateTimeStrings(reminder.dateTime),
    };
  }
)

selectOne = (entity, hydrationLevels = 0, idAttribute) => {
  if (entity.singleton) {
    return createSelector(
      selectSingletons,
      singletons => singletons[entity.key]
    );
  }

  const hydrate = applyHydration(entity, hydrationLevels);

  return createSelector(
    selectEntities,
    (state, props) => props[idAttribute || entity.idField],
    (entities, id) => entities[entity.key] ?
      hydrate(entities)(entities[entity.key][id]) :
      null
  );
}

getFormattedDateReminders = createSelector(
  [getDateReminders, getReminders],
  (dateReminders, reminders) => {
    if (!dateReminders || !reminders) return [];

    return dateReminders
      .reduce((formatted, reminderId) => {
        const reminder = reminders[reminderId];
        return reminder
          ? [
              ...formatted,
              {
                ...reminder,
                displayTime: getDisplayTimeFromMillis(reminder.dateTime),
              },
            ]
          : formatted;
      }, [])
      .sort((a, b) => a.dateTime - b.dateTime);
  }
)

createCustomSelector = (formName) => {
  if (!selectorCache[formName]) {
    selectorCache[formName] = createSelector(
      [
        state => getFormValues(formName)(state),
      ],
      selectorFunc
    );
  }

  return selectorCache[formName];
}

chatsListSelector = createSelector(
  chatsSelector,
  loadingSelector,
  sentListSelector,
  getBlockedNodes,
  (chats, loading, sentList, blockedNodes) => {
    const filteredList = sentList.filter(message => message.subject === '');
    const offlinePeerIds = _.difference(
      _.uniq(filteredList.map(message => message.peerID)),
      chats.map(chat => chat.peerId),
    );
    const offlineChats = offlinePeerIds.map((peerId) => {
      const messages = _.sortBy(
        filteredList.filter(message => message.peerID === peerId),
        message => moment(message.timestamp).valueOf(),
      );
      const lastMessage = messages[messages.length - 1];
      const {
        message, timestamp, loading, success,
      } = lastMessage;
      return {
        lastMessage: message, peerId, timestamp, loading, success, outgoing: true, unread: false,
      };
    });

    const newChats = _.sortBy(
      [...chats, ...offlineChats],
      chat => moment(chat.timestamp).valueOf(),
    );
    return {
      data: newChats.filter(chat => !blockedNodes.includes(chat.peerId)),
      loading,
    };
  },
)

previousPinnedMetricTypeSelector = createSelector(
  [
    availableMetricTypesSelector,
    state => state.get('pinnedMetricType'),
  ],
  (metricTypes, pinnedMetricType) => {
    const currentIndex = metricTypes.indexOf(pinnedMetricType);
    const previousIndex = modulo(currentIndex - 1, metricTypes.count());
    return metricTypes.get(pinnedMetricType ? previousIndex : 0);
  }
)

localLabelFromBCHSelector = createSelector(
  ratesSelector,
  localSymbolSelector,
  convertorFromBCHSelector,
  localDecimalPointsIfCryptoSelector,
  (rates, localSymbol, convertCurrencyFromBCH, localDecimalPointsIfCrypto) => (price, coin = 'BTC') => {
    if (isEmpty(rates)) {
      return 'calculating...';
    }

    // if price is smaller than 0, it is between -1 and 0, so we make it 0
    const localPrice = convertCurrencyFromBCH(price, coin);
    // Currency-specific formatting
    if (localDecimalPointsIfCrypto) {
      return `${localSymbol}${removeZeros(localPrice.toFixed(localDecimalPointsIfCrypto))}`;
    } else {
      return `${localSymbol}${localPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`;
    }
  },
)

nodesLoadedSelector = createSelector(
  [
    state => state.get('nodesLoaded'),
    loadedAllResourceLayersSelector,
    isResourceViewModeSelector,
  ],
  (nodesLoaded, loadedAllResourceLayers, isResourceViewMode) => (
    // Since `nodesLoaded` is set when we receive nodes delta over websockets,
    // it's a completely wrong criterion for determining if resource view is
    // in the loading state - instead we look at the 'static' topologies whose
    // nodes were loaded into 'nodesByTopology' and say resource view has been
    // loaded if nodes for all the resource layer topologies have been loaded once.
    isResourceViewMode ? loadedAllResourceLayers : nodesLoaded
  )
)

selectNewsArticles = createSelector(
  [selectArticles],
  data => data.articles
)

createLoadingSelector = (actions, ...args) =>
  createSelector(
    globalState => globalState.requestsReducer,
    getLoading(actions),
    ...args
  )

windowHeightSelector = createSelector(
  [
    state => state.getIn(['viewport', 'height']),
  ],
  () => window.innerHeight,
)

makeSelectglobalNotifs = () =>
  createSelector(
    selectCommunicationProviderDomain,
    (substate) => substate.globalNotifs,
  )

mapSearchLoadingToProps = createSelector(
    searchLoadingSelector,
    (loading) => ({ loading })
)

makeSelectJobResults = () => createSelector(selectHome, homeState => homeState.finished_jobs)

getDisplayMonthAndYear = createSelector([getMonth], (month) =>
  month !== null ? getDisplayMonthAndYearHelper(month) : ''
)

taxer = createSelector(
  summarizer,
  (summary) => summary.cost * 0.07
)

isTableViewModeSelector = createSelector(
  [state => state.get('topologyViewMode')],
  viewMode => viewMode === TABLE_VIEW_MODE
)