Your contacts

By the end of this page the contact book lists everyone you share a space with, once each, with the spaces you share, and you can remove someone from a space.

Background

A contact is anyone who shares a space with you. The contact book keeps no list of its own: it reads each space’s members and merges them by DID, since a member’s DID is the same in every space.

A member is an identity with an access level: pull, read, edit or admin. Removing a member is a revocation, the signed opposite of the delegation that let them in. The space’s group key changes with it, so they cannot read anything written after. An admin can remove anyone; changing a member’s access instead is on the Space API page.

Steps

1. List your contacts. useContacts returns everyone who shares a space with you, once each, with the spaces you share. It follows Space.spaces and each space’s Space.members, leaves you out, and re-renders when someone joins, leaves or comes online. The Contacts tab shows a row for each contact.

   src/app/Contacts.tsx

   import {
     type Contact,
     useContacts,
     useHaloServices,
     useMembers,
   } from '@dxos/halo-react';
   import { type SpaceId } from '@dxos/keys';
   
   import { Person } from './ui.tsx';
   
   /** The members of one space, before the app lists contacts. */
   export const Members = ({ spaceId }: { spaceId: SpaceId }) => {
     const members = useMembers(spaceId);
     return (
       <ul className='cb-list'>
         {members.map((member) => (
           <li key={member.did ?? member.identityKey} className='cb-item'>
             <Person name={member.displayName} online={member.online} />
           </li>
         ))}
       </ul>
     );
   };
   
   /** Everyone you share a space with, once each, with the spaces you share. */
   export const Contacts = () => {
     const services = useHaloServices();
   
     /** Everyone you share a space with, re-rendering on each change. */
     const contacts = useContacts();
   
   

2. Remove someone from a space. Space.removeMember revokes their membership. The × on a space beside a contact calls this, and that space leaves their row.

   src/app/Contacts.tsx

   import * as Effect from 'effect/Effect';
   import React from 'react';
   
   import { Space } from '@dxos/halo';
   import {
     type Contact,
     useContacts,
     useHaloServices,
     useMembers,
   } from '@dxos/halo-react';
   import { type SpaceId } from '@dxos/keys';
   
   import { Person } from './ui.tsx';
   
   /** The members of one space, before the app lists contacts. */
   export const Members = ({ spaceId }: { spaceId: SpaceId }) => {
     const members = useMembers(spaceId);
     return (
       <ul className='cb-list'>
         {members.map((member) => (
           <li key={member.did ?? member.identityKey} className='cb-item'>
             <Person name={member.displayName} online={member.online} />
           </li>
         ))}
       </ul>
     );
   };
   
   /** Everyone you share a space with, once each, with the spaces you share. */
   export const Contacts = () => {
     const services = useHaloServices();
   
     /** Everyone you share a space with, re-rendering on each change. */
     const contacts = useContacts();
   
     /** Removes `contact` from `space`. */
     const handleRemove = (contact: Contact, space: Space.Info) =>
       Space.removeMember(space.id, contact.did).pipe(
         Effect.provide(services),
         Effect.runPromise,
       );
   
   

Try it

Alice, Bob and Carol are all in Book club, and Alice and Carol are in Climbing. Open Contacts on any device: Alice sees Bob with Book club, and Carol with Book club and Climbing. Remove Carol from Climbing on Alice’s device, and Climbing leaves her row.

What you can do now

You can list everyone you share a space with and remove someone from a space. Next, Add a device puts the same contacts on your phone.