Dwinzo_dev/app/src/pages/Project.tsx

136 lines
4.5 KiB
TypeScript

import React, { useEffect } from "react";
import useModuleStore from "../store/useModuleStore";
import {
useSocketStore,
useOrganization,
useUserName,
useWallItems,
useSaveVersion,
useViewSceneStore,
useProjectName,
useRenameModeStore,
useSelectedFloorItem,
useZones,
useSelectedComment,
} from "../store/builder/store";
import { useNavigate, useParams } from "react-router-dom";
import { useSelectedUserStore } from "../store/collaboration/useCollabStore";
import FollowPerson from "../components/templates/FollowPerson";
import { useLogger } from "../components/ui/log/LoggerContext";
import RenderOverlay from "../components/templates/Overlay";
import LogList from "../components/ui/log/LogList";
import { useToggleStore } from "../store/useUIToggleStore";
import { getAllProjects } from "../services/dashboard/getAllProjects";
import { viewProject } from "../services/dashboard/viewProject";
import ComparisonSceneProvider from "../components/layout/scenes/ComparisonSceneProvider";
import MainSceneProvider from "../components/layout/scenes/MainSceneProvider";
import { getUserData } from "../functions/getUserData";
import { SceneProvider } from "../modules/scene/sceneContext";
import { getVersionHistoryApi } from "../services/factoryBuilder/versionControl/getVersionHistoryApi";
import { useVersionHistoryStore } from "../store/builder/useVersionHistoryStore";
import { VersionProvider } from "../modules/builder/version/versionContext";
import ThreadChat from "../components/ui/collaboration/ThreadChat";
const Project: React.FC = () => {
let navigate = useNavigate();
const echo = useLogger();
const { setToggleUI } = useToggleStore();
const { setActiveModule } = useModuleStore();
const { setUserName } = useUserName();
const { setOrganization } = useOrganization();
const { setWallItems } = useWallItems();
const { setZones } = useZones();
const { isVersionSaved } = useSaveVersion();
const { projectId } = useParams();
const { setProjectName } = useProjectName();
const { userId, email, organization, userName } = getUserData();
const { selectedUser } = useSelectedUserStore();
const { isLogListVisible } = useLogger();
const { setVersions } = useVersionHistoryStore();
const { selectedComment, commentPositionState } = useSelectedComment();
useEffect(() => {
if (!email || !userId) {
console.error("User data not found in localStorage");
return;
}
getAllProjects(userId, organization).then((projects) => {
const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId)
setProjectName(filterProject.projectName)
viewProject(organization, filterProject._id, userId).then((viewedProject) => {
});
});
}, []);
useEffect(() => {
if (!projectId) return;
getVersionHistoryApi(projectId).then((data) => {
const versions: VersionHistory = [];
data.versions.forEach((version: any) => {
versions.push({
version: version.version,
versionId: version.versionId,
versionName: version.versionName,
versionDescription: version.description,
timeStamp: version.createdAt,
createdBy: version.createdBy.userName
})
})
setVersions(versions);
})
}, [projectId])
useEffect(() => {
if (!isVersionSaved) {
setToggleUI(true, true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isVersionSaved]);
useEffect(() => {
setWallItems([]);
setZones([]);
setActiveModule("builder");
if (email) {
const token = localStorage.getItem("token");
if (token) {
useSocketStore.getState().initializeSocket(email, organization, token);
}
if (organization && userName) {
setOrganization(organization);
setUserName(userName);
}
echo.success("Log in successful");
} else {
navigate("/");
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div className="project-main">
<SceneProvider layout="Main Layout">
<VersionProvider>
<MainSceneProvider />
</VersionProvider>
</SceneProvider>
<SceneProvider layout="Comparison Layout">
<VersionProvider>
<ComparisonSceneProvider />
</VersionProvider>
</SceneProvider>
{selectedUser && <FollowPerson />}
{isLogListVisible && (
<RenderOverlay>
<LogList />
</RenderOverlay>
)}
{(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
</div>
);
};
export default Project;