@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/fileUploaders/FileUploader.tsx

@@ -0,0 +1,437 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import { Card } from "@/components/other/card";
+import { UploadButton, CloseButton, DeleteButton, CancelButton, TrashIconButton, ToggleButton } from "@/components/other/button";
+import { Upload, FileText, X } from "lucide-react";
+import { useAuth } from "@clerk/nextjs";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { FILE_UPLOADER } from "./constants/fileUploader";
+import { UploadedFile } from "@/lib/types";
+import { isAdminUser } from "@/lib/auth/auth-utils";
+
+interface FileUploaderProps {
+  user: any; 
+  isSignedIn: boolean | undefined;
+}
+
+export function FileUploader({ user, isSignedIn }: FileUploaderProps) {
+  const { getToken } = useAuth();
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [pdfUrl, setPdfUrl] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [showAllFiles, setShowAllFiles] = useState(false);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [fileToDelete, setFileToDelete] = useState<string | null>(null);
+  const hasFetched = useRef(false);
+
+  const baseUrl = process.env.BASE_URL || "";
+
+  // Fetch files
+  useEffect(() => {
+    if (hasFetched.current) return;
+    hasFetched.current = true;
+
+    const fetchFiles = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/files?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          if (result.meta?.pagination?.total > 100) {
+            setError(FILE_UPLOADER.ERRORS.PAGINATION_WARNING);
+          }
+          setUploadedFiles(
+            result.data.map((file: any) => ({
+              id: file.id,
+              documentId: file.documentId,
+              name: file.name || "Untitled",
+              url: file.url,
+              createdAt: file.createdAt,
+            })) || []
+          );
+        } else {
+          throw new Error(FILE_UPLOADER.ERRORS.FETCH_FILES_FAILED);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : FILE_UPLOADER.ERRORS.FETCH_ERROR);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchFiles();
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    const checkAdmin = async () => {
+      if (!isSignedIn || !user?.authId) {
+        if (isMounted) setIsAdmin(false);
+        return;
+      }
+      const adminStatus = await isAdminUser(isSignedIn, user);
+      if (isMounted) {
+        setIsAdmin(adminStatus);
+      }
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
+
+  useEffect(() => {
+    const event = new CustomEvent("modalStateChange", {
+      detail: { isOpen: isConfirmDeleteOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isConfirmDeleteOpen]);
+
+  useEffect(() => {
+    if (isConfirmDeleteOpen) {
+      const scrollY = window.scrollY;
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = "100%";
+      document.body.classList.add("overflow-hidden");
+
+      return () => {
+        const scrollYRestored = parseInt(document.body.style.top || "0", 10) * -1;
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.width = "";
+        document.body.classList.remove("overflow-hidden");
+        window.scrollTo(0, scrollYRestored);
+      };
+    }
+  }, [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 handleCancelDelete = () => {
+    setIsConfirmDeleteOpen(false);
+    setFileToDelete(null);
+  };
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isAdmin) {
+      setError(FILE_UPLOADER.ERRORS.UNAUTHORIZED_UPLOAD);
+      return;
+    }
+    const file = e.target.files?.[0];
+    if (!file) {
+      setError(FILE_UPLOADER.ERRORS.NO_FILE_SELECTED);
+      return;
+    }
+    if (file.type !== "application/pdf") {
+      setError(FILE_UPLOADER.ERRORS.INVALID_FILE_TYPE);
+      return;
+    }
+    setError(null);
+    setUploading(true);
+    try {
+      const token = await getToken();
+      if (!token) throw new Error(FILE_UPLOADER.ERRORS.NO_AUTH_TOKEN);
+      const formData = new FormData();
+      formData.append("files", file);
+
+      const response = await fetch("/api/files", {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || FILE_UPLOADER.ERRORS.UPLOAD_FILE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+      const result = await response.json();
+      setUploadedFiles(
+        result.data.map((file: any) => ({
+          id: file.id,
+          documentId: file.documentId,
+          name: file.name || "Unnamed File",
+          url: file.url,
+          createdAt: file.createdAt,
+        })) || []
+      );
+      setPdfUrl(result.newFileUrl || "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : FILE_UPLOADER.ERRORS.UPLOAD_FILE_ERROR);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDeleteFile = async (documentId: string) => {
+    if (!isAdmin) {
+      setError(FILE_UPLOADER.ERRORS.UNAUTHORIZED_DELETE);
+      return;
+    }
+    setError(null);
+    setUploading(true);
+    try {
+      const token = await getToken();
+      if (!token) throw new Error(FILE_UPLOADER.ERRORS.NO_AUTH_TOKEN);
+      const response = await fetch("/api/files", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ documentId }),
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || FILE_UPLOADER.ERRORS.DELETE_FILE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+      const result = await response.json();
+      setUploadedFiles(
+        result.data.map((file: any) => ({
+          id: file.id,
+          documentId: file.documentId,
+          name: file.name || "Unnamed File",
+          url: file.url,
+          createdAt: file.createdAt,
+        })) || []
+      );
+      if (pdfUrl === uploadedFiles.find((f) => f.documentId === documentId)?.url) {
+        setPdfUrl("");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : FILE_UPLOADER.ERRORS.DELETE_FILE_ERROR);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleConfirmDelete = async () => {
+    if (fileToDelete !== null) {
+      await handleDeleteFile(fileToDelete);
+      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 sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
+  };
+
+  if (isLoading) return <Spinner />;
+
+  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>{`
+        :root {
+          --jubilee: #F47C7C;
+          --exuberant-blue: #FF69B4;
+          --modern-purple: #D946EF;
+        }
+        .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>
+      <motion.section
+        variants={sectionVariants}
+        initial="hidden"
+        animate="visible"
+        className="w-full max-w-7xl mx-auto p-4 sm:p-8 relative z-10"
+      >
+        <Card className="bg-[#1E2A44] text-white flex flex-col items-center space-y-6 rounded-none border-none outline-none">
+          <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-white text-center">
+            {FILE_UPLOADER.UI.TITLE}
+          </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={handleFileUpload}
+                  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" />
+                      {FILE_UPLOADER.BUTTONS.UPLOAD_BUTTON}
+                    </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 ? "You need admin privileges to upload files." : "Please sign in to upload files."}
+              </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)}</span>
+                      </div>
+                      {isAdmin && (
+                        <TrashIconButton
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            openConfirmDelete(file.documentId);
+                          }}
+                          aria-label={`Delete file ${truncateText(file.name)}`}
+                          variant="trash-icon"
+                          className="relative"
+                        >
+                          <X />
+                        </TrashIconButton>
+                      )}
+                    </div>
+                  );
+                })}
+                {uploadedFiles.length > 8 && (
+                  <div className="text-center mt-4">
+                    <ToggleButton onClick={() => setShowAllFiles(!showAllFiles)}>
+                      {showAllFiles ? FILE_UPLOADER.BUTTONS.SHOW_LESS_BUTTON : FILE_UPLOADER.BUTTONS.SHOW_MORE_BUTTON}
+                    </ToggleButton>
+                  </div>
+                )}
+              </>
+            ) : (
+              <p className="text-gray-300 font-bold text-base sm:text-lg md:text-xl text-center">
+                {FILE_UPLOADER.UI.NO_FILES_TEXT}
+              </p>
+            )}
+          </div>
+        </Card>
+      </motion.section>
+      {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 modal-glassmorphism"
+          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">
+              {FILE_UPLOADER.UI.CONFIRM_DELETE_TITLE}
+            </h3>
+            <p className="text-gray-300 text-sm mb-4">
+              {FILE_UPLOADER.UI.CONFIRM_DELETE_MESSAGE}
+            </p>
+            <div className="flex space-x-3">
+              <DeleteButton onClick={handleConfirmDelete} disabled={uploading}>
+                {uploading ? FILE_UPLOADER.BUTTONS.DELETING_BUTTON : FILE_UPLOADER.BUTTONS.DELETE_BUTTON}
+              </DeleteButton>
+              <CancelButton onClick={handleCancelDelete}>
+                {FILE_UPLOADER.BUTTONS.CANCEL_BUTTON}
+              </CancelButton>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
+}

package/components/addOns/functional/fileUploaders/constants/fileUploader.ts

@@ -0,0 +1,45 @@
+export const FILE_UPLOADER = {
+  UI: {
+    TITLE: "Fitness Forum",
+    NO_FILES_TEXT: "No files uploaded yet.",
+    UPLOAD_LABEL: "Upload PDF",
+    SELECTED_FILE_TEXT: "Selected file: ${fileName}",
+    CONFIRM_DELETE_TITLE: "Confirm Deletion",
+    CONFIRM_DELETE_MESSAGE: "Are you sure you want to delete this file? This action cannot be undone.",
+    EDIT_MODAL_HEADING: "Edit File",
+    NAME_LABEL: "File Name",
+    NAME_PLACEHOLDER: "Enter the file name",
+    DESCRIPTION_LABEL: "File Description (optional)",
+    DESCRIPTION_PLACEHOLDER: "Enter a description for the file",
+    FILE_LABEL: "Replace PDF (optional)",
+  },
+  ERRORS: {
+    FETCH_FILES_FAILED: "Failed to fetch files",
+    FETCH_ERROR: "An error occurred while fetching files",
+    UNAUTHORIZED_UPLOAD: "You are not authorized to upload files",
+    UNAUTHORIZED_DELETE: "You are not authorized to delete files",
+    UNAUTHORIZED_UPDATE: "You are not authorized to update files",
+    NO_AUTH_TOKEN: "Authentication token not found",
+    NO_FILE_SELECTED: "No file selected",
+    INVALID_FILE_TYPE: "Only PDF files are allowed",
+    UPLOAD_FILE_FAILED: "Failed to upload file: ${response.status}",
+    UPLOAD_FILE_ERROR: "An error occurred while uploading the file",
+    DELETE_FILE_FAILED: "Failed to delete file: ${response.status}",
+    DELETE_FILE_ERROR: "An error occurred while deleting the file",
+    UPDATE_FILE_FAILED: "Failed to update file: ${response.status}",
+    UPDATE_FILE_ERROR: "An error occurred while updating the file",
+    PAGINATION_WARNING: "Too many files to display, please contact support",
+    REQUIRED_FIELDS: "File name is required.",
+  },
+  BUTTONS: {
+    UPLOAD_BUTTON: "Upload PDF",
+    DELETING_BUTTON: "Deleting...",
+    DELETE_BUTTON: "Delete",
+    CANCEL_BUTTON: "Cancel",
+    SHOW_MORE_BUTTON: "Show More",
+    SHOW_LESS_BUTTON: "Show Less",
+    EDIT_BUTTON: "Edit",
+    UPDATE_BUTTON: "Update",
+    SAVING_BUTTON: "Saving...",
+  },
+};