fix(Axios & Layout): add Shop-ID header to Axios instance and navigate to home on shop ID set

src/hooks/useAxios.ts

@@ -10,6 +10,11 @@ const useAxios = () => {
   const instance = axios.create({
     baseURL: "https://api.persain-game.com/api/v1",
     maxBodyLength: Infinity,
+    ...(sessionStorage.getItem("shop_id") && {
+      headers: {
+        "Shop-ID": sessionStorage.getItem("shop_id"),
+      },
+    }),
   });
 
   instance.interceptors.request.use(

src/layout/index.tsx

@@ -1,4 +1,4 @@
-import { Outlet, useParams } from "react-router-dom";
+import { Outlet, useNavigate, useParams } from "react-router-dom";
 import Header from "../components/header";
 import Footer from "../components/footer";
 import Particle from "../components/particle";
@@ -11,7 +11,7 @@ import { setShopId } from "../redux/slices/shop-id";
 
 const Layout = () => {
   const { configs } = useParams<{ configs: string }>();
-
+  const navigate = useNavigate();
   const shopId = new URLSearchParams(window.location.search).get("shop_id");
 
   const dispatch = useDispatch();
@@ -33,6 +33,7 @@ const Layout = () => {
   useEffect(() => {
     if (shopId) {
       dispatch(setShopId(shopId));
+      navigate("/");
     }
   }, [shopId, dispatch]);
 

src/redux/slices/shop-id.ts

@@ -17,6 +17,7 @@ const shopIdSlice = createSlice({
   reducers: {
     setShopId: (state, action: PayloadAction<string>) => {
       state.shop_id = action.payload;
+      sessionStorage.setItem("shop_id", action.payload);
     },
   },
 });