Fix: Native Contact Picker Properties (#14)

* feat: qr code improvements

* apply pending connection events

* chore: hide import contacts for now

* fix: import native contact fixes and improvements

* fix: phone number parsing for Google contacts

* fix: contact properties intersection

apps/resplice/src/modules/invite/services/contactProviders.ts

@@ -1,5 +1,5 @@
 import { parsePhoneNumber } from 'libphonenumber-js'
-import { isSupported } from '@resplice/utils'
+import { isSupported, intersection } from '@resplice/utils'
 import config from '$services/config'
 
 export type InviteState = 'invited' | 'connected' | 'ignored'
@@ -65,9 +65,10 @@ export async function fetchGoogleContacts(accessToken: string): Promise<Provider
 		const attributes: ProviderContactAttribute[] = []
 		if (person.phoneNumbers) {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			person.phoneNumbers.forEach((phone: any, idx: number) =>
-				attributes.push({ type: 'phone', name: `Phone ${idx + 1}`, value: phone.canonicalForm })
-			)
+			person.phoneNumbers.forEach((number: any, idx: number) => {
+				const phone = parsePhoneNumber(number.value, 'US')
+				if (phone) attributes.push({ type: 'phone', name: `Phone ${idx + 1}`, value: phone.number })
+			})
 		}
 		if (person.emailAddresses) {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -84,8 +85,13 @@ export async function getNativeContacts(): Promise<ProviderContact[]> {
 	const isContactPickerSupported = isSupported('contacts')
 	if (!isContactPickerSupported) throw new Error('Contact picker not supported')
 
+	const properties = intersection(
+		['name', 'tel', 'icon'],
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(navigator as any).contacts.getProperties()
+	)
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const contacts: any[] = await (navigator as any).contacts.select(['name', 'tel', 'icon'], {
+	const contacts: any[] = await (navigator as any).contacts.select(properties, {
 		multiple: true
 	})
 

packages/utils/src/data-structures/array.ts

@@ -0,0 +1,28 @@
+export function intersection<T>(a: T[], b: T[]): T[] {
+	const setB = new Set(b)
+	return a.filter((value) => setB.has(value))
+}
+
+if (import.meta.vitest) {
+	const { test, expect } = import.meta.vitest
+
+	test('finds intersection of two arrays', () => {
+		const arrA = [1, 2, 3, 4, 5]
+		const arrB = [3, 4, 5, 6, 7]
+		const expected = intersection(arrA, arrB)
+		expect(expected).toEqual([3, 4, 5])
+	})
+
+	test('handles empty array', () => {
+		const expectedA = intersection([1, 2], [])
+		expect(expectedA).toEqual([])
+
+		const expectedB = intersection([], [1, 2, 3])
+		expect(expectedB).toEqual([])
+	})
+
+	test('maintains duplicates in first array', () => {
+		const expected = intersection(['one', 'two', 'three', 'two', 'four'], ['two', 'four'])
+		expect(expected).toEqual(['two', 'two', 'four'])
+	})
+}

packages/utils/src/index.ts

@@ -5,6 +5,7 @@ export * from '$utils/converters/base64'
 export * from '$utils/converters/bytes'
 export * from '$utils/converters/file'
 export * from '$utils/crypto'
+export * from '$utils/data-structures/array'
 export * from '$utils/data-structures/arrToMap'
 export * from '$utils/data-structures/arrToRecord'
 export * from '$utils/dimensional/countries'