FolderExplorer

​

Overview

​

Features

• Display linked Google Drive folder with status badge
• Sync/regenerate Drive folder for entities
• Direct link to open folder in Google Drive
• Integrated file upload to entity folder
• Visual status indicators (synced/pending)
• Automatic refresh after folder creation
• Error handling with user-friendly messages

​

Props

entityData={{
  Nombre1: "Juan",
  Apellido1: "Pérez"
}}

onFolderCreated={(id, url) => {
  console.log('Folder created:', id, url);
}}

​

Import

import FolderExplorer from './components/common/FolderExplorer';

​

Usage Examples

import FolderExplorer from './components/common/FolderExplorer';

function StudentProfile({ student }) {
  const handleFolderUpdate = (id, url) => {
    console.log('Folder updated:', id, url);
    // Update parent component state
  };

  return (
    <div>
      <h2>{student.name}</h2>
      
      <FolderExplorer
        folderId={student.driveFolderId}
        folderUrl={student.driveFolderUrl}
        entityType="student"
        entityId={student.id}
        entityData={{
          Nombre1: student.firstName,
          Apellido1: student.lastName
        }}
        onFolderCreated={handleFolderUpdate}
      />
    </div>
  );
}

import FolderExplorer from './components/common/FolderExplorer';

function NewEntity({ entityId, entityType }) {
  const [folderData, setFolderData] = useState({
    id: null,
    url: null
  });

  const handleFolderCreated = (id, url) => {
    setFolderData({ id, url });
    // Optionally save to backend
  };

  return (
    <FolderExplorer
      folderId={folderData.id}
      folderUrl={folderData.url}
      entityType={entityType}
      entityId={entityId}
      onFolderCreated={handleFolderCreated}
    />
  );
}

import FolderExplorer from './components/common/FolderExplorer';

function ThesisFolder({ thesis }) {
  return (
    <FolderExplorer
      folderId={thesis.folder_id}
      folderUrl={thesis.folder_url}
      entityType="thesis"
      entityId={thesis.id}
      entityData={{
        Nombre1: thesis.title,
        Apellido1: thesis.author
      }}
      onFolderCreated={(id, url) => {
        // Update thesis record with new folder info
        updateThesis(thesis.id, { folder_id: id, folder_url: url });
      }}
    />
  );
}

​

Visual States

​

Synced Folder (folderId && folderUrl present)

• Google Drive icon
• “Carpeta en Google Drive” heading
• Green “SINCRONIZADO” status badge
• Folder URL preview (truncated)
• Three action buttons:
  • SUBIR ARCHIVO: Opens file uploader modal
  • ABRIR: Opens folder in new tab
  • Sync icon: Re-synchronizes the folder

​

Pending/Unlinked Folder (no folderId or folderUrl)

• Warning icon (AlertCircle)
• “Carpeta No Vinculada” heading
• Amber “PENDIENTE” status badge
• Explanation message
• CREAR CARPETA button to initiate sync

​

API Integration

// From FolderExplorer.jsx:29
const result = await api.drive.sync(entityType, entityId);

{
  "success": true,
  "id": "1abc123def456",
  "url": "https://drive.google.com/drive/folders/1abc123def456"
}

​

File Upload Integration

// From FolderExplorer.jsx:114-123
{showUploader && (
    <FileUploader
        folderId={folderId}
        entityId={entityId}
        entityType={entityType}
        entityName={entityData ? `${entityData.Nombre1 || ''} ${entityData.Apellido1 || ''}`.trim() : ''}
        onClose={() => setShowUploader(false)}
        onUploadComplete={handleUploadComplete}
    />
)}

​

Event Flow

​

Folder Creation/Sync Flow

1. User clicks “CREAR CARPETA” or sync icon
2. Confirmation dialog appears (using SweetAlert2)
3. If confirmed, API call to api.drive.sync() is made
4. Loading state is shown with animated spinner
5. On success:
   • Success toast notification
   • onFolderCreated callback invoked
   • Page reloads after 1.5s
6. On error:
   • Error toast notification
   • Loading state clears

​

File Upload Flow

1. User clicks “SUBIR ARCHIVO” button
2. FileUploader modal opens
3. User uploads files to the folder
4. On completion:
   • Success toast notification
   • Modal closes
   • handleUploadComplete callback invoked

​

Styling Features

​

Animations

• Fade-in and slide-in animations on mount
• Spin animation on sync button during loading
• Smooth hover transitions on buttons
• Scale and shadow effects on button hover

​

Responsive Design

• Flexbox layout that adapts to mobile (flex-col) and desktop (flex-row)
• Truncated URLs with max-width constraints
• Full-width buttons on mobile, auto-width on desktop

​

Dark Mode Support

• Full dark mode theming using Tailwind’s dark: variants
• Appropriate contrast ratios for all states
• Consistent color scheme across light and dark themes

​

Error Handling

toast.error('Error', 'No se puede regenerar la carpeta sin tipo y ID de entidad');

toast.error('Error', 'Falló la conexión con Drive');

toast.error('Error', result.message || 'No se pudo sincronizar la carpeta');

​

Dependencies

• lucide-react: Icons (Folder, ExternalLink, RefreshCw, etc.)
• api.drive.sync(): Drive API service
• toast: SweetAlert2 utility for notifications
• FileUploader: File upload component

​

Best Practices

​

Security Considerations

• The component assumes proper authentication is handled at the API level
• Folder URLs are displayed directly - ensure they are properly validated
• Entity data should be sanitized before passing to the component
• Consider implementing role-based access control for sync operations