feat: Move games to the database.

.env.template

@@ -1,3 +1,7 @@
 AWS_ACCESS_KEY_ID=
 AWS_SECRET_ACCESS_KEY=
-AWS_REGION=
+AWS_REGION=
+
+DB_ADAPTER=default
+DB_URL=mongodb://127.0.0.1:27017/
+DB_DATABASE=steam-revenue-calculator-dev

.gitignore

@@ -13,4 +13,6 @@ data/games.json
 /public/build
 .env
 
-.DS_Store
+.DS_Store
+
+scrape-games.json

app/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-900 text-slate-50 shadow hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        destructive:
+          "bg-red-500 text-slate-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-slate-200 bg-white shadow-sm hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        secondary:
+          "bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

app/components/ui/pagination.tsx

@@ -0,0 +1,121 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "~/lib/utils"
+import { ButtonProps, buttonVariants } from "~/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

app/games/index.ts

@@ -1,3 +1,5 @@
+import slugify from 'slugify'
+
 export interface GameDetails {
   id: number
   categories: string[]
@@ -18,6 +20,12 @@ export interface GameDetails {
 
 let games: GameDetails[] | undefined
 
+export function createGameSlug(name: string): string {
+  return slugify(name, {
+    lower: true
+  })
+}
+
 export async function fetchGames(): Promise<GameDetails[]> {
   if (games) {
     return games

app/globals.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

app/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

app/models/game.ts

@@ -0,0 +1,9 @@
+import { BaseModel } from 'esix'
+import { GameDetails } from '~/games'
+
+export class Game extends BaseModel {
+  details?: GameDetails
+  gameId = 0
+  grossRevenue = 0
+  slug = ''
+}

app/routes/_index.tsx

@@ -4,23 +4,18 @@ import { useState } from 'react'
 import slugify from 'slugify'
 
 import { Page } from '~/components/page'
-import { GameDetails, fetchGames } from '~/games'
+import { GameDetails } from '~/games'
 import { calculateRevenue, revenueBreakdown } from '~/revenue'
 import { RevenueBreakdownTable } from '~/revenue/revenue-breakdown-table'
+import { GameService } from '~/services/game-service.server'
 
 interface LoaderData {
   popularGames: GameDetails[]
 }
 
 export const loader: LoaderFunction = async () => {
-  const popularGameIds = [
-    367520, 1817230, 1145360, 973230, 391540, 207610, 1766740, 72850, 105600,
-    1332010, 2230760, 646570, 567380, 1942280, 1708091, 379430, 488821, 322170
-  ]
-
-  const games = await fetchGames()
-
-  const popularGames = games.filter((game) => popularGameIds.includes(game.id))
+  const gameService = new GameService()
+  const popularGames = await gameService.listPopularGames()
 
   return { popularGames }
 }

app/routes/api.migrate-games.ts

@@ -0,0 +1,21 @@
+import type { LoaderFunction } from '@remix-run/node'
+import { json } from '@remix-run/node'
+
+import { GameService } from '~/services/game-service.server'
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const url = new URL(request.url)
+  const key = url.searchParams.get('key')
+
+  if (!key || key !== 'YTViNDlkMGMtNTZiYi00Y2ExLWFhOGItZmE5NDNhM2E3ZWYyIA') {
+    return new Response('Unauthorized.', { status: 401 })
+  }
+
+  const gameService = new GameService()
+
+  await gameService.migrateGamesToDatabase()
+
+  return json({
+    status: 'success'
+  })
+}