Skip to main content
DeveloperExamplesPatient Portal

Patient Portal Integration

Advanced

A complete integration example showing context providers, custom hooks, and components for building a patient-facing application with save/bookmark functionality.

KishoProvider.tsx

/**
 * Kisho API Context Provider
 */

import React, { createContext, useContext } from 'react';

interface KishoContextValue {
  apiKey: string;
  baseUrl: string;
  getDisease: (mondoId: string) => Promise<Disease>;
  searchDiseases: (query: string, filters?: any) => Promise<any>;
  getDiseasePAGs: (mondoId: string) => Promise<PAG[]>;
}

const KishoContext = createContext<KishoContextValue | null>(null);

export const KishoProvider: React.FC<{
  apiKey: string;
  baseUrl?: string;
  children: React.ReactNode;
}> = ({ apiKey, baseUrl = 'https://kishomed.io/api', children }) => {
  const fetchApi = async (path: string) => {
    const response = await fetch(`${baseUrl}${path}`, {
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json'
      }
    });

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

    return response.json();
  };

  const value: KishoContextValue = {
    apiKey,
    baseUrl,
    getDisease: async (mondoId) => fetchApi(`/v1/diseases/${encodeURIComponent(mondoId)}`),
    searchDiseases: async (query, filters = {}) => {
      const params = new URLSearchParams({ q: query, ...filters });
      return fetchApi(`/v1/diseases/search?${params}`);
    },
    getDiseasePAGs: async (mondoId) => {
      const data = await fetchApi(`/v1/diseases/${encodeURIComponent(mondoId)}/pags`);
      return data.pags;
    }
  };

  return (
    <KishoContext.Provider value={value}>
      {children}
    </KishoContext.Provider>
  );
};

export const useKisho = () => {
  const context = useContext(KishoContext);
  if (!context) throw new Error('useKisho must be used within KishoProvider');
  return context;
};

Architecture Overview

KishoProvider

React Context that provides API client methods throughout your app. Configure once at the app root.

Custom Hooks

useDisease, useDiseasePAGs, useSavedDiseases - Encapsulate data fetching and state management.

Components

Pre-built UI components that use the hooks. Easy to customize or use as reference.

Bulk Fetch

Use the /v1/diseases/bulk endpoint to efficiently fetch multiple saved diseases.