Merge pull request #46 from FacundoInza/feature/login-connection

signup conection with error handling

components/ui/forms/ SignupForm.tsx

@@ -13,22 +13,30 @@ import {
 import Link from 'next/link';
 import { SignupFormDataToSend, SignupInputs } from '../../../interfaces';
 import { ProfilePhotoEditor } from './ProfilePhotoEditor';
+import dotenv from 'dotenv';
+import axios, { AxiosError } from 'axios';
+import Notification from '../modal/Notification';
+
+dotenv.config();
+
+interface ErrorResponse {
+    message: string;
+}
 
 async function signUp(values: SignupFormDataToSend) {
-    const res = await fetch('http://localhost:5000/api/user', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(values),
-    });
+    const apiURL = `${process.env.NEXT_PUBLIC_BASE_URL}/api/user/signup`;
 
-    if (!res.ok) {
-        // This will activate the closest `error.js` Error Boundary
-        throw new Error('Failed to fetch data');
+    try {
+        const response = await axios.post(apiURL, values);
+        return response.data;
+    } catch (error) {
+        const axiosError = error as AxiosError<ErrorResponse>;
+        if (axiosError && axiosError.response) {
+            throw new Error(axiosError.response.data.message);
+        } else {
+            throw new Error('An error occurred while signing up');
+        }
     }
-
-    return res.json();
 }
 
 export const SignupForm: FC = () => {
@@ -42,20 +50,31 @@ export const SignupForm: FC = () => {
     const [showPassword, setShowPassword] = useState(false);
     const [showRepeatPassword, setShowRepeatPassword] = useState(false);
     const [profileImage, setProfileImage] = useState<string | null>(null);
+    const [showModal, setShowModal] = useState(false);
+    const [modalMessage, setModalMessage] = useState('');
+    const [isModalSuccess, setIsModalSuccess] = useState(true);
 
     const onSubmit = async (data: SignupInputs) => {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { repeatPassword, ...rest } = data;
-        const dataToSend: SignupFormDataToSend = {
-            ...rest,
-            picture: profileImage,
-        };
-        const response = await signUp(dataToSend);
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { repeatPassword, ...rest } = data;
+            const dataToSend: SignupFormDataToSend = {
+                ...rest,
+                picture: profileImage,
+            };
+            const response = await signUp(dataToSend);
+            setModalMessage(response);
+            setIsModalSuccess(true);
+            setShowModal(true);
+        } catch (error) {
+            setModalMessage((error as Error).message);
+            setIsModalSuccess(false);
+            setShowModal(true);
+        }
+    };
 
-        // const response = await POST({
-        //     body: dataToSend,
-        // });
-        console.log('Response------>', response.status);
+    const handleCloseModal = () => {
+        setShowModal(false);
     };
 
     const password = useRef({});
@@ -268,6 +287,13 @@ export const SignupForm: FC = () => {
                     </Link>
                 </div>
             </div>
+            {showModal && (
+                <Notification
+                    isSuccess={isModalSuccess}
+                    message={modalMessage}
+                    onClose={handleCloseModal}
+                />
+            )}
         </>
     );
 };

components/ui/modal/Notification.tsx

@@ -0,0 +1,58 @@
+import Link from 'next/link';
+import React from 'react';
+import { TbFaceIdError } from 'react-icons/tb';
+
+interface ModalProps {
+    isSuccess: boolean;
+    message: string;
+    onClose: () => void;
+}
+
+const Notification: React.FC<ModalProps> = ({
+    isSuccess,
+    message,
+    onClose,
+}) => {
+    return (
+        <div className='fixed inset-0 flex items-center justify-center z-50 backdrop-blur-sm'>
+            <div className='bg-white mx-3 p-4 md:p-8 w-full sm:w-3/4 lg:w-1/2 xl:w-1/3 rounded-lg shadow-2xl'>
+                {isSuccess ? (
+                    <div className='flex flex-col items-center justify-center'>
+                        <div className='flex items-center justify-center mb-4 md:mb-16'>
+                            <span className='text-green-400 text-4xl md:text-6xl'>
+                                ✓
+                            </span>
+                            <h3 className='font-bold text-green-400 ml-4 text-center text-xl md:text-2xl'>
+                                {message}
+                            </h3>
+                        </div>
+                        <Link className='w-2/3' href='/'>
+                            <button className='bg-green-400 text-white font-bold text-sm md:text-lg px-4 py-2 md:py-3 rounded-full w-full hover:bg-green-500'>
+                                Login
+                            </button>
+                        </Link>
+                    </div>
+                ) : (
+                    <div className='flex flex-col items-center justify-center'>
+                        <div className='flex items-center justify-center mb-4 md:mb-16'>
+                            <span className='text-red-400 text-4xl md:text-6xl'>
+                                <TbFaceIdError />
+                            </span>
+                            <h3 className='font-bold text-red-400 ml-4 text-center text-sm md:text-lg'>
+                                {message}
+                            </h3>
+                        </div>
+                        <button
+                            onClick={onClose}
+                            className='bg-red-400 text-white text-sm md:text-lg px-4 py-2 md:py-3 rounded-full w-2/3 hover:bg-red-500'
+                        >
+                            Retry
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Notification;

package.json

@@ -18,6 +18,7 @@
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
+    "axios": "^1.5.0",
     "classnames": "^2.3.2",
     "dotenv": "^16.3.1",
     "next": "13.4.10",