Your spaces

By the end of this page you can make named spaces, such as Book club and Climbing, and switch between them.

Background

A space is a group of identities that replicate the same data. ECHO keeps a database in each one; the contact book uses spaces only for who is in them. In Keyhive terms a space is a group, and the identity that creates it is its first admin. Admins invite people, change what members may do and remove them.

Space.create makes a space, and Space.spaces lists every space your identity belongs to. Your identity also has a personal space, which only your own devices join; Space.spaces leaves it out.

Steps

1. Create a space. Space.create returns the new space’s id, name and state at once. The space opens a moment later, so wait for Space.waitReady before you use it, then select it. New space calls this.

   src/app/Spaces.tsx

   import * as Effect from 'effect/Effect';
   import React, { useState } from 'react';
   
   import { Space } from '@dxos/halo';
   import { useHaloServices } from '@dxos/halo-react';
   import { type SpaceId } from '@dxos/keys';
   
   import { Prompt } from './ui.tsx';
   
   /** Picks the current space, and makes new ones. */
   export const SpacePicker = ({
     spaces,
     current,
     onSelect,
   }: {
     spaces: readonly Space.Info[];
     current?: SpaceId;
     onSelect: (id: SpaceId) => void;
   }) => {
     const services = useHaloServices();
     const [creating, setCreating] = useState(false);
   
     /** Creates a space called `name`, waits until it opens, and selects it. */
     const handleCreate = (name: string) =>
       Effect.gen(function* () {
         const space = yield* Space.create({ name });
         yield* Space.waitReady(space.id);
         return space;
       })
         .pipe(Effect.provide(services), Effect.runPromise)
         .then((space) => onSelect(space.id));
   
   

2. List your spaces. useSpaces returns the spaces that are ready, and re-renders when one is created, joined or left. It follows Space.spaces, which also lists spaces that are not open. The dropdown shows the named ones, by name.

   src/app/ContactBook.tsx

   import React, { useMemo, useState } from 'react';
   
   import { type Identity } from '@dxos/halo';
   import { useIdentity, useSpaces } from '@dxos/halo-react';
   import { type SpaceId } from '@dxos/keys';
   
   import { type Stage, reached } from '../stage.ts';
   import { Contacts, Members } from './Contacts.tsx';
   import { Devices } from './Devices.tsx';
   import { InviteBar } from './Invitations.tsx';
   import { ProfileChip } from './Profile.tsx';
   import { Recovery } from './Recovery.tsx';
   import { SpacePicker } from './Spaces.tsx';
   import { Boundary } from './ui.tsx';
   import { Welcome } from './Welcome.tsx';
   
   export type ContactBookProps = {
     stage: Stage;
   };
   
   /**
    * The contact book on one device, with what `stage` has built. It runs against
    * the HALO services of the `HaloProvider` above it.
    */
   export const ContactBook = ({ stage }: ContactBookProps) => {
     /** The identity, re-rendering on each change; undefined before it exists. */
     const identity = useIdentity();
     return identity ? (
       <Signedin stage={stage} identity={identity} />
     ) : (
       <Welcome stage={stage} />
     );
   };
   
   type Tab = 'people' | 'devices' | 'recovery';
   
   const Signedin = ({
     stage,
     identity,
   }: {
     stage: Stage;
     identity: Identity.Info;
   }) => {
     /** The spaces that are open, re-rendering on each change. */
     const spaces = useSpaces();
     /** The named ones, by name. */
     const named = useMemo(
       () =>
         spaces
           .filter((space) => space.name)
           .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')),
       [spaces],
     );
   
   

Try it

Alice has a name and no spaces. Press New space, name it, and make another; the dropdown switches between them.

What you can do now

You can create spaces and list them in a component. Next, Invite people lets someone else in.