ApiTest.tsx

Go to the documentation of this file.

"use client";
import { useState } from "react";
import { fieldpine } from "@/lib/fieldpine";
 
export default function ApiTest() {
  const [testResults, setTestResults] = useState<string>("");
  const [loading, setLoading] = useState(false);
 
  const testEnvironmentVariables = () => {
    setLoading(true);
    setTestResults("=== ENVIRONMENT VARIABLES TEST ===\n");
    
    try {
      const results = [];
      
      // Test environment variables
      results.push("Environment Variables:");
      results.push(`NEXT_PUBLIC_FIELDPINE_BASE_URL: ${process.env.NEXT_PUBLIC_FIELDPINE_BASE_URL || 'Not set'}`);
      results.push(`NEXT_PUBLIC_FIELDPINE_RETAILER_ID: ${process.env.NEXT_PUBLIC_FIELDPINE_RETAILER_ID || 'Not set'}`);
      results.push(`NEXT_PUBLIC_APP_ENV: ${process.env.NEXT_PUBLIC_APP_ENV || 'Not set'}`);
      results.push(`NEXT_PUBLIC_DEMO_MODE: ${process.env.NEXT_PUBLIC_DEMO_MODE || 'Not set'}`);
      
      // Test API URL construction
      const baseUrl = process.env.NEXT_PUBLIC_FIELDPINE_BASE_URL || "https://www.fieldpine.com";
      const retailerId = process.env.NEXT_PUBLIC_FIELDPINE_RETAILER_ID || "1_2_3_4";
      const apiUrl = `${baseUrl}/RetailAPI_${retailerId}`;
      
      results.push("\n=== API CONFIGURATION ===");
      results.push(`Base URL: ${baseUrl}`);
      results.push(`Retailer ID: ${retailerId}`);
      results.push(`Full API URL: ${apiUrl}`);
      
      // Test fieldpine instance
      results.push("\n=== FIELDPINE INSTANCE TEST ===");
      try {
        const testUrl = fieldpine.buildUrl('/products', { limit: 1 });
        results.push(`Built URL: ${testUrl}`);
        results.push("✅ Fieldpine instance working");
      } catch (error) {
        results.push(`❌ Fieldpine instance error: ${error}`);
      }
      
      setTestResults(results.join('\n'));
    } catch (error) {
      setTestResults(`❌ Error: ${error}`);
    }
    
    setLoading(false);
  };
 
  const testApiCall = async () => {
    setLoading(true);
    setTestResults("=== API CALL TEST ===\n");
    
    try {
      // Set demo authentication
      fieldpine.setAuth("demo-api-key", "1_2_3_4");
      
      const results = [];
      results.push("Testing API call to /products endpoint...");
      
      const url = fieldpine.buildUrl('/products', { limit: 2 });
      results.push(`URL: ${url}`);
      
      // Test the API call
      try {
        const response = await fieldpine.getProducts({ limit: 2 });
        results.push("✅ API call successful");
        results.push(`Response type: ${typeof response}`);
        results.push(`Response: ${JSON.stringify(response, null, 2)}`);
      } catch (apiError: any) {
        results.push(`❌ API call failed: ${apiError.message}`);
        results.push(`Error details: ${JSON.stringify(apiError, null, 2)}`);
        
        // Try a direct fetch to see the raw response
        try {
          const directResponse = await fetch(url);
          results.push(`\nDirect fetch status: ${directResponse.status}`);
          results.push(`Direct fetch ok: ${directResponse.ok}`);
          const text = await directResponse.text();
          results.push(`Direct fetch response: ${text.substring(0, 500)}`);
        } catch (fetchError: any) {
          results.push(`Direct fetch also failed: ${fetchError.message}`);
        }
      }
      
      setTestResults(results.join('\n'));
    } catch (error: any) {
      setTestResults(`❌ Error: ${error.message}`);
    }
    
    setLoading(false);
  };
 
  const clearResults = () => {
    setTestResults("");
  };
 
  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-4">API Test Console</h2>
      
      <div className="space-y-4">
        <div className="flex flex-wrap gap-2">
          <button 
            onClick={testEnvironmentVariables}
            disabled={loading}
            className="px-4 py-2 bg-brand text-white rounded hover:opacity-90 disabled:opacity-50"
          >
            Test Environment Variables
          </button>
          
          <button 
            onClick={testApiCall}
            disabled={loading}
            className="px-4 py-2 bg-success text-white rounded hover:opacity-90 disabled:opacity-50"
          >
            Test API Call
          </button>
          
          <button 
            onClick={clearResults}
            disabled={loading}
            className="px-4 py-2 bg-surface border-2 border-border text-text rounded hover:bg-surface-2 disabled:opacity-50"
          >
            Clear
          </button>
        </div>
        
        {loading && (
          <div className="text-blue-600 font-medium">
            Running test...
          </div>
        )}
        
        {testResults && (
          <div className="mt-4">
            <h3 className="font-semibold mb-2">Test Results:</h3>
            <pre className="bg-gray-100 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap">
              {testResults}
            </pre>
          </div>
        )}
      </div>
    </div>
  );
}