Cpmpleted register form 📗

frontend/src/App.jsx

@@ -9,21 +9,27 @@ import Dashboard from "./pages/Dashboard";
 import Bookmark from "./pages/Bookmark";
 import VotingPage from "./pages/VotingPage";
 import CreatePollForm from "./pages/CreatePollForm";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 function App() {
+
+  const queryClient = new QueryClient();
+
   return (
+    <QueryClientProvider client={queryClient}>
     <BrowserRouter>
-    <Header/>
+      <Header />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/login" element={<LoginPage/>} />
-        <Route path="/register" element={<Register/>} />
-        <Route path="dashboard" element={<Dashboard/>} />
-        <Route path="bookmark" element={<Bookmark/>} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<Register />} />
+        <Route path="dashboard" element={<Dashboard />} />
+        <Route path="bookmark" element={<Bookmark />} />
         <Route path="/voting/:pollId" element={<VotingPage />} />
-        <Route path="/create" element={<CreatePollForm />} /> 
+        <Route path="/create" element={<CreatePollForm />} />
       </Routes>
     </BrowserRouter>
+    </QueryClientProvider>
   );
 }
 

frontend/src/components/Errors/InlineTextError.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function InlineTextError({mutation}) {
+  return (
+     <p className="text-red-500 text-sm md:text-base">
+              😵 {mutation?.error?.response?.data?.errors?.[0]?.message || mutation?.error?.response?.data?.message || "An unexpected error occurred"}
+            </p>
+  )
+}
+
+export default InlineTextError

frontend/src/components/Header/Header.jsx

@@ -6,7 +6,7 @@ function Header() {
   return (
     <div className="navbar bg-base-100">
   <div className="flex-1">
-    <Link to={"/"}><a className="btn btn-ghost text-xl">LivePoll</a></Link>
+  <Link to={"/"} className="btn btn-ghost text-xl">LivePoll</Link>
   </div>
   <div className="flex-none">
     <ul className="menu menu-horizontal px-1">
@@ -27,10 +27,10 @@ function Header() {
         tabIndex={0}
         className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
         <li>
-          <Link to={'/dashboard'}><a className="justify-between" >
+          <Link to={'/dashboard'} className="justify-between" >
             Profile
             <span className="badge">New</span>
-          </a></Link>
+          </Link>
         </li>
         <li><a>Logout</a></li>
       </ul>

frontend/src/components/Loaders/SpinnerLoader.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function SpinnerLoader({size = "sm"}) {
+  return (
+    <span className={`loading loading-spinner loading-${size}`}></span>
+  )
+}
+
+export default SpinnerLoader

frontend/src/helper/axiosInstance.js

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const axiosInstance = axios.create({
+  baseURL: "http://localhost:3000/api/v1",
+});
+
+export default axiosInstance;

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>

frontend/src/services/signupUserService.js

@@ -0,0 +1,8 @@
+import axiosInstance from "../helper/axiosInstance"
+
+async function signupUserService(data) {
+  const response = await axiosInstance.post("/user/signup", data);
+  return response.data;
+}
+
+export default signupUserService