Add listing by developers

Author: razzeee

pages/apps/collection/developer/[developer].tsx

@@ -0,0 +1,48 @@
+import { GetStaticPaths, GetStaticProps } from 'next'
+
+import { fetchDeveloperApps, fetchDevelopers } from '../../../../src/fetchers'
+import ApplicationCollection from '../../../../src/components/application/Collection'
+import { Appstream } from '../../../../src/types/Appstream'
+import { NextSeo } from 'next-seo'
+
+export default function Developer({
+    developerApps,
+    developer,
+}: {
+    developerApps: Appstream[]
+    developer: string
+}) {
+    return (
+        <>
+            <NextSeo title={`Applications by ${developer}`} />
+            <ApplicationCollection
+                title={`Applications by ${developer}`}
+                applications={developerApps}
+            />
+        </>
+    )
+}
+
+export const getStaticProps: GetStaticProps = async ({
+    params: { developer },
+}) => {
+    const developerApps = await fetchDeveloperApps(developer as string)
+    return {
+        props: {
+            developerApps: developerApps ?? [],
+            developer
+        },
+    }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+    const apps = await fetchDevelopers()
+    const paths = apps.map((developer) => ({
+        params: { developer },
+    }))
+
+    return {
+        paths,
+        fallback: false,
+    }
+}

pages/apps/details/[appDetails].tsx

@@ -6,6 +6,7 @@ import {
   fetchAppstream,
   fetchAppStats,
   fetchSummary,
+  fetchDeveloperApps,
 } from '../../../src/fetchers'
 import { APPSTREAM_URL } from '../../../src/env'
 import { NextSeo } from 'next-seo'
@@ -16,20 +17,20 @@ import {
 } from '../../../src/types/Appstream'
 import { Summary } from '../../../src/types/Summary'
 import { AppStats } from '../../../src/types/AppStats'
-import { useEffect, useState } from 'react'
 import { StringParam, useQueryParam, withDefault } from 'next-query-params'
+import { BranchedType } from '../../../src/types/BranchedType'
 
 export default function Details({
-  data,
+  app,
   summary,
   stats,
+  developerApps,
 }: {
-  data: Appstream
-  summary: Summary
+  app: BranchedType<Appstream>
+  summary: BranchedType<Summary>
   stats: AppStats
+  developerApps: Appstream[]
 }) {
-  const [branchParam, setBranchParam] = useQueryParam('branch', withDefault(StringParam, undefined));
-
   function branchChange(event) {
     if (event.value === "stable") {
       setBranchParam(undefined)
@@ -44,39 +45,48 @@ export default function Details({
       "stable"
   }
 
+  const [branchParam, setBranchParam] = useQueryParam('branch', withDefault(StringParam, undefined));
+
   const options: { value: string, label: string }[] = []
-  if (data["stable"] && summary["stable"] && data["beta"] && summary["beta"]) {
+  if (app["stable"] && summary["stable"] && app["beta"] && summary["beta"]) {
     options.push({ value: 'stable', label: 'Stable' },)
     options.push({ value: 'beta', label: 'Beta' },)
   }
-  else if (data["stable"] && summary["stable"]) {
+  else if (app["stable"] && summary["stable"]) {
     options.push({ value: 'stable', label: 'Stable' },)
   }
-  else if (data["beta"] && summary["beta"]) {
+  else if (app["beta"] && summary["beta"]) {
     options.push({ value: 'beta', label: 'Beta' },)
   }
 
-  const screenshots = data.screenshots
-    ? data.screenshots.filter(pickScreenshot).map((screenshot: Screenshot) => ({
+  const screenshots = app[getBranch(branchParam)]?.screenshots
+    ? app[getBranch(branchParam)].screenshots.filter(pickScreenshot).map((screenshot: Screenshot) => ({
       url: pickScreenshot(screenshot).url,
     }))
     : []
 
   return (
     <Main>
       <NextSeo
-        title={data.name}
-        description={data.summary}
+        title={app[getBranch(branchParam)]?.name}
+        description={app[getBranch(branchParam)]?.summary}
         openGraph={{
           images: [
             {
-              url: data.icon,
+              url: app[getBranch(branchParam)]?.icon,
             },
             ...screenshots,
           ],
         }}
       />
-      <ApplicationDetails data={data[getBranch(branchParam)]} summary={summary[getBranch(branchParam)]} stats={stats} branch={getBranch(branchParam)} setBranch={branchChange} options={options} />
+      <ApplicationDetails
+        app={app[getBranch(branchParam)]}
+        summary={summary[getBranch(branchParam)]}
+        stats={stats}
+        developerApps={developerApps.filter(devApp => devApp.id !== app[getBranch(branchParam)].id)}
+        branch={getBranch(branchParam)}
+        setBranch={branchChange}
+        options={options} />
     </Main >
   )
 }
@@ -85,15 +95,17 @@ export const getStaticProps: GetStaticProps = async ({
   params: { appDetails: appId },
 }) => {
   console.log('Fetching data for app details: ', appId)
-  const data = await fetchAppstream(appId as string)
+  const app = await fetchAppstream(appId as string)
   const summary = await fetchSummary(appId as string)
   const stats = await fetchAppStats(appId as string)
+  const developerApps = await (await fetchDeveloperApps(app["stable"]?.developer_name))
 
   return {
     props: {
-      data,
+      app,
       summary,
       stats,
+      developerApps: developerApps ?? [],
     },
   }
 }