Division Network Integration

Copy-paste code for divisional apps to sync with SUN network

What This Does

  • ✅ Users active on your division show as "available" on SphereUs.com
  • ✅ Real-time availability status across the entire SUN network
  • ✅ Members can find available service providers instantly
  • ✅ Auto-offline after 10 minutes of inactivity
Prerequisites

⚠️ Your division app must:

  1. Already have SSO login working (redirect to SphereUs.com)
  2. Store the sphereus_token in localStorage after login
  3. Be a Base44 app OR any web app that can make API calls

If you don't have SSO yet, see the Division API Guide

Step 1: Add Network Activity Tracker (React)

Create a new component in your division app:

// Add this to your division app's main layout or App component
// This keeps users showing as "active" across the SUN network

import { useEffect, useRef } from 'react';

export default function NetworkActivityTracker() {
  const lastUpdateRef = useRef(null);

  const updateNetworkActivity = async () => {
    const token = localStorage.getItem('sphereus_token'); // Token from SSO
    if (!token) return;

    const now = Date.now();
    // Only ping every 2 minutes to avoid excessive API calls
    if (!lastUpdateRef.current || now - lastUpdateRef.current > 120000) {
      try {
        await fetch('https://wirks.com/api/functions/updateNetworkActivity', {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/json'
          }
        });
        lastUpdateRef.current = now;
      } catch (error) {
        console.error('Failed to update network activity:', error);
      }
    }
  };

  useEffect(() => {
    // Track user activity
    const handleActivity = () => updateNetworkActivity();
    
    const events = ['mousedown', 'keydown', 'scroll', 'touchstart'];
    events.forEach(e => window.addEventListener(e, handleActivity));

    // Initial ping
    handleActivity();

    return () => {
      events.forEach(e => window.removeEventListener(e, handleActivity));
    };
  }, []);

  return null; // No UI needed
}

// Then add <NetworkActivityTracker /> to your main layout

✅ That's it!

Once added to your layout, users active on your app will automatically show as available on SphereUs.com

Alternative: Vanilla JavaScript (Non-React Apps)

Add this script to your HTML or main JavaScript file:

// If you're NOT using React, use this vanilla JavaScript version:

(function() {
  let lastUpdate = null;

  function updateNetworkActivity() {
    const token = localStorage.getItem('sphereus_token');
    if (!token) return;

    const now = Date.now();
    if (!lastUpdate || now - lastUpdate > 120000) {
      fetch('https://wirks.com/api/functions/updateNetworkActivity', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer ' + token,
          'Content-Type': 'application/json'
        }
      }).then(() => {
        lastUpdate = now;
      }).catch(err => {
        console.error('Failed to update network activity:', err);
      });
    }
  }

  // Track activity
  const events = ['mousedown', 'keydown', 'scroll', 'touchstart'];
  events.forEach(e => window.addEventListener(e, updateNetworkActivity));

  // Initial ping
  updateNetworkActivity();
})();
Optional: Check User Availability

If you want to show availability status in your division UI:

// Check if a user is available (optional - for showing availability in your UI)

const checkUserAvailability = async (userEmail) => {
  const token = localStorage.getItem('sphereus_token');
  
  const response = await fetch(
    'https://wirks.com/api/functions/getUserAvailability?email=' + userEmail,
    {
      headers: { 'Authorization': 'Bearer ' + token }
    }
  );
  
  const data = await response.json();
  
  // data.availability_status: "available", "busy", "away", or "offline"
  // data.is_available: true/false
  // data.last_activity: timestamp
  
  return data;
};

// Example: Show availability badge
const user = await checkUserAvailability('user@example.com');
if (user.is_available) {
  console.log(user.full_name + ' is available!');
}
Testing the Integration
  1. Add the code to your division app and deploy
  2. Log in to your division app via SSO from SphereUs.com
  3. Use your division app for 30 seconds (click, scroll, etc.)
  4. Go to SphereUs.com/MemberDirectory
  5. Your profile should show a
    Available
    badge
API Endpoints
POST
https://wirks.com/api/functions/updateNetworkActivity

Headers: Authorization: Bearer YOUR_TOKEN

GET
https://wirks.com/api/functions/getUserAvailability?email=user@example.com

Headers: Authorization: Bearer YOUR_TOKEN

💬 Need Help?

Contact the SphereUs platform team for integration support or questions.