Merge pull request #66 from iranpsc/fix/url

refactor: migrate modals, tabs, and nested tabs to URL-based navigation

Author: theAwmin

src/components/Education/Header.jsx

@@ -1,15 +1,11 @@
 import { IoIosClose } from "react-icons/io";
 import { TbMinimize } from "react-icons/tb";
 import styled from "styled-components";
-import { getFieldTranslationByNames } from "../../services/Utility";
 import { ExitIcon } from "../Icons/IconsHeader";
-import {
-  getTitleTranslation,
-  getTitleFromHref,
-  translateLocationPage,
-} from "../../services/TitleManager";
 import { useLocation } from "react-router-dom";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+import getModalHeaderFromPrevious from "../../services/TitleManager";
+
 const Div = styled.div`
   position: relative;
   display: flex;
@@ -23,10 +19,10 @@ const Div = styled.div`
     cursor: pointer;
   }
 `;
+
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
-
   width: 100%;
   justify-content: space-between;
 
@@ -47,7 +43,6 @@ const Text = styled.h2`
 const Icons = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 10px;
   svg {
     color: ${(props) => props.theme.colors.newColors.otherColors.iconText};
@@ -63,30 +58,29 @@ const Icons = styled.div`
 
 const Header = ({ show, setOpenEducation, setSize }) => {
   const location = useLocation();
-  const lastPart = getTitleFromHref(location.pathname);
+  const [title, setTitle] = useState("");
 
-  const [title, setTitle] = useState(getFieldTranslationByNames("1455"));
   useEffect(() => {
-    const translated = translateLocationPage(location.state?.locationPage);
+    const basePath = location.state?.from || location.pathname;
 
-    if (translated) {
-      setTitle(translated);
-    } else {
-      setTitle(getTitleTranslation(lastPart));
-    }
-  }, [location.state?.locationPage, lastPart]);
+    const { title } = getModalHeaderFromPrevious(basePath);
+
+    setTitle(title);
+  }, [location.pathname, location.state]);
 
-  const handleMinimizeClick = (event) => {
-    event.stopPropagation();
+  const handleMinimizeClick = (e) => {
+    e.stopPropagation();
     setSize(true);
   };
 
-  const handleCloseClick = (event) => {
+  const handleCloseClick = () => {
     setOpenEducation(false);
   };
+
   return (
     <HeaderWrapper show={show}>
       <Text>{title}</Text>
+
       <Icons>
         <Div onClick={handleMinimizeClick}>
           <TbMinimize style={{ color: "#949494" }} />

src/components/Header/Header.jsx

@@ -6,7 +6,7 @@ import { ExitIcon } from "../Icons/IconsHeader";
 import { BiExitFullscreen } from "react-icons/bi";
 import { PiGearSixFill } from "react-icons/pi";
 import { TiWarning } from "react-icons/ti";
-import Education from "../../components/Education/Education" ;
+import Education from "../../components/Education/Education";
 import useAdviserData from "../../services/Hooks/useAdviserData";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSelectedEnvironment } from "../../services/reducers/SelectedEnvironmentContext";
@@ -38,7 +38,6 @@ const ReportIcon = styled(Report)`
   cursor: pointer;
 `;
 
-
 const IconWrapper = styled.div`
   width: 11px;
   height: 11px;
@@ -72,9 +71,9 @@ const HeaderWrapper = styled.div`
     margin-bottom: 30px;
     margin-top: 10px;
   }
-  
+
   @media (max-height: 500px) and (max-width: 1000px) {
-  padding-bottom: 5px;
+    padding-bottom: 5px;
   }
 `;
 
@@ -135,16 +134,20 @@ const Header = ({
   const newStr = location.pathname.replace(/\/metaverse\//g, "") + "-";
   const locationPage = location?.state?.locationPage;
   const adviserData = useAdviserData(newStr, locationPage);
+
   const handleReportClick = () => {
-    navigation("/metaverse/report", {
+    navigation("/metaverse/report/send", {
       state: {
-        href: window.location.href.split("/").slice(3).join("/"),
+        from: location.pathname,
       },
     });
   };
+
   const handleExitClick = () => {
     if (handleExit) {
-      navigation("/metaverse/")
+      navigation(location.state?.background?.pathname || "/metaverse", {
+        replace: true,
+      });
       handleExit();
       return;
     }

src/components/ModalPosition/Styles.jsx

@@ -24,9 +24,15 @@ export const Container = styled(animated.div)`
   bottom: 0;
   padding: 15px 20px;
   z-index: 10;
-  ${(props) => (props.isPersian ? "left: 0;" : "right: 0;")}
+  ${(props) => (props.isPersian ? "left: 184px;" : "right: 184px;")}
   position: fixed;
   height: 100%;
+  @media screen and (max-width: 1024px) {
+    ${(props) => (props.isPersian ? "left: 167px;" : "right: 167px;")}
+  }
+  @media screen and (max-width: 834px) {
+    ${(props) => (props.isPersian ? "left: 19%;" : "right: 19%;")}
+  }
 `;
 
 export const ContainerIcon = styled.div`

src/components/SidebarOptions.jsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { getFieldTranslationByNames } from "../services/Utility";
-
+import { NavLink } from "react-router-dom";
+import { Label } from "./sidbar";
 const Wrapper = styled.div`
   max-width: 171px !important;
   background-color: ${(props) =>
@@ -11,36 +12,27 @@ const Wrapper = styled.div`
   margin-top: 20px;
 `;
 
-const Option = styled.h2`
-  font-weight: 500;
-  font-size: 18px;
-  padding: 10px 20px;
-  white-space: nowrap;
-  cursor: pointer;
-  color: ${(props) =>
-    props.option
-      ? props.theme.colors.primary
-      : props.theme.colors.newColors.shades.title};
-  border-right: ${(props) =>
-    props.option
-      ? `2px solid ${(props) =>
-          props.theme.colors.newColors.otherColors.inputBorder}`
-      : "2px solid transparent"};
-`;
-
-const SidebarOptions = ({ option, setOption, seller }) => {
+const SidebarOptions = ({ seller }) => {
   return (
     <Wrapper>
-      <Option option={option === true} onClick={() => setOption(true)}>
-        {seller
-          ? getFieldTranslationByNames("517")
-          : getFieldTranslationByNames("524")}
-      </Option>
-      <Option option={option === false} onClick={() => setOption(false)}>
-        {seller
-          ? getFieldTranslationByNames("519")
-          : getFieldTranslationByNames("525")}
-      </Option>
+      <NavLink to={seller ? "lowest" : "price"} replace end>
+        {({ isActive }) => (
+          <Label menu={isActive}>
+            {seller
+              ? getFieldTranslationByNames("517")
+              : getFieldTranslationByNames("524")}
+          </Label>
+        )}
+      </NavLink>
+      <NavLink to={seller ? "PriceDefine" : "suggest"} replace end>
+        {({ isActive }) => (
+          <Label menu={isActive}>
+            {seller
+              ? getFieldTranslationByNames("519")
+              : getFieldTranslationByNames("525")}
+          </Label>
+        )}
+      </NavLink>
     </Wrapper>
   );
 };

src/layouts/map/3dModelMap/SatisfactionLunch.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useMemo } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import ModalXs from "../../../components/Modal/ModalXs";
 import InputNumber from "../../../components/Inputs/InputNumber";
 import TextValueIcon from "../../../components/TextValue/TextValueIcon";
@@ -18,6 +18,7 @@ import {
   ToastError,
   ToastSuccess,
 } from "../../../services/Utility";
+import { useMapData } from "../../../services/reducers/mapContext";
 
 const Icon = styled(WatchIcon)`
   stroke: ${(props) => props.theme.colors.primary};
@@ -41,6 +42,8 @@ const SatisfactionLunch = ({
   const initialSatisfaction =
     Wallet && Wallet.satisfaction ? parseFloat(Wallet.satisfaction) : 0;
   const [inputValue, setInputValue] = useState(initialSatisfaction.toString());
+  const { buildings, addBuilding } = useMapData();
+
   const [error, setError] = useState(false);
   const [formData, setFormData] = useState({
     activity_line: "",
@@ -74,7 +77,6 @@ const SatisfactionLunch = ({
 
   const hourOfComplete =
     satisfaction > 0 && input > 0 ? (satisfaction * 288000) / input : 0;
- 
 
   const dayOfComplete = hourOfComplete / 24;
 
@@ -108,7 +110,8 @@ const SatisfactionLunch = ({
       HTTP_METHOD.POST,
       formData
     )
-      .then(() => {
+      .then((res) => {
+        addBuilding(res.data.data.building_models[0])
         handelSubmitEnvironment();
         ToastSuccess(getFieldTranslationByNames("1606"));
         dispatch({