useActiveWorkspace()

Access and manage the currently active workspace

The useActiveWorkspace() hook provides access to the currently active workspace within the active organization.

Import

import { useActiveWorkspace } from '@snipextt/wacht';

Usage

import { useActiveWorkspace } from '@snipextt/wacht';

function ActiveWorkspaceDashboard() {
  const { 
    activeWorkspace, 
    loading, 
    leave 
  } = useActiveWorkspace();

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!activeWorkspace) {
    return <div>No active workspace</div>;
  }

  return (
    <div>
      <h1>{activeWorkspace.name}</h1>
      <p>{activeWorkspace.description}</p>
      <button onClick={leave}>
        Leave Workspace
      </button>
    </div>
  );
}

Properties

activeWorkspace · Workspace | null

The currently active workspace object. null if no workspace is active.

loading · boolean

Whether the active workspace is being loaded

error · Error | null

Any error that occurred

Methods

leave()

Leave the current active workspace.

const { leave } = useActiveWorkspace();

await leave();

refetch()

Manually refresh the active workspace data.

const { refetch } = useActiveWorkspace();

await refetch();

Example: Workspace Context Display

function WorkspaceHeader() {
  const { activeWorkspace, loading } = useActiveWorkspace();
  const { activeOrganization } = useActiveOrganization();

  if (loading) {
    return <div className="workspace-header loading">Loading...</div>;
  }

  return (
    <div className="workspace-header">
      <div className="breadcrumb">
        <span>{activeOrganization?.name || 'Personal'}</span>
        <span>/</span>
        <span>{activeWorkspace?.name || 'No Workspace'}</span>
      </div>
      
      {activeWorkspace && (
        <div className="workspace-info">
          <p>{activeWorkspace.description}</p>
          <small>Created: {new Date(activeWorkspace.created_at).toLocaleDateString()}</small>
        </div>
      )}
    </div>
  );
}

Example: Require Workspace Guard

function RequireWorkspace({ children, fallback }) {
  const { activeWorkspace, loading } = useActiveWorkspace();

  if (loading) {
    return <div>Loading workspace...</div>;
  }

  if (!activeWorkspace) {
    return fallback || (
      <div className="no-workspace">
        <h2>No Workspace Selected</h2>
        <p>Please select a workspace to continue.</p>
        <WorkspaceSwitcher />
      </div>
    );
  }

  return children;
}

// Usage
function App() {
  return (
    <RequireWorkspace fallback={<CreateWorkspacePrompt />}>
      <YourWorkspaceContent />
    </RequireWorkspace>
  );
}

Example: Workspace-Scoped Operations

function WorkspaceOperations() {
  const { activeWorkspace, leave } = useActiveWorkspace();
  const { switchWorkspace } = useSession();
  const { workspaces } = useWorkspaceList();

  const [showConfirmLeave, setShowConfirmLeave] = useState(false);

  const handleLeaveWorkspace = async () => {
    if (!activeWorkspace) return;
    
    try {
      await leave();
      
      // Switch to another workspace if available
      const otherWorkspace = workspaces.find(w => w.id !== activeWorkspace.id);
      if (otherWorkspace) {
        await switchWorkspace(otherWorkspace.id);
      }
      
      setShowConfirmLeave(false);
    } catch (error) {
      console.error('Failed to leave workspace:', error);
    }
  };

  if (!activeWorkspace) {
    return null;
  }

  return (
    <div className="workspace-operations">
      <h3>Workspace: {activeWorkspace.name}</h3>
      
      <button 
        onClick={() => setShowConfirmLeave(true)}
        className="danger"
      >
        Leave Workspace
      </button>

      {showConfirmLeave && (
        <div className="confirm-dialog">
          <p>Are you sure you want to leave {activeWorkspace.name}?</p>
          <button onClick={handleLeaveWorkspace}>Yes, Leave</button>
          <button onClick={() => setShowConfirmLeave(false)}>Cancel</button>
        </div>
      )}
    </div>
  );
}

Example: Workspace Details Panel

function WorkspaceDetailsPanel() {
  const { activeWorkspace, loading, refetch } = useActiveWorkspace();
  const [lastRefresh, setLastRefresh] = useState(new Date());

  const handleRefresh = async () => {
    await refetch();
    setLastRefresh(new Date());
  };

  if (loading) {
    return <div>Loading workspace details...</div>;
  }

  if (!activeWorkspace) {
    return (
      <div className="empty-state">
        <p>No workspace selected</p>
        <WorkspaceSwitcher />
      </div>
    );
  }

  return (
    <div className="workspace-details">
      <header>
        <h2>{activeWorkspace.name}</h2>
        <button onClick={handleRefresh}>Refresh</button>
      </header>
      
      <dl>
        <dt>Description</dt>
        <dd>{activeWorkspace.description || 'No description'}</dd>
        
        <dt>Created</dt>
        <dd>{new Date(activeWorkspace.created_at).toLocaleDateString()}</dd>
        
        <dt>Last Updated</dt>
        <dd>{new Date(activeWorkspace.updated_at).toLocaleDateString()}</dd>
        
        <dt>Workspace ID</dt>
        <dd><code>{activeWorkspace.id}</code></dd>
      </dl>
      
      <footer>
        <small>Last refreshed: {lastRefresh.toLocaleTimeString()}</small>
      </footer>
    </div>
  );
}

Notes

• The active workspace is determined by the current session context
• Workspace must belong to the active organization
• Leaving the active workspace will require selecting a new workspace
• Workspace switching is handled through useSession().switchWorkspace()
• The hook returns null for activeWorkspace if no workspace is selected