From f7940c1fea43d57871db6e080720a5e9d5340a84 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Fri, 2 Feb 2024 18:38:32 -0800
Subject: [PATCH] rename files to Logging to prevent getting gitignore

---
 frontend/src/App.jsx                          |   2 +-
 .../src/pages/Admin/Logging/LogRow/index.jsx  |  62 +++++++++
 frontend/src/pages/Admin/Logging/index.jsx    | 119 ++++++++++++++++++
 3 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/Admin/Logging/LogRow/index.jsx
 create mode 100644 frontend/src/pages/Admin/Logging/index.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3e1becc9..3556e2f5 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -20,7 +20,7 @@ const AdminUsers = lazy(() => import("@/pages/Admin/Users"));
 const AdminInvites = lazy(() => import("@/pages/Admin/Invitations"));
 const AdminWorkspaces = lazy(() => import("@/pages/Admin/Workspaces"));
 const AdminSystem = lazy(() => import("@/pages/Admin/System"));
-const AdminLogs = lazy(() => import("@/pages/Admin/Logs"));
+const AdminLogs = lazy(() => import("@/pages/Admin/Logging"));
 const GeneralChats = lazy(() => import("@/pages/GeneralSettings/Chats"));
 const GeneralAppearance = lazy(
   () => import("@/pages/GeneralSettings/Appearance")
diff --git a/frontend/src/pages/Admin/Logging/LogRow/index.jsx b/frontend/src/pages/Admin/Logging/LogRow/index.jsx
new file mode 100644
index 00000000..cb7a9d33
--- /dev/null
+++ b/frontend/src/pages/Admin/Logging/LogRow/index.jsx
@@ -0,0 +1,62 @@
+import { CaretDown } from "@phosphor-icons/react";
+import { useState } from "react";
+
+export default function LogRow({ log }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleRowClick = () => {
+    if (log.metadata !== "{}") {
+      setExpanded(!expanded);
+    }
+  };
+
+  return (
+    <>
+      <tr
+        onClick={handleRowClick}
+        className="bg-transparent text-white text-opacity-80 text-sm font-medium cursor-pointer"
+      >
+        <td className="px-6 py-4 font-medium whitespace-nowrap text-white">
+          {log.id}
+        </td>
+        <td className="px-6 py-4 font-medium whitespace-nowrap text-white flex items-center">
+          <span className="rounded-full bg-sky-600/20 px-2 py-0.5 text-sm font-medium text-sky-400 shadow-sm">
+            {log.event}
+          </span>
+        </td>
+        <td className="px-6 py-4 border-transparent transform transition-transform duration-200">
+          {log.user.username}
+        </td>
+        <td className="px-6 py-4 border-transparent transform transition-transform duration-200">
+          {log.occurredAt}
+        </td>
+        {log.metadata !== "{}" && (
+          <td
+            className={`flex items-center justify-center transform transition-transform duration-200 hover:scale-105 ${
+              expanded ? "rotate-0" : "rotate-90"
+            }`}
+          >
+            <CaretDown weight="bold" size={20} />
+          </td>
+        )}
+      </tr>
+      {expanded && (
+        <tr className="bg-sidebar">
+          <td
+            colSpan="2"
+            className="px-6 py-4 font-medium text-white rounded-l-2xl"
+          >
+            Event Metadata
+          </td>
+          <td colSpan="4" className="px-6 py-4 rounded-r-2xl">
+            <div className="w-full rounded-lg bg-main-2 p-2 text-white shadow-sm border-white border bg-opacity-10">
+              <pre className="overflow-scroll">
+                {JSON.stringify(JSON.parse(log.metadata), null, 2)}
+              </pre>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
new file mode 100644
index 00000000..ad9ed06b
--- /dev/null
+++ b/frontend/src/pages/Admin/Logging/index.jsx
@@ -0,0 +1,119 @@
+import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import useQuery from "@/hooks/useQuery";
+import System from "@/models/system";
+import { useEffect, useState } from "react";
+import { isMobile } from "react-device-detect";
+import * as Skeleton from "react-loading-skeleton";
+import LogRow from "./LogRow";
+
+export default function AdminLogs() {
+  return (
+    <div className="w-screen h-screen overflow-hidden bg-sidebar flex">
+      {!isMobile && <Sidebar />}
+      <div
+        style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
+        className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
+      >
+        {isMobile && <SidebarMobileHeader />}
+        <div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
+          <div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
+            <div className="items-center flex gap-x-4">
+              <p className="text-2xl font-semibold text-white">Logs</p>
+            </div>
+            <p className="text-sm font-base text-white text-opacity-60">
+              View all logs and events happening on this instance.
+            </p>
+          </div>
+          <ChatsContainer />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ChatsContainer() {
+  const query = useQuery();
+  const [loading, setLoading] = useState(true);
+  // const [chats, setChats] = useState([]);
+  const [logs, setLogs] = useState([]);
+  const [offset, setOffset] = useState(Number(query.get("offset") || 0));
+  const [canNext, setCanNext] = useState(false);
+
+  const handlePrevious = () => {
+    setOffset(Math.max(offset - 1, 0));
+  };
+  const handleNext = () => {
+    setOffset(offset + 1);
+  };
+
+  useEffect(() => {
+    async function fetchLogs() {
+      const { logs: _logs, hasPages = false } = await System.logs(offset);
+      console.log(_logs);
+      setLogs(_logs);
+      setCanNext(hasPages);
+      setLoading(false);
+    }
+    fetchLogs();
+  }, [offset]);
+
+  if (loading) {
+    return (
+      <Skeleton.default
+        height="80vh"
+        width="100%"
+        highlightColor="#3D4147"
+        baseColor="#2C2F35"
+        count={1}
+        className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
+        containerClassName="flex w-full"
+      />
+    );
+  }
+
+  return (
+    <>
+      <table className="md:w-3/4 w-full text-sm text-left rounded-lg mt-5">
+        <thead className="text-white text-opacity-80 text-sm font-bold uppercase border-white border-b border-opacity-60">
+          <tr>
+            <th scope="col" className="px-6 py-3 rounded-tl-lg">
+              Id
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Event Type
+            </th>
+            <th scope="col" className="px-6 py-3">
+              User
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Occurred At
+            </th>
+            <th scope="col" className="px-6 py-3 rounded-tr-lg">
+              {" "}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {!!logs && logs.map((log) => <LogRow key={log.id} log={log} />)}
+        </tbody>
+      </table>
+      <div className="flex w-full justify-between items-center">
+        <button
+          onClick={handlePrevious}
+          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
+          disabled={offset === 0}
+        >
+          {" "}
+          Previous Page
+        </button>
+        <button
+          onClick={handleNext}
+          className="px-4 py-2 rounded-lg border border-slate-200 text-slate-200 text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 disabled:invisible"
+          disabled={!canNext}
+        >
+          Next Page
+        </button>
+      </div>
+    </>
+  );
+}