onairos/src/mobile/MobileDataRequestPage.jsx

The Onairos Library is a collection of functions that enable Applications to connect and communicate data with Onairos Identities via User Authorization. Integration for developers is seamless, simple and effective for all applications. LLM SDK capabiliti

import React, { useState, useEffect, useRef } from 'react';
import MobileIndividualConnection from './components/MobileIndividualConnection';

/**
 * MobileDataRequestPage Component
 * Mobile-optimized version of DataRequestPage for React Native environment
 */
const MobileDataRequestPage = ({ 
  requestData = {}, 
  dataRequester = 'App', 
  proofMode = false, 
  domain = '',
  onComplete,
  onCancel
}) => {
  const [loading, setLoading] = useState(true);
  const [activeModels, setActiveModels] = useState([]);
  const [granted, setGranted] = useState(0);
  const [allowSubmit, setAllowSubmit] = useState(false);
  const selectedConnections = useRef([]);
  
  // Update allowSubmit when granted changes
  useEffect(() => {
    setAllowSubmit(granted > 0);
  }, [granted]);

  // Simulate loading data
  useEffect(() => {
    const loadData = async () => {
      try {
        // Simulate API call
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        // Set sample data for mobile
        setActiveModels(requestData?.activeModels || ['Personality', 'Demographics']);
        setLoading(false);
      } catch (error) {
        console.error('Error loading data:', error);
        setLoading(false);
      }
    };
    
    loadData();
  }, [requestData]);

  /**
   * Reject all data requests
   */
  function rejectDataRequest() {
    if (onCancel && typeof onCancel === 'function') {
      onCancel();
    }
  }

  /**
   * Send the selected data requests to the parent window
   */
  function sendDataRequest() {
    if (granted === 0) {
      rejectDataRequest();
      return;
    }
    
    // Create API response with the updated URL
    const apiResponse = {
      success: true,
      apiUrl: "https://api2.onairos.uk/inferenceTest",
      approvedRequests: selectedConnections.current
    };
    
    // Call onComplete with API response
    if (onComplete && typeof onComplete === 'function') {
      onComplete(apiResponse);
    }
  }

  /**
   * Update the granted count
   */
  function changeGranted(plusMinus) {
    setGranted(prev => prev + plusMinus);
  }

  /**
   * Handle selection of a connection/data request
   */
  function handleConnectionSelection(dataRequester, modelType, index, title, reward, isSelected) {
    const newDate = new Date();
    const newConnection = {
      requester: dataRequester,
      date: newDate.toISOString(),
      name: title,
      reward: reward,
      data: modelType
    };

    if (isSelected) {
      // Add to selected connections if not already present
      if (!selectedConnections.current.find(connection => 
        connection.requester === dataRequester && connection.data === modelType)) {
        selectedConnections.current = [...selectedConnections.current, newConnection];
      }
    } else {
      // Remove from selected connections
      selectedConnections.current = selectedConnections.current.filter(
        connection => !(connection.requester === dataRequester && connection.data === modelType)
      );
    }
  }

  // Main render
  if (loading) {
    return (
      <div className="mobile-loading-container">
        <div className="mobile-loading-spinner"></div>
        <p className="mobile-loading-text">Loading...</p>
      </div>
    );
  }

  return (
    <div className="mobile-data-request-container" style={{ height: '60vh' }}>
      <div className="mobile-data-request-header">
        <h2 className="mobile-data-request-title">Data Requests from {dataRequester}</h2>
        
        <div className="mobile-data-request-button-row">
          <button
            className="mobile-reject-button"
            onClick={rejectDataRequest}
          >
            Reject All
          </button>
          
          <button
            className="mobile-confirm-button"
            disabled={!allowSubmit}
            onClick={sendDataRequest}
          >
            Confirm ({granted})
          </button>
        </div>
      </div>

      <div className="mobile-data-request-content">
        {activeModels.length === 0 ? (
          <div className="mobile-no-models-message">
            <p>
              Please connect Onairos Personality to send {dataRequester} your data
            </p>
          </div>
        ) : (
          <div className="mobile-connections-list">
            {Object.keys(requestData)
              .filter(key => requestData[key])
              .map((key, index) => {
                const product = requestData[key];
                const active = activeModels.includes(product.type);
                
                return (
                  <MobileIndividualConnection
                    key={key}
                    active={active}
                    title={product.type}
                    id={product}
                    number={index}
                    descriptions={product.descriptions}
                    rewards={product.reward}
                    size={key}
                    changeGranted={changeGranted}
                    onSelectionChange={(isSelected) =>
                      handleConnectionSelection(dataRequester, key, index, product.type, product.reward, isSelected)
                    }
                  />
                );
              })}
          </div>
        )}
      </div>
    </div>
  );
};

export default MobileDataRequestPage;