Automatic package metadata insertion for popular packages

wally-registry-frontend/src/mocks/popularPackages.mock.js

@@ -1,94 +1,10 @@
 const mockPopularPackages = [
-  {
-    package: {
-      name: "evaera/cmdr",
-      version: "1.8.5",
-      registry: "https://github.com/upliftgames/wally-test-index",
-      realm: "shared",
-      description: "Extensible command console for Roblox developers",
-      license: "MIT",
-      authors: ["evaera <email@domain.com>"],
-    },
-    dependencies: {},
-    "dev-dependencies": {},
-    "server-dependencies": {},
-  },
-  {
-    package: {
-      authors: [],
-      description: "A view management library for Roblox Lua similar to React",
-      license: "Apache-2.0",
-      name: "roblox/roact",
-      realm: "shared",
-      registry: "https://github.com/UpliftGames/wally-index",
-      version: "1.4.2",
-    },
-    dependencies: {},
-    "dev-dependencies": {},
-    "server-dependencies": {},
-  },
-  {
-    package: {
-      name: "evaera/promise",
-      version: "3.1.0",
-      registry: "https://github.com/UpliftGames/wally-index",
-      realm: "shared",
-      description: "Promise implementation for Roblox",
-      license: "MIT",
-      authors: [],
-    },
-    dependencies: {},
-    "dev-dependencies": {},
-    "server-dependencies": {},
-  },
-  {
-    dependencies: {},
-    "dev-dependencies": {},
-    package: {
-      authors: [],
-      description: "BDD-style test and assertion library for Roblox Lua",
-      license: "Apache2",
-      name: "roblox/testez",
-      realm: "shared",
-      registry: "https://github.com/UpliftGames/wally-index",
-      version: "0.4.1",
-    },
-    "server-dependencies": {},
-  },
-  {
-    dependencies: {
-      Comm: "sleitnick/comm@>=0.1.0, <0.2.0",
-      Loader: "sleitnick/loader@>=1.0.0, <2.0.0",
-      Promise: "evaera/promise@>=3.1.0, <4.0.0",
-      Signal: "sleitnick/signal@>=1.0.0, <2.0.0",
-      TableUtil: "sleitnick/table-util@>=1.0.0, <2.0.0",
-    },
-    "dev-dependencies": {},
-    package: {
-      authors: [],
-      description: "Knit is a lightweight game framework",
-      license: "MIT",
-      name: "sleitnick/knit",
-      realm: "shared",
-      registry: "https://github.com/UpliftGames/wally-index",
-      version: "1.0.9",
-    },
-    "server-dependencies": {},
-  },
-  {
-    dependencies: {},
-    "dev-dependencies": {},
-    package: {
-      authors: [],
-      description: "Garbage collector object implementation for Roblox",
-      license: null,
-      name: "howmanysmall/janitor",
-      realm: "shared",
-      registry: "https://github.com/UpliftGames/wally-index",
-      version: "1.13.13",
-    },
-    "server-dependencies": {},
-  },
+  "evaera/cmdr",
+  "roblox/roact",
+  "evaera/promise",
+  "roblox/testez",
+  "sleitnick/knit",
+  "howmanysmall/janitor",
 ]
 
 export default mockPopularPackages

wally-registry-frontend/src/pages/Home/index.tsx

@@ -1,11 +1,14 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import styled from "styled-components"
 import { ButtonLink } from "../../components/Button"
 import CallToActionContainer from "../../components/CallToActionContainer"
 import ContentSection from "../../components/ContentSection"
 import PackageTag from "../../components/PackageTag"
 import { Code, Heading, ResponsiveParagraph } from "../../components/Typography"
 import mockPopularPackages from "../../mocks/popularPackages.mock"
+import { getWallyPackageMetadata } from "../../services/wally.api"
+import { WallyPackageMetadata } from "../../types/wally"
+import capitalize from "../../utils/capitalize"
 
 const Flex = styled.div`
   display: flex;
@@ -15,31 +18,76 @@ const Flex = styled.div`
   margin: 1.5rem 0;
 `
 
+const SplitPackageFullName = (
+  fullName: string
+): { Scope: string; Name: string } => {
+  const [scope, name] = fullName.split("/")
+  return { Scope: scope, Name: name }
+}
+
 const PopularPackages = () => {
-  const popularPackagesList = [...mockPopularPackages].map(
-    (popPackage, index) => (
-      <PackageTag
-        size="small"
-        key={index}
-        uniqueId={popPackage.package.name
-          .substr(0, 15)
-          .toLowerCase()
-          .replace(/[^a-z]/gi, "")}
-        title={popPackage.package.name}
-        author={popPackage.package.authors.join(" ")}
-        version={popPackage.package.version}
-        linkTo={popPackage.package.name}
-      >
-        <p>{popPackage.package.description}&nbsp;</p>
-      </PackageTag>
-    )
-  )
+  const [popularPackages, setPopularPackages] = useState<
+    WallyPackageMetadata[]
+  >([])
+
+  const fetchPopularPackages = async () => {
+    const popularPackagesList = []
+
+    for (const fullName of [...mockPopularPackages]) {
+      const { Scope, Name } = SplitPackageFullName(fullName)
+      const packageData = await getWallyPackageMetadata(Scope, Name)
+      if (!packageData) continue
+
+      // boatbomber src/pages/Package.tsx is an excerpt from the code snippet he wrote
+      const filteredPackageData = packageData.versions.some(
+        (pack: WallyPackageMetadata) => !pack.package.version.includes("-")
+      )
+        ? packageData.versions.filter(
+            (pack: WallyPackageMetadata) => !pack.package.version.includes("-")
+          )
+        : packageData.versions
+
+      const latestVersion = filteredPackageData[0].package.version
+      const packageMetadata = filteredPackageData?.find(
+        (item: WallyPackageMetadata) => item.package.version === latestVersion
+      )
 
-  if (popularPackagesList.length % 2 !== 0) {
-    popularPackagesList.push(<PackageTag size="small" hidden={true} />)
+      popularPackagesList.push(packageMetadata)
+    }
+
+    setPopularPackages(popularPackagesList)
   }
 
-  return <>{popularPackagesList}</>
+  useEffect(() => {
+    fetchPopularPackages()
+  }, [])
+
+  return (
+    <>
+      {popularPackages.map((popPackage, index) => (
+        <PackageTag
+          size="small"
+          key={index}
+          uniqueId={popPackage.package.name
+            .substr(0, 15)
+            .toLowerCase()
+            .replace(/[^a-z]/gi, "")}
+          title={popPackage.package.name}
+          author={popPackage.package.authors.join(" ")}
+          version={popPackage.package.version}
+          linkTo={popPackage.package.name}
+        >
+          <p>
+            {popPackage.package.description ??
+              `${capitalize(
+                SplitPackageFullName(popPackage.package.name).Name
+              )} has no provided description.`}
+            &nbsp;
+          </p>
+        </PackageTag>
+      ))}
+    </>
+  )
 }
 
 export default function Home() {