Skip to content

A set of TypeScript components and utilities to create react apps on top of AidBox

Notifications You must be signed in to change notification settings

pavlushkin/aidbox-react

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

aidbox-react

Install

Clone this repository into src/contrib/aidbox-react and provide type definitions for aidbox in src/contrib/aidbox

Content

We consider service as a function that returns RemoteDataResult<S, F> (RemoteDataSuccess<S> | RemoteDataSuccess<F>). For details, see RemoteData interface in aidbox-react/libs/remoteData.ts

Available services

  • service({...axiosConfig})
  • FHIR-specific:
    • getFHIRResource(reference)
    • findFHIRResource(resourceType, params)
    • getFHIRResources(resourceType, params)
    • saveFHIRResource(resource)
    • saveFHIRResources(resources, bundleType)
    • deleteFHIRResource(resources)

Available hooks

  • useService(serviceFn)
  • usePager(resourceType, resourcesOnPage?, searchParams?)
  • useCRUD(resourceType, id?, getOrCreate?, defaultResource?) - WIP

Usage

Set baseURL and token for axios instance using setInstanceBaseURL and setInstanceToken/resetInstanceToken from aidbox-react/services/instance And use hooks and services

Examples

Pager hook

import * as React from 'react';

import { User } from 'src/contrib/aidbox';
import { usePager } from 'src/contrib/aidbox-react/services/service';
import { isLoading, isSuccess } from 'src/contrib/aidbox-react/libs/remoteData';
import { extractBundleResources } from 'src/contrib/aidbox-react/services/fhir';

export function UserList(props: {}) {
    const [resourcesResponse, pagerManager] = usePager<User>('User', 2);

    if (isLoading(resourcesResponse)) {
        return <div>Loading...</div>;
    }

    if (isSuccess(resourcesResponse)) {
        const users = extractBundleResources(resourcesResponse.data).User || [];

        return (
            <div>
                <a onClick={() => pagerManager.loadNext()}>Load next</a>

                {users.map((user) => (
                    <div key={user.id}>{user.id}</div>
                ))}
            </div>
        );
    }

    return null;
}

CRUD hook

import * as React from 'react';

import { useCRUD } from 'src/contrib/aidbox-react/hooks/crud';
import { isLoading, isSuccess } from 'src/contrib/aidbox-react/libs/remoteData';
import { Patient } from 'src/contrib/aidbox';

export function UserList(props: {}) {
    const [resourceResponse, crudManager] = useCRUD<Patient>('Patient', 'toggle', true, {
        resourceType: 'Patient',
        active: false,
    });

    if (isLoading(resourceResponse)) {
        return <div>Loading...</div>;
    }

    if (isSuccess(resourceResponse)) {
        // This is just an example
        const active = resourceResponse.data.active;

        return (
            <div>
                Active: {active ? 'Yes' : 'No'}
                <a
                    onClick={() =>
                        crudManager.handleSave({
                            ...resourceResponse.data,
                            active: !active,
                        })
                    }
                >
                    Toggle
                </a>
            </div>
        );
    }
    return null;
}

About

A set of TypeScript components and utilities to create react apps on top of AidBox

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%