PhotoBox Client

A React client library for PhotoBox API with authentication, photo uploading, and activity tracking.

Installation

npm install photobox-client

Basic Setup

Wrap your application with the PhotoBoxProvider to enable PhotoBox features:

import React from 'react';
import { PhotoBoxProvider } from 'photobox-client';

function App() {
  return (
    <PhotoBoxProvider
      apiUrl="https://your-photobox-api.com"
      autoLogin={true}
    >
      <YourApp />
    </PhotoBoxProvider>
  );
}

export default App;

Usage Examples

Authentication

import React from 'react';
import { usePhotoBox } from 'photobox-client';

function LoginButton() {
  const { auth } = usePhotoBox();

  if (auth.loading) return <p>Checking authentication...</p>;

  if (auth.isAuthenticated) {
    return (
      <div>
        <p>Welcome back! You've visited {auth.user?.visitCount} times</p>
        <button onClick={auth.logout}>Logout</button>
      </div>
    );
  }

  return <button onClick={auth.login}>Login / Register</button>;
}

Uploading Photos

import React from 'react';
import { ImageUploader, usePhotoBox } from 'photobox-client';

function PhotoUploadSection() {
  const { photos } = usePhotoBox();
  const [uploadedPhoto, setUploadedPhoto] = React.useState(null);

  return (
    <div>
      <h2>Upload a New Photo</h2>

      <ImageUploader
        title="My vacation photo"
        description="Taken during my trip to the mountains"
        onUpload={(photo) => setUploadedPhoto(photo)}
      />

      {photos.loading && <p>Uploading...</p>}
      {photos.error && <p>Error: {photos.error.message}</p>}
      {uploadedPhoto && (
        <div>
          <p>Successfully uploaded: {uploadedPhoto.filename}</p>
          <img
            src={`https://your-photobox-api.com/${uploadedPhoto.path}`}
            alt={uploadedPhoto.title}
            style={{ maxWidth: '300px' }}
          />
        </div>
      )}
    </div>
  );
}

Displaying Photos Gallery

import React, { useEffect } from 'react';
import { PhotoGallery, usePhotoBox } from 'photobox-client';

function MyPhotos() {
  const { photos } = usePhotoBox();

  useEffect(() => {
    // You can manually fetch photos if needed
    photos.fetchPhotos();
  }, []);

  return (
    <div>
      <h2>My Photo Gallery</h2>

      <PhotoGallery
        className="photo-grid"
        photoClassName="photo-item"
        renderPhoto={(photo) => (
          <div>
            <img
              src={`https://your-photobox-api.com/${photo.path}`}
              alt={photo.title || photo.filename}
            />
            <p>{photo.title}</p>
            <small>Uploaded: {new Date(photo.uploaded_at).toLocaleDateString()}</small>
          </div>
        )}
      />
    </div>
  );
}

Tracking User Activity

import React from 'react';
import { TrackActivity, usePhotoBox } from 'photobox-client';

function ProductPage({ productId, productName }) {
  const { activities } = usePhotoBox();

  // Manual activity tracking
  const handleAddToCart = () => {
    activities.track({
      action: 'add_to_cart',
      page: 'product_detail',
      metadata: { productId, productName }
    });

    // Your cart logic here...
  };

  return (
    // Automatic activity tracking on page view
    <TrackActivity
      action="view_product"
      page="product_detail"
      metadata={{ productId, productName }}
    >
      <div>
        <h1>{productName}</h1>
        <button onClick={handleAddToCart}>Add to Cart</button>
      </div>
    </TrackActivity>
  );
}

Advanced Usage: Direct API Access

import React from 'react';
import { getClient } from 'photobox-client';

function CustomApiExample() {
  const [data, setData] = React.useState(null);

  const fetchCustomData = async () => {
    try {
      const client = getClient();
      const result = await client.get('/custom/endpoint');
      setData(result);
    } catch (error) {
      console.error('API error:', error);
    }
  };

  return (
    <div>
      <button onClick={fetchCustomData}>Fetch Custom Data</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

API Reference

Context and Hooks

• PhotoBoxProvider - Context provider component
• usePhotoBox() - Main hook to access all PhotoBox functionality
• useAuth() - Hook for authentication operations
• usePhotos() - Hook for photo operations
• useActivities() - Hook for activity tracking

Components

• ImageUploader - Component for uploading images
• PhotoGallery - Component for displaying photo galleries
• TrackActivity - Component for tracking user activities

Utility Functions

• createClient(apiUrl) - Create API client instance
• getClient() - Get the current API client instance
• fileToBase64(file) - Convert a File object to base64 string

TypeScript Support

This library includes TypeScript definitions for all components, hooks, and utility functions.

License

MIT