Fix: Import Contact Improvements (#15)

* 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

* feat: format imported phone numbers

* feat: sort record lists

Author: MarcusVirg

apps/resplice/src/common/utils.ts

@@ -0,0 +1,7 @@
+type RecordItem = {
+	name: string
+}
+
+export function sortRecordsByName<T extends RecordItem>(record: T[]): T[] {
+	return record.sort((a, b) => a.name.localeCompare(b.name))
+}

apps/resplice/src/modules/connection/connection.helpers.ts

@@ -10,7 +10,7 @@
 	} from '@resplice/components'
 	import connectionStore from '$modules/connection/connection.store'
 	import inviteStores from '$modules/invite/invite.store'
-	import { connectionsList } from '$modules/connection/connection.helpers'
+	import { sortRecordsByName } from '$common/utils'
 	import SearchHeader from '$common/components/SearchHeader.svelte'
 	import ConnectionList from '$modules/connection/components/ConnectionList.svelte'
 	import PendingConnectionList from '$modules/invite/components/PendingConnectionList.svelte'
@@ -20,9 +20,9 @@
 
 	const inviteStore = inviteStores.invites
 	const pendingConnectionStore = inviteStores.pendingConnections
-	$: connections = connectionsList($connectionStore)
-	$: invites = Array.from($inviteStore.values())
-	$: pendingConnections = Array.from($pendingConnectionStore.values())
+	$: connections = sortRecordsByName(Array.from($connectionStore.values()))
+	$: invites = sortRecordsByName(Array.from($inviteStore.values()))
+	$: pendingConnections = sortRecordsByName(Array.from($pendingConnectionStore.values()))
 
 	onMount(() => {
 		// Get scroll position

apps/resplice/src/modules/connection/pages/ConnectionListPage.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { AttributeActionIcon, Button, toast } from '@resplice/components'
+	import { parsePhoneNumber } from 'libphonenumber-js'
 	import { AttributeAction } from '@resplice/utils'
+	import { AttributeActionIcon, Button, toast } from '@resplice/components'
 	import useProtocol from '$common/protocol/useProtocol'
 	import type {
 		ProviderContact,
@@ -14,8 +15,8 @@
 	export let attribute: ProviderContactAttribute
 	let isInviting = false
 
-	function providerAttributeToAction(value: ProviderContactAttribute): AttributeAction {
-		switch (value.type) {
+	function providerAttributeToAction(attribute: ProviderContactAttribute): AttributeAction {
+		switch (attribute.type) {
 			case 'email':
 				return AttributeAction.Email
 			case 'phone':
@@ -25,6 +26,15 @@
 		}
 	}
 
+	function providerAttributeValue(attribute: ProviderContactAttribute): string {
+		switch (attribute.type) {
+			case 'phone':
+				return parsePhoneNumber(attribute.value, 'US').formatNational()
+			default:
+				return attribute.value
+		}
+	}
+
 	async function invite(contact: ProviderContact, attribute: ProviderContactAttribute) {
 		try {
 			isInviting = true
@@ -60,7 +70,7 @@
 			<p class="font-semibold text-gray-800 truncate h-6 capitalize">
 				{attribute.name}
 			</p>
-			<p class="truncate">{attribute.value}</p>
+			<p class="truncate">{providerAttributeValue(attribute)}</p>
 		</div>
 	</div>
 	<Button

apps/resplice/src/modules/invite/components/ContactImportAttribute.svelte

@@ -9,6 +9,7 @@
 	import type { ProviderContact, InviteState } from '$modules/invite/services/contactProviders'
 	import { type Invite } from '$modules/invite/invite.types'
 	import ContactImportAttribute from '$modules/invite/components/ContactImportAttribute.svelte'
+	import { sortRecordsByName } from '$common/utils'
 
 	const inviteStore = inviteStores.invites
 
@@ -39,7 +40,7 @@
 
 	$: {
 		const connectionAttributeValues = $connectionAttributeValuesStore
-		const invites = [...$inviteStore.values()]
+		const invites = Array.from($inviteStore.values())
 
 		contacts = contacts.map((contact) => ({
 			...contact,
@@ -49,7 +50,7 @@
 </script>
 
 {#if contacts.length}
-	{#each contacts as contact, idx}
+	{#each sortRecordsByName(contacts) as contact, idx}
 		<div class="flex flex-col bg-white rounded-lg shadow-lg mb-4 divide-y-2">
 			<div class="w-full py-2 pr-4 flex items-center">
 				<div class="flex-1 overflow-hidden">