@rsweeten/dropbox-sync 0.1.0

package/examples/angular-app/dropbox-sync.service.ts

@@ -0,0 +1,244 @@
+// Angular service implementation for Dropbox sync
+import { Injectable } from '@angular/core'
+import { BehaviorSubject, Observable, of, fromEvent } from 'rxjs'
+import { catchError, map, tap } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+// For a private module, you would import from your private registry or local path
+// import { DropboxSyncService, getCredentialsFromEnvironment } from '@yourcompany/dropbox-sync';
+import { DropboxSyncService, getCredentialsFromEnvironment } from 'dropbox-sync'
+import { environment } from '../environments/environment'
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DropboxService {
+    // State observables
+    private _connected = new BehaviorSubject<boolean>(false)
+    private _syncing = new BehaviorSubject<boolean>(false)
+    private _progress = new BehaviorSubject<number>(0)
+    private _message = new BehaviorSubject<string>('')
+    private _error = new BehaviorSubject<string | null>(null)
+
+    // Public observable properties
+    readonly connected$ = this._connected.asObservable()
+    readonly syncing$ = this._syncing.asObservable()
+    readonly progress$ = this._progress.asObservable()
+    readonly message$ = this._message.asObservable()
+    readonly error$ = this._error.asObservable()
+
+    private syncStats = {
+        total: 0,
+        uploads: 0,
+        downloads: 0,
+        completed: 0,
+    }
+
+    constructor(
+        private http: HttpClient,
+        private dropboxSyncService: DropboxSyncService
+    ) {
+        // Initialize the Dropbox sync client
+        this.initialize()
+    }
+
+    /**
+     * Initialize the Dropbox sync client and check connection status
+     */
+    initialize(): void {
+        // Get credentials from environment and localStorage
+        const credentials = getCredentialsFromEnvironment(environment)
+
+        // Initialize the service
+        this.dropboxSyncService.initialize(credentials)
+
+        // Check connection status
+        this.checkConnection().subscribe()
+
+        // Set up socket event listeners
+        this.setupSocketEventListeners()
+    }
+
+    /**
+     * Check if connected to Dropbox
+     */
+    checkConnection(): Observable<boolean> {
+        return this.http
+            .get<{ connected: boolean }>('/api/dropbox/status')
+            .pipe(
+                map((response) => response.connected),
+                tap((connected) => this._connected.next(connected)),
+                catchError((error) => {
+                    console.error('Error checking Dropbox connection:', error)
+                    this._connected.next(false)
+                    return of(false)
+                })
+            )
+    }
+
+    /**
+     * Start the OAuth flow to connect to Dropbox
+     */
+    connect(): void {
+        window.location.href = '/api/dropbox/auth/start'
+    }
+
+    /**
+     * Disconnect from Dropbox
+     */
+    disconnect(): Observable<boolean> {
+        return this.http
+            .post<{ success: boolean }>('/api/dropbox/logout', {})
+            .pipe(
+                tap((response) => {
+                    if (response.success) {
+                        this._connected.next(false)
+                        localStorage.removeItem('dropbox_access_token')
+                        localStorage.removeItem('dropbox_refresh_token')
+                        localStorage.removeItem('dropbox_connected')
+                    }
+                }),
+                map((response) => response.success),
+                catchError((error) => {
+                    console.error('Error disconnecting from Dropbox:', error)
+                    return of(false)
+                })
+            )
+    }
+
+    /**
+     * Start syncing files with Dropbox
+     */
+    startSync(options?: { localDir?: string; dropboxDir?: string }): void {
+        try {
+            // Reset state
+            this._syncing.next(true)
+            this._progress.next(0)
+            this._message.next('Initializing Dropbox sync...')
+            this._error.next(null)
+
+            // Get socket from the sync service and emit sync event
+            const client = this.dropboxSyncService.getClient()
+            client.socket.connect()
+            client.socket.emit('dropbox:sync', options)
+        } catch (error: any) {
+            console.error('Error starting Dropbox sync:', error)
+            this._error.next(error.message || 'Error starting synchronization')
+            this._syncing.next(false)
+        }
+    }
+
+    /**
+     * Cancel ongoing sync process
+     */
+    cancelSync(): void {
+        try {
+            const client = this.dropboxSyncService.getClient()
+            client.sync.cancelSync()
+            this._syncing.next(false)
+            this._message.next('Sync cancelled by user')
+        } catch (error: any) {
+            console.error('Error cancelling sync:', error)
+        }
+    }
+
+    /**
+     * Check which files need to be synced without performing sync
+     */
+    checkSyncNeeded(options?: {
+        localDir?: string
+        dropboxDir?: string
+    }): Observable<{ upload: number; download: number }> {
+        try {
+            const client = this.dropboxSyncService.getClient()
+
+            return this.dropboxSyncService.createSyncQueue(options).pipe(
+                map(({ uploadQueue, downloadQueue }) => ({
+                    upload: uploadQueue.length,
+                    download: downloadQueue.length,
+                })),
+                catchError((error) => {
+                    console.error('Error checking sync status:', error)
+                    return of({ upload: 0, download: 0 })
+                })
+            )
+        } catch (error) {
+            console.error('Error creating sync queue:', error)
+            return of({ upload: 0, download: 0 })
+        }
+    }
+
+    /**
+     * Set up socket event listeners for real-time sync updates
+     */
+    private setupSocketEventListeners(): void {
+        try {
+            const client = this.dropboxSyncService.getClient()
+            const socketProgress =
+                this.dropboxSyncService.setupSocketListeners()
+
+            // Subscribe to the socket events observable
+            socketProgress.subscribe({
+                next: (data: any) => {
+                    switch (data.type) {
+                        case 'progress':
+                            this._progress.next(data.data.progress)
+                            this._message.next(data.data.message)
+                            break
+
+                        case 'queue':
+                            this.syncStats = {
+                                total: data.data.total,
+                                uploads: data.data.totalUploads,
+                                downloads: data.data.totalDownloads,
+                                completed: 0,
+                            }
+                            break
+
+                        case 'complete':
+                            this._progress.next(100)
+                            this._message.next(data.data.message)
+                            this._syncing.next(false)
+
+                            if (data.data.stats) {
+                                this.syncStats.completed = this.syncStats.total
+                            }
+                            break
+
+                        case 'error':
+                            this._error.next(data.data.message)
+                            if (!data.data.continue) {
+                                this._syncing.next(false)
+                            }
+                            break
+                    }
+                },
+                error: (error) => {
+                    this._error.next(
+                        typeof error === 'string'
+                            ? error
+                            : 'An error occurred during synchronization'
+                    )
+                    this._syncing.next(false)
+                },
+                complete: () => {
+                    // Sync process completed successfully
+                    console.log('Dropbox sync process completed')
+                },
+            })
+        } catch (error) {
+            console.error('Error setting up socket listeners:', error)
+        }
+    }
+
+    /**
+     * Get current sync statistics
+     */
+    getSyncStats(): {
+        total: number
+        uploads: number
+        downloads: number
+        completed: number
+    } {
+        return { ...this.syncStats }
+    }
+}

package/examples/next-app/api-routes.ts

@@ -0,0 +1,109 @@
+// Example Next.js API routes implementation
+import { createNextDropboxApiHandlers, handleOAuthCallback } from 'dropbox-sync'
+import { Server } from 'socket.io'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+// Create the API handlers
+const dropboxHandlers = createNextDropboxApiHandlers()
+
+// Status endpoint
+export async function GET_status() {
+    return dropboxHandlers.status()
+}
+
+// OAuth start endpoint
+export async function GET_oauthStart() {
+    return dropboxHandlers.oauthStart()
+}
+
+// OAuth callback endpoint
+export async function GET_oauthCallback(req: Request) {
+    return handleOAuthCallback(req)
+}
+
+// Logout endpoint
+export async function POST_logout() {
+    return dropboxHandlers.logout()
+}
+
+// Socket.IO setup for App Router in Next.js 13+
+let io: Server
+
+export async function setupSocketIO(res: NextApiResponse) {
+    if (!io) {
+        // @ts-ignore - NextApiResponse is compatible but TypeScript doesn't know
+        const httpServer = res.socket?.server
+
+        if (httpServer && !httpServer.io) {
+            io = new Server(httpServer)
+            httpServer.io = io
+
+            // Handle Dropbox sync events
+            io.on('connection', (socket) => {
+                console.log('Client connected:', socket.id)
+
+                // Handle sync start request
+                socket.on('dropbox:sync', async () => {
+                    try {
+                        // Emit queue information
+                        socket.emit('sync:queue', {
+                            total: 10, // This would be dynamic in real implementation
+                            totalUploads: 5,
+                            totalDownloads: 5,
+                        })
+
+                        // Simulate sync process (in real app, this would use the Dropbox client)
+                        let progress = 0
+                        const interval = setInterval(() => {
+                            progress += 10
+
+                            if (progress <= 100) {
+                                socket.emit('sync:progress', {
+                                    progress,
+                                    message: `Processing files... ${progress}%`,
+                                    type:
+                                        progress % 20 === 0
+                                            ? 'upload'
+                                            : 'download',
+                                })
+                            }
+
+                            if (progress >= 100) {
+                                clearInterval(interval)
+                                socket.emit('sync:complete', {
+                                    message: 'Sync completed successfully',
+                                    stats: {
+                                        uploaded: 5,
+                                        downloaded: 5,
+                                    },
+                                })
+                            }
+                        }, 500)
+                    } catch (error: any) {
+                        console.error('Error syncing with Dropbox:', error)
+                        socket.emit('sync:error', {
+                            message:
+                                error.message ||
+                                'An error occurred during sync',
+                        })
+                    }
+                })
+
+                // Handle sync cancel request
+                socket.on('sync:cancel', () => {
+                    console.log('Sync cancelled by client:', socket.id)
+                    socket.emit('sync:complete', {
+                        message: 'Sync cancelled by user',
+                    })
+                })
+
+                // Handle disconnect
+                socket.on('disconnect', () => {
+                    console.log('Client disconnected:', socket.id)
+                })
+            })
+        }
+    }
+
+    return res
+}

package/examples/next-app/dropbox-client.ts

@@ -0,0 +1,122 @@
+// Example Next.js implementation
+// For a private module, you would import from your private registry or local path
+// import { useNextDropboxSync, getCredentialsFromCookies } from '@yourcompany/dropbox-sync';
+import { useNextDropboxSync, getCredentialsFromCookies } from 'dropbox-sync'
+import { useState, useEffect } from 'react'
+
+// Client-side component
+export function useDropboxSync() {
+    const [isConnected, setIsConnected] = useState(false)
+    const [isSyncing, setIsSyncing] = useState(false)
+    const [progress, setProgress] = useState(0)
+    const [message, setMessage] = useState('')
+    const [error, setError] = useState<string | null>(null)
+
+    // Initialize the Dropbox client
+    const dropboxSync = useNextDropboxSync({
+        clientId: process.env.NEXT_PUBLIC_DROPBOX_APP_KEY || '',
+        // Access token will be added automatically in server components via cookies
+    })
+
+    // Check connection status
+    useEffect(() => {
+        async function checkConnection() {
+            try {
+                const response = await fetch('/api/dropbox/status')
+                const data = await response.json()
+                setIsConnected(data.connected)
+            } catch (error) {
+                console.error('Error checking connection:', error)
+            }
+        }
+
+        checkConnection()
+    }, [])
+
+    // Set up socket listeners for real-time updates
+    useEffect(() => {
+        if (!dropboxSync) return
+
+        // Connect to socket
+        dropboxSync.socket.connect()
+
+        // Listen for progress updates
+        dropboxSync.socket.on('sync:progress', (data) => {
+            setProgress(data.progress)
+            setMessage(data.message)
+        })
+
+        // Listen for completion
+        dropboxSync.socket.on('sync:complete', (data) => {
+            setProgress(100)
+            setMessage(data.message)
+            setIsSyncing(false)
+        })
+
+        // Listen for errors
+        dropboxSync.socket.on('sync:error', (data) => {
+            setError(data.message)
+            setIsSyncing(false)
+        })
+
+        // Cleanup on unmount
+        return () => {
+            dropboxSync.socket.off('sync:progress')
+            dropboxSync.socket.off('sync:complete')
+            dropboxSync.socket.off('sync:error')
+        }
+    }, [dropboxSync])
+
+    // Connect to Dropbox
+    const connectDropbox = () => {
+        window.location.href = '/api/dropbox/auth/start'
+    }
+
+    // Disconnect from Dropbox
+    const disconnectDropbox = async () => {
+        try {
+            await fetch('/api/dropbox/logout', { method: 'POST' })
+            setIsConnected(false)
+        } catch (error) {
+            console.error('Error disconnecting:', error)
+        }
+    }
+
+    // Start sync process
+    const startSync = async () => {
+        try {
+            setIsSyncing(true)
+            setProgress(0)
+            setMessage('Initializing Dropbox sync...')
+            setError(null)
+
+            // Emit sync start event via Socket.IO
+            dropboxSync.socket.emit('dropbox:sync')
+        } catch (error: any) {
+            console.error('Error starting sync:', error)
+            setError(error.message || 'Error starting sync')
+            setIsSyncing(false)
+        }
+    }
+
+    // Cancel sync process
+    const cancelSync = () => {
+        if (!isSyncing) return
+
+        dropboxSync.sync.cancelSync()
+        setIsSyncing(false)
+        setMessage('Sync cancelled')
+    }
+
+    return {
+        isConnected,
+        isSyncing,
+        progress,
+        message,
+        error,
+        connectDropbox,
+        disconnectDropbox,
+        startSync,
+        cancelSync,
+    }
+}

package/examples/nuxt-app/api-routes.ts

@@ -0,0 +1,26 @@
+// Example Nuxt API routes for Dropbox integration
+import { createNuxtApiHandlers } from '../../src'
+import { defineEventHandler } from 'h3'
+
+// Create the Dropbox API handlers
+const dropboxHandlers = createNuxtApiHandlers()
+
+// Status endpoint
+export const statusHandler = defineEventHandler(async (event) => {
+    return await dropboxHandlers.status(event)
+})
+
+// OAuth start endpoint
+export const oauthStartHandler = defineEventHandler(async (event) => {
+    return await dropboxHandlers.oauthStart(event)
+})
+
+// OAuth callback endpoint
+export const oauthCallbackHandler = defineEventHandler(async (event) => {
+    return await dropboxHandlers.oauthCallback(event)
+})
+
+// Logout endpoint
+export const logoutHandler = defineEventHandler(async (event) => {
+    return await dropboxHandlers.logout(event)
+})

package/examples/nuxt-app/dropbox-plugin.ts

@@ -0,0 +1,15 @@
+// Example Nuxt plugin for Dropbox sync
+import { useNuxtDropboxSync, getNuxtCredentialsFromCookies } from '../../src'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    // Create the Dropbox client
+    const dropboxClient = useNuxtDropboxSync()
+
+    // Provide the client to the app
+    return {
+        provide: {
+            dropbox: dropboxClient,
+        },
+    }
+})

package/examples/nuxt-app/nuxt.config.ts

@@ -0,0 +1,23 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+// Example Nuxt configuration for Dropbox integration
+export default defineNuxtConfig({
+    // Runtime config for Dropbox integration
+    runtimeConfig: {
+        // Private keys (server-only)
+        dropboxAppSecret: process.env.DROPBOX_APP_SECRET,
+        dropboxRedirectUri: process.env.DROPBOX_REDIRECT_URI,
+
+        // Public keys (exposed to the client)
+        public: {
+            dropboxAppKey: process.env.DROPBOX_APP_KEY,
+            appUrl: process.env.APP_URL || 'http://localhost:3000',
+        },
+    },
+
+    // Auto-import components
+    components: true,
+
+    // Register the Dropbox plugin
+    plugins: ['~/plugins/dropbox.ts'],
+})