Merge pull request #774 from the-deep/feature-change-sort-searching

Change order of item after filtering

Author: AdityaKhatri

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) }

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,

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,

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,

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(

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,

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(

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;
 });

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,

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
 ));