diff --git a/app/src/components/Dashboard/DashboardCard.tsx b/app/src/components/Dashboard/DashboardCard.tsx index fad9886..9f7f8d4 100644 --- a/app/src/components/Dashboard/DashboardCard.tsx +++ b/app/src/components/Dashboard/DashboardCard.tsx @@ -2,12 +2,12 @@ import React, { useState, useRef, useCallback, useEffect } from "react"; import { createPortal } from "react-dom"; import { useNavigate } from "react-router-dom"; import img from "../../assets/image/image.png"; -import { getUserData } from "../../functions/getUserData"; import { useLoadingProgress, useProjectName } from "../../store/builder/store"; -import OuterClick from "../../utils/outerClick"; import { KebabIcon } from "../icons/ExportCommonIcons"; import { getAllProjectsApi } from "../../services/dashboard/getAllProjectsApi"; import { useSocketStore } from "../../store/socket/useSocketStore"; +import { getUserData } from "../../functions/getUserData"; +import OuterClick from "../../utils/outerClick"; import { Modal } from "../templates/PreviewModal"; // import { viewProject } from "../../services/dashboard/viewProject"; // import { updateProject } from "../../services/dashboard/updateProject"; diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx index 0feaba1..cb6484d 100644 --- a/app/src/components/layout/scenes/MainScene.tsx +++ b/app/src/components/layout/scenes/MainScene.tsx @@ -83,6 +83,7 @@ function MainScene() { getVersionHistoryApi(projectId) .then((data) => { + if (!data.versions) return; const versions: VersionHistory = []; data.versions.forEach((version: any) => { versions.push({ diff --git a/app/src/components/layout/sidebarLeft/Header.tsx b/app/src/components/layout/sidebarLeft/Header.tsx index 5180240..3311e9c 100644 --- a/app/src/components/layout/sidebarLeft/Header.tsx +++ b/app/src/components/layout/sidebarLeft/Header.tsx @@ -1,52 +1,53 @@ import React from "react"; +import { useNavigate } from "react-router-dom"; import { ToggleSidebarIcon } from "../../icons/HeaderIcons"; import { LogoIcon } from "../../icons/Logo"; -import FileMenu from "../../ui/FileMenu"; import { useToggleStore } from "../../../store/ui/useUIToggleStore"; +import { useSceneStore } from "../../../store/scene/useSceneStore"; import useModuleStore from "../../../store/ui/useModuleStore"; -import { useNavigate } from "react-router-dom"; import useRestStates from "../../../hooks/useResetStates"; +import FileMenu from "../../ui/FileMenu"; const Header: React.FC = () => { - const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore(); - const { activeModule } = useModuleStore(); - const navigate = useNavigate(); - const { resetStates } = useRestStates(); + const navigate = useNavigate(); + const { setLayoutType } = useSceneStore(); + const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore(); + const { activeModule } = useModuleStore(); + const { resetStates } = useRestStates(); - return ( -
-
- -
- + return ( +
+
+ +
+ +
+
+
-
- -
- ); + ); }; export default Header; diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx index bc3e0cd..c9eac89 100644 --- a/app/src/components/ui/menu/menu.tsx +++ b/app/src/components/ui/menu/menu.tsx @@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"; import { ArrowIcon } from "../../icons/ExportCommonIcons"; import { toggleTheme } from "../../../utils/theme"; import { useShortcutStore } from "../../../store/builder/store"; +import { useSceneStore } from "../../../store/scene/useSceneStore"; import useModuleStore, { useSubModuleStore } from "../../../store/ui/useModuleStore"; import { useSceneContext } from "../../../modules/scene/sceneContext"; @@ -20,6 +21,7 @@ interface MenuItem { const MenuBar: React.FC = ({ setOpenMenu }) => { const navigate = useNavigate(); + const { setLayoutType } = useSceneStore(); const [activeMenu, setActiveMenu] = useState(null); const [activeSubMenu, setActiveSubMenu] = useState(null); const [selectedItems, setSelectedItems] = useState>({}); @@ -50,6 +52,7 @@ const MenuBar: React.FC = ({ setOpenMenu }) => { localStorage.clear(); localStorage.setItem("theme", theme); navigate("/"); + setLayoutType(null); }; function handleShotcutsHelper() { diff --git a/app/src/modules/scene/sceneContext.tsx b/app/src/modules/scene/sceneContext.tsx index 34d1ca2..ad6456b 100644 --- a/app/src/modules/scene/sceneContext.tsx +++ b/app/src/modules/scene/sceneContext.tsx @@ -63,11 +63,21 @@ type SceneContextValue = { clearStores: () => void; layout: "Main Layout" | "Comparison Layout"; + + layoutType: "project" | "usecase" | "tutorial" | null; }; const SceneContext = createContext(null); -export function SceneProvider({ children, layout }: { readonly children: React.ReactNode; readonly layout: "Main Layout" | "Comparison Layout" }) { +export function SceneProvider({ + children, + layout, + layoutType, +}: { + readonly children: React.ReactNode; + readonly layout: "Main Layout" | "Comparison Layout"; + readonly layoutType: "project" | "usecase" | "tutorial" | null; +}) { const versionStore = useMemo(() => createVersionStore(), []); const assetStore = useMemo(() => createAssetStore(), []); @@ -177,6 +187,7 @@ export function SceneProvider({ children, layout }: { readonly children: React.R craneEventManagerRef, clearStores, layout, + layoutType, }), [ versionStore, @@ -202,6 +213,7 @@ export function SceneProvider({ children, layout }: { readonly children: React.R collabUsersStore, clearStores, layout, + layoutType, ] ); diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx index 7830264..903cf91 100644 --- a/app/src/modules/visualization/RealTimeVisulization.tsx +++ b/app/src/modules/visualization/RealTimeVisulization.tsx @@ -75,13 +75,7 @@ const RealTimeVisulization: React.FC = () => { useEffect(() => { if (!projectId || !selectedVersion) return; getZone2dData(organization, projectId, selectedVersion?.versionId || "").then((response) => { - // console.log('response: ', response); if (!response) return; - // if (response.status === 401) { - // console.log("force logout"); - // navigate("/"); - // return; - // } if (!Array.isArray(response)) { return; } diff --git a/app/src/pages/Dashboard.tsx b/app/src/pages/Dashboard.tsx index dba0700..b5d9434 100644 --- a/app/src/pages/Dashboard.tsx +++ b/app/src/pages/Dashboard.tsx @@ -1,17 +1,19 @@ import React, { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; import { useSocketStore } from "../store/socket/useSocketStore"; -import { getUserData } from "../functions/getUserData"; +import { useSceneStore } from "../store/scene/useSceneStore"; import SidePannel from "../components/Dashboard/SidePannel"; import DashboardTutorial from "../components/Dashboard/DashboardTutorial"; import DashboardMain from "../components/Dashboard/DashboardMain"; import DashboardUseCases from "../components/Dashboard/DasboardUseCases"; import ProjectSocketRes from "../components/Dashboard/socket/projectSocketRes"; -import { useNavigate } from "react-router-dom"; +import { getUserData } from "../functions/getUserData"; export const ALPHA_ORG = "hexrfactory"; const Dashboard: React.FC = () => { const navigate = useNavigate(); + const { setLayoutType } = useSceneStore(); const [activeTab, setActiveTab] = useState("Home"); const [projectsData, setProjectsData] = useState({}); const [projectsCache, setProjectsCache] = useState>({}); @@ -21,6 +23,7 @@ const Dashboard: React.FC = () => { useEffect(() => { if (email === "" || organization === "") { navigate("/"); + setLayoutType(null); } const token = localStorage.getItem("token"); const refreshToken = localStorage.getItem("refreshToken"); diff --git a/app/src/pages/PageNotFound.tsx b/app/src/pages/PageNotFound.tsx index 3de9ee8..d4a692c 100644 --- a/app/src/pages/PageNotFound.tsx +++ b/app/src/pages/PageNotFound.tsx @@ -1,57 +1,55 @@ import { useLocation, useNavigate } from "react-router-dom"; +import { useSceneStore } from "../store/scene/useSceneStore"; import text404 from "../assets/image/404/404.svg"; import hero from "../assets/image/404/404_bk.png"; const PageNotFound = () => { - const savedTheme = localStorage.getItem("theme"); - const isLogedIn = localStorage.getItem("userId"); - const navigate = useNavigate(); - const { hash } = useLocation(); + const navigate = useNavigate(); + const { hash } = useLocation(); + const { setLayoutType } = useSceneStore(); + const savedTheme = localStorage.getItem("theme"); + const isLogedIn = localStorage.getItem("userId"); - function getErrorContext() { - const contexts = hash.split("#"); - const context = contexts[1]; - const info = contexts.length > 1 ? contexts[2] : ""; - switch (context) { - case "project_not_found": - return `Project Not found - The project ${ - info !== "" && `with ID (${info})` - } was not found.`; - default: - return "Page not Found - looks like we have hit a roadblock"; + function getErrorContext() { + const contexts = hash.split("#"); + const context = contexts[1]; + const info = contexts.length > 1 ? contexts[2] : ""; + switch (context) { + case "project_not_found": + return `Project Not found - The project ${info !== "" && `with ID (${info})`} was not found.`; + default: + return "Page not Found - looks like we have hit a roadblock"; + } } - } - return ( -
-
-
- + return ( +
+
+
+ +
+
+ +
+
{getErrorContext()}
+ +
-
- -
-
{getErrorContext()}
- -
-
- ); + ); }; export default PageNotFound; diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index a1550ee..7b565a1 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -3,13 +3,12 @@ import { useNavigate, useParams } from "react-router-dom"; import useModuleStore from "../store/ui/useModuleStore"; import { useSocketStore } from "../store/socket/useSocketStore"; import { useSelectedUserStore } from "../store/collaboration/useCollabStore"; +import { useSceneStore } from "../store/scene/useSceneStore"; import { useProjectName, useActiveTool } from "../store/builder/store"; import { handleCanvasCursors } from "../utils/mouseUtils/handleCanvasCursors"; import { getUserData } from "../functions/getUserData"; import { viewProjectApi } from "../services/dashboard/viewProjectApi"; -import { getAllProjectsApi } from "../services/dashboard/getAllProjectsApi"; -import { sharedWithMeProjectsApi } from "../services/dashboard/sharedWithMeProjectApi"; import { useLogger } from "../components/ui/log/LoggerContext"; import { SceneProvider } from "../modules/scene/sceneContext"; @@ -22,6 +21,7 @@ import ComparisonScene from "../components/layout/scenes/ComparisonScene"; const Project: React.FC = () => { let navigate = useNavigate(); + const { layoutType, setLayoutType } = useSceneStore(); const echo = useLogger(); const { setActiveModule } = useModuleStore(); const { @@ -47,26 +47,25 @@ const Project: React.FC = () => { if (!email || !userId) { console.error("User data not found in localStorage"); navigate("/page-not-found"); + setLayoutType(null); return; } + const fetchProjects = async () => { - try { - const projects = await getAllProjectsApi(); - const shared = await sharedWithMeProjectsApi(); - - const allProjects = [...(projects?.Projects || []), ...(shared?.Shared || [])]; - - const matchedProject = allProjects.find((val: any) => val.projectUuid === projectId || val._id === projectId); - if (matchedProject) { - setProjectName(matchedProject.projectName); - await viewProjectApi(matchedProject._id); - } else { - console.warn("Project not found with given ID:", projectId); - navigate(`/not_found#project_not_found#${projectId}`); - } - } catch (error) { - console.error("Error fetching projects:", error); - } + viewProjectApi(projectId || "") + .then((project) => { + if (project.projectData) { + setProjectName(project.projectData.projectName); + setLayoutType(project.projectData.projectType); + } else { + console.warn("Project not found with given ID:", projectId); + navigate(`/not_found#project_not_found#${projectId}`); + setLayoutType(null); + } + }) + .catch(() => { + console.warn("Error fetching project:", projectId); + }); }; fetchProjects(); @@ -77,13 +76,14 @@ const Project: React.FC = () => { useEffect(() => { const token = localStorage.getItem("token"); const refreshToken = localStorage.getItem("refreshToken"); - + if (token && refreshToken && projectId) { echo.warn("Validating token"); initializeBuilderSocket(token, refreshToken, projectId); echo.success("Builder socket initialized"); } else { navigate("/"); + setLayoutType(null); return; } @@ -98,12 +98,13 @@ const Project: React.FC = () => { useEffect(() => { const token = localStorage.getItem("token"); const refreshToken = localStorage.getItem("refreshToken"); - + if (token && refreshToken && projectId) { initializeVisualizationSocket(token, refreshToken, projectId); echo.success("Visualization socket initialized"); } else { navigate("/"); + setLayoutType(null); return; } @@ -118,12 +119,13 @@ const Project: React.FC = () => { useEffect(() => { const token = localStorage.getItem("token"); const refreshToken = localStorage.getItem("refreshToken"); - + if (token && refreshToken && projectId) { initializeThreadSocket(token, refreshToken, projectId); echo.success("Thread socket initialized"); } else { navigate("/"); + setLayoutType(null); return; } @@ -141,10 +143,10 @@ const Project: React.FC = () => { return (
- + - + {selectedUser && } diff --git a/app/src/pages/UserAuth.tsx b/app/src/pages/UserAuth.tsx index daa0e97..01a0f7e 100644 --- a/app/src/pages/UserAuth.tsx +++ b/app/src/pages/UserAuth.tsx @@ -1,15 +1,17 @@ import React, { useState, FormEvent, useEffect } from "react"; +import FingerprintJS from "@fingerprintjs/fingerprintjs"; import { useNavigate } from "react-router-dom"; import { LogoIconLarge } from "../components/icons/Logo"; import { EyeIcon } from "../components/icons/ExportCommonIcons"; import { useLoadingProgress } from "../store/builder/store"; +import { useSceneStore } from "../store/scene/useSceneStore"; import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi"; import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi"; -import FingerprintJS from "@fingerprintjs/fingerprintjs"; import { recentlyViewedApi } from "../services/dashboard/recentlyViewedApi"; import { getUserData } from "../functions/getUserData"; const UserAuth: React.FC = () => { + const { setLayoutType } = useSceneStore(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); @@ -55,10 +57,12 @@ const UserAuth: React.FC = () => { navigate(`/projects/${recent_opend_projectID}`); } else { navigate("/Dashboard"); + setLayoutType(null); } } else { setLoadingProgress(1); navigate("/Dashboard"); + setLayoutType(null); } } } catch (error) { @@ -71,6 +75,7 @@ const UserAuth: React.FC = () => { } else if (res.message === "Already LoggedIn on another browser....Please logout!!!") { setError("Already logged in on another browser. Please logout first."); navigate("/"); + setLayoutType(null); setError(""); } } catch { @@ -168,11 +173,25 @@ const UserAuth: React.FC = () => {

By signing up for, or logging into, an account, you agree to our{" "} - navigate("/privacy")} style={{ cursor: "pointer" }}> + { + navigate("/privacy"); + setLayoutType(null); + }} + style={{ cursor: "pointer" }} + > privacy policy {" "} &{" "} - navigate("/terms")} style={{ cursor: "pointer" }}> + { + navigate("/terms"); + setLayoutType(null); + }} + style={{ cursor: "pointer" }} + > terms of service {" "} whether you read them or not. You can also find these terms on our website. diff --git a/app/src/store/scene/useSceneStore.ts b/app/src/store/scene/useSceneStore.ts index b36fc4c..2b311a5 100644 --- a/app/src/store/scene/useSceneStore.ts +++ b/app/src/store/scene/useSceneStore.ts @@ -17,6 +17,10 @@ type SceneStore = { setCamera: (pos: THREE.Vector3, target: THREE.Vector3) => void; setCamType: (type: "orthographic" | "perspective") => void; + + layoutType: "project" | "usecase" | "tutorial" | null; + + setLayoutType: (layoutType: "project" | "usecase" | "tutorial" | null) => void; }; export const useSceneStore = create()( @@ -55,5 +59,13 @@ export const useSceneStore = create()( state.camType = type; }); }, + + layoutType: null, + + setLayoutType: (layoutType) => { + set((state) => { + state.layoutType = layoutType; + }); + }, })) );