feat: move badge data to the computation step

src/components/app/AppBadges.tsx

@@ -1,17 +1,14 @@
-import { useMemo, type FC } from 'react';
+import { type FC } from 'react';
 import type { ComputedApp, ThinApp } from '@/types';
 import { BadgePlus } from 'lucide-react';
 import { IconTooltip } from '@/components/common/IconTooltip';
-import { isAfter, parseISO, subWeeks } from 'date-fns';
 
 type Props = {
   app: ComputedApp<ThinApp>;
 };
 
 export const AppBadges: FC<Props> = ({ app }) => {
-  const isNew = useMemo(() => isAfter(parseISO(app.created_at), subWeeks(new Date(), 1)), [app.created_at]);
-
-  if (!isNew) return null;
+  if (!app.badges.is_new) return null;
 
   return (
     <IconTooltip className="absolute top-1 right-1" icon={BadgePlus}>

src/service/protontweaks.service.ts

@@ -1,3 +1,4 @@
+import { isAfter, parseISO, subWeeks } from 'date-fns';
 import type { ApiInfo, App, AppsList, ComputedApp, ThinApp } from '../types';
 import { fetch } from '../utils/fetch';
 
@@ -29,6 +30,9 @@ export function getComputedApp<T extends ThinApp>(app: T): ComputedApp<T> {
   return {
     ...app,
     image_url: `https://steamcdn-a.akamaihd.net/steam/apps/${app.id}/header.jpg`,
+    badges: {
+      is_new: isAfter(parseISO(app.created_at), subWeeks(new Date(), 1)),
+    },
   };
 }
 

src/types/apps.ts

@@ -31,4 +31,7 @@ export type App = {
 
 export type ComputedApp<T extends ThinApp = App> = T & {
   image_url: string;
+  badges: {
+    is_new: boolean;
+  };
 };