From 26069fc030a991a304c127824e056acd343c6a94 Mon Sep 17 00:00:00 2001
From: alij <ali.josheghani2005@gmail.com>
Date: Wed, 3 Jul 2024 14:52:59 +0330
Subject: [PATCH] feat : add config id for url , like /configid/2 for view
 config by id

---
 src/layout/index.tsx         | 23 +++++++++++++++++++++--
 src/redux/slices/configId.ts | 23 +++++++++++++++++++++++
 src/redux/store.ts           |  4 ++++
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/redux/slices/configId.ts

diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 31ab02e..1fdc1e5 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -1,10 +1,29 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useParams } from "react-router-dom";
 import Header from "../components/header";
 import Footer from "../components/footer";
 import Particle from "../components/particle";
-import { Helmet } from 'react-helmet-async';
+import { Helmet } from "react-helmet-async";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+import { setConfigId } from "../redux/slices/configId";
 
 const Layout = () => {
+  const { configs } = useParams<{ configs: string }>();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (configs === "1" || configs === "2" || configs === "3")
+      dispatch(setConfigId(configs));
+    if (configs)
+      setTimeout(() => {
+        const element = document.getElementById("configs");
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth" });
+        } else {
+          console.error("Element with ID 'configs' not found");
+        }
+      }, 100); // Scroll to 100% of the page height
+  }, [configs]);
+
   return (
     <>
       <Helmet>
diff --git a/src/redux/slices/configId.ts b/src/redux/slices/configId.ts
new file mode 100644
index 0000000..05ee024
--- /dev/null
+++ b/src/redux/slices/configId.ts
@@ -0,0 +1,23 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface configIdState {
+  id: string;
+}
+
+const initialState: configIdState = {
+  id: "",
+};
+
+const configIdSlice = createSlice({
+  name: "configId",
+  initialState,
+  reducers: {
+    setConfigId: (state, action: PayloadAction<string>) => {
+      state.id = action.payload;
+    },
+  },
+});
+
+export const { setConfigId } = configIdSlice.actions;
+
+export default configIdSlice.reducer;
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 8b780aa..596e161 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -14,6 +14,8 @@ import {
   REGISTER,
 } from "redux-persist";
 import tokenReducer from "./slices/token";
+import configId from "./slices/configId";
+import categoryId from "./slices/categoryId";
 
 // Encryption settings
 const secretKey = "token-encrypt-api";
@@ -43,6 +45,8 @@ const persistedTokenReducer = persistReducer(persistConfigToken, tokenReducer);
 const store = configureStore({
   reducer: {
     token: persistedTokenReducer,
+    configIdState: configId,
+    categoryIdState: categoryId,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({