feat : add react-query and formik

src/App.tsx

@@ -1,4 +1,9 @@
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from "react-router-dom";
 import Layout from "./layout";
 import PrivateRoute from "./routes/PrivateRoute";
 import Shop from "./pages/shop";
@@ -9,10 +14,17 @@ import ProgressBar from "./common/ProgressBar";
 import AuthLayout from "./layout/AuthLayout";
 import Login from "./pages/login";
 import Profile from "./pages/profile";
+import { Toaster } from "react-hot-toast";
+import { isAuthenticated } from "./utils/auth";
 
 const App = () => {
   return (
     <Router basename="/">
+      <Toaster
+        toastOptions={{
+          className: "!bg-gray-800 !text-secondTheme !overflow-hidden",
+        }}
+      />
       <ProgressBar />
       <Routes>
         <Route path="/" element={<Layout />}>
@@ -24,7 +36,16 @@ const App = () => {
             <Route index element={<Profile />} />
           </Route>
         </Route>
-        <Route path="login" element={<AuthLayout />} >
+        <Route
+          path="login"
+          element={
+            isAuthenticated() ? (
+              <Navigate to="/" replace={true} />
+            ) : (
+              <AuthLayout />
+            )
+          }
+        >
           <Route index element={<Login />} />
         </Route>
       </Routes>

src/main.tsx

@@ -1,10 +1,28 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import App from "./App";
 import "./index.css";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
+import store, { persistor } from "./redux/store";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
+export const queryClient = new QueryClient();
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <PersistGate
+        loading={
+          <div className="w-full h-full flex justify-center items-center">
+            <p>درحال بارگذاری...</p>
+          </div>
+        }
+        persistor={persistor}
+      >
+        <QueryClientProvider client={queryClient}>
+          <App />
+        </QueryClientProvider>
+      </PersistGate>
+    </Provider>
   </React.StrictMode>
 );