# thinkrank/1.0.0/src/admin/components/App.js

ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 186 lines.

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/App.js
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/admin/components/App.js
- Modified: 2025-08-10T07:57:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/admin/components/App.js#L10-L20`.

```javascript
/**
 * Main Admin App Component
 * 
 * Router component for admin interface
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Spinner, Notice } from '@wordpress/components';

// Page Components
import Dashboard from './pages/Dashboard';
import EssentialSEO from './pages/EssentialSEO';
import AITools from './pages/AITools';
import Settings from './pages/Settings';
import UsageAnalytics from './pages/UsageAnalytics';

// Common Components
import Header from './common/Header';
import ErrorBoundary from './common/ErrorBoundary';

/**
 * Main App Component
 * 
 * @param {Object} props Component props
 * @param {string} props.page Current page identifier
 */
const App = ({ page = 'dashboard' }) => {
    const [currentPage, setCurrentPage] = useState(page);
    const [isLoading, setIsLoading] = useState(true);

    // Simplified state - remove store dependency for now
    const [isInitialized, setIsInitialized] = useState(false);
    const [hasError, setHasError] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');
    const userCapabilities = {};

    // Initialize app
    useEffect(() => {
        const initializeApp = async () => {
            try {
                // Simple initialization without store dependencies
                await new Promise(resolve => setTimeout(resolve, 500));
                setIsInitialized(true);
                setIsLoading(false);
            } catch (error) {
                console.error('ThinkRank: App initialization failed', error);
                setHasError(true);
                setErrorMessage(error.message);
                setIsLoading(false);
            }
        };

        initializeApp();
    }, []);

    // Handle page changes
    const handlePageChange = (newPage) => {
        if (userCapabilities[newPage] !== false) {
            setCurrentPage(newPage);
        }
    };

    // Render loading state
    if (isLoading || !isInitialized) {
        return (
            <div className="thinkrank-loading">
                <Spinner />
                <p>{__('Loading ThinkRank...', 'thinkrank')}</p>
            </div>
        );
    }

    // Render error state
    if (hasError) {
        return (
            <div className="thinkrank-error">
                <Notice status="error" isDismissible={false}>
                    <strong>{__('ThinkRank Error:', 'thinkrank')}</strong>
                    <br />
                    {errorMessage}
                </Notice>
            </div>
        );
    }

    // Get page information for header
    const getPageInfo = (page) => {
        switch (page) {
            case 'dashboard':
                return {
                    title: __('Dashboard', 'thinkrank'),
                    description: __('Overview of your SEO optimization progress', 'thinkrank'),
                    showHelp: true
                };
            case 'essential-seo':
                return {
                    title: __('Essential SEO', 'thinkrank'),
                    description: __('Configure your site-wide SEO settings with AI-powered optimization', 'thinkrank'),
                    showHelp: true
                };
            case 'ai-tools':
                return {
                    title: __('AI Tools', 'thinkrank'),
                    description: __('AI-powered content tools including Content Planner and Metadata Generator', 'thinkrank'),
                    showHelp: true
                };
            case 'settings':
                return {
                    title: __('Settings', 'thinkrank'),
                    description: __('Configure your AI API keys and plugin preferences', 'thinkrank'),
                    showHelp: false
                };
            case 'analytics':
                return {
                    title: __('Usage Analytics', 'thinkrank'),
                    description: __('Track your AI usage, costs, and plugin performance analytics', 'thinkrank'),
                    showHelp: true
                };
            default:
                return {
                    title: __('ThinkRank', 'thinkrank'),
                    description: __('AI-powered SEO optimization for WordPress', 'thinkrank'),
                    showHelp: false
                };
        }
    };

    const pageInfo = getPageInfo(currentPage);

    return (
        <ErrorBoundary>
            <div className="thinkrank-app thinkrank-ui">
                <Header
                    pageTitle={pageInfo.title}
                    pageDescription={pageInfo.description}
                    showHelp={pageInfo.showHelp}
                />

                <div className="thinkrank-main">
                    <div className="thinkrank-content">
                        {renderCurrentPage(currentPage)}
                    </div>
                </div>
            </div>
        </ErrorBoundary>
    );
};

/**
 * Render current page component
 * 
 * @param {string} page Current page
 * @return {JSX.Element} Page component
 */
function renderCurrentPage(page) {
    switch (page) {
        case 'dashboard':
            return <Dashboard />;

        case 'essential-seo':
            return <EssentialSEO />;

        case 'ai-tools':
            return <AITools />;

        case 'settings':
            return <Settings />;

        case 'analytics':
            return <UsageAnalytics />;

        default:
            return (
                <Notice status="warning">
                    {__('Page not found. Redirecting to dashboard...', 'thinkrank')}
                </Notice>
            );
    }
}

export default App;

```