Michel Usage Sync

Description

Michel Usage Sync is a WordPress plugin that synchronizes and displays usage data from an external API. It provides a Gutenberg block for displaying the data in posts/pages, an admin dashboard for viewing and managing the data, and REST API endpoints for programmatic access.

Features

• Fetches data from the external API at https://miusage.com/v1/challenge/1/
• Caches the data for one hour using WordPress transients to minimize API calls
• Provides custom REST API endpoints at michel-usage/v1/data and michel-usage/v1/refresh
• Includes a Gutenberg block for displaying the data in a responsive table with column visibility controls
• Offers a dedicated admin page under "Michel Usage" for viewing and filtering data
• Implements WP-CLI commands for cache management and data refresh

Installation

1. Upload the michel-usage-sync directory to the /wp-content/plugins/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Navigate to "Michel Usage" in the admin menu to view the data dashboard

Usage

Gutenberg Block

• Add the "Michel Usage Table" block to any post or page
• Use the block settings to control which columns are visible
• The block automatically refreshes data according to the cache schedule

Admin Dashboard

• Access the admin dashboard via "Michel Usage" in the main menu
• Filter data by email address
• Refresh data manually using the refresh button

REST API

• GET /wp-json/michel-usage/v1/data - Retrieve cached data (public)
• POST /wp-json/michel-usage/v1/refresh - Force refresh data (requires admin privileges)

WP-CLI Commands

# Clear cache so next request will fetch fresh data
wp michelusage refresh

# Force immediate refresh from the API
wp michelusage refresh --force

# Check current cache status
wp michelusage status

Development

To build the assets for the Gutenberg block:

npm install
npm run build

Directory Structure

michel-usage-sync/
├── assets/
│   └── src/
│       ├── blocks/
│       │   └── usage-table/
│       └── hooks/
│           └── useFetchData.js
├── src/
│   ├── Admin/
│   │   ├── AdminPage.php
│   │   └── UsageListTable.php
│   ├── Ajax/
│   │   └── Handler.php
│   ├── Api/
│   │   └── DataFetcher.php
│   ├── Blocks/
│   │   └── UsageTableBlock.php
│   ├── CLI/
│   │   └── Commands.php
│   └── Utils/
│       └── Formatter.php
└── templates/
    └── usage-table.php