Use main category from codegen

frontend/pages/apps/category/[category]/subcategories/[subcategory]/[page].tsx

@@ -8,7 +8,6 @@ import Breadcrumbs from "src/components/Breadcrumbs"
 import ApplicationCollection from "../../../../../../src/components/application/Collection"
 import { fetchSubcategory } from "../../../../../../src/fetchers"
 import {
-  Category,
   categoryToName,
   subcategoryToName,
 } from "../../../../../../src/types/Category"
@@ -17,6 +16,7 @@ import {
   MeilisearchResponse,
   mapAppsIndexToAppstreamListItem,
 } from "src/meilisearch"
+import { MainCategory } from "src/codegen"
 
 const ApplicationCategory = ({
   applications,
@@ -25,7 +25,7 @@ const ApplicationCategory = ({
 }) => {
   const { t } = useTranslation()
   const router = useRouter()
-  const category = router.query.category as Category
+  const category = router.query.category as MainCategory
   let categoryName = categoryToName(category, t)
   const subcategory = router.query.subcategory as string
   let subcategoryName = subcategoryToName(category, subcategory, t)
@@ -75,7 +75,7 @@ export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
   }
 
   const applications = await fetchSubcategory(
-    params.category as keyof typeof Category,
+    params.category as keyof typeof MainCategory,
     params.subcategory as string,
     locale,
     params.page as unknown as number,

frontend/pages/index.tsx

@@ -15,7 +15,7 @@ import {
   MeilisearchResponse,
   mapAppsIndexToAppstreamListItem,
 } from "src/meilisearch"
-import { Category, categoryToName } from "src/types/Category"
+import { categoryToName } from "src/types/Category"
 import ApplicationSection from "src/components/application/ApplicationSection"
 import { HeroBanner } from "src/components/application/HeroBanner"
 import { DesktopAppstream } from "src/types/Appstream"
@@ -27,25 +27,26 @@ import MultiToggle from "src/components/MultiToggle"
 import { useRouter } from "next/router"
 import { Button } from "@/components/ui/button"
 import Link from "next/link"
+import { MainCategory } from "src/codegen"
 
 const categoryOrder = [
-  Category.Office,
-  Category.Graphics,
-  Category.AudioVideo,
-  Category.Education,
-  Category.Game,
-  Category.Network,
-  Category.Development,
-  Category.Science,
-  Category.System,
-  Category.Utility,
+  MainCategory.office,
+  MainCategory.graphics,
+  MainCategory.audiovideo,
+  MainCategory.education,
+  MainCategory.game,
+  MainCategory.network,
+  MainCategory.development,
+  MainCategory.science,
+  MainCategory.system,
+  MainCategory.utility,
 ]
 
 const CategorySection = ({
   topAppsByCategory,
 }: {
   topAppsByCategory: {
-    category: Category
+    category: MainCategory
     apps: MeilisearchResponse<AppsIndex>
   }[]
 }) => {
@@ -167,7 +168,7 @@ export default function Home({
   trending: MeilisearchResponse<AppsIndex>
   popular: MeilisearchResponse<AppsIndex>
   topAppsByCategory: {
-    category: Category
+    category: MainCategory
     apps: MeilisearchResponse<AppsIndex>
   }[]
   heroBannerData: {
@@ -317,12 +318,12 @@ export const getStaticProps: GetStaticProps = async ({
   )
 
   let topAppsByCategory: {
-    category: Category
+    category: MainCategory
     apps: MeilisearchResponse<AppsIndex>
   }[] = []
 
-  const categoryPromise = Object.keys(Category).map(
-    async (category: Category) => {
+  const categoryPromise = Object.keys(MainCategory).map(
+    async (category: MainCategory) => {
       return {
         category,
         apps: await fetchCategory(category, locale, 1, 6),

frontend/pages/statistics.tsx

@@ -9,11 +9,15 @@ import ListBox from "../src/components/application/ListBox"
 import { i18n, useTranslation } from "next-i18next"
 import { useTheme } from "next-themes"
 import { getIntlLocale } from "../src/localize"
-import { Category, categoryToName, tryParseCategory } from "src/types/Category"
+import {
+  categoryToName,
+  tryParseCategory,
+  tryParseSubCategory,
+} from "src/types/Category"
 import { useRouter } from "next/router"
 import { useQuery } from "@tanstack/react-query"
 import { useUserContext } from "src/context/user-info"
-import { Permission, StatsResult } from "src/codegen/model"
+import { MainCategory, Permission, StatsResult } from "src/codegen/model"
 import {
   getQualityModerationStatsQualityModerationFailedByGuidelineGet,
   getRuntimeListRuntimesGet,
@@ -307,13 +311,17 @@ const CategoryDistribution = ({ stats }: { stats: StatsResult }) => {
             <YAxis
               stroke={axisStroke(resolvedTheme)}
               dataKey="category"
-              tickFormatter={(x) => categoryToName(x as Category, t)}
+              tickFormatter={(x) =>
+                categoryToName(x.toLowerCase() as MainCategory, t)
+              }
               type="category"
               width={180}
               tickLine={false}
             />
             <Tooltip
-              labelFormatter={(x) => categoryToName(x as Category, t)}
+              labelFormatter={(x) =>
+                categoryToName(x.toLowerCase() as MainCategory, t)
+              }
               cursor={false}
               content={<FlathubTooltip />}
             />
@@ -327,7 +335,10 @@ const CategoryDistribution = ({ stats }: { stats: StatsResult }) => {
             <Tooltip
               cursor={false}
               content={<FlathubTooltip />}
-              labelFormatter={(x) => tryParseCategory(x, t)}
+              labelFormatter={(x) =>
+                tryParseSubCategory(x, t) ??
+                tryParseCategory(x.toLowerCase(), t)
+              }
             />
           </Treemap>
         </ChartContainer>

frontend/src/env.ts

@@ -1,4 +1,4 @@
-import { Category } from "./types/Category"
+import { MainCategory } from "./codegen"
 
 const BASE_URI: string = process.env.NEXT_PUBLIC_API_BASE_URI
 
@@ -140,7 +140,7 @@ export const MOBILE_APPS_URL = (
 }
 
 export const CATEGORY_URL = (
-  category: keyof typeof Category,
+  category: keyof typeof MainCategory,
   page?: number,
   per_page?: number,
   locale?: string,
@@ -162,7 +162,7 @@ export const CATEGORY_URL = (
 }
 
 export const SUBCATEGORY_URL = (
-  category: keyof typeof Category,
+  category: keyof typeof MainCategory,
   subcategory: string,
   page?: number,
   per_page?: number,

frontend/src/fetchers.ts

@@ -1,5 +1,4 @@
 import { Appstream } from "./types/Appstream"
-import { Category } from "./types/Category"
 
 import {
   POPULAR_LAST_MONTH_URL,
@@ -30,7 +29,12 @@ import {
   MeilisearchResponse,
   MeilisearchResponseLimited,
 } from "./meilisearch"
-import { AppOfTheDay, AppsOfTheWeek, VendingConfig } from "./codegen"
+import {
+  AppOfTheDay,
+  AppsOfTheWeek,
+  MainCategory,
+  VendingConfig,
+} from "./codegen"
 import axios from "axios"
 
 export async function fetchAppstream(
@@ -159,7 +163,7 @@ export default async function fetchCollection(
 }
 
 export async function fetchCategory(
-  category: keyof typeof Category,
+  category: keyof typeof MainCategory,
   locale: string,
   page?: number,
   per_page?: number,
@@ -175,7 +179,7 @@ export async function fetchCategory(
 }
 
 export async function fetchSubcategory(
-  category: keyof typeof Category,
+  category: keyof typeof MainCategory,
   subcategory: string,
   locale: string,
   page?: number,

frontend/src/types/Category.ts

@@ -1,40 +1,28 @@
 import { TFunction } from "i18next"
+import { MainCategory } from "src/codegen"
 
-export enum Category {
-  AudioVideo = "AudioVideo",
-  Development = "Development",
-  Education = "Education",
-  Game = "Game",
-  Graphics = "Graphics",
-  Network = "Network",
-  Office = "Office",
-  Science = "Science",
-  System = "System",
-  Utility = "Utility",
-}
-
-export function stringToCategory(category: string): Category | undefined {
+export function stringToCategory(category: string): MainCategory | undefined {
   switch (category.toLowerCase()) {
     case "audiovideo":
-      return Category.AudioVideo
+      return MainCategory.audiovideo
     case "development":
-      return Category.Development
+      return MainCategory.development
     case "education":
-      return Category.Education
+      return MainCategory.education
     case "game":
-      return Category.Game
+      return MainCategory.game
     case "graphics":
-      return Category.Graphics
+      return MainCategory.graphics
     case "network":
-      return Category.Network
+      return MainCategory.network
     case "office":
-      return Category.Office
+      return MainCategory.office
     case "science":
-      return Category.Science
+      return MainCategory.science
     case "system":
-      return Category.System
+      return MainCategory.system
     case "utility":
-      return Category.Utility
+      return MainCategory.utility
     default:
       return undefined
   }
@@ -51,30 +39,45 @@ export function tryParseCategory(
   }
 }
 
+export function tryParseSubCategory(
+  subcategory: string,
+  t: TFunction<"translation", undefined>,
+): string | undefined {
+  try {
+    return gameCategoryToName(subcategory as GameCategory, t)
+  } catch {
+    try {
+      return audioVideoCategoryToName(subcategory as AudioVideoCategory, t)
+    } catch {
+      return undefined
+    }
+  }
+}
+
 export function categoryToName(
-  category: Category,
+  category: MainCategory,
   t: TFunction<"translation", undefined>,
 ): string {
   switch (category) {
-    case Category.AudioVideo:
+    case MainCategory.audiovideo:
       return t("audio-and-video")
-    case Category.Development:
+    case MainCategory.development:
       return t("developer-tools")
-    case Category.Game:
+    case MainCategory.game:
       return t("games")
-    case Category.Graphics:
+    case MainCategory.graphics:
       return t("graphics-and-photography")
-    case Category.Network:
+    case MainCategory.network:
       return t("networking")
-    case Category.Office:
+    case MainCategory.office:
       return t("productivity")
-    case Category.Utility:
+    case MainCategory.utility:
       return t("utilities")
-    case Category.Science:
+    case MainCategory.science:
       return t("science")
-    case Category.Education:
+    case MainCategory.education:
       return t("education")
-    case Category.System:
+    case MainCategory.system:
       return t("system")
     default:
       assertUnreachable(category)
@@ -183,14 +186,14 @@ export function audioVideoCategoryToName(
 }
 
 export function subcategoryToName(
-  category: Category,
+  category: MainCategory,
   subcategory: string,
   t: TFunction<"translation", undefined>,
 ): string {
-  switch (category) {
-    case Category.Game:
+  switch (category.toLowerCase()) {
+    case MainCategory.game:
       return gameCategoryToName(subcategory as GameCategory, t)
-    case Category.AudioVideo:
+    case MainCategory.audiovideo:
       return audioVideoCategoryToName(subcategory as AudioVideoCategory, t)
     default:
       return subcategory
@@ -201,11 +204,11 @@ function assertUnreachable(_x: never): never {
   throw new Error("Didn't expect to get here")
 }
 
-export function getSubcategory(category: Category): string[] {
-  switch (category) {
-    case Category.Game:
+export function getSubcategory(category: MainCategory): string[] {
+  switch (category.toLowerCase()) {
+    case MainCategory.game:
       return Object.keys(GameCategory)
-    case Category.AudioVideo:
+    case MainCategory.audiovideo:
       return Object.keys(AudioVideoCategory)
   }
 }