From ed4f09f2bcefb506dca6d5d2a8317a451538d810 Mon Sep 17 00:00:00 2001 From: tnagorra Date: Wed, 1 May 2019 15:03:48 +0545 Subject: [PATCH] Change order of item after filtering --- .../DeepGallerySelect/index.js | 7 ++++--- src/views/Connector/index.js | 19 +++++++------------ src/views/Country/index.js | 15 +++++++-------- .../LeadAdd/ConnectorSelectModal/index.js | 13 +++++++------ .../Details/Frameworks/FrameworkList/index.js | 10 ++++------ src/views/Project/Details/Regions/index.js | 18 +++++++++++------- .../WordCategories/WordCategoryList/index.js | 10 ++++------ src/views/Project/ProjectList/index.js | 10 ++++------ src/views/UserGroup/MembersTable/index.js | 8 +++++--- src/views/UserGroup/ProjectsTable/index.js | 9 +++++---- 10 files changed, 58 insertions(+), 61 deletions(-) diff --git a/src/components/general/DeepGalleryFileSelect/DeepGallerySelect/index.js b/src/components/general/DeepGalleryFileSelect/DeepGallerySelect/index.js index 673936d241..f0513003a4 100644 --- a/src/components/general/DeepGalleryFileSelect/DeepGallerySelect/index.js +++ b/src/components/general/DeepGalleryFileSelect/DeepGallerySelect/index.js @@ -17,6 +17,7 @@ import ModalHeader from '#rscv/Modal/Header'; import Table from '#rscv/Table'; import { caseInsensitiveSubmatch, + compareStringSearch, compareString, compareDate, } from '@togglecorp/fujs'; @@ -163,9 +164,9 @@ export default class DgSelect extends React.PureComponent { } getTableData = memoize(({ galleryFiles, selected, searchInputValue }) => { - const filterdGalleryFiles = galleryFiles.filter( - file => caseInsensitiveSubmatch(file.title, searchInputValue), - ); + const filterdGalleryFiles = galleryFiles + .filter(file => caseInsensitiveSubmatch(file.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); return filterdGalleryFiles.map(file => ( { ...file, selected: selected.includes(file.id) } diff --git a/src/views/Connector/index.js b/src/views/Connector/index.js index 0455204ab2..ec2973d176 100644 --- a/src/views/Connector/index.js +++ b/src/views/Connector/index.js @@ -13,6 +13,7 @@ import ListView from '#rscv/List/ListView'; import { reverseRoute, caseInsensitiveSubmatch, + compareStringSearch, } from '@togglecorp/fujs'; import { @@ -82,12 +83,9 @@ export default class Connector extends React.PureComponent { const { searchInputValue } = this.state; if (this.props.connectorsList !== connectorsList) { - const displayConnectorsList = connectorsList.filter( - c => caseInsensitiveSubmatch( - c.title, - searchInputValue, - ), - ); + const displayConnectorsList = connectorsList + .filter(c => caseInsensitiveSubmatch(c.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); this.setState({ displayConnectorsList }); } } @@ -134,12 +132,9 @@ export default class Connector extends React.PureComponent { } handleSearchInputChange = (searchInputValue) => { - const displayConnectorsList = this.props.connectorsList.filter( - c => caseInsensitiveSubmatch( - c.title, - searchInputValue, - ), - ); + const displayConnectorsList = this.props.connectorsList + .filter(c => caseInsensitiveSubmatch(c.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); this.setState({ displayConnectorsList, diff --git a/src/views/Country/index.js b/src/views/Country/index.js index de723cdc26..5881375e17 100644 --- a/src/views/Country/index.js +++ b/src/views/Country/index.js @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import { caseInsensitiveSubmatch, compareString, + compareStringSearch, } from '@togglecorp/fujs'; import Page from '#rscv/Page'; @@ -82,10 +83,9 @@ export default class CountryPanel extends React.PureComponent { const { countries } = nextProps; const { searchInputValue } = this.state; if (this.props.countries !== countries) { - const displayCountryList = countries.filter( - country => caseInsensitiveSubmatch(country.title, searchInputValue), - ); - displayCountryList.sort((a, b) => compareString(a.title, b.title)); + const displayCountryList = countries + .filter(country => caseInsensitiveSubmatch(country.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); this.setState({ displayCountryList }); } } @@ -115,10 +115,9 @@ export default class CountryPanel extends React.PureComponent { } handleSearchInputChange = (searchInputValue) => { - const displayCountryList = this.props.countries.filter( - country => caseInsensitiveSubmatch(country.title, searchInputValue), - ); - + const displayCountryList = this.props.countries + .filter(country => caseInsensitiveSubmatch(country.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); this.setState({ displayCountryList, searchInputValue, diff --git a/src/views/LeadAdd/ConnectorSelectModal/index.js b/src/views/LeadAdd/ConnectorSelectModal/index.js index d32f548094..3bc884b233 100644 --- a/src/views/LeadAdd/ConnectorSelectModal/index.js +++ b/src/views/LeadAdd/ConnectorSelectModal/index.js @@ -5,6 +5,7 @@ import { connect } from 'react-redux'; import { caseInsensitiveSubmatch, reverseRoute, + compareStringSearch, } from '@togglecorp/fujs'; import Icon from '#rscg/Icon'; @@ -112,9 +113,9 @@ export default class ConnectorSelectModal extends React.PureComponent { if (newConnectorsList !== oldConnectorsList) { this.views = this.getContentViews(newConnectorsList); - const displayConnectorsList = newConnectorsList.filter( - c => caseInsensitiveSubmatch(c.title, searchInputValue), - ); + const displayConnectorsList = newConnectorsList + .filter(c => caseInsensitiveSubmatch(c.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); this.setState({ displayConnectorsList }); } @@ -351,9 +352,9 @@ export default class ConnectorSelectModal extends React.PureComponent { } handleSearchInputChange = (searchInputValue) => { - const displayConnectorsList = this.props.connectorsList.filter( - c => caseInsensitiveSubmatch(c.title, searchInputValue), - ); + const displayConnectorsList = this.props.connectorsList + .filter(c => caseInsensitiveSubmatch(c.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); this.setState({ displayConnectorsList, diff --git a/src/views/Project/Details/Frameworks/FrameworkList/index.js b/src/views/Project/Details/Frameworks/FrameworkList/index.js index 509875b8ca..eae6f88260 100644 --- a/src/views/Project/Details/Frameworks/FrameworkList/index.js +++ b/src/views/Project/Details/Frameworks/FrameworkList/index.js @@ -4,6 +4,7 @@ import memoize from 'memoize-one'; import { caseInsensitiveSubmatch, compareString, + compareStringSearch, } from '@togglecorp/fujs'; import Icon from '#rscg/Icon'; @@ -81,12 +82,9 @@ FrameworkListItem.defaultProps = { const filterFrameworks = memoize((frameworkList, searchInputValue) => { - const displayFrameworkList = frameworkList.filter( - framework => caseInsensitiveSubmatch( - framework.title, - searchInputValue, - ), - ); + const displayFrameworkList = frameworkList + .filter(framework => caseInsensitiveSubmatch(framework.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); displayFrameworkList.sort( (a, b) => compareString( diff --git a/src/views/Project/Details/Regions/index.js b/src/views/Project/Details/Regions/index.js index 0926f1e9cd..e9e9a7ce55 100644 --- a/src/views/Project/Details/Regions/index.js +++ b/src/views/Project/Details/Regions/index.js @@ -2,7 +2,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import { connect } from 'react-redux'; -import { caseInsensitiveSubmatch, compareString } from '@togglecorp/fujs'; +import { + caseInsensitiveSubmatch, + compareString, + compareStringSearch, +} from '@togglecorp/fujs'; import AccentButton from '#rsca/Button/AccentButton'; import SearchInput from '#rsci/SearchInput'; import RadioInput from '#rsci/RadioInput'; @@ -110,9 +114,9 @@ export default class ProjectRegions extends React.PureComponent { if (this.props.projectDetails !== projectDetails) { const { regions = [] } = projectDetails; - const displayRegionList = regions.filter( - region => caseInsensitiveSubmatch(region.title, searchInputValue), - ); + const displayRegionList = regions + .filter(region => caseInsensitiveSubmatch(region.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); let newSelectedRegion = selectedRegion; if (regions.findIndex(r => r.id === selectedRegion) === -1) { @@ -151,9 +155,9 @@ export default class ProjectRegions extends React.PureComponent { handleSearchInputChange = (searchInputValue) => { const { projectDetails } = this.props; const { regions = [] } = projectDetails; - const displayRegionList = regions.filter( - region => caseInsensitiveSubmatch(region.title, searchInputValue), - ); + const displayRegionList = regions + .filter(region => caseInsensitiveSubmatch(region.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); this.setState({ displayRegionList, diff --git a/src/views/Project/Details/WordCategories/WordCategoryList/index.js b/src/views/Project/Details/WordCategories/WordCategoryList/index.js index 50dd70a952..67d7cbb3a6 100644 --- a/src/views/Project/Details/WordCategories/WordCategoryList/index.js +++ b/src/views/Project/Details/WordCategories/WordCategoryList/index.js @@ -5,6 +5,7 @@ import memoize from 'memoize-one'; import { caseInsensitiveSubmatch, compareString, + compareStringSearch, } from '@togglecorp/fujs'; import Icon from '#rscg/Icon'; @@ -77,12 +78,9 @@ WordCategoryListItem.defaultProps = { }; const filterWordCategories = memoize((wordCategoryList, searchInputValue) => { - const displayWordCategoryList = wordCategoryList.filter( - wordCategory => caseInsensitiveSubmatch( - wordCategory.title, - searchInputValue, - ), - ); + const displayWordCategoryList = wordCategoryList + .filter(wordCategory => caseInsensitiveSubmatch(wordCategory.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); displayWordCategoryList.sort( (a, b) => compareString( diff --git a/src/views/Project/ProjectList/index.js b/src/views/Project/ProjectList/index.js index db969ed711..1a3c87bd22 100644 --- a/src/views/Project/ProjectList/index.js +++ b/src/views/Project/ProjectList/index.js @@ -11,6 +11,7 @@ import Message from '#rscv/Message'; import { reverseRoute, caseInsensitiveSubmatch, + compareStringSearch, } from '@togglecorp/fujs'; import Cloak from '#components/general/Cloak'; @@ -38,12 +39,9 @@ const defaultProps = { }; const filterProjects = memoize((userProjects, searchInputValue) => { - const displayUserProjects = userProjects.filter( - project => caseInsensitiveSubmatch( - project.title, - searchInputValue, - ), - ); + const displayUserProjects = userProjects + .filter(project => caseInsensitiveSubmatch(project.title, searchInputValue)) + .sort((a, b) => compareStringSearch(a.title, b.title, searchInputValue)); return displayUserProjects; }); diff --git a/src/views/UserGroup/MembersTable/index.js b/src/views/UserGroup/MembersTable/index.js index 76be691511..a0a3eeb102 100644 --- a/src/views/UserGroup/MembersTable/index.js +++ b/src/views/UserGroup/MembersTable/index.js @@ -5,6 +5,7 @@ import { caseInsensitiveSubmatch, compareString, compareDate, + compareStringSearch, } from '@togglecorp/fujs'; import PrimaryButton from '#rsca/Button/PrimaryButton'; @@ -155,9 +156,10 @@ export default class MembersTable extends React.PureComponent { handleSearchMemberChange = (value) => { const { membershipList } = this.props; - const filteredMemberData = membershipList.filter( - member => caseInsensitiveSubmatch(member.memberName, value), - ); + const filteredMemberData = membershipList + .filter(member => caseInsensitiveSubmatch(member.memberName, value)) + .sort((a, b) => compareStringSearch(a.memberName, b.memberName, value)); + this.setState({ searchMemberInputValue: value, membershipList: filteredMemberData, diff --git a/src/views/UserGroup/ProjectsTable/index.js b/src/views/UserGroup/ProjectsTable/index.js index b894983b49..fef56b3a3c 100644 --- a/src/views/UserGroup/ProjectsTable/index.js +++ b/src/views/UserGroup/ProjectsTable/index.js @@ -6,6 +6,7 @@ import memoize from 'memoize-one'; import { reverseRoute, caseInsensitiveSubmatch, + compareStringSearch, compareLength, compareString, isFalsy, @@ -44,10 +45,10 @@ const mapDispatchToProps = dispatch => ({ }); const searchProject = memoize((projects, value) => ( - !isFalsy(value) ? - projects.filter( - project => caseInsensitiveSubmatch(project.title, value), - ) + !isFalsy(value) + ? projects + .filter(project => caseInsensitiveSubmatch(project.title, value)) + .sort((a, b) => compareStringSearch(a.title, b.title, value)) : projects ));