Separated SignUp in page and component

src/components/SignUpForm/SignUpForm.tsx

@@ -11,6 +11,9 @@ import {
 	FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { signUp } from '@/lib/auth';
 
 const formSchema = z.object({
 	email: z.string().email({
@@ -27,9 +30,16 @@ const formSchema = z.object({
 	}),
 });
 
-const apiUrl = import.meta.env.VITE_API_URL;
+//const apiUrl = import.meta.env.VITE_API_URL;
+interface SignUpFormProps {
+    onSignUpSuccess: () => void;
+}
+
+export function SignUpForm({ onSignUpSuccess }: SignUpFormProps) {
+	const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const navigate = useNavigate();
 
-export function SignUpForm() {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
@@ -42,26 +52,19 @@ export function SignUpForm() {
 
 	async function onSubmit(values: z.infer<typeof formSchema>) {
 		console.log('Request Data:', values);
+		setIsLoading(true);
+        setError(null);
 		try {
-			const response = await fetch(`${apiUrl}users`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-					accept: 'application/json',
-				},
-				body: JSON.stringify(values),
-			});
-
-			if (!response.ok) {
-				throw Error(`HTTP error ${response.status}`);
-			}
-			// Parse the response data if needed
-			const data = await response.json();
-			console.log('Success:', data);
-		} catch (error) {
-			console.error('Error on sign up:', error);
-		}
-	}
+            await signUp(values.email, values.password);
+            onSignUpSuccess();
+            navigate('/login');
+        } catch (err) {
+            setError('Sign-up failed. Please try again.');
+            console.error('Sign-up error:', err);
+        } finally {
+            setIsLoading(false);
+        }
+    }
 
 	return (
 		<>

src/pages/SignUp/SignUp.tsx

@@ -1,27 +1,15 @@
 import React, { useState } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
-import { signUp } from '@/lib/auth';
+import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+import { SignUpForm } from '@/components/SignUpForm/SignUpForm';
+//import { Input } from '@/components/ui/input';
 
 function SignUp() {
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
-    const navigate = useNavigate();
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError('');
-        try {
-            await signUp(email, password);
-            // Redirect to login page or dashboard after successful sign-up
-            navigate('/login');
-        } catch (err) {
-            setError('Sign-up failed. Please try again.');
-            console.error('Sign-up error:', err);
-        }
-    };
+
+  const handleSignUpSuccess = () => {
+    // You can add any additional logic here that needs to run after successful sign-up
+    console.log('Sign-up successful');
+};
 
     return (
         <div className="container mx-auto min-h-screen flex items-center justify-center">
@@ -34,34 +22,7 @@ function SignUp() {
                         Please fill out the details below to create an account
                     </p>
                 </div>
-                <form onSubmit={handleSubmit} className="space-y-4">
-                    {error && (
-                        <div className="text-red-500 text-center">{error}</div>
-                    )}
-                    <div>
-                        <Input
-                            type="email"
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            placeholder="Email"
-                            required
-                            className="w-full"
-                        />
-                    </div>
-                    <div>
-                        <Input
-                            type="password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            placeholder="Password"
-                            required
-                            className="w-full"
-                        />
-                    </div>
-                    <Button type="submit" className="w-full">
-                        Sign Up
-                    </Button>
-                </form>
+                <SignUpForm onSignUpSuccess={handleSignUpSuccess} />
                 <p className="text-center">
                     I already have an account.{' '}
                     <Button variant={'link'} className="px-0 text-base">