API Integration Guide

const response = await fetch(`https://your-domain.com/api/widget/${programId}?apiKey=${publicApiKey}`, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
});

if (!response.ok) {
  throw new Error(`API Error: ${response.status}`);
}

const data = await response.json();

// Middleware to validate Mapademics session
const validateMapademicsSession = async (req, res, next) => {
  const sessionToken = req.headers.authorization?.replace('Bearer ', '');
  
  if (!sessionToken) {
    return res.status(401).json({ error: 'No session token provided' });
  }
  
  try {
    // Validate session with your authentication system
    const session = await validateSession(sessionToken);
    req.user = session.user;
    req.organization = session.organization;
    next();
  } catch (error) {
    res.status(401).json({ error: 'Invalid session' });
  }
};

// Protected route example
app.get('/api/courses', validateMapademicsSession, async (req, res) => {
  // Access courses for the authenticated organization
  const courses = await getCourses(req.organization.id);
  res.json(courses);
});

const makeAPIRequest = async (url, options, retries = 3) => {
  try {
    const response = await fetch(url, options);
    
    if (response.status === 429) {
      const resetTime = parseInt(response.headers.get('X-RateLimit-Reset'));
      const waitTime = resetTime * 1000 - Date.now();
      
      if (retries > 0 && waitTime > 0) {
        console.log(`Rate limited. Waiting ${waitTime}ms before retry...`);
        await new Promise(resolve => setTimeout(resolve, waitTime));
        return makeAPIRequest(url, options, retries - 1);
      }
    }
    
    return response;
  } catch (error) {
    console.error('API request failed:', error);
    throw error;
  }
};

const syncProgramsWithSIS = async () => {
  try {
    // Get programs from Mapademics
    const mapademicsPrograms = await fetch('/api/programs', {
      headers: { 'Authorization': `Bearer ${sessionToken}` }
    }).then(res => res.json());
    
    // Get programs from SIS
    const sisPrograms = await getSISPrograms();
    
    // Sync logic
    for (const mapademicsProgram of mapademicsPrograms) {
      const sisProgram = sisPrograms.find(p => p.cipCode === mapademicsProgram.cipCode);
      
      if (!sisProgram) {
        // Create new program in SIS
        await createProgramInSIS({
          name: mapademicsProgram.name,
          code: mapademicsProgram.code,
          cipCode: mapademicsProgram.cipCode,
          description: mapademicsProgram.description
        });
        console.log(`Created program: ${mapademicsProgram.name}`);
      } else {
        // Update existing program
        await updateProgramInSIS(sisProgram.id, {
          description: mapademicsProgram.description,
          lastSyncDate: new Date().toISOString()
        });
        console.log(`Updated program: ${mapademicsProgram.name}`);
      }
    }
    
    console.log('SIS sync completed successfully');
  } catch (error) {
    console.error('SIS sync failed:', error);
    throw error;
  }
};

// Run sync daily
setInterval(syncProgramsWithSIS, 24 * 60 * 60 * 1000);

import React, { useState, useEffect } from 'react';

const CareerOutcomesDashboard = ({ programIds, apiKey }) => {
  const [programData, setProgramData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const fetchProgramData = async () => {
      try {
        setLoading(true);
        const promises = programIds.map(id => 
          fetch(`/api/widget/${id}?apiKey=${apiKey}`)
            .then(res => res.json())
        );
        
        const results = await Promise.all(promises);
        const validResults = results.filter(result => result.success);
        setProgramData(validResults.map(result => result.data));
        
      } catch (err) {
        setError('Failed to fetch career outcomes data');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    
    if (programIds && programIds.length > 0) {
      fetchProgramData();
    }
  }, [programIds, apiKey]);
  
  if (loading) return <div>Loading career outcomes...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <div className="career-dashboard">
      <h2>Career Outcomes by Program</h2>
      {programData.map(program => (
        <div key={program.programId} className="program-card">
          <h3>{program.programName}</h3>
          <div className="outcomes-grid">
            <div className="outcome-item">
              <label>Median Salary</label>
              <value>${program.averages.medianWage?.toLocaleString()}</value>
            </div>
            <div className="outcome-item">
              <label>Employment Growth</label>
              <value>{(program.averages.employmentChange * 100).toFixed(1)}%</value>
            </div>
            <div className="outcome-item">
              <label>Job Opportunities</label>
              <value>{program.averages.totalEmployment?.toLocaleString()} jobs</value>
            </div>
          </div>
          
          <h4>Top Career Paths</h4>
          {program.occupations.slice(0, 3).map(occupation => (
            <div key={occupation.id} className="occupation-item">
              <span className="occupation-title">{occupation.name}</span>
              <span className="occupation-wage">${occupation.medianWage?.toLocaleString()}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default CareerOutcomesDashboard;