set header for axios - set get api bank cards

src/components/forms/login-form.tsx

@@ -7,13 +7,12 @@ import { ErrorComponent } from "../common/error"
 import { yupResolver } from '@hookform/resolvers/yup'
 import { useMutation } from "@tanstack/react-query"
 import { loginMutation } from "../../services/api/auth"
-import { useAuthStore } from "../../store/auth-token"
 import { ButtonComponent } from "../common/button"
 import toast from "react-hot-toast"
 
 export const LoginForm = () => {
     const navigate = useNavigate()
-    const { setToken: setLoginToken } = useAuthStore()
+
     const { mutate, isPending } = useMutation({
         mutationFn: loginMutation
     })
@@ -30,7 +29,7 @@ export const LoginForm = () => {
             remember_me: true
         }, {
             onSuccess: (data: any) => {
-                setLoginToken(data?.data?.token)
+                window.localStorage.setItem("token", data?.data?.token)
                 toast.success("با موفقیت وارد شدین")
                 navigate("/")
             },

src/components/management-bank-accounts/index.tsx

@@ -1,18 +1,30 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { BankCartInterface } from "../../types"
 import { bankCarts } from "../../utility/cart"
 import { BankCart } from "./bank-cart"
 import { CreateNewCart } from "./create-new-cart"
 import { AddNewCardDialog } from "./add-new-cart-dialog"
 import { DeleteCardDialog } from "./delete-card"
+import { useQuery } from "@tanstack/react-query"
+import { getUserCardsList } from "../../services/api/bank-card"
 
 export const ManagementBankAccounts = () => {
+    const { data, isLoading } = useQuery({
+        queryKey: ["bank-card"],
+        queryFn: getUserCardsList
+    })
     const [showDialog, setShowDialog] = useState<boolean>(false)
     const handleCloseDialog = () => setShowDialog(false)
     const handleOpenDialog = () => setShowDialog(true)
     const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false)
     const handleOpenDeleteDialog = () => setShowDeleteDialog(true)
     const handleCloseDeleteDialog = () => setShowDeleteDialog(false)
+
+    useEffect(() => {
+        console.log("data =>", data)
+    }, [data])
+
+    if (isLoading) return <p>LOADING...</p>
     return (
         <>
             <div className="w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6">

src/services/api/bank-card.ts

@@ -0,0 +1,4 @@
+import { LoginFormInterface } from "../../types";
+import { axiosInstance } from "../axios";
+
+export const getUserCardsList = () => axiosInstance.get<LoginFormInterface>("/gps/bank-card")

src/services/axios.ts

@@ -1,7 +1,10 @@
 import axios, { AxiosRequestConfig } from "axios";
 
 const axiosParam: AxiosRequestConfig = {
-    baseURL: process.env.REACT_APP_API_Address
+    baseURL: process.env.REACT_APP_API_Address,
+    headers: {
+        Authorization: `Bearer ${window.localStorage.getItem("token")}`,
+    }
 }
 
 export const axiosInstance = axios.create(axiosParam)

src/store/auth-token.ts

@@ -1,11 +0,0 @@
-import create from 'zustand';
-
-interface AuthState {
-    token: string | null;
-    setToken: (token: string | null) => void;
-}
-
-export const useAuthStore = create<AuthState>((set) => ({
-    token: null,
-    setToken: (token) => set({ token }),
-}));

src/types/index.ts

@@ -2,7 +2,12 @@ import React from "react"
 
 export interface LoginFormInterface {
     username: string,
-    password: string
+    password: string,
+    remember_me?: boolean
+}
+
+export interface LoginResponseInterface {
+    token: string
 }
 
 export interface ResetPasswordInterface {
@@ -136,5 +141,5 @@ export interface SubscriptionReportInterface {
     renewal_type: string
     amount: string
     contribution: string,
-    percentage:string
+    percentage: string
 }