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.