[Feature] Add content size to sidebar (#46)

* chore(deps): add jotai

* chore(ui): add store for contentsize

* feat(ui): add content-size component

* chore: add sizeLoading to store

* refactor: move getSize to separate file

* feat: refetch size on file upload

ui/package.json

@@ -25,6 +25,7 @@
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
+    "jotai": "^2.6.0",
     "postcss": "^8.4.32",
     "react-hot-toast": "^2.4.1",
     "tailwindcss": "^3.3.6",

ui/src/App.tsx

@@ -4,6 +4,7 @@ import Files from "./components/files";
 import { Image, Upload as UploadIcon, Files as FilesIcon } from "lucide-react";
 import Seperator from "./components/seperator";
 import Upload from "./components/upload";
+import ContentSize from "./components/content-size";
 
 function App() {
   return (
@@ -36,6 +37,7 @@ function App() {
               </Link>
             </li>
           </ul>
+          <ContentSize />
         </nav>
         <main className="m-4 h-auto flex flex-col w-full">
           <Route path="/images">{<Files type="images" />}</Route>

ui/src/actions/getSize.ts

@@ -0,0 +1,25 @@
+import axios from "axios";
+import { SetStateAction } from "jotai";
+import toast from "react-hot-toast";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SetAtom<Args extends any[], Result> = (...args: Args) => Result;
+
+export const getSize = (
+  setSize: SetAtom<[SetStateAction<number>], void>,
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  setLoading(true);
+  axios
+    .get<{ cdn_size_bytes: number }>("/api/cdn/size")
+    .then((res) => {
+      setSize(res.data.cdn_size_bytes);
+    })
+    .catch((err) => {
+      toast.error("Error getting content size");
+      console.log(err);
+    })
+    .finally(() => {
+      setLoading(false);
+    });
+};

ui/src/components/content-size.tsx

@@ -0,0 +1,40 @@
+import { useAtom } from "jotai";
+import { sizeAtom, sizeLoadingAtom } from "../store";
+import { useEffect } from "react";
+import { getSize } from "../actions/getSize";
+
+const ContentSize = () => {
+  const [size, setSize] = useAtom(sizeAtom);
+  const [loading, setLoading] = useAtom(sizeLoadingAtom);
+
+  useEffect(() => {
+    getSize(setSize, setLoading);
+  }, [setSize, setLoading]);
+
+  if (loading)
+    return (
+      <div className="bottom-0 absolute mb-4">
+        <span>Total content size:</span>
+        <p>Loading...</p>
+      </div>
+    );
+
+  return (
+    <div className="bottom-0 absolute mb-4">
+      <span>Total content size:</span>
+      <p className="font-bold">
+        {size < 1000 && `${size} b`}
+        {999999 > size && size >= 1000 && `${Math.round(size / 100) / 10} KB`}
+        {1000000000 > size &&
+          size >= 1000000 &&
+          `${Math.round(size / 100000) / 10} MB`}
+        {1000000000000 > size &&
+          size >= 1000000000 &&
+          `${Math.round(size / 100000000) / 10} GB`}
+        {size >= 1000000000000 && `${Math.round(size / 100000000000) / 10} TB`}
+      </p>
+    </div>
+  );
+};
+
+export default ContentSize;

ui/src/components/upload.tsx

@@ -5,8 +5,16 @@ import Seperator from "./seperator";
 import axios from "axios";
 import toast from "react-hot-toast";
 import { useParams } from "wouter";
+import { sizeAtom, sizeLoadingAtom } from "../store";
+import { useAtom } from "jotai";
+import { getSize } from "../actions/getSize";
 
 const Upload = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setLoading] = useAtom(sizeLoadingAtom);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [__, setSize] = useAtom(sizeAtom);
+
   const tab = useParams<{ tab: "images" | "docs" }>().tab;
 
   if (tab === undefined || tab === null) {
@@ -30,6 +38,7 @@ const Upload = () => {
           if (res.status === 200) {
             toast.dismiss();
             toast.success("Successfully uploaded file!");
+            getSize(setSize, setLoading);
           }
         })
         .catch((err: Error) => {

ui/src/store.ts

@@ -0,0 +1,4 @@
+import { atom } from "jotai";
+
+export const sizeAtom = atom(0);
+export const sizeLoadingAtom = atom(false);