chore: added types in formState

apps/consent/app/components/button/primary-button-component.tsx

@@ -1,9 +1,7 @@
 "use client"
 import React, { ButtonHTMLAttributes } from "react"
-/* eslint @typescript-eslint/ban-ts-comment: "off" */
-// ts-ignore because experimental_useFormStatus is not in the types
-// @ts-ignore-next-line error
-import { experimental_useFormStatus as useFormStatus } from "react-dom"
+
+import { useFormStatus } from "react-dom"
 
 import Loader from "../loader"
 

apps/consent/app/components/button/secondary-button-component.tsx

@@ -1,9 +1,7 @@
 "use client"
 import React, { ButtonHTMLAttributes } from "react"
-// ts-ignore because experimental_useFormStatus is not in the types
-/* eslint @typescript-eslint/ban-ts-comment: "off" */
-// @ts-ignore-next-line error
-import { experimental_useFormStatus as useFormStatus } from "react-dom"
+
+import { useFormStatus } from "react-dom"
 
 interface SecondaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   label?: string

apps/consent/app/components/phone-auth/index.tsx

@@ -42,7 +42,6 @@ const PhoneAuth = async ({ login_challenge, authAction }: PhoneAuth) => {
   }
 
   const countryCodes = countries.map((country) => country.id)
-  console.log("=========", countryCodes)
 
   const subHeadingMessage =
     authAction === "Register"

apps/consent/app/components/phone-auth/phone-auth-form.tsx

@@ -37,6 +37,7 @@ import { GetCaptchaChallengeResponse } from "@/app/types/phone-auth.types"
 interface AuthFormProps {
   authAction: "Register" | "Login"
   login_challenge: string
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   countryCodes: any
 }
 
@@ -61,7 +62,6 @@ const PhoneAuthForm: React.FC<AuthFormProps> = ({
   authAction,
 }) => {
   const [phoneNumber, setPhoneNumber] = useState<string>("")
-  //TODO useFormState is not giving type suggestions/errors i.e: not typed
   const [state, formAction] = useFormState<GetCaptchaChallengeResponse, FormData>(
     getCaptchaChallenge,
     initialState,

apps/consent/app/login/email-login-form.tsx

@@ -1,8 +1,7 @@
 "use client"
 import React from "react"
-/* eslint @typescript-eslint/ban-ts-comment: "off" */
-// @ts-ignore-next-line error
-import { experimental_useFormState as useFormState } from "react-dom"
+
+import { useFormState } from "react-dom"
 import Link from "next/link"
 import { toast } from "react-toastify"
 
@@ -16,20 +15,22 @@ import RegisterLink from "../components/register-link"
 import { SubmitValue } from "../types/index.types"
 
 import { submitForm } from "./email-login-server-action"
+import { LoginEmailResponse } from "./email-login.types"
 
 interface LoginProps {
   login_challenge: string
 }
 
 const EmailLoginForm = ({ login_challenge }: LoginProps) => {
-  const [state, formAction] = useFormState(submitForm, {
-    error: null,
+  const [state, formAction] = useFormState<LoginEmailResponse, FormData>(submitForm, {
+    error: false,
     message: null,
+    responsePayload: null,
   })
 
   if (state.error) {
     toast.error(state.message)
-    state.error = null
+    state.error = false
   }
 
   return (

apps/consent/app/login/email-login-server-action.ts

@@ -11,9 +11,9 @@ import authApi from "@/services/galoy-auth"
 import { handleAxiosError } from "@/app/error-handler"
 
 export async function submitForm(
-  _prevState: unknown,
+  _prevState: LoginEmailResponse,
   formData: FormData,
-): Promise<LoginEmailResponse | void> {
+): Promise<LoginEmailResponse> {
   const headersList = headers()
   const customHeaders = {
     "x-real-ip": headersList.get("x-real-ip"),

apps/consent/app/login/verification/form.tsx

@@ -1,15 +1,15 @@
 "use client"
 import React from "react"
-/* eslint @typescript-eslint/ban-ts-comment: "off" */
-// @ts-ignore-next-line error
-import { experimental_useFormState as useFormState } from "react-dom"
+
+import { useFormState } from "react-dom"
 
 import { toast } from "react-toastify"
 
 import TwoFaVerificationForm from "../../components/varification-components/two-fa-verification-code-form"
 import VerificationCodeForm from "../../components/varification-components/verification-code-form"
 
 import { submitFormTotp, submitForm } from "./server-actions"
+import { VerificationCodeResponse, VerificationTotpResponse } from "./verification.types"
 
 interface VerificationFormProps {
   login_challenge: string
@@ -26,17 +26,24 @@ const VerificationForm: React.FC<VerificationFormProps> = ({
   loginType,
   value,
 }) => {
-  const [stateVerificationCode, formActionVerificationCode] = useFormState(submitForm, {
-    totpRequired: false,
-    message: null,
-    authToken: null,
-  })
-
-  const [stateTwoFA, formActionTwoFA] = useFormState(submitFormTotp, {
+  const [stateVerificationCode, formActionVerificationCode] = useFormState<
+    VerificationCodeResponse,
+    FormData
+  >(submitForm, {
     error: false,
     message: null,
+    responsePayload: null,
   })
 
+  const [stateTwoFA, formActionTwoFA] = useFormState<VerificationTotpResponse, FormData>(
+    submitFormTotp,
+    {
+      error: false,
+      message: null,
+      responsePayload: null,
+    },
+  )
+
   if (stateVerificationCode.error) {
     toast.error(stateVerificationCode.message)
     stateVerificationCode.message = null
@@ -49,11 +56,12 @@ const VerificationForm: React.FC<VerificationFormProps> = ({
 
   return (
     <>
-      {stateVerificationCode.totpRequired ? (
+      {stateVerificationCode?.responsePayload?.totpRequired &&
+      stateVerificationCode?.responsePayload?.authToken ? (
         <TwoFaVerificationForm
           formActionTwoFA={formActionTwoFA}
           login_challenge={login_challenge}
-          authToken={stateVerificationCode.authToken}
+          authToken={stateVerificationCode.responsePayload.authToken}
         />
       ) : (
         <VerificationCodeForm

apps/consent/app/login/verification/server-actions.ts

@@ -3,13 +3,19 @@ import { headers } from "next/headers"
 
 import { redirect } from "next/navigation"
 
+import { VerificationCodeResponse, VerificationTotpResponse } from "./verification.types"
+
 import { handleAxiosError } from "@/app/error-handler"
 import { getUserId } from "@/app/graphql/queries/me-query"
 import { LoginType } from "@/app/types/index.types"
 import authApi from "@/services/galoy-auth"
+
 import { hydraClient } from "@/services/hydra"
 
-export const submitFormTotp = async (_prevState: unknown, form: FormData) => {
+export const submitFormTotp = async (
+  _prevState: VerificationTotpResponse,
+  form: FormData,
+): Promise<VerificationTotpResponse> => {
   const headersList = headers()
   const customHeaders = {
     "x-real-ip": headersList.get("x-real-ip"),
@@ -61,7 +67,10 @@ export const submitFormTotp = async (_prevState: unknown, form: FormData) => {
   redirect(response2.data.redirect_to)
 }
 
-export const submitForm = async (_prevState: unknown, form: FormData) => {
+export const submitForm = async (
+  _prevState: VerificationCodeResponse,
+  form: FormData,
+): Promise<VerificationCodeResponse> => {
   const headersList = headers()
   const customHeaders = {
     "x-real-ip": headersList.get("x-real-ip"),
@@ -122,15 +131,18 @@ export const submitForm = async (_prevState: unknown, form: FormData) => {
     return {
       error: true,
       message: "Invalid code",
+      responsePayload: null,
     }
   }
 
   if (totpRequired) {
     return {
       error: false,
       message: "2FA required",
-      totpRequired: true,
-      authToken,
+      responsePayload: {
+        totpRequired: true,
+        authToken,
+      },
     }
   }
 

apps/consent/app/login/verification/verification.types.ts

@@ -0,0 +1,13 @@
+import { ServerActionResponse } from "../../types/index.types"
+
+interface VerificationCodeBody {
+  totpRequired: boolean
+  authToken: string | null
+}
+
+export interface VerificationCodeResponse
+  extends ServerActionResponse<VerificationCodeBody | null> {}
+
+type VerificationTotpBody = null
+export interface VerificationTotpResponse
+  extends ServerActionResponse<VerificationTotpBody> {}

apps/consent/next.config.js

@@ -2,7 +2,6 @@
 
 module.exports = {
   experimental: {
-    serverActions: true,
     outputFileTracingRoot: require("path").join(__dirname, "../../"),
     instrumentationHook: true,
   },