feat: dynamic data load on home page

package.json

@@ -28,6 +28,7 @@
     "react-icons": "^5.0.1",
     "recoil": "^0.7.7",
     "semver": "^7.6.0",
+    "sharp": "^0.33.2",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
@@ -47,4 +48,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}

src/components/Extension/Extension.tsx

@@ -1,5 +1,5 @@
 import Link from "@/components/Routing/Link";
-import { APIExtension } from "@/types/APIExtension";
+import { APIExtension, PartialAPIExtension } from "@/types/APIExtension";
 import { numberFormatter } from "@/utils/formatters";
 import { Tooltip } from "@mui/material";
 import { FC } from "react";
@@ -8,7 +8,7 @@ import ExtensionAuthor from "./ExtensionAuthor";
 import ExtensionIconClient from "./ExtensionIconClient";
 
 interface ExtensionProps {
-    extension: APIExtension;
+    extension: PartialAPIExtension;
 }
 
 const Extension: FC<ExtensionProps> = ({ extension }) => {

src/components/Extension/ExtensionIconClient.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { APIExtension } from "@/types/APIExtension";
+import { APIExtension, PartialAPIExtension } from "@/types/APIExtension";
 import { FC } from "react";
 import { HiOutlineCube } from "react-icons/hi2";
 import ImageWithSkeleton from "../Image/ImageWithSkeleton";
 
 interface ExtensionIconClientProps {
-    extension: APIExtension;
+    extension: PartialAPIExtension;
 }
 
 const ExtensionIconClient: FC<ExtensionIconClientProps> = ({ extension }) => {

src/components/Extension/ExtensionList.tsx

@@ -1,39 +1,58 @@
-import { APIExtension } from "@/types/APIExtension";
-import { FC } from "react";
+import { INDEX_URL } from "@/config/urls";
+import { getDB } from "@/firebase/app";
+import { PartialAPIExtension } from "@/types/APIExtension";
+import { FC, cache } from "react";
 import Extension from "./Extension";
 
-async function getExtensionIndex(): Promise<APIExtension[]> {
-    // FIXME
-    return [
-        {
-            id: "org.onesoftnet.sbext.antirickroll",
-            downloads: 5,
-            name: "Anti RickRoll",
-            description: "Deletes messages containing rickroll links.",
-            author: {
-                name: "Ar Rakin",
-                isVerified: true,
-            },
-            icon: "https://loremflickr.com/200/200?i=1",
-            license: "GPL-3.0-or-later",
-            licenseURL: "https://spdx.org/licenses/GPL-3.0-or-later.html",
-            security: "safe",
-        },
-        {
-            id: "org.onesoftnet.antirickroll2",
-            downloads: 156666,
-            name: "Anti RickRoll 2",
-            description: "lorem50  lmao",
-            author: {
-                name: "LMAO 11",
-                isVerified: false,
-            },
-            icon: "https://loremflickr.com/200/200?i=2",
-            license: "GPL-3.0-or-later",
-            licenseURL: "https://spdx.org/licenses/GPL-3.0-or-later.html",
-            security: "safe",
-        },
-    ] as TODO;
+const getDocs = cache(async () => {
+    const snapshot = await getDB().collection('extensions').get();
+    const record: Record<string, PartialAPIExtension> = {};
+
+    for (const doc of snapshot.docs) {
+        if (!doc.exists) {
+            continue;
+        }
+
+        record[doc.id] = doc.data() as PartialAPIExtension;
+    }
+
+    return record;
+});
+
+async function getExtensionIndex(): Promise<PartialAPIExtension[]> {
+    const response = await fetch(INDEX_URL, {
+        next: {
+            revalidate: 180
+        }
+    });
+    const extensionMap: Record<string, PartialAPIExtension & { iconURL?: string }> = await response.json();
+    const docs = await getDocs();
+    const extensions = [];
+
+    for (const id in extensionMap) {
+        const doc = docs[id];
+
+        if (!doc) {
+            continue;
+        }
+
+        const extension = {
+            ...extensionMap[id],
+            id,
+            downloads: doc.downloads,
+            security: doc.security,
+            icon: extensionMap[id].iconURL,
+            author: doc.author ? {
+                name: doc.author?.name,
+                github: doc.author.github,
+                isVerified: doc.author?.isVerified
+            } : undefined
+        } satisfies PartialAPIExtension;
+
+        extensions.push(extension);
+    }
+
+    return extensions;
 }
 
 const ExtensionList: FC = async () => {

src/types/APIExtension.ts

@@ -21,6 +21,8 @@ export interface APIExtension {
     tarballs: Array<Tarballs>;
 }
 
+export type PartialAPIExtension = Pick<APIExtension, 'id' | 'name' | 'author' | 'icon' | 'author' | 'license' | 'description' | 'downloads' | 'security'>
+
 export type Tarballs = {
     url: string;
     checksum: string;