@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/dist/components/addOns/functional/FileUploader.jsx

@@ -0,0 +1,222 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useState, useEffect } from 'react';
+import { 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';
+export function FileUploader(_a) {
+    var _this = this;
+    var uploadedFiles = _a.uploadedFiles, setUploadedFiles = _a.setUploadedFiles, setPdfUrl = _a.setPdfUrl, pdfUrl = _a.pdfUrl, isAdmin = _a.isAdmin, error = _a.error, setError = _a.setError, handleFileUpload = _a.handleFileUpload, handleDeleteFile = _a.handleDeleteFile;
+    var isSignedIn = useUser().isSignedIn;
+    var _b = useState(false), uploading = _b[0], setUploading = _b[1];
+    var _c = useState(false), showAllFiles = _c[0], setShowAllFiles = _c[1];
+    var _d = useState(false), isConfirmDeleteOpen = _d[0], setIsConfirmDeleteOpen = _d[1];
+    var _e = useState(null), fileToDelete = _e[0], setFileToDelete = _e[1];
+    var baseUrl = process.env.BASE_URL || '';
+    useEffect(function () { }, [isSignedIn, isAdmin]);
+    useEffect(function () {
+        var event = new CustomEvent('modalStateChange', {
+            detail: { isOpen: isConfirmDeleteOpen },
+        });
+        window.dispatchEvent(event);
+    }, [isConfirmDeleteOpen]);
+    useEffect(function () {
+        if (isConfirmDeleteOpen) {
+            document.body.classList.add('overflow-hidden');
+        }
+        else {
+            document.body.classList.remove('overflow-hidden');
+        }
+        return function () {
+            document.body.classList.remove('overflow-hidden');
+        };
+    }, [isConfirmDeleteOpen]);
+    useEffect(function () {
+        var handleEsc = function (e) {
+            if (e.key === 'Escape' && isConfirmDeleteOpen) {
+                handleCancelDelete();
+            }
+        };
+        window.addEventListener('keydown', handleEsc);
+        return function () { return window.removeEventListener('keydown', handleEsc); };
+    }, [isConfirmDeleteOpen]);
+    var openConfirmDelete = function (documentId) {
+        setFileToDelete(documentId);
+        setIsConfirmDeleteOpen(true);
+    };
+    var handleConfirmDelete = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(fileToDelete !== null)) return [3 /*break*/, 4];
+                    setUploading(true);
+                    setError(null);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, handleDeleteFile(fileToDelete)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setUploading(false);
+                    setIsConfirmDeleteOpen(false);
+                    setFileToDelete(null);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelDelete = function () {
+        setIsConfirmDeleteOpen(false);
+        setFileToDelete(null);
+    };
+    var truncateText = function (text, maxLength) {
+        if (maxLength === void 0) { maxLength = 30; }
+        if (text.length <= maxLength)
+            return text;
+        return text.slice(0, maxLength - 3) + '...';
+    };
+    var 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' } },
+    };
+    var onFileChange = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setUploading(true);
+                    setError(null);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, handleFileUpload(e)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    setUploading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    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>{"\n        .modal-glassmorphism {\n          background: rgba(255, 255, 255, 0.08);\n          backdrop-filter: blur(10px);\n          -webkit-backdrop-filter: blur(10px);\n          border: 2px solid transparent;\n          border-image: linear-gradient(\n            45deg,\n            var(--exuberant-blue),\n            var(--jubilee),\n            var(--modern-purple)\n          ) 1;\n          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n          border-radius: 2rem;\n          max-height: 90vh;\n          overflow: hidden;\n        }\n\n        @supports not (backdrop-filter: blur(10px)) {\n          .modal-glassmorphism {\n            background: rgba(255, 255, 255, 0.2);\n          }\n        }\n\n        @media (max-width: 640px) {\n          .modal-glassmorphism {\n            padding: 1rem;\n            max-height: 85vh;\n          }\n        }\n\n        .file-item {\n          z-index: 30;\n          pointer-events: auto;\n          cursor: pointer;\n        }\n      "}</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(function (file) {
+                var token = localStorage.getItem('jwt') || '';
+                var fullUrl = file.url.startsWith('http')
+                    ? "".concat(file.url).concat(token ? (file.url.includes('?') ? '&' : '?') + "token=".concat(token) : '')
+                    : "".concat(baseUrl).concat(file.url).concat(token ? "?token=".concat(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={function () {
+                        setPdfUrl(fullUrl);
+                        window.open(fullUrl, '_blank', 'noopener,noreferrer');
+                    }} role="button" tabIndex={0} onKeyDown={function (e) {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            setPdfUrl(fullUrl);
+                            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+                        }
+                    }} aria-label={"Open PDF: ".concat(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={function (e) {
+                            e.stopPropagation();
+                            openConfirmDelete(file.documentId);
+                        }} aria-label={"Delete file ".concat(truncateText(file.name))} variant="trash-icon" className="relative">
+                        <Trash2 />
+                      </TrashIconButton>)}
+                  </div>);
+            })}
+              {uploadedFiles.length > 8 && (<div className="text-center mt-4">
+                  <ToggleButton onClick={function () { return 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={function (e) { return 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>);
+}