new featerus

app/components/FilesEditor/index.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { formatDistanceToNow } from "date-fns";
+import React, { useEffect, useState } from "react";
+import DocumentIcon from "@/components/Icons/Document";
+import FolderIcon from "@/components/Icons/Folder";
+import MenuIcon from "@/components/Icons/Menu";
+
+const Index = () => {
+  const [apiKey, setApiKey] = useState("");
+  const [fileList, setFileList] = useState([]);
+
+  const setCredentials = async () => {
+    setApiKey("ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm");
+  };
+
+  const formateDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    return formatDistanceToNow(date, { addSuffix: true });
+  };
+
+  const sortFiles = (files: any) => {
+    const data = files;
+
+    const sortedData = data.sort((a, b) => {
+      const isADir = !a.attributes.is_file;
+      const isBDir = !b.attributes.is_file;
+
+      // Najpierw katalogi, potem pliki
+      if (isADir && !isBDir) return -1;
+      if (!isADir && isBDir) return 1;
+
+      // Sortowanie alfabetyczne
+      return a.attributes.name.localeCompare(b.attributes.name);
+    });
+
+    console.log(sortedData);
+  };
+
+  const fetchFiles = async (apiKey: string) => {
+    try {
+      const response = await fetch(
+        "https://ptero.przeqpiciel.com/api/client/servers/0bf192ab/files/list",
+        {
+          method: "GET",
+          headers: {
+            Authorization: "Bearer " + apiKey.toString(),
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setFileList(data.data);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
+
+  useEffect(() => {
+    setCredentials();
+    fetchFiles(apiKey);
+  }, [apiKey]);
+
+  return (
+    <>
+      {fileList.map((file) => (
+        <div
+          className="flex justify-between gap-4 bg-slate-400 mb-1 hover:bg-slate-500 pl-4 pr-4 pt-1 pb-1 rounded-md"
+          key={file.attributes.name}
+        >
+          <div className="w-10">
+            {file.attributes.is_file ? <DocumentIcon /> : <FolderIcon />}
+          </div>
+          <div className="w-48 text-left">{file.attributes.name}</div>
+          <div className="w-48 text-right">
+            {file.attributes.is_file ? file.attributes.size : ""}
+          </div>
+          <div title={file.attributes.modified_at} className="w-60 text-right">
+            {formateDate(file.attributes.modified_at)}
+          </div>
+          <div className="w-6 justify-center text-center justify-items-center">
+            <MenuIcon />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default Index;