Merge pull request #37 from MH4GF/replace-to-route-handler

fix: replace to route handler

Author: MH4GF

web/.eslintrc.js

@@ -2,4 +2,20 @@
 module.exports = {
   root: true,
   extends: ['@mh4gf/eslint-config', 'next/core-web-vitals', 'plugin:tailwindcss/recommended'],
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      parserOptions: { project: './tsconfig.json' },
+      rules: {
+        '@typescript-eslint/no-misused-promises': [
+          2,
+          {
+            checksVoidReturn: {
+              attributes: false,
+            },
+          },
+        ],
+      },
+    },
+  ],
 }

web/src/app/_features/GitHubNippouMain/GitHubNippouForm.tsx

@@ -1,16 +1,17 @@
-import type { FC } from 'react'
+import type { FC, FormEventHandler } from 'react'
 
 import { DateInput } from './DateInput'
 import { GistIdInput } from './GistIdInput'
 import { SubmitButton } from './SubmitButton'
 
 interface Props {
-  formAction: (formData: FormData) => void
+  formAction: FormEventHandler<HTMLFormElement>
+  isLoading: boolean
 }
 
-export const GitHubNippouForm: FC<Props> = ({ formAction }) => {
+export const GitHubNippouForm: FC<Props> = ({ formAction, isLoading }) => {
   return (
-    <form action={formAction} className="grid gap-2">
+    <form onSubmit={formAction} className="grid gap-2">
       <details>
         <summary>Advanced Settings</summary>
         <div className="grid gap-4">
@@ -22,7 +23,7 @@ export const GitHubNippouForm: FC<Props> = ({ formAction }) => {
         </div>
       </details>
       <div>
-        <SubmitButton />
+        <SubmitButton isLoading={isLoading} />
       </div>
     </form>
   )

web/src/app/_features/GitHubNippouMain/GitHubNippouMain.tsx

@@ -1,38 +1,59 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-boolean-literal-compare */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-// useFormStateはClient Componentでしか使えない
+// useCallback, useStateはClient Componentでしか使えない
 'use client'
 
-import type { FC } from 'react'
-import { useFormState } from 'react-dom'
+import { useState, useCallback } from 'react'
+import type { FormEvent, FC } from 'react'
 
 import { CopyToClipboardButton } from '../CopyToClipboardButton'
 
 import { GitHubNippouForm } from './GitHubNippouForm'
 
 import { Alert, Label, Textarea } from '@/app/_components'
-import { showList } from '@/app/showList'
+import type { NippouResult } from '@/app/types'
 
 export const GitHubNippouMain: FC = () => {
-  const [state, formAction] = useFormState(showList, {
+  const [state, setState] = useState<NippouResult>({
     success: true,
     result: '',
   })
+  const [isLoading, setIsLoading] = useState(false)
+
+  const formAction = useCallback(async (event: FormEvent<HTMLFormElement>) => {
+    setIsLoading(true)
+    event.preventDefault()
+    const formData = new FormData(event.currentTarget)
+    const url = new URL('/api/nippou', window.location.href)
+    url.searchParams.set('settingsGistId', formData.get('settingsGistId') as string)
+    url.searchParams.set('sinceDate', formData.get('sinceDate') as string)
+    url.searchParams.set('untilDate', formData.get('untilDate') as string)
+    await fetch(url)
+      .then(async (res) => {
+        setState((await res.json()) as NippouResult)
+      })
+      .catch((error: unknown) => {
+        console.error(error)
+        setState({ success: false, error: 'An unexpected error has occurred' })
+      })
+
+    setIsLoading(false)
+
+    return
+  }, [])
 
   return (
     <main className="mx-auto grid max-w-7xl gap-6 p-4 sm:p-6 lg:px-8">
-      {state?.success === false && <Alert>{state.error}</Alert>}
-      <GitHubNippouForm formAction={formAction} />
+      {!state.success && <Alert>{state.error}</Alert>}
+      <GitHubNippouForm formAction={formAction} isLoading={isLoading} />
       <div>
         <Label htmlFor="result">Result</Label>
         <Textarea
           name="result"
           id="result"
           rows={20}
-          defaultValue={state?.success ? state.result : ''}
+          defaultValue={state.success ? state.result : ''}
         />
         <div className="mt-2">
-          <CopyToClipboardButton text={state?.success ? state.result : ''} />
+          <CopyToClipboardButton text={state.success ? state.result : ''} />
         </div>
       </div>
     </main>

web/src/app/_features/GitHubNippouMain/SubmitButton.tsx

@@ -1,16 +1,14 @@
-// useFormStatusはClient Componentでしか動作しない
-'use client'
-
 import type { FC } from 'react'
-import { useFormStatus } from 'react-dom'
 
 import { Button } from '@/app/_components'
 
-export const SubmitButton: FC = () => {
-  const { pending } = useFormStatus()
+interface Props {
+  isLoading: boolean
+}
 
+export const SubmitButton: FC<Props> = ({ isLoading }) => {
   return (
-    <Button isLoading={pending} type="submit">
+    <Button isLoading={isLoading} type="submit">
       Run
     </Button>
   )

web/src/app/showList.ts web/src/app/api/nippou/route.tsweb/src/app/showList.ts renamed to web/src/app/api/nippou/route.ts

@@ -1,8 +1,9 @@
-'use server'
-
+import type { NextRequest } from 'next/server'
+import { NextResponse } from 'next/server'
 import { object, parse, regex, safeParse, string } from 'valibot'
 
-import { getServerSession } from './_auth/getServerSession'
+import { getServerSession } from '@/app/_auth/getServerSession'
+import type { NippouResult } from '@/app/types'
 
 const dateRegex = /^\d{4}-\d{2}-\d{2}$/
 const noHyphens = (str: string) => str.replace(/-/g, '')
@@ -19,27 +20,18 @@ const responseSchema = object({
   result: string(),
 })
 
-type Result =
-  | {
-      success: true
-      result: string
-    }
-  | {
-      success: false
-      error: string
-    }
-
-export const showList = async (_prevState: Result, formData: FormData): Promise<Result> => {
+export async function GET(req: NextRequest) {
+  const searchParams = req.nextUrl.searchParams
   const session = await getServerSession()
   const parsed = safeParse(paramsSchema, {
     user: session?.user.login,
     token: session?.user.accessToken,
-    settingsGistId: formData.get('settingsGistId'),
-    sinceDate: formData.get('sinceDate'),
-    untilDate: formData.get('untilDate'),
+    settingsGistId: searchParams.get('settingsGistId'),
+    sinceDate: searchParams.get('sinceDate'),
+    untilDate: searchParams.get('untilDate'),
   })
   if (!parsed.success) {
-    return { success: false, error: 'Invalid credentials' }
+    return NextResponse.json({ success: false, error: 'Invalid credentials' })
   }
   const { user, token, settingsGistId, sinceDate, untilDate } = parsed.output
 
@@ -50,11 +42,11 @@ export const showList = async (_prevState: Result, formData: FormData): Promise<
   url.searchParams.set('since_date', noHyphens(sinceDate))
   url.searchParams.set('until_date', noHyphens(untilDate))
 
-  return fetch(url)
+  const result: NippouResult = await fetch(url)
     .then(async (res) => {
       if (!res.ok) {
         const body = await res.text()
-        throw new Error(body)
+        return { success: false, error: body } as const
       }
 
       const { result } = parse(responseSchema, await res.json())
@@ -67,4 +59,6 @@ export const showList = async (_prevState: Result, formData: FormData): Promise<
       }
       return { success: false, error: 'An unexpected error has occurred' }
     })
+
+  return NextResponse.json(result)
 }

web/src/app/types.ts

@@ -0,0 +1,9 @@
+export type NippouResult =
+  | {
+      success: true
+      result: string
+    }
+  | {
+      success: false
+      error: string
+    }