import React, { useEffect, useState } from "react";
import "react-responsive-modal/styles.css";
import { Modal } from "react-responsive-modal";
import Loader from "@/components/atoms/Loader";
import axios from "axios";
import initiateDb from "@/utils/dbPublic";
export default function Benchmarks(props) {
const [open, setOpen] = useState(false);
const onOpenModal = () => setOpen(true);
const onCloseModal = () => {
setCurrentBenchmark(false);
setName(null);
setValue(null);
setOpen(false);
};
const [benchmarks, setBenchmarks] = useState(false);
const [currentBenchmark, setCurrentBenchmark] = useState(false);
const [name, setName] = useState(null);
const [value, setValue] = useState(null);
useEffect(() => {
(async () => {
const supabase = initiateDb();
const data = await supabase
.from("benchmarks")
.select()
.order("created_at", { ascending: false });
setBenchmarks(data.data);
})();
}, []);
async function handleSet(e) {
e.preventDefault();
const res = await axios.post("/api/benchmarks/set", {
id: currentBenchmark ? currentBenchmark.id : false,
name,
value,
});
setBenchmarks(res.data.data);
onCloseModal();
}
async function handleDelete(benchmark) {
if (confirm("Are you sure to delete the benchmark?")) {
const res = await axios.post("/api/benchmarks/delete", {
id: benchmark.id,
});
setBenchmarks(res.data.data);
}
}
const closeIcon = (
);
const customStyles = {
content: {
borderRadius: "20px",
backgroundColor: "black",
bgColor: "black",
},
};
if (benchmarks === false) {
return