Plato - src/utils/BucketManager.js

// BucketManager.js
import React, { useState, useEffect } from "react";
import supabase from "../services/supabaseClient";
const BucketManager = () => {
  const [buckets, setBuckets] = useState([]);
  const [bucketName, setBucketName] = useState("");
  const [file, setFile] = useState(null);
  const [error, setError] = useState("");

// Cargar la lista de Buckets
  const fetchBuckets = async () => {
    const {
      data,
      error
    } = await supabase.storage.listBuckets();
    // console.log("🔍 Lista de Buckets:", data); // DEBUG
    if (error) {
      setError(error.message);
    } else {
      setBuckets(data);
      setError("");
    }
  };
  useEffect(() => {
    fetchBuckets();
  }, []);

// Crear un nuevo Bucket
  const handleCreateBucket = async () => {
    if (!bucketName.trim()) {
      setError("El nombre del bucket es obligatorio.");
      return;
    }
    const {
      error
    } = await supabase.storage.createBucket(bucketName, {
      public: false
    });
    if (error) {
      setError(error.message);
    } else {
      setBucketName("");
      setError("");
      fetchBuckets(); // 🔄 Recargar lista después de crear un bucket
    }
  };

// Subir un archivo al Bucket
  const handleFileUpload = async bucketName => {
    if (!file) {
      setError("Debes seleccionar un archivo.");
      return;
    }
    const {
      data,
      error
    } = await supabase.storage.from(bucketName).upload(file.name, file, {
      cacheControl: "3600",
      upsert: true
    });

// console.log("📂 Archivo subido:", data, error); // DEBUG

if (error) {
      setError(error.message);
    } else {
      setError("");
      alert(`✅ Archivo ${file.name} subido exitosamente.`);
      setFile(null);
    }
  };

// Eliminar un Bucket
  const handleDeleteBucket = async bucketName => {
    const {
      error
    } = await supabase.storage.deleteBucket(bucketName);
    if (error) {
      setError(error.message);
    } else {
      alert(`❌ Bucket ${bucketName} eliminado exitosamente.`);
      fetchBuckets(); // 🔄 Recargar lista después de eliminar un bucket
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "max-w-3xl mx-auto p-6 bg-white shadow-lg rounded-lg"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "text-2xl font-semibold mb-4 text-gray-800"
  }, "Gesti\xF3n de Buckets"), error && /*#__PURE__*/React.createElement("p", {
    className: "text-red-500 text-sm mb-4"
  }, error), /*#__PURE__*/React.createElement("div", {
    className: "flex gap-2 mb-6"
  }, /*#__PURE__*/React.createElement("input", {
    type: "text",
    className: "flex-grow p-2 border rounded-md",
    value: bucketName,
    onChange: e => setBucketName(e.target.value),
    placeholder: "Nombre del nuevo Bucket"
  }), /*#__PURE__*/React.createElement("button", {
    onClick: handleCreateBucket,
    className: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md"
  }, "Crear Bucket")), /*#__PURE__*/React.createElement("h3", {
    className: "text-lg font-semibold mb-2"
  }, "Listado de Buckets"), buckets.length > 0 ? /*#__PURE__*/React.createElement("div", {
    className: "grid grid-cols-1 md:grid-cols-2 gap-4"
  }, buckets.map(bucket => /*#__PURE__*/React.createElement("div", {
    key: bucket.id,
    className: "p-4 border rounded-lg shadow-md"
  }, /*#__PURE__*/React.createElement("h4", {
    className: "text-lg font-medium"
  }, bucket.name), /*#__PURE__*/React.createElement("div", {
    className: "mt-2 flex flex-col gap-2"
  }, /*#__PURE__*/React.createElement("input", {
    type: "file",
    className: "border p-1 rounded-md",
    onChange: e => setFile(e.target.files[0])
  }), /*#__PURE__*/React.createElement("button", {
    onClick: () => handleFileUpload(bucket.name),
    className: "bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-md"
  }, "Subir Archivo")), /*#__PURE__*/React.createElement("button", {
    onClick: () => handleDeleteBucket(bucket.name),
    className: "mt-3 bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded-md"
  }, "Eliminar Bucket")))) : /*#__PURE__*/React.createElement("p", {
    className: "text-gray-600"
  }, "No hay buckets creados."));
};
export default BucketManager;

src/utils/BucketManager.js

Maintainability

Lines of code

Difficulty

Estimated Errors

Function weight

By Complexity

By SLOC