Cpmpleted register form 📗

frontend/src/pages/Register.jsx

@@ -1,7 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import { useMutation } from "react-query";
+import signupUserService from "../services/signupUserService";
+import InlineTextError from "../components/Errors/InlineTextError";
+import SpinnerLoader from "../components/Loaders/SpinnerLoader";
 
 function Register() {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const mutation = useMutation(signupUserService, {
+    onSuccess: (data) => {
+      console.log(data);
+      setUsername("");
+      setEmail("");
+      setPassword("");
+    },
+    onError: (error) => {
+      console.log(error);
+    },
+  });
+
+  
+
+  function handleSignup(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    mutation.mutate({
+      username,
+      email,
+      password,
+    });
+  }
+
   return (
     <div className=" flex justify-center h-screen bg-base-200 p-4">
       <div className="w-full max-w-md  rounded-lg ">
@@ -16,6 +48,8 @@ function Register() {
               <span className="label-text text-gray-200">Username</span>
             </label>
             <input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
               type="text"
               placeholder="Enter your username"
               className="input input-bordered w-full bg-gray-700 text-white focus:outline-none focus:ring focus:ring-primary"
@@ -30,6 +64,8 @@ function Register() {
             </label>
             <input
               type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
               placeholder="Enter your email"
               className="input input-bordered w-full bg-gray-700 text-white focus:outline-none focus:ring focus:ring-primary"
               required
@@ -43,17 +79,30 @@ function Register() {
             </label>
             <input
               type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
               placeholder="Enter your password"
               className="input input-bordered w-full bg-gray-700 text-white focus:outline-none focus:ring focus:ring-primary"
               required
             />
           </div>
 
+          {/* Error Message and Success Message */}
+          {mutation.isError && <InlineTextError mutation={mutation} />}
+          {mutation.isSuccess && (
+            <p className="text-green-500 text-sm md:text-base">
+              🎉 {mutation.data.message || "Process is successfull"}
+            </p>
+          )}
 
           {/* Submit Button */}
           <div>
-            <button type="submit" className="btn btn-primary w-full text-white mt-4">
-              Sign Up
+            <button
+              onClick={handleSignup}
+              type="submit"
+              className="btn btn-primary w-full text-white mt-4"
+            >
+              {mutation.isLoading ? <SpinnerLoader /> : "Sign Up"}
             </button>
           </div>
         </form>