feat: start pack view page

gui/app/components/Sidebar.tsx

@@ -1,21 +1,26 @@
+"use client";
+
+import { PACKS_ENDPOINT } from "@/api/ENDPOINTS";
+import { Pack } from "@/types/pack";
 import {
   Sidebar,
   SidebarItem,
   SidebarItemGroup,
   SidebarItems,
 } from "flowbite-react";
-import {
+import { useEffect, useState } from "react";
-//   HiArrowSmRight,
+import { HiChartPie, HiPlusCircle } from "react-icons/hi";
-  HiChartPie,
-  HiPlusCircle
-//   HiInbox,
-//   HiShoppingBag,
-//   HiTable,
-//   HiUser,
-//   HiViewBoards,
-} from "react-icons/hi";
 
 export const Menu = () => {
+  const [packsData, setPacksData] = useState<Pack[]>([]);
+  useEffect(() => {
+    async function _getPacksData() {
+      const res = await fetch(PACKS_ENDPOINT("getPacks"));
+      setPacksData(await res.json());
+    }
+    _getPacksData();
+  }, []);
+
   return (
     <Sidebar aria-label="Default sidebar example">
       <SidebarItems>
@@ -23,32 +28,20 @@ export const Menu = () => {
           <SidebarItem href="/" icon={HiChartPie}>
             Dashboard
           </SidebarItem>
+          {packsData &&
+            packsData.map((pack) => {
+              return (
+                <SidebarItem href={`/pack/?id=${pack._id}`} key={pack._id}>
+                  <p className="line-clamp-1">{pack.title}</p>
+                  <p className="text-sm text-gray-400 line-clamp-1">
+                    by {pack.author}
+                  </p>
+                </SidebarItem>
+              );
+            })}
           <SidebarItem href="/pack/new" icon={HiPlusCircle}>
             New mod pack
           </SidebarItem>
-          {/* <SidebarItem
-            href="#"
-            icon={HiViewBoards}
-            label="Pro"
-            labelColor="dark"
-          >
-            Kanban
-          </SidebarItem>
-          <SidebarItem href="#" icon={HiInbox} label="3">
-            Inbox
-          </SidebarItem>
-          <SidebarItem href="#" icon={HiUser}>
-            Users
-          </SidebarItem>
-          <SidebarItem href="#" icon={HiShoppingBag}>
-            Products
-          </SidebarItem>
-          <SidebarItem href="#" icon={HiArrowSmRight}>
-            Sign In
-          </SidebarItem>
-          <SidebarItem href="#" icon={HiTable}>
-            Sign Up
-          </SidebarItem> */}
         </SidebarItemGroup>
       </SidebarItems>
     </Sidebar>

gui/app/pack/new/page.tsx

@@ -82,7 +82,7 @@ export default function PackNew() {
       }
 
       toast.update(tid, {render: data.message, type: "success", isLoading: false})
-      router.push(`/pack/${data.id}`)
+      router.push(`/pack/?id=${data.id}`)
     }
 
     _submit();

gui/app/pack/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { PACK_ENDPOINT, PACKS_ENDPOINT } from "@/api/ENDPOINTS";
+import { Pack } from "@/types/pack";
+import { Button, Card, Spinner } from "flowbite-react";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { HiDownload, HiTrash } from "react-icons/hi";
+
+export default function PackPage() {
+  const [packData, setPackData] = useState<Pack | null>(null);
+  const [packDataLoading, setPackDataLoading] = useState(true);
+  const router = useRouter();
+  const id = useSearchParams().get("id") || "";
+
+  useEffect(() => {
+    async function _getPacksData() {
+      const res = await fetch(PACK_ENDPOINT("getPack", id));
+      if (!res.ok) router.push("/404");
+      setPackData(await res.json());
+      setPackDataLoading(false);
+    }
+    if (id) {
+      _getPacksData();
+    } else {
+      router.push("/404");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleImageUpdate = (e: any) => {
+    if (!packData || !window) return;
+
+    const file = e.target.files[0];
+    const fileReader = new FileReader();
+    fileReader.onloadend = () => {
+      const content = fileReader.result;
+      fetch(`${PACK_ENDPOINT("editPackImage", packData._id)}`, {
+        method: "POST",
+        body: JSON.stringify({
+          image: content,
+          mimetype: file.type,
+        }),
+        headers: {
+          "content-type": "application/json",
+          accept: "application/json",
+        },
+      }).then(() => location.reload());
+      e.target.value = "";
+    };
+    fileReader.readAsDataURL(file);
+  };
+
+  function deletePack() {
+    if (!packData || !window) return;
+
+    if (window.confirm(`Delete pack ${packData.title}?`)) {
+      fetch(`${PACKS_ENDPOINT("deletePack", packData._id)}`);
+      const ur = new URL(window.location.href)
+      ur.searchParams.delete("id")
+      ur.pathname = "/"
+      window.location.href = ur.href
+    }
+  }
+
+  return (
+    <div>
+      {packDataLoading && (
+        <div className="w-full flex justify-center items-center">
+          <Spinner></Spinner>
+        </div>
+      )}
+      {packData && (
+        <div>
+          <Card className="sticky top-0 left-0 right-0">
+            <div className="flex gap-4 items-center justify-between">
+              <div>
+                <p className="text-xl font-semibold">{packData.version}</p>
+                <p className="text-sm text-gray-400">{packData.modloader}</p>
+              </div>
+              <div className="flex gap-2 items-center">
+                <label htmlFor="pack-icon" className="cursor-pointer">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    alt=""
+                    src={PACK_ENDPOINT("getPackImage", packData._id)}
+                    className="w-12 h-12 rounded-md"
+                  />
+                </label>
+                <input
+                  onChange={(e) => handleImageUpdate(e)}
+                  id="pack-icon"
+                  className="hidden"
+                  name="image"
+                  type="file"
+                />
+                <div>
+                  <p className="text-xl font-semibold">{packData.title}</p>
+                  <p className="text-sm text-gray-400">by {packData.author}</p>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <Button color={"red"} onClick={() => deletePack()}>
+                  Delete <HiTrash className="ml-2 h-5 w-5" />
+                </Button>
+                <Button>
+                  Download <HiDownload className="ml-2 h-5 w-5" />
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

gui/app/page.tsx

@@ -30,7 +30,7 @@ export default function Home() {
         <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-2">
           {packsData.map((pack) => {
             return (
-              <Link key={pack._id} href={`/pack/${pack._id}`}>
+              <Link key={pack._id} href={`/pack/?id=${pack._id}`}>
                 <Card>
                   <div className="flex gap-2 items-center">
                     {/* eslint-disable-next-line @next/next/no-img-element */}

src/api/pack.py

@@ -1,12 +1,25 @@
 import os
 import re
 from . import apiPack
-from flask import request, jsonify, send_file, redirect, url_for
+from flask import request, jsonify, send_file, redirect, url_for, abort
 from config import PACKS_FOLDER, IMG_ALLOWED_MIME
 from PIL import Image
 from io import BytesIO
 import base64
+import json
 
+@apiPack.route("/<id>", methods=["GET"])
+def getPack(id):
+    if not os.path.exists(f"{PACKS_FOLDER}/{id}/packfile.json"):
+        return jsonify({"status": "error", "message": "not found"}), 404
+
+    pack = {}
+    with open(f"{PACKS_FOLDER}/{id}/packfile.json") as fp:
+        pack = json.load(fp)
+        pack["_id"] = id
+        fp.close()
+
+    return jsonify(pack)
 
 @apiPack.route("/<id>/image", methods=["GET"])
 def getPackImage(id):

src/api/packs.py

@@ -3,6 +3,7 @@ from . import apiPacks
 from flask import request, jsonify
 from config import PACKS_FOLDER
 import json
+import shutil
 
 
 @apiPacks.route("/all", methods=["GET"])
@@ -59,3 +60,14 @@ def createPack():
             "id": title,
         }
     )
+
+
+@apiPacks.route("/<id>/delete", methods=["GET"])
+def deletePack(id):
+    shutil.rmtree(f"{PACKS_FOLDER}/{id}")
+    return jsonify(
+        {
+            "status": "ok",
+            "message": f"pack deleted",
+        }
+    )