Add listing by developers

Author: razzeee

pages/apps/details/[appDetails].tsx

@@ -17,25 +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({
   app,
   summary,
   stats,
   developerApps,
 }: {
-  app: 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)
@@ -48,31 +43,35 @@ export default function Details({
     return branch === 'beta' ? 'beta' : 'stable'
   }
 
-  const options: { value: string; label: string }[] = []
-  if (app['stable'] && summary['stable'] && app['beta'] && summary['beta']) {
-    options.push({ value: 'stable', label: 'Stable' })
-    options.push({ value: 'beta', label: 'Beta' })
-  } else if (app['stable'] && summary['stable']) {
-    options.push({ value: 'stable', label: 'Stable' })
-  } else if (app['beta'] && summary['beta']) {
-    options.push({ value: 'beta', label: 'Beta' })
+  const [branchParam, setBranchParam] = useQueryParam('branch', withDefault(StringParam, undefined));
+
+  const options: { value: string, label: string }[] = []
+  if (app["stable"] && summary["stable"] && app["beta"] && summary["beta"]) {
+    options.push({ value: 'stable', label: 'Stable' },)
+    options.push({ value: 'beta', label: 'Beta' },)
+  }
+  else if (app["stable"] && summary["stable"]) {
+    options.push({ value: 'stable', label: 'Stable' },)
+  }
+  else if (app["beta"] && summary["beta"]) {
+    options.push({ value: 'beta', label: 'Beta' },)
   }
 
-  const screenshots = app.screenshots
-    ? app.screenshots.filter(pickScreenshot).map((screenshot: Screenshot) => ({
-        url: pickScreenshot(screenshot).url,
-      }))
+  const screenshots = app[getBranch(branchParam)]?.screenshots
+    ? app[getBranch(branchParam)].screenshots.filter(pickScreenshot).map((screenshot: Screenshot) => ({
+      url: pickScreenshot(screenshot).url,
+    }))
     : []
 
   return (
     <Main>
       <NextSeo
-        title={app?.name}
-        description={app?.summary}
+        title={app[getBranch(branchParam)]?.name}
+        description={app[getBranch(branchParam)]?.summary}
         openGraph={{
           images: [
             {
-              url: app?.icon,
+              url: app[getBranch(branchParam)]?.icon,
             },
             ...screenshots,
           ],
@@ -82,12 +81,11 @@ export default function Details({
         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}
-        developerApps={developerApps.filter((devApp) => devApp.id !== app.id)}
-      />
-    </Main>
+        options={options} />
+    </Main >
   )
 }
 
@@ -98,7 +96,7 @@ export const getStaticProps: GetStaticProps = async ({
   const app = await fetchAppstream(appId as string)
   const summary = await fetchSummary(appId as string)
   const stats = await fetchAppStats(appId as string)
-  const developerApps = await fetchDeveloperApps(app?.developer_name)
+  const developerApps = await (await fetchDeveloperApps(app["stable"]?.developer_name))
 
   return {
     props: {