api call & redux basic setup

Author: joblessgod

package-lock.json

@@ -10,11 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.3",
     "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-loading-skeleton": "^3.4.0",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.22.3",
     "react-slick": "^0.30.2",
     "react-toastify": "^10.0.5",

package.json

@@ -4,11 +4,15 @@ import App from "./App";
 import "./index.css";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
-import 'react-loading-skeleton/dist/skeleton.css'
+import "react-loading-skeleton/dist/skeleton.css";
+import store from "./app/store";
+import { Provider } from "react-redux";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
     <ToastContainer
       theme="colored"
       closeOnClick

src/main.jsx

@@ -20,7 +20,7 @@ export default function Home() {
     pauseOnHover: true,
     initialSlide: 0,
     arrows: false,
-    dots:false,
+    dots: false,
     responsive: [
       {
         breakpoint: 1024,

src/pages/Home.jsx

@@ -1,8 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import BreadCrumb from "../components/BreadCrumb";
+import axios from "axios";
 
 export default function Login() {
+  const [formData, setFormData] = useState({
+    email: "[email protected]",
+    password: "password",
+  });
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    axios.post("https://ecommerce-sagartmg2.vercel.app/api/users/login", {
+      email: e.target.email.value,
+      password: e.target.password.value,
+    });
+  }
+
   return (
     <>
       {/* Top Div with text */}
@@ -26,32 +40,44 @@ export default function Login() {
             </p>
           </div>
 
-          <div className="space-y-4 ">
-            <input
-              className="h-[36px] w-full rounded-[2px] border border-gray-light pl-[13px] focus:shadow-[0px_6px_25px_0px_rgba(0,0,0,0.4)] focus:outline-none sm:h-[43px] md:h-[52px]"
-              type="email"
-              title="Add Valid Email Address"
-              placeholder="Email Address"
-            />
-            <input
-              className="h-[36px] w-full rounded-[2px] border border-gray-light pl-[13px] focus:shadow-[0px_6px_25px_0px_rgba(0,0,0,0.4)] focus:outline-none sm:h-[43px] md:h-[52px]"
-              type="password"
-              title="Make Stronge Password"
-              placeholder="Password"
-            />
-          </div>
+          <form onSubmit={handleSubmit}>
+            <div className="space-y-4 ">
+              <input
+                className="h-[36px] w-full rounded-[2px] border border-gray-light pl-[13px] focus:shadow-[0px_6px_25px_0px_rgba(0,0,0,0.4)] focus:outline-none sm:h-[43px] md:h-[52px]"
+                type="email"
+                name="email"
+                onChange={(e) => {
+                  setFormData(e.target.value);
+                }}
+                value={formData.email}
+                title="Add Valid Email Address"
+                placeholder="Email Address"
+              />
+              <input
+                className="h-[36px] w-full rounded-[2px] border border-gray-light pl-[13px] focus:shadow-[0px_6px_25px_0px_rgba(0,0,0,0.4)] focus:outline-none sm:h-[43px] md:h-[52px]"
+                type="password"
+                name="password"
+                onChange={(e) => {
+                  setFormData(e.target.value);
+                }}
+                value={formData.password}
+                title="Make Stronge Password"
+                placeholder="Password"
+              />
+            </div>
 
-          <a href="/forgetPassword" className="text-[#9096B2]">
-            Forget Your Password
-          </a>
+            <a href="/forgetPassword" className="text-[#9096B2]">
+              Forget Your Password
+            </a>
 
-          <div className="text-gray-light">
-            <input type="checkbox"></input> Stay logged in
-          </div>
+            <div className="text-gray-light">
+              <input type="checkbox"></input> Stay logged in
+            </div>
 
-          <button className="w-full rounded-[3px] bg-secondary py-[10px] text-white hover:bg-secondary-dark hover:shadow-[0px_3px_25px_0px_rgba(0,0,0,0.15)]">
-            Sign in
-          </button>
+            <button className="w-full rounded-[3px] bg-secondary py-[10px] text-white hover:bg-secondary-dark hover:shadow-[0px_3px_25px_0px_rgba(0,0,0,0.15)]">
+              Sign in
+            </button>
+          </form>
           <p className="text-gray-light">
             Don’t have an Account?
             <Link

src/pages/Login.jsx

@@ -9,7 +9,7 @@ export default function Signup() {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
 
-  const [formDara, setFormData] = useState({
+  const [formData, setFormData] = useState({
     name: "Sanchit",
     email: "[email protected]",
     password: "sassword",
@@ -29,7 +29,7 @@ export default function Signup() {
       .then((res) => {
         toast.success("Succesfully.");
         setIsLoading(false);
-        // navigate("/login");
+        navigate("/login");
       })
       .catch((err) => {
         console.log(err);
@@ -43,6 +43,7 @@ export default function Signup() {
       title={"Sign Up"}
       links={[
         {title: "Home", url:"/"},
+        {title: ". Pages", url:"/pages"},
         {title: ". Signup", url:"#"},
       ]}
       />
@@ -65,7 +66,7 @@ export default function Signup() {
                 onChange={(e) => {
                   setFormData(e.target.value);
                 }}
-                value={formDara.name}
+                value={formData.name}
                 type="text"
                 placeholder="Name"
                 required
@@ -76,7 +77,7 @@ export default function Signup() {
               <input
                 className="form-control"
                 name="email"
-                value={formDara.email}
+                value={formData.email}
                 type="email"
                 placeholder="Email Address"
                 required
@@ -87,7 +88,7 @@ export default function Signup() {
               <input
                 className="form-control"
                 name="password"
-                value={formDara.password}
+                value={formData.password}
                 type="password"
                 required
                 placeholder="Password"
@@ -99,7 +100,7 @@ export default function Signup() {
                 placeholder="Role"
                 className="form-control"
                 name="role"
-                value={formDara.role}
+                value={formData.role}
               >
                 <option value="">Select Role</option>
                 <option value="seller">seller</option>

src/pages/Signup.jsx

@@ -0,0 +1,28 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export const userSlice = createSlice({
+    name: 'user',
+    initialState: {
+        value: 0
+    },
+    reducers: {
+        increment: state => {
+            // Redux Toolkit allows us to write "mutating" logic in reducers. It
+            // doesn't actually mutate the state because it uses the Immer library,
+            // which detects changes to a "draft state" and produces a brand new
+            // immutable state based off those changes
+            state.value += 1
+        },
+        decrement: state => {
+            state.value -= 1
+        },
+        incrementByAmount: (state, action) => {
+            state.value += action.payload
+        } 
+    }
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = userSlice.actions
+
+export default userSlice.reducer