InviteScreen.tsx

type RowItem = {
  id: string;
  name: string;
  phoneNumber?: string;
  email?: string;
};

function InviteScreen() {
  const contacts = useContacts();

  const sections = React.useMemo(() => {
    return Object.entries(
      groupBy(
        // Create one contact per phone number and email.
        contacts.data.reduce(
          (res, cur) => {
            if (cur.phoneNumbers != null) {
              for (const p of cur.phoneNumbers) {
                res.push({
                  id: cur.id + p.number,
                  name: cur.name || '',
                  phoneNumber: p.number,
                });
              }
            }
            if (cur.emails != null) {
              for (const e of cur.emails) {
                res.push({
                  id: cur.id + e.email,
                  name: cur.name || '',
                  email: e.email,
                });
              }
            }
            return res;
          },
          [] as Array<RowItem>
        ),
        (c: RowItem) => {
          const firstChar = (c.name.charAt(0) || '#').toLowerCase();
          return firstChar.match(/[a-z]/) ? firstChar : '#';
        }
      )
    )
      .map(([key, value]: [string, RowItem[]]) => ({
        key,
        data: value.sort((a, b) =>
          (a.name || a.name || '') < (b.name || b.name || '') ? -1 : 1
        ),
      }))
      .sort((a: { key: string }, b: { key: string }) =>
        a.key < b.key ? -1 : 1
      );
  }, [contacts.data]);

  if (contacts.loading) {
    return <Text>Loading...</Text>;
  } else if (contacts.error != null) {
    return <Text>Oh no error :( {contacts.error.message}</Text>;
  } else {
    return (
      <>
        <SectionList
          sections={sections}
          renderSectionHeader={({ section }) => (
            <Text>
              {section.key!.toUpperCase()}
            </Text>
          )}
          renderItem={({ item }: { item: RowItem }) => {
            return (
              <ContactRow
                name={item.name}
                emailOrNumber={(item.email || item.phoneNumber)!}
              />
            );
          }}
        />
      </>
    );
  }
}