Merge pull request #176 from TECH-C-LT/feature/playground-usage-count

Playgroundに使用回数カウントを追加

Author: ryu1013-job

apps/web/src/app/(main)/dashboard/(palygroud)/actions/index.ts

@@ -2,6 +2,8 @@
 
 import { parseWithZod } from '@conform-to/zod'
 
+import { createClient } from '~/lib/supabase/server'
+
 import { playgroundSchema } from '../schemas'
 
 export async function handlePlayground(prevState: unknown, formData: FormData) {
@@ -13,8 +15,20 @@ export async function handlePlayground(prevState: unknown, formData: FormData) {
 
   const { api, text, score_threshold } = submission.value
 
+  const count = await checkUsageCount()
+
+  if (count >= 10) {
+    submission.value.isLimitReached = true
+    return {
+      status: submission.status,
+      value: submission.value,
+    }
+  }
+
   const result = await fetchApi(api, text, score_threshold)
 
+  await incrementPlaygroundUsage()
+
   submission.value.result = JSON.stringify(result, null, 2)
 
   return {
@@ -42,3 +56,40 @@ async function fetchApi(api: string, text: string, score_threshold: number) {
 
   return result
 }
+
+async function checkUsageCount(): Promise<number> {
+  const supabase = createClient()
+
+  const { data } = await supabase.auth.getUser()
+
+  if (!data.user?.id) {
+    throw new Error('User not found')
+  }
+
+  const PlaygroundUsageRes = await supabase
+    .from('playground_usage')
+    .select('count')
+    .eq('user_id', data.user?.id)
+
+  return PlaygroundUsageRes.data?.[0]?.count as number
+}
+
+async function incrementPlaygroundUsage() {
+  const supabase = createClient()
+
+  const { data } = await supabase.auth.getUser()
+
+  const { data: res, error } = await (supabase.rpc as any)(
+    'increment_playground_usage',
+    {
+      input_user_id: data.user?.id,
+    },
+  )
+
+  if (error) {
+    console.error(error)
+    throw new Error('Failed to increment playground usage')
+  }
+
+  return
+}

apps/web/src/app/(main)/dashboard/(palygroud)/components/limit-reached-dialog.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@peace-net/ui/components/ui/alert-dialog'
+import type { User } from '@supabase/supabase-js'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
+import GitHub from '~/components/header/github'
+import { createClient } from '~/lib/supabase/client'
+
+export default function LimitReachedDialog() {
+  const [user, setUser] = useState<User | null>(null)
+
+  const handleGetSession = async () => {
+    const supabase = createClient()
+
+    const { data } = await supabase.auth.getUser()
+
+    if (data) {
+      setUser(data.user)
+    }
+  }
+
+  useEffect(() => {
+    handleGetSession()
+  }, [])
+
+  return (
+    <AlertDialog defaultOpen>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>これ以上使用できません。😭</AlertDialogTitle>
+          <AlertDialogDescription>
+            プレイグラウンドの利用回数が上限に達しました。
+            <br />
+            実際のAPIを使用してください。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction asChild>
+            {user?.is_anonymous ? (
+              <GitHub />
+            ) : (
+              <Link href="/dashboard/api-keys">APIキー管理ページ</Link>
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

apps/web/src/app/(main)/dashboard/(palygroud)/components/playground-form.tsx

@@ -15,6 +15,7 @@ import { TextareaConform } from '~/components/conform/textarea'
 import { handlePlayground } from '../actions'
 import type { Playground } from '../schemas'
 import { playgroundSchema } from '../schemas'
+import LimitReachedDialog from './limit-reached-dialog'
 import { ResultSyntax } from './result-syntax'
 
 function isSuccessResult(
@@ -42,6 +43,7 @@ export function PlaygroundForm() {
       result: isSuccessResult(lastResult) ? lastResult.value.result : '',
     },
   })
+
   return (
     <div className="flex flex-wrap gap-3 rounded border p-4">
       <form
@@ -106,9 +108,12 @@ export function PlaygroundForm() {
           </Button>
         </div>
       </form>
-      {isSuccessResult(lastResult) && (
+      {isSuccessResult(lastResult) && !lastResult.value.isLimitReached && (
         <ResultSyntax code={lastResult.value.result} />
       )}
+      {isSuccessResult(lastResult) && lastResult.value.isLimitReached && (
+        <LimitReachedDialog />
+      )}
     </div>
   )
 }

apps/web/src/app/(main)/dashboard/(palygroud)/schemas/index.ts

@@ -10,6 +10,7 @@ export const playgroundSchema = z.object({
     .max(500, { message: 'テキストは500文字以下で入力してください' }),
   score_threshold: z.number().max(1).min(0).optional().default(0.5),
   result: z.any().optional(),
+  isLimitReached: z.boolean().optional(),
 })
 
 export type Playground = z.infer<typeof playgroundSchema>

packages/shared/src/types/database.ts

@@ -7,39 +7,14 @@ export type Json =
   | Json[]
 
 export type Database = {
-  graphql_public: {
-    Tables: {
-      [_ in never]: never
-    }
-    Views: {
-      [_ in never]: never
-    }
-    Functions: {
-      graphql: {
-        Args: {
-          operationName?: string
-          query?: string
-          variables?: Json
-          extensions?: Json
-        }
-        Returns: Json
-      }
-    }
-    Enums: {
-      [_ in never]: never
-    }
-    CompositeTypes: {
-      [_ in never]: never
-    }
-  }
   public: {
     Tables: {
       api_keys: {
         Row: {
           created_at: string | null
           description: string | null
-          expires_at: string | null
           encrypted_key: string | null
+          expires_at: string | null
           id: string
           is_active: boolean | null
           last_used: string | null
@@ -49,8 +24,8 @@ export type Database = {
         Insert: {
           created_at?: string | null
           description?: string | null
-          expires_at?: string | null
           encrypted_key?: string | null
+          expires_at?: string | null
           id?: string
           is_active?: boolean | null
           last_used?: string | null
@@ -60,8 +35,8 @@ export type Database = {
         Update: {
           created_at?: string | null
           description?: string | null
-          expires_at?: string | null
           encrypted_key?: string | null
+          expires_at?: string | null
           id?: string
           is_active?: boolean | null
           last_used?: string | null
@@ -102,6 +77,38 @@ export type Database = {
         }
         Relationships: []
       }
+      playground_usage: {
+        Row: {
+          count: number | null
+          id: string
+          last_reset: string | null
+          total_count: number | null
+          user_id: string
+        }
+        Insert: {
+          count?: number | null
+          id?: string
+          last_reset?: string | null
+          total_count?: number | null
+          user_id: string
+        }
+        Update: {
+          count?: number | null
+          id?: string
+          last_reset?: string | null
+          total_count?: number | null
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: 'playground_usage_user_id_fkey'
+            columns: ['user_id']
+            isOneToOne: true
+            referencedRelation: 'users'
+            referencedColumns: ['id']
+          },
+        ]
+      }
       usage_logs: {
         Row: {
           api_key_id: string | null
@@ -181,7 +188,30 @@ export type Database = {
       [_ in never]: never
     }
     Functions: {
-      [_ in never]: never
+      increment_playground_usage: {
+        Args: {
+          input_user_id: string
+        }
+        Returns: {
+          new_count: number
+          new_total_count: number
+          remaining: number
+        }[]
+      }
+      increment_total_requests_used: {
+        Args: {
+          p_user_id: string
+        }
+        Returns: undefined
+      }
+      increment_usage_log: {
+        Args: {
+          p_api_key_id: string
+          p_endpoint: string
+          p_date: string
+        }
+        Returns: undefined
+      }
     }
     Enums: {
       [_ in never]: never