<commit_before>import React from 'react'
import sortBy from 'lodash/sortBy'
import { connect } from 'react-redux'
import { NavLink } from 'react-router-dom'
import { withClient } from 'cozy-client'
import { translate } from 'cozy-ui/react/I18n'
import keyBy from 'lodash/keyBy'
import has from 'lodash/has'

import EmptyIcon from 'assets/images/connected-accounts.svg'
import AddServiceTile from 'components/AddServiceTile'
import KonnectorTile from 'components/KonnectorTile'
import classNames from 'classnames'
import fillWithGhostItems from 'components/helpers/fillWithGhostItems'
import { getInstalledKonnectors } from 'reducers/index'
import useAppsInMaintenance from 'hooks/withAppsInMaintenance'

const Services = ({ t, installedKonnectors, client }) => {
  const hasConnections = !!installedKonnectors.length
  const appsInMaintenance = useAppsInMaintenance(client)
  const appsInMaintenanceBySlug = keyBy(appsInMaintenance, 'slug')
  return (
    <div
      className={classNames('services-list-wrapper', {
        'services-list-wrapper--empty': !hasConnections
      })}
    >
      {hasConnections ? (
        <div className="list connector-list" data-tutorial="home-services">
          {installedKonnectors.map((konnector, index) => (
            <KonnectorTile
              key={index}
              konnector={konnector}
              route={`connected/${konnector.slug}`}
              isInMaintenance={has(appsInMaintenanceBySlug, konnector.slug)}
            />
          ))}
          {<AddServiceTile label={t('add_service')} />}
          {fillWithGhostItems(6)}
        </div>
      ) : (
        <div className="connector-list col-empty-list">
          <div className="col-empty-list--img">
            <img
              src={EmptyIcon}
              data-tutorial="home-services"
              alt={t('connector.empty')}
            />
          </div>
          <div className="col-empty-list--text">
            <h2>{t('connector.no-connectors-connected')}</h2>
            <p>{t('connector.get-info')}</p>
            <NavLink to="/providers/all" className="col-button">
              <span>{t('connector.connect-account')}</span>
            </NavLink>
          </div>
        </div>
      )}
    </div>
  )
}

const mapStateToProps = state => {
  return {
    installedKonnectors: sortBy(
      getInstalledKonnectors(state),
      konnector => konnector.name
    )
  }
}

export default connect(mapStateToProps)(translate()(withClient(Services)))<commit_msg>fix: Sort services ignoring the case<commit_after>import React from 'react'
import sortBy from 'lodash/sortBy'
import { connect } from 'react-redux'
import { NavLink } from 'react-router-dom'
import { withClient } from 'cozy-client'
import { translate } from 'cozy-ui/react/I18n'
import keyBy from 'lodash/keyBy'
import has from 'lodash/has'

import EmptyIcon from 'assets/images/connected-accounts.svg'
import AddServiceTile from 'components/AddServiceTile'
import KonnectorTile from 'components/KonnectorTile'
import classNames from 'classnames'
import fillWithGhostItems from 'components/helpers/fillWithGhostItems'
import { getInstalledKonnectors } from 'reducers/index'
import useAppsInMaintenance from 'hooks/withAppsInMaintenance'

const Services = ({ t, installedKonnectors, client }) => {
  const hasConnections = !!installedKonnectors.length
  const appsInMaintenance = useAppsInMaintenance(client)
  const appsInMaintenanceBySlug = keyBy(appsInMaintenance, 'slug')
  return (
    <div
      className={classNames('services-list-wrapper', {
        'services-list-wrapper--empty': !hasConnections
      })}
    >
      {hasConnections ? (
        <div className="list connector-list" data-tutorial="home-services">
          {installedKonnectors.map((konnector, index) => (
            <KonnectorTile
              key={index}
              konnector={konnector}
              route={`connected/${konnector.slug}`}
              isInMaintenance={has(appsInMaintenanceBySlug, konnector.slug)}
            />
          ))}
          {<AddServiceTile label={t('add_service')} />}
          {fillWithGhostItems(6)}
        </div>
      ) : (
        <div className="connector-list col-empty-list">
          <div className="col-empty-list--img">
            <img
              src={EmptyIcon}
              data-tutorial="home-services"
              alt={t('connector.empty')}
            />
          </div>
          <div className="col-empty-list--text">
            <h2>{t('connector.no-connectors-connected')}</h2>
            <p>{t('connector.get-info')}</p>
            <NavLink to="/providers/all" className="col-button">
              <span>{t('connector.connect-account')}</span>
            </NavLink>
          </div>
        </div>
      )}
    </div>
  )
}

const mapStateToProps = state => {
  return {
    installedKonnectors: sortBy(getInstalledKonnectors(state), konnector =>
      konnector.name.toLowerCase()
    )
  }
}

export default connect(mapStateToProps)(translate()(withClient(Services)))
{'fraction_non_alphanumeric': 0.12998405103668262, 'fraction_numerical': 0.001993620414673046, 'mean_word_length': 2.841500765696784, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2823167', 'n_tokens_mistral': 1510, 'n_tokens_neox': 1507, 'n_words': 265}