diff --git a/apps/resplice/src/common/utils.ts b/apps/resplice/src/common/utils.ts new file mode 100644 index 0000000..fbfa28f --- /dev/null +++ b/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)) +} diff --git a/apps/resplice/src/modules/connection/connection.helpers.ts b/apps/resplice/src/modules/connection/connection.helpers.ts deleted file mode 100644 index e888651..0000000 --- a/apps/resplice/src/modules/connection/connection.helpers.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { ConnectionState } from '$modules/connection/connection.store' -import type { Connection } from '$modules/connection/connection.types' - -export function connectionsList(connectionState: ConnectionState): Connection[] { - return Array.from(connectionState.values()).sort((a, b) => a.name.localeCompare(b.name)) -} diff --git a/apps/resplice/src/modules/connection/pages/ConnectionListPage.svelte b/apps/resplice/src/modules/connection/pages/ConnectionListPage.svelte index f35a9d7..d7e242d 100644 --- a/apps/resplice/src/modules/connection/pages/ConnectionListPage.svelte +++ b/apps/resplice/src/modules/connection/pages/ConnectionListPage.svelte @@ -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 diff --git a/apps/resplice/src/modules/invite/components/ContactImportAttribute.svelte b/apps/resplice/src/modules/invite/components/ContactImportAttribute.svelte index 85d61a2..242f989 100644 --- a/apps/resplice/src/modules/invite/components/ContactImportAttribute.svelte +++ b/apps/resplice/src/modules/invite/components/ContactImportAttribute.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 diff --git a/apps/resplice/src/modules/invite/components/ContactImportList.svelte b/apps/resplice/src/modules/invite/components/ContactImportList.svelte index 77ff777..047ccf3 100644 --- a/apps/resplice/src/modules/invite/components/ContactImportList.svelte +++ b/apps/resplice/src/modules/invite/components/ContactImportList.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">