api seprate page done + redux toolkit implemented

package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.4",

src/Modules/Auth/Auth.jsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import styles from "../Modal/Modal.module.css";
 
-import api from "../../api";
+import api from "../../config";
 import { useSelector } from "react-redux";
 import Button from "../FormComponents/Button/Button";
 import Input from "../FormComponents/Input/Input";

src/config.js

@@ -0,0 +1,4 @@
+export const constants = {
+  // endpoint goes here
+  endPoint: "https://localhost",
+};

src/reducers/user.js

@@ -1,13 +1,61 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { loginAPI, signupAPI } from "../services/user";
+
+export const loginItem = createAsyncThunk(
+  "user/loginItem",
+  async (payload, thunkAPI) => {
+    let response = await loginAPI(payload);
+    console.log("res=", response);
+    if (response.isSuccessful === true) {
+      // all localstorage work goes here
+      return response.data;
+    } else thunkAPI.rejectWithValue("network call failed");
+  }
+);
+export const signupItem = createAsyncThunk(
+  "user/signupItem",
+  async (payload, thunkAPI) => {
+    let response = await signupAPI(payload);
+    console.log("res=", response);
+    if (response.isSuccessful === true) {
+      return response.data;
+    } else thunkAPI.rejectWithValue("network call failed");
+  }
+);
 
 export const userSlice = createSlice({
   name: "user",
-  initialState: { value: { name: "tarun", email: "", password: "" } },
+  initialState: { userInfo: [], loggedIn: false },
   reducers: {
-    login: (state, action) => {
-      state.value = action.payload;
+    logoutFunction: (state, action) => {
+      state.userInfo = "";
+      let updateConnector = false;
+      state.loggedIn = updateConnector;
+      // localStorage.removeItem("userdata");
+    },
+  },
+  extraReducers: {
+    [loginItem.fulfilled]: (state, action) => {
+      if (action.payload.token) {
+        state.userInfo = action.payload;
+        let updateConnector = true;
+        state.loggedIn = updateConnector;
+        localStorage.setItem("loggedIn", state.loggedIn);
+      } else {
+        state.loggedIn = false;
+      }
+    },
+    [signupItem.fulfilled]: (state, action) => {
+      if (action.payload.token) {
+        state.userInfo = action.payload;
+        let updateConnector = true;
+        state.loggedIn = updateConnector;
+        localStorage.setItem("loggedIn", state.loggedIn);
+      } else {
+        state.loggedIn = false;
+      }
     },
   },
 });
-
+export const { logoutFunction } = userSlice.actions;
 export default userSlice.reducer;

src/services/common.js

@@ -0,0 +1,60 @@
+import axios from "axios";
+import { constants } from "../config";
+
+export const api = constants.endPoint;
+
+export const error = (error) => {
+  return { status: "error", isSuccessful: false, message: error };
+};
+
+export const success = (data) => {
+  return { status: "success", isSuccessful: true, data: data };
+};
+
+export const getAuthHeaders = () => {
+  return { Authorization: "Bearer " + localStorage.getItem("token") };
+};
+
+export const get = async (url, headers) => {
+    try {
+        let response = await axios.get(url, { headers })
+        return success(response.data)
+    }
+    catch (e) {
+        console.log(e)
+        return error(e)
+    }
+}
+export const post = async (url, data, headers) => {
+    try {
+        console.log("this is url=",url);
+        let response = await axios.post(url, data, { headers })
+        return success(response.data)
+    }
+    catch (e) {
+        console.log(e)
+        return error(e)
+    }
+}
+
+export const update = async (url, data, headers) => {
+    try {
+        let response = await axios.put(url, data, { headers })
+        return success(response.data)
+    }
+    catch (e) {
+        console.log(e)
+        return error(e)
+    }
+}
+
+export const del = async (url, headers) => {
+    try {
+        let response = await axios.delete(url, { headers })
+        return success(response.data)
+    }
+    catch (e) {
+        console.log(e)
+        return error(e)
+    }
+}

src/services/user.js

@@ -0,0 +1,14 @@
+import { api, getAuthHeaders, get, post, update, del } from "./common";
+
+export const loginAPI = async (userlogin) => {
+  //path e.g.
+  let url = `${api}/user/login`;
+  let authHeader = getAuthHeaders();
+  return await post(url, userlogin, { ...authHeader });
+};
+export const signupAPI = async (userlogin) => {
+  //another path e.g.
+  let url = `${api}/user/signup`;
+  let authHeader = getAuthHeaders();
+  return await post(url, userlogin, { ...authHeader });
+};