Shift Buddy API Client

API integration package for shift planning that works with both React and React Native.

Installation

npm install @kvanegmond/shift-buddy-api-client

Usage

Platform Differences

This package is designed to work with both React (web) and React Native (mobile) applications. The core API functionality remains the same across platforms, but there are some differences in how authentication is handled:

• Web (React): Uses sessionStorage for token storage
• React Native: Uses AsyncStorage for token storage

The package automatically detects the platform and uses the appropriate storage mechanism.

Create API Client

The package provides both public and private API clients:

import { publicApi, privateApi } from '@kvanegmond/shift-buddy-api-client/api/api';

// Public API for non-authenticated requests
// Private API for authenticated requests that require a token

You can also use the pre-configured API modules for common operations:

import { authApi } from '@kvanegmond/shift-buddy-api-client/api/authApi';
import { shiftsApi } from '@kvanegmond/shift-buddy-api-client/api/shiftsApi';
import { clientsApi } from '@kvanegmond/shift-buddy-api-client/api/clientsApi';
import { employeesApi } from '@kvanegmond/shift-buddy-api-client/api/employeesApi';
import { usersApi } from '@kvanegmond/shift-buddy-api-client/api/usersApi';
import { locationsApi } from '@kvanegmond/shift-buddy-api-client/api/locationsApi';

// Examples:
authApi.login(email, password);
shiftsApi.getAll();
clientsApi.create(clientData);

Use hooks

The package includes several React hooks to simplify API interactions:

Authentication

import { AuthProvider, useAuth } from '@kvanegmond/shift-buddy-api-client/AuthContext';

// Wrap your app with the provider
function App() {
  return (
    <AuthProvider>
      <YourApp />
    </AuthProvider>
  );
}

// Use the auth context in your components
function YourComponent() {
  const { user, isAuthenticated, isLoading } = useAuth();
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  if (!isAuthenticated) {
    return <div>Please log in</div>;
  }
  
  return <div>Welcome, {user.name}!</div>;
}

API Hooks

The package provides hooks for common API operations:

import { useShifts, useClients, useEmployees } from '@kvanegmond/shift-buddy-api-client/hooks';

// In your component
function ShiftsList() {
  const { shifts, loading, error, fetchShifts } = useShifts();
  
  useEffect(() => {
    fetchShifts();
  }, []);
  
  if (loading) return <div>Loading shifts...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <ul>
      {shifts.map(shift => (
        <li key={shift.id}>{shift.title}</li>
      ))}
    </ul>
  );
}

API Reference

Authentication

authApi.login(email, password)
authApi.logout()
authApi.getCurrentUser()

Users

usersApi.get()
usersApi.update(userId, userData)
usersApi.delete(userId)

Shifts

shiftsApi.getAll(params)
shiftsApi.getById(shiftId)
shiftsApi.create(shiftData)
shiftsApi.update(shiftId, shiftData)
shiftsApi.delete(shiftId)

Clients

clientsApi.getAll(params)
clientsApi.getById(clientId)
clientsApi.create(clientData)
clientsApi.update(clientId, clientData)
clientsApi.delete(clientId)

Employees

employeesApi.create(employeeData)
employeesApi.update(employeeId, employeeData)

Locations

locationsApi.update(locationId, locationData)