@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/components/addOns/functional/FileUploader.tsx

@@ -1,295 +1,295 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { Button, UploadButton, ToggleButton, CloseButton, DeleteButton, CancelButton, TrashIconButton } from '@/components/other/button'; // Updated import
-import { Card } from '@/components/other/card';
-import { Upload, FileText, Trash2, X } from 'lucide-react';
-import { motion } from 'framer-motion';
-import { useUser } from '@clerk/nextjs';
-
-interface UploadedFile {
-  id: number;
-  documentId: string;
-  name: string;
-  url: string;
-  createdAt: string;
-}
-
-interface FileUploaderProps {
-  uploadedFiles: UploadedFile[];
-  setUploadedFiles: (files: UploadedFile[]) => void;
-  setPdfUrl: (url: string) => void;
-  pdfUrl: string;
-  isAdmin: boolean;
-  error?: string | null;
-  setError: (error: string | null) => void;
-  handleFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
-  handleDeleteFile: (documentId: string) => Promise<void>;
-}
-
-export function FileUploader({
-  uploadedFiles,
-  setUploadedFiles,
-  setPdfUrl,
-  pdfUrl,
-  isAdmin,
-  error,
-  setError,
-  handleFileUpload,
-  handleDeleteFile,
-}: FileUploaderProps) {
-  const { isSignedIn } = useUser();
-  const [uploading, setUploading] = useState(false);
-  const [showAllFiles, setShowAllFiles] = useState(false);
-  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
-  const [fileToDelete, setFileToDelete] = useState<string | null>(null);
-
-  const baseUrl = process.env.BASE_URL || '';
-
-  useEffect(() => { }, [isSignedIn, isAdmin]);
-
-  useEffect(() => {
-    const event = new CustomEvent('modalStateChange', {
-      detail: { isOpen: isConfirmDeleteOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isConfirmDeleteOpen]);
-
-  useEffect(() => {
-    if (isConfirmDeleteOpen) {
-      document.body.classList.add('overflow-hidden');
-    } else {
-      document.body.classList.remove('overflow-hidden');
-    }
-    return () => {
-      document.body.classList.remove('overflow-hidden');
-    };
-  }, [isConfirmDeleteOpen]);
-
-  useEffect(() => {
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isConfirmDeleteOpen) {
-        handleCancelDelete();
-      }
-    };
-    window.addEventListener('keydown', handleEsc);
-    return () => window.removeEventListener('keydown', handleEsc);
-  }, [isConfirmDeleteOpen]);
-
-  const openConfirmDelete = (documentId: string) => {
-    setFileToDelete(documentId);
-    setIsConfirmDeleteOpen(true);
-  };
-
-  const handleConfirmDelete = async () => {
-    if (fileToDelete !== null) {
-      setUploading(true);
-      setError(null);
-      try {
-        await handleDeleteFile(fileToDelete);
-      } finally {
-        setUploading(false);
-        setIsConfirmDeleteOpen(false);
-        setFileToDelete(null);
-      }
-    }
-  };
-
-  const handleCancelDelete = () => {
-    setIsConfirmDeleteOpen(false);
-    setFileToDelete(null);
-  };
-
-  const truncateText = (text: string, maxLength: number = 30): string => {
-    if (text.length <= maxLength) return text;
-    return text.slice(0, maxLength - 3) + '...';
-  };
-
-  const modalVariants = {
-    hidden: { opacity: 0, y: '100vh' },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
-    exit: { opacity: 0, y: '100vh', transition: { duration: 0.3, ease: 'easeIn' } },
-  };
-
-  const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    setUploading(true);
-    setError(null);
-    try {
-      await handleFileUpload(e);
-    } finally {
-      setUploading(false);
-    }
-  };
-
-  return (
-    <div className="w-full bg-[#1E2A44] px-4 py-12 sm:px-8 sm:py-16 border-none outline-none z-0">
-      <style jsx>{`
-        .modal-glassmorphism {
-          background: rgba(255, 255, 255, 0.08);
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-          border: 2px solid transparent;
-          border-image: linear-gradient(
-            45deg,
-            var(--exuberant-blue),
-            var(--jubilee),
-            var(--modern-purple)
-          ) 1;
-          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
-          border-radius: 2rem;
-          max-height: 90vh;
-          overflow: hidden;
-        }
-
-        @supports not (backdrop-filter: blur(10px)) {
-          .modal-glassmorphism {
-            background: rgba(255, 255, 255, 0.2);
-          }
-        }
-
-        @media (max-width: 640px) {
-          .modal-glassmorphism {
-            padding: 1rem;
-            max-height: 85vh;
-          }
-        }
-
-        .file-item {
-          z-index: 30;
-          pointer-events: auto;
-          cursor: pointer;
-        }
-      `}</style>
-      <Card className="w-full max-w-7xl mx-auto p-4 sm:p-8 bg-[#1E2A44] text-white flex flex-col items-center space-y-6 rounded-none border-none outline-none relative z-10">
-        <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-white text-center">
-          Fitness Forum
-        </h3>
-        <div className="space-y-4 w-full">
-          {error && (
-            <p className="text-red-400 text-base sm:text-lg md:text-xl text-center">{error}</p>
-          )}
-          {isAdmin ? (
-            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
-              <input
-                type="file"
-                accept="application/pdf"
-                onChange={onFileChange}
-                disabled={uploading}
-                className="hidden"
-                id="file-upload"
-              />
-              <label htmlFor="file-upload" className="cursor-pointer">
-                <UploadButton disabled={uploading} asChild>
-                  <span className="flex items-center justify-center">
-                    <Upload className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
-                    Upload PDF
-                  </span>
-                </UploadButton>
-              </label>
-              {uploading && (
-                <span className="text-white font-bold text-base sm:text-lg">Uploading...</span>
-              )}
-            </div>
-          ) : (
-            <p className="text-gray-400 text-sm font-medium text-center">
-              {isSignedIn ? '' : ''}
-            </p>
-          )}
-          {uploadedFiles.length > 0 ? (
-            <>
-              {uploadedFiles.slice(0, showAllFiles ? undefined : 8).map((file) => {
-                const token = localStorage.getItem('jwt') || '';
-                const fullUrl = file.url.startsWith('http')
-                  ? `${file.url}${token ? (file.url.includes('?') ? '&' : '?') + `token=${token}` : ''}`
-                  : `${baseUrl}${file.url}${token ? `?token=${token}` : ''}`;
-                return (
-                  <div
-                    key={file.documentId}
-                    className="file-item flex flex-col sm:flex-row items-center justify-between p-4 sm:p-6 rounded-lg bg-[#2A3A66]/50 hover:bg-[#2A3A66]/70 hover:shadow-lg hover:border-[#FF69B4]/50 transition-all cursor-pointer"
-                    onClick={() => {
-                      setPdfUrl(fullUrl);
-                      window.open(fullUrl, '_blank', 'noopener,noreferrer');
-                    }}
-                    role="button"
-                    tabIndex={0}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        setPdfUrl(fullUrl);
-                        window.open(fullUrl, '_blank', 'noopener,noreferrer');
-                      }
-                    }}
-                    aria-label={`Open PDF: ${truncateText(file.name)}`}
-                  >
-                    <div className="text-white font-bold text-base sm:text-lg md:text-xl flex items-center w-full sm:w-auto min-w-0 sm:pb-0 pb-6">
-                      <FileText className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-[#FF69B4] flex-shrink-0" />
-                      <span className="truncate">{truncateText(file.name, 30)}</span>
-                    </div>
-                    {isAdmin && (
-                      <TrashIconButton
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          openConfirmDelete(file.documentId);
-                        }}
-                        aria-label={`Delete file ${truncateText(file.name)}`}
-                        variant="trash-icon"
-                        className="relative"
-                      >
-                        <Trash2 />
-                      </TrashIconButton>
-                    )}
-                  </div>
-                );
-              })}
-              {uploadedFiles.length > 8 && (
-                <div className="text-center mt-4">
-                  <ToggleButton onClick={() => setShowAllFiles(!showAllFiles)}>
-                    {showAllFiles ? 'Show Less' : 'Show More'}
-                  </ToggleButton>
-                </div>
-              )}
-            </>
-          ) : (
-            <p className="text-gray-300 font-bold text-base sm:text-lg md:text-xl text-center">
-              No files uploaded yet.
-            </p>
-          )}
-        </div>
-      </Card>
-
-      {isConfirmDeleteOpen && isAdmin && (
-        <motion.div
-          variants={modalVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
-          onClick={handleCancelDelete}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="modal-title"
-        >
-          <div
-            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <CloseButton onClick={handleCancelDelete}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8" />
-            </CloseButton>
-            <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
-              Confirm Deletion
-            </h3>
-            <p className="text-gray-300 text-sm mb-4">
-              Are you sure you want to delete this file? This action cannot be undone.
-            </p>
-            <div className="flex space-x-3">
-              <DeleteButton onClick={handleConfirmDelete} disabled={uploading}>
-                {uploading ? 'Deleting...' : 'Delete'}
-              </DeleteButton>
-              <CancelButton onClick={handleCancelDelete}>Cancel</CancelButton>
-            </div>
-          </div>
-        </motion.div>
-      )}
-    </div>
-  );
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button, UploadButton, ToggleButton, CloseButton, DeleteButton, CancelButton, TrashIconButton } from '@/components/other/button'; // Updated import
+import { Card } from '@/components/other/card';
+import { Upload, FileText, Trash2, X } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { useUser } from '@clerk/nextjs';
+
+interface UploadedFile {
+  id: number;
+  documentId: string;
+  name: string;
+  url: string;
+  createdAt: string;
+}
+
+interface FileUploaderProps {
+  uploadedFiles: UploadedFile[];
+  setUploadedFiles: (files: UploadedFile[]) => void;
+  setPdfUrl: (url: string) => void;
+  pdfUrl: string;
+  isAdmin: boolean;
+  error?: string | null;
+  setError: (error: string | null) => void;
+  handleFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+  handleDeleteFile: (documentId: string) => Promise<void>;
+}
+
+export function FileUploader({
+  uploadedFiles,
+  setUploadedFiles,
+  setPdfUrl,
+  pdfUrl,
+  isAdmin,
+  error,
+  setError,
+  handleFileUpload,
+  handleDeleteFile,
+}: FileUploaderProps) {
+  const { isSignedIn } = useUser();
+  const [uploading, setUploading] = useState(false);
+  const [showAllFiles, setShowAllFiles] = useState(false);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [fileToDelete, setFileToDelete] = useState<string | null>(null);
+
+  const baseUrl = process.env.BASE_URL || '';
+
+  useEffect(() => { }, [isSignedIn, isAdmin]);
+
+  useEffect(() => {
+    const event = new CustomEvent('modalStateChange', {
+      detail: { isOpen: isConfirmDeleteOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isConfirmDeleteOpen]);
+
+  useEffect(() => {
+    if (isConfirmDeleteOpen) {
+      document.body.classList.add('overflow-hidden');
+    } else {
+      document.body.classList.remove('overflow-hidden');
+    }
+    return () => {
+      document.body.classList.remove('overflow-hidden');
+    };
+  }, [isConfirmDeleteOpen]);
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isConfirmDeleteOpen) {
+        handleCancelDelete();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [isConfirmDeleteOpen]);
+
+  const openConfirmDelete = (documentId: string) => {
+    setFileToDelete(documentId);
+    setIsConfirmDeleteOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (fileToDelete !== null) {
+      setUploading(true);
+      setError(null);
+      try {
+        await handleDeleteFile(fileToDelete);
+      } finally {
+        setUploading(false);
+        setIsConfirmDeleteOpen(false);
+        setFileToDelete(null);
+      }
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setIsConfirmDeleteOpen(false);
+    setFileToDelete(null);
+  };
+
+  const truncateText = (text: string, maxLength: number = 30): string => {
+    if (text.length <= maxLength) return text;
+    return text.slice(0, maxLength - 3) + '...';
+  };
+
+  const modalVariants = {
+    hidden: { opacity: 0, y: '100vh' },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+    exit: { opacity: 0, y: '100vh', transition: { duration: 0.3, ease: 'easeIn' } },
+  };
+
+  const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUploading(true);
+    setError(null);
+    try {
+      await handleFileUpload(e);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <div className="w-full bg-[#1E2A44] px-4 py-12 sm:px-8 sm:py-16 border-none outline-none z-0">
+      <style jsx>{`
+        .modal-glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(
+            45deg,
+            var(--exuberant-blue),
+            var(--jubilee),
+            var(--modern-purple)
+          ) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+          border-radius: 2rem;
+          max-height: 90vh;
+          overflow: hidden;
+        }
+
+        @supports not (backdrop-filter: blur(10px)) {
+          .modal-glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        }
+
+        @media (max-width: 640px) {
+          .modal-glassmorphism {
+            padding: 1rem;
+            max-height: 85vh;
+          }
+        }
+
+        .file-item {
+          z-index: 30;
+          pointer-events: auto;
+          cursor: pointer;
+        }
+      `}</style>
+      <Card className="w-full max-w-7xl mx-auto p-4 sm:p-8 bg-[#1E2A44] text-white flex flex-col items-center space-y-6 rounded-none border-none outline-none relative z-10">
+        <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-white text-center">
+          Fitness Forum
+        </h3>
+        <div className="space-y-4 w-full">
+          {error && (
+            <p className="text-red-400 text-base sm:text-lg md:text-xl text-center">{error}</p>
+          )}
+          {isAdmin ? (
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+              <input
+                type="file"
+                accept="application/pdf"
+                onChange={onFileChange}
+                disabled={uploading}
+                className="hidden"
+                id="file-upload"
+              />
+              <label htmlFor="file-upload" className="cursor-pointer">
+                <UploadButton disabled={uploading} asChild>
+                  <span className="flex items-center justify-center">
+                    <Upload className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
+                    Upload PDF
+                  </span>
+                </UploadButton>
+              </label>
+              {uploading && (
+                <span className="text-white font-bold text-base sm:text-lg">Uploading...</span>
+              )}
+            </div>
+          ) : (
+            <p className="text-gray-400 text-sm font-medium text-center">
+              {isSignedIn ? '' : ''}
+            </p>
+          )}
+          {uploadedFiles.length > 0 ? (
+            <>
+              {uploadedFiles.slice(0, showAllFiles ? undefined : 8).map((file) => {
+                const token = localStorage.getItem('jwt') || '';
+                const fullUrl = file.url.startsWith('http')
+                  ? `${file.url}${token ? (file.url.includes('?') ? '&' : '?') + `token=${token}` : ''}`
+                  : `${baseUrl}${file.url}${token ? `?token=${token}` : ''}`;
+                return (
+                  <div
+                    key={file.documentId}
+                    className="file-item flex flex-col sm:flex-row items-center justify-between p-4 sm:p-6 rounded-lg bg-[#2A3A66]/50 hover:bg-[#2A3A66]/70 hover:shadow-lg hover:border-[#FF69B4]/50 transition-all cursor-pointer"
+                    onClick={() => {
+                      setPdfUrl(fullUrl);
+                      window.open(fullUrl, '_blank', 'noopener,noreferrer');
+                    }}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        setPdfUrl(fullUrl);
+                        window.open(fullUrl, '_blank', 'noopener,noreferrer');
+                      }
+                    }}
+                    aria-label={`Open PDF: ${truncateText(file.name)}`}
+                  >
+                    <div className="text-white font-bold text-base sm:text-lg md:text-xl flex items-center w-full sm:w-auto min-w-0 sm:pb-0 pb-6">
+                      <FileText className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-[#FF69B4] flex-shrink-0" />
+                      <span className="truncate">{truncateText(file.name, 30)}</span>
+                    </div>
+                    {isAdmin && (
+                      <TrashIconButton
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          openConfirmDelete(file.documentId);
+                        }}
+                        aria-label={`Delete file ${truncateText(file.name)}`}
+                        variant="trash-icon"
+                        className="relative"
+                      >
+                        <Trash2 />
+                      </TrashIconButton>
+                    )}
+                  </div>
+                );
+              })}
+              {uploadedFiles.length > 8 && (
+                <div className="text-center mt-4">
+                  <ToggleButton onClick={() => setShowAllFiles(!showAllFiles)}>
+                    {showAllFiles ? 'Show Less' : 'Show More'}
+                  </ToggleButton>
+                </div>
+              )}
+            </>
+          ) : (
+            <p className="text-gray-300 font-bold text-base sm:text-lg md:text-xl text-center">
+              No files uploaded yet.
+            </p>
+          )}
+        </div>
+      </Card>
+
+      {isConfirmDeleteOpen && isAdmin && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+          onClick={handleCancelDelete}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-title"
+        >
+          <div
+            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCancelDelete}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
+              Confirm Deletion
+            </h3>
+            <p className="text-gray-300 text-sm mb-4">
+              Are you sure you want to delete this file? This action cannot be undone.
+            </p>
+            <div className="flex space-x-3">
+              <DeleteButton onClick={handleConfirmDelete} disabled={uploading}>
+                {uploading ? 'Deleting...' : 'Delete'}
+              </DeleteButton>
+              <CancelButton onClick={handleCancelDelete}>Cancel</CancelButton>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
 }