add: auth functionality basics

src/app/auth/page.tsx

@@ -2,7 +2,6 @@
 
 import React, { useState, type FormEvent, type ChangeEvent, useEffect } from 'react'
 import { useAuthStore } from '@/zustand/userStore';
-import { loginUser } from '@/features/auth/actions/loginUser';
 import { redirect } from 'next/navigation';
 import StepEnterPassword from '@/features/auth/components/StepEnterPassword';
 import StepEnterNumber from '@/features/auth/components/StepEnterNumber';
@@ -10,8 +9,9 @@ import StepEnterOtp from '@/features/auth/components/StepEnterOtp';
 import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums';
 import { useCountdown } from '@/hooks/useCountdown';
 import StepNewPassword from '@/features/auth/components/StepNewPassword';
-import { validatePhoneNumber } from '@/features/auth/actions/validatePhoneNumber';
-import { signupUser } from '@/features/auth/actions/signupUser';
+import { useLogin } from '@/hooks/auth/useLogin';
+import { useSignup } from '@/hooks/auth/useSignup';
+import { useCheckUserExistsLazy } from '@/hooks/auth/useCheckUserExists';
 
 type Props = object
 
@@ -27,6 +27,11 @@ function AuthIndex({ }: Props) {
     const { timerRunning, secondsLeft, restart, stop } = useCountdown(step === AUTH_STEP.ENTER_OTP);
 
     const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
+    const loginMutation = useLogin()
+    const signupMutation = useSignup()
+    const checkUserExistsMuation = useCheckUserExistsLazy()
+
+
 
     useEffect(() => {
         if (isAuthenticated) {
@@ -34,6 +39,12 @@ function AuthIndex({ }: Props) {
         }
     }, [isAuthenticated])
 
+    useEffect(() => {
+        if (step === AUTH_STEP.ENTER_OTP) {
+            console.log("REQUEST OTP")
+        }
+    }, [step]);
+
     const onChange = (e: ChangeEvent<HTMLInputElement>) => {
         if (e.target.name == AUTH_PAGE_ELEMENT.INPUT_PHONE) {
             setNumber(() => e.target.value)
@@ -79,38 +90,43 @@ function AuthIndex({ }: Props) {
     const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (step == AUTH_STEP.ENTER_NUMBER) {
-            if (await validatePhoneNumber(number)) {
+
+            if (await checkUserExistsMuation.run(number)) {
                 setStep(AUTH_STEP.ENTER_PASSWORD)
             } else {
                 setStep(AUTH_STEP.ENTER_OTP);
             }
         }
         else if (step == AUTH_STEP.ENTER_PASSWORD) {
-            if (await loginUser(number, password)) {
+            try {
+                await loginMutation.mutateAsync({ phone: number, password })
                 console.log("Logged in")
             }
-            else {
-                console.log("Wrong credentials")
+            catch (e) {
+                console.log("Wrong credentials: ", e)
             }
         }
         else if (step == AUTH_STEP.ENTER_OTP) {
             stop();
-            if (await validatePhoneNumber(number)) {
-                setStep(AUTH_STEP.ENTER_RESET_PASSWORD)
-            } else {
-                setStep(AUTH_STEP.ENTER_NEW_PASSWORD)
-            }
+            setStep(AUTH_STEP.ENTER_NEW_PASSWORD)
+            // if (await validatePhoneNumber(number)) {
+            //     setStep(AUTH_STEP.ENTER_RESET_PASSWORD)
+            // } else {
+            //     setStep(AUTH_STEP.ENTER_NEW_PASSWORD)
+            // }
         }
         else if (step == AUTH_STEP.ENTER_RESET_PASSWORD) {
             console.log("Password changed")
             setStep(AUTH_STEP.ENTER_NUMBER)
         }
         else if (step == AUTH_STEP.ENTER_NEW_PASSWORD) {
-            if (await signupUser(number, password)) {
+            try {
+                await signupMutation.mutateAsync({ phone: number, password })
                 console.log("Signed up")
                 redirect("/")
-            } else {
-                console.log("Could not signup")
+            }
+            catch (e) {
+                console.log("Could not signup: ", e)
             }
         }
     }

src/app/page.tsx

@@ -1,11 +1,18 @@
+'use client';
+
+import { useAuthStore } from "@/zustand/userStore";
 import Image from "next/image";
 import Link from "next/link";
 
 export default function Home() {
+
+  const logout = useAuthStore((state) => state.logout);
+
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <div className="grid font-sans grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
         <Link href={"/auth"}>Login</Link>
+        <Link href={"/"} onClick={logout}>Logout</Link>
         <Image
           className="dark:invert"
           src="/next.svg"