Implement beta handling

package.json

@@ -16,6 +16,7 @@
     "date-fns": "^2.28.0",
     "next": "^12.0.10",
     "next-seo": "^5.1.0",
+    "next-query-params": "^2.0.5",
     "next-themes": "^0.0.15",
     "react": "^17.0.2",
     "react-chartjs-2": "^4.0.1",
@@ -24,6 +25,7 @@
     "react-icons": "^4.3.1",
     "react-image-lightbox": "^5.1.4",
     "react-responsive-carousel": "^3.2.22",
+    "react-select": "^5.2.1",
     "react-svg-worldmap": "^2.0.0-alpha.0",
     "sass": "^1.49.7",
     "spdx-license-list": "^6.4.0"

pages/_app.tsx

@@ -1,4 +1,5 @@
 import { createInstance, MatomoProvider } from '@datapunt/matomo-tracker-react'
+import { NextQueryParamProvider } from 'next-query-params'
 import { DefaultSeo } from 'next-seo'
 import { ThemeProvider } from 'next-themes'
 import type { AppProps } from 'next/app'
@@ -19,26 +20,28 @@ const App = ({ Component, pageProps }: AppProps) => {
   return (
     <MatomoProvider value={instance}>
       <ThemeProvider>
-        <DefaultSeo
-          titleTemplate='%s | Flathub'
-          defaultTitle='Flathub'
-          twitter={{
-            site: '@FlatpakApps',
-            cardType: 'summary_large_image',
-          }}
-          openGraph={{
-            type: 'website',
-            locale: 'en_GB',
-            url: process.env.NEXT_PUBLIC_URL,
-            site_name: 'FlatHub',
-            images: [
-              {
-                url: `${IMAGE_BASE_URL}flathub-social.png`,
-              },
-            ],
-          }}
-        />
-        <Component {...pageProps} />
+        <NextQueryParamProvider>
+          <DefaultSeo
+            titleTemplate='%s | Flathub'
+            defaultTitle='Flathub'
+            twitter={{
+              site: '@FlatpakApps',
+              cardType: 'summary_large_image',
+            }}
+            openGraph={{
+              type: 'website',
+              locale: 'en_GB',
+              url: process.env.NEXT_PUBLIC_URL,
+              site_name: 'FlatHub',
+              images: [
+                {
+                  url: `${IMAGE_BASE_URL}flathub-social.png`,
+                },
+              ],
+            }}
+          />
+          <Component {...pageProps} />
+        </NextQueryParamProvider>
       </ThemeProvider>
     </MatomoProvider>
   )

pages/apps/details/[appDetails].tsx

@@ -17,6 +17,8 @@ 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'
 
 export default function Details({
   app,
@@ -29,10 +31,37 @@ export default function Details({
   stats: AppStats
   developerApps: Appstream[]
 }) {
+  const [branchParam, setBranchParam] = useQueryParam(
+    'branch',
+    withDefault(StringParam, undefined)
+  )
+
+  function branchChange(event) {
+    if (event.value === 'stable') {
+      setBranchParam(undefined)
+    } else {
+      setBranchParam(event.value)
+    }
+  }
+
+  function getBranch(branch: string | undefined) {
+    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 screenshots = app.screenshots
     ? app.screenshots.filter(pickScreenshot).map((screenshot: Screenshot) => ({
-      url: pickScreenshot(screenshot).url,
-    }))
+        url: pickScreenshot(screenshot).url,
+      }))
     : []
 
   return (
@@ -50,12 +79,15 @@ export default function Details({
         }}
       />
       <ApplicationDetails
-        app={app}
-        summary={summary}
+        app={app[getBranch(branchParam)]}
+        summary={summary[getBranch(branchParam)]}
         stats={stats}
-        developerApps={developerApps.filter(devApp => devApp.id !== app.id)}
+        branch={getBranch(branchParam)}
+        setBranch={branchChange}
+        options={options}
+        developerApps={developerApps.filter((devApp) => devApp.id !== app.id)}
       />
-    </Main >
+    </Main>
   )
 }
 
@@ -79,7 +111,7 @@ export const getStaticProps: GetStaticProps = async ({
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const apps = await fetch(APPSTREAM_URL)
+  const apps = await fetch(`${APPSTREAM_URL}?type=stable_and_beta`)
   const appsData: string[] = await apps.json()
   const paths = appsData.map((app) => ({
     params: { appDetails: app },