[CP-2000] [Messages] Search results seems to be in random order. (#1408)

Co-authored-by: Oskar Michalkiewicz <[email protected]> Co-authored-by: Daniel Karski <[email protected]> Co-authored-by: Łukasz Kowalczyk <[email protected]> Co-authored-by: Łukasz Kowalczyk <[email protected]>
mudita · Oct 3, 2023 · ef62195 · ef62195
1 parent 7bc1c7b
commit ef62195
Show file tree

Hide file tree

Showing 30 changed files with 384 additions and 227 deletions.
diff --git a/...pp/src/contacts/components/contacts-select-modal/contacts-select-modal.component.test.tsx b/...pp/src/contacts/components/contacts-select-modal/contacts-select-modal.component.test.tsx
@@ -125,10 +125,6 @@ const onPhoneNumberSelect = jest.fn()
 const onContactSelect = jest.fn()
 const onClose = jest.fn()
 
-beforeAll(() => {
-  mockAllIsIntersecting(true)
-})
-
 describe("Functionality: open/close", () => {
   test("Modal is closed when `open` field is equal to `false`", () => {
     const { queryByTestId } = render({
@@ -276,6 +272,8 @@ describe("Functionality: contacts list", () => {
         withPhoneNumberOnly: false,
       })
 
+      mockAllIsIntersecting(true)
+
       // AUTO DISABLED - fix me if you like :)
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       const contactListProps = contactSimpleListSpy.mock
@@ -284,31 +282,6 @@ describe("Functionality: contacts list", () => {
       expect(contactListProps.contacts.flat().length).toEqual(5)
       expect(contactListProps.contacts.flat()).toMatchInlineSnapshot(`
         Array [
-          Object {
-            "email": "[email protected]",
-            "firstAddressLine": "4929 Pine Garden Lane",
-            "firstName": "John",
-            "id": "1",
-            "lastName": "Doe",
-            "note": "",
-            "primaryPhoneNumber": "123 456 789",
-            "secondAddressLine": "Atlanta, GA, 30339, USA",
-            "secondaryPhoneNumber": "32 123 44 55",
-          },
-          Object {
-            "blocked": false,
-            "email": "[email protected]",
-            "favourite": false,
-            "firstAddressLine": "Malczewskiego 3, Warszawa",
-            "firstName": "Sławomir",
-            "ice": false,
-            "id": "2",
-            "lastName": "Borewicz",
-            "note": "sapiente rem dignissimos sunt",
-            "primaryPhoneNumber": "+71 195 069 214",
-            "secondAddressLine": "",
-            "secondaryPhoneNumber": "",
-          },
           Object {
             "blocked": false,
             "email": "",
@@ -337,6 +310,31 @@ describe("Functionality: contacts list", () => {
             "secondAddressLine": "",
             "secondaryPhoneNumber": "",
           },
+          Object {
+            "blocked": false,
+            "email": "[email protected]",
+            "favourite": false,
+            "firstAddressLine": "Malczewskiego 3, Warszawa",
+            "firstName": "Sławomir",
+            "ice": false,
+            "id": "2",
+            "lastName": "Borewicz",
+            "note": "sapiente rem dignissimos sunt",
+            "primaryPhoneNumber": "+71 195 069 214",
+            "secondAddressLine": "",
+            "secondaryPhoneNumber": "",
+          },
+          Object {
+            "email": "[email protected]",
+            "firstAddressLine": "4929 Pine Garden Lane",
+            "firstName": "John",
+            "id": "1",
+            "lastName": "Doe",
+            "note": "",
+            "primaryPhoneNumber": "123 456 789",
+            "secondAddressLine": "Atlanta, GA, 30339, USA",
+            "secondaryPhoneNumber": "32 123 44 55",
+          },
           Object {
             "blocked": false,
             "email": "",
@@ -376,31 +374,6 @@ describe("Functionality: contacts list", () => {
       expect(contactListProps.contacts.flat().length).toEqual(4)
       expect(contactListProps.contacts.flat()).toMatchInlineSnapshot(`
         Array [
-          Object {
-            "email": "[email protected]",
-            "firstAddressLine": "4929 Pine Garden Lane",
-            "firstName": "John",
-            "id": "1",
-            "lastName": "Doe",
-            "note": "",
-            "primaryPhoneNumber": "123 456 789",
-            "secondAddressLine": "Atlanta, GA, 30339, USA",
-            "secondaryPhoneNumber": "32 123 44 55",
-          },
-          Object {
-            "blocked": false,
-            "email": "[email protected]",
-            "favourite": false,
-            "firstAddressLine": "Malczewskiego 3, Warszawa",
-            "firstName": "Sławomir",
-            "ice": false,
-            "id": "2",
-            "lastName": "Borewicz",
-            "note": "sapiente rem dignissimos sunt",
-            "primaryPhoneNumber": "+71 195 069 214",
-            "secondAddressLine": "",
-            "secondaryPhoneNumber": "",
-          },
           Object {
             "blocked": false,
             "email": "",
@@ -429,6 +402,31 @@ describe("Functionality: contacts list", () => {
             "secondAddressLine": "",
             "secondaryPhoneNumber": "",
           },
+          Object {
+            "blocked": false,
+            "email": "[email protected]",
+            "favourite": false,
+            "firstAddressLine": "Malczewskiego 3, Warszawa",
+            "firstName": "Sławomir",
+            "ice": false,
+            "id": "2",
+            "lastName": "Borewicz",
+            "note": "sapiente rem dignissimos sunt",
+            "primaryPhoneNumber": "+71 195 069 214",
+            "secondAddressLine": "",
+            "secondaryPhoneNumber": "",
+          },
+          Object {
+            "email": "[email protected]",
+            "firstAddressLine": "4929 Pine Garden Lane",
+            "firstName": "John",
+            "id": "1",
+            "lastName": "Doe",
+            "note": "",
+            "primaryPhoneNumber": "123 456 789",
+            "secondAddressLine": "Atlanta, GA, 30339, USA",
+            "secondaryPhoneNumber": "32 123 44 55",
+          },
         ]
       `)
     })

diff --git a/...ges/app/src/contacts/components/contacts-select-modal/contacts-select-modal.component.tsx b/...ges/app/src/contacts/components/contacts-select-modal/contacts-select-modal.component.tsx
@@ -7,7 +7,6 @@ import { ContactInputSearch } from "App/contacts/components/contact-input-search
 import { ContactSimpleList } from "App/contacts/components/contact-simple-list"
 import { ContactsSelectModalProps } from "App/contacts/components/contacts-select-modal/contacts-select-modal.interface"
 import { Contact } from "App/contacts/dto"
-import { contactsFilter } from "App/contacts/helpers/contacts-filter/contacts-filter.helper"
 import {
   contactHashSelector,
   favouriteContactHashSelector,
@@ -18,6 +17,8 @@ import { FunctionComponent } from "App/__deprecated__/renderer/types/function-co
 import { noop } from "App/__deprecated__/renderer/utils/noop"
 import React, { useEffect, useState } from "react"
 import { useSelector } from "react-redux"
+import { filterContacts } from "App/contacts/helpers/filter-contacts/filter-contacts"
+import { sortByLastNameAscending } from "App/utils/sort-by-last-name-ascending"
 
 export const ContactSelectModal: FunctionComponent<
   ContactsSelectModalProps
@@ -39,7 +40,7 @@ export const ContactSelectModal: FunctionComponent<
 
   useEffect(() => {
     setResults(
-      contacts.flat().filter((item) => contactsFilter(item, searchQuery || ""))
+      filterContacts(contacts.flat().sort(sortByLastNameAscending), searchQuery)
     )
     // AUTO DISABLED - fix me if you like :)
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/packages/app/src/contacts/components/contacts/contacts.component.test.tsx b/packages/app/src/contacts/components/contacts/contacts.component.test.tsx
@@ -90,7 +90,7 @@ const contactTwo: Contact = {
   secondAddressLine: "",
 }
 
-const contacts: Contact[] = [
+const contactsData: Contact[] = [
   {
     id: "0",
     firstName: "Sławomir",
@@ -168,7 +168,7 @@ const defaultProps: Props = {
       contacts: [contactOne, contactTwo],
     },
   ],
-  flatList: [],
+  contacts: [],
   selectedItems: [],
   allRowsSelected: false,
   resetAllItems: jest.fn(),
@@ -231,11 +231,24 @@ test("changing contact details preview, when the user switching between contacts
 })
 
 test("first name and second name in search shows correct result", () => {
-  const { queryByTestId, getByTestId } = renderer({ flatList: contacts })
+  const { queryByTestId, getByTestId } = renderer({ contacts: contactsData })
   const input = queryByTestId(
     ContactInputSelectTestIds.Input
   ) as HTMLInputElement
   fireEvent.change(input, { target: { value: "Oswald Bednar" } })
+
+  console.log(
+    "getByTestId(InputSearchTestIds.List).childNodes",
+    getByTestId(InputSearchTestIds.List).childNodes
+  )
+  console.log(
+    "getByTestId(InputSearchTestIds.List).childNodes.length",
+    getByTestId(InputSearchTestIds.List).childNodes.length
+  )
+
+  console.log(getByTestId(InputSearchTestIds.List).childNodes[0])
+  console.log(getByTestId(InputSearchTestIds.List).childNodes[1])
+
   expect(getByTestId(InputSearchTestIds.List).childNodes).toHaveLength(4)
 })
 
@@ -338,7 +351,7 @@ describe("contact export", () => {
 describe("search preview", () => {
   test("preview list should be independent of search results", () => {
     const { queryByTestId, getByTestId, queryAllByTestId } = renderer({
-      flatList: [contactOne, contactTwo],
+      contacts: [contactOne, contactTwo],
     })
     const input = queryByTestId(
       ContactInputSelectTestIds.Input

diff --git a/packages/app/src/contacts/components/contacts/contacts.component.tsx b/packages/app/src/contacts/components/contacts/contacts.component.tsx
@@ -51,12 +51,12 @@ import ImportContactsFlow, {
 } from "App/contacts/components/import-contacts-flow/import-contacts-flow.component"
 import { Contact, NewContact } from "App/contacts/reducers/contacts.interface"
 import { isError } from "App/__deprecated__/common/helpers/is-error.helpers"
-import { contactsFilter } from "App/contacts/helpers/contacts-filter/contacts-filter.helper"
 import { ExportContactFailedModal } from "../export-contact-failed-modal/export-contact-failed-modal.component"
 import { applyValidationRulesToImportedContacts } from "App/contacts/helpers/apply-validation-rules-to-imported-contacts/apply-validation-rules-to-imported-contacts"
 import { ExportContactsResult } from "App/contacts/constants"
 import DeleteContactsPopup from "./delete-contacts-popup/delete-contacts-popup.component"
 import { differenceWith, isEqual } from "lodash"
+import { filterContacts } from "App/contacts/helpers/filter-contacts/filter-contacts"
 
 const allPossibleFormErrorCausedByAPI: FormError[] = [
   {
@@ -90,7 +90,7 @@ const Contacts: FunctionComponent<ContactsProps> = ({
   resultState,
   getContact,
   contactList = [],
-  flatList,
+  contacts,
   speedDialChosenList,
   isThreadOpened,
   loadContacts,
@@ -113,7 +113,7 @@ const Contacts: FunctionComponent<ContactsProps> = ({
   const history = useHistory()
   const searchParams = useURLSearchParams()
   const phoneNumber = searchParams.get("phoneNumber") || ""
-  const activeContact = findContactByPhoneNumber(flatList, phoneNumber)
+  const activeContact = findContactByPhoneNumber(contacts, phoneNumber)
   const initNewContact =
     phoneNumber !== "" && activeContact === undefined
       ? { ...defaultContact, primaryPhoneNumber: phoneNumber }
@@ -133,7 +133,7 @@ const Contacts: FunctionComponent<ContactsProps> = ({
 
   useEffect(() => {
     if (editedContact) {
-      const newData = flatList.find(
+      const newData = contacts.find(
         (contact) => contact.id === editedContact.id
       )
 
@@ -164,7 +164,7 @@ const Contacts: FunctionComponent<ContactsProps> = ({
     }
     // AUTO DISABLED - fix me if you like :)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flatList])
+  }, [contacts])
 
   const closeModal = () => modalService.closeModal()
 
@@ -308,7 +308,7 @@ const Contacts: FunctionComponent<ContactsProps> = ({
   const handleMessage = (phoneNumber: string) => onMessage(history, phoneNumber)
 
   const openDeleteModal = (id: string) => {
-    const contact = flatList.find((contact) => contact.id === id)
+    const contact = contacts.find((contact) => contact.id === id)
     const handleDelete = async () => {
       resetAllItems()
       void modalService.openModal(
@@ -621,16 +621,14 @@ const Contacts: FunctionComponent<ContactsProps> = ({
     setSearchValue(searchPreviewValue)
   }
 
-  const results = flatList.filter((item) =>
-    contactsFilter(item, searchValue || "")
-  )
-  const resultsPreview = flatList.filter((item) =>
-    contactsFilter(item, searchPreviewValue || "")
-  )
+  const results = filterContacts(contacts, searchValue || "")
+  const resultsPreview = filterContacts(contacts, searchPreviewValue || "")
 
   const handleExport = async (ids: string[]): Promise<void> => {
-    const contacts = flatList.filter((contact) => ids.includes(contact.id))
-    const exportResult = await exportContacts(contacts)
+    const contactsToExport = contacts.filter((contact) =>
+      ids.includes(contact.id)
+    )
+    const exportResult = await exportContacts(contactsToExport)
 
     switch (exportResult) {
       case ExportContactsResult.Ok:
@@ -682,7 +680,7 @@ const Contacts: FunctionComponent<ContactsProps> = ({
       )}
       <ContactSection>
         <ContactPanel
-          contactsList={flatList}
+          contactsList={contacts}
           onContactSelect={handleContactSelect}
           onManageButtonClick={handleImportContacts}
           onNewButtonClick={handleAddingContact}

diff --git a/packages/app/src/contacts/components/contacts/contacts.interface.ts b/packages/app/src/contacts/components/contacts/contacts.interface.ts
@@ -40,7 +40,7 @@ export interface ContactsProps {
   toggleItem: (id: string) => void
   onSpeedDialSettingsSave: (contacts?: Contact[]) => void
   getContact: (id: ContactID) => Contact
-  flatList: Contact[]
+  contacts: Contact[]
   speedDialChosenList: number[]
   // AUTO DISABLED - fix me if you like :)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/packages/app/src/contacts/components/contacts/contacts.stories.tsx b/packages/app/src/contacts/components/contacts/contacts.stories.tsx
@@ -24,7 +24,7 @@ import { intl, textFormatters } from "App/__deprecated__/renderer/utils/intl"
 import { contactsSeed } from "App/__deprecated__/seeds/contacts"
 import {
   createFullName,
-  getFlatList,
+  getContacts,
   getSortedContactList,
   getSpeedDialChosenList,
 } from "App/contacts/helpers/contacts.helpers"
@@ -45,7 +45,7 @@ const getContact = (id: ContactID) => contactsSeed.db[id]
 const labeledContactList: any = getSortedContactList(contactsSeed)
 // AUTO DISABLED - fix me if you like :)
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const flatList: any = getFlatList(contactsSeed)
+const contacts: any = getContacts(contactsSeed)
 const speedDialChosenList: number[] = getSpeedDialChosenList(contactsSeed)
 const isThreadOpened = () => true
 
@@ -68,7 +68,7 @@ const ContactsComponent = ({
     getContact={getContact as any}
     // AUTO DISABLED - fix me if you like :)
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    flatList={flatList}
+    contacts={contacts}
     contactList={contactList}
     speedDialChosenList={speedDialChosenList}
     onManageButtonClick={dummyPromise(action("Manage contact"))}
@@ -251,7 +251,7 @@ storiesOf("Views|Contacts/Modals", module)
           onClose={action("Close")}
           // AUTO DISABLED - fix me if you like :)
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          flatList={flatList}
+          contacts={contacts}
         />
       </ModalWrapper>
       <ModalBackdrop />

diff --git a/packages/app/src/contacts/components/speed-dial-modal/speed-dial-modal.component.tsx b/packages/app/src/contacts/components/speed-dial-modal/speed-dial-modal.component.tsx
@@ -118,7 +118,7 @@ const SpeedDialModal: FunctionComponent<SpeedDialProps> = ({
   editContact,
   onSave = noop,
   onClose = noop,
-  flatList = [],
+  contacts = [],
 }) => {
   const [localData, setLocalData] = useState<[ContactID, Contact][]>([])
   const speedDialList = Array.from({ length: 9 })
@@ -130,7 +130,7 @@ const SpeedDialModal: FunctionComponent<SpeedDialProps> = ({
         (contact) => contact[1].speedDial === speedDial
       )
 
-      const globalStateItem = flatList.find(
+      const globalStateItem = contacts.find(
         (contact) => contact.speedDial === speedDial
       )
 
@@ -146,7 +146,7 @@ const SpeedDialModal: FunctionComponent<SpeedDialProps> = ({
     DropdownPosition[]
   >([])
 
-  const availableContacts = flatList.filter(
+  const availableContacts = contacts.filter(
     (item: Contact) =>
       item.id !== "0" &&
       (Boolean(item.firstName) || Boolean(item.lastName)) &&