fdfbc4017e
- API Client: Full Wrike API v4 with OAuth2/token auth, pagination, error handling - 60+ Tools across 14 categories: tasks, folders, projects, spaces, contacts, comments, timelogs, attachments, workflows, custom-fields, approvals, groups, invitations, webhooks - 22 React Apps: task-dashboard, task-detail, task-grid, task-board, project-dashboard, project-detail, project-grid, folder-tree, space-overview, gantt-view, time-dashboard, time-entries, member-workload, comment-thread, approval-manager, workflow-editor, custom-fields-manager, attachment-gallery, search-results, activity-feed, sprint-board, reports-dashboard - All apps: dark theme, client-side state, standalone directories - Full TypeScript types for all Wrike API entities - Comprehensive README with setup instructions Replaces single-file stub with production-ready MCP server
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
export default function SpaceOverview() {
|
|
const [spaces, setSpaces] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
loadSpaces();
|
|
}, []);
|
|
|
|
const loadSpaces = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const result = await window.mcp.callTool('wrike_list_spaces', {});
|
|
setSpaces(result.spaces || []);
|
|
} catch (error) {
|
|
console.error('Failed to load spaces:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
|
|
<h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Space Overview</h1>
|
|
|
|
<button
|
|
onClick={loadSpaces}
|
|
style={{
|
|
background: '#3b82f6',
|
|
color: 'white',
|
|
padding: '8px 16px',
|
|
borderRadius: '6px',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
marginBottom: '24px',
|
|
}}
|
|
>
|
|
Refresh
|
|
</button>
|
|
|
|
{loading ? (
|
|
<div>Loading...</div>
|
|
) : (
|
|
<div style={{ display: 'grid', gap: '16px', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
|
|
{spaces.map(space => (
|
|
<div
|
|
key={space.id}
|
|
style={{
|
|
background: '#1f2937',
|
|
padding: '16px',
|
|
borderRadius: '8px',
|
|
border: '1px solid #374151',
|
|
}}
|
|
>
|
|
<h3 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
|
|
{space.title}
|
|
</h3>
|
|
<div style={{ fontSize: '14px', color: '#9ca3af' }}>
|
|
<div>Access: {space.accessType}</div>
|
|
<div>Archived: {space.archived ? 'Yes' : 'No'}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{spaces.length === 0 && (
|
|
<div style={{ textAlign: 'center', padding: '48px', color: '#6b7280' }}>
|
|
No spaces found
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|