code optimization

This commit is contained in:
2025-09-02 11:11:31 +05:30
parent a3b2d258cf
commit 817a85b262
3 changed files with 342 additions and 360 deletions

View File

@@ -1,10 +1,6 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import useModuleStore from "../store/useModuleStore"; import useModuleStore from "../store/useModuleStore";
import { import { useSocketStore, useProjectName, useActiveTool, } from "../store/builder/store";
useSocketStore,
useProjectName,
useActiveTool,
} from "../store/builder/store";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import { useSelectedUserStore } from "../store/collaboration/useCollabStore"; import { useSelectedUserStore } from "../store/collaboration/useCollabStore";
import FollowPerson from "../components/templates/FollowPerson"; import FollowPerson from "../components/templates/FollowPerson";
@@ -24,116 +20,116 @@ import { sharedWithMeProjects } from "../services/dashboard/sharedWithMeProject"
import { handleCanvasCursors } from "../utils/mouseUtils/handleCanvasCursors"; import { handleCanvasCursors } from "../utils/mouseUtils/handleCanvasCursors";
const Project: React.FC = () => { const Project: React.FC = () => {
let navigate = useNavigate(); let navigate = useNavigate();
const echo = useLogger(); const echo = useLogger();
const { setActiveModule } = useModuleStore(); const { setActiveModule } = useModuleStore();
const { projectId } = useParams(); const { projectId } = useParams();
const { setProjectName } = useProjectName(); const { setProjectName } = useProjectName();
const { userId, email, organization, userName } = getUserData(); const { userId, email, organization } = getUserData();
const { selectedUser } = useSelectedUserStore(); const { selectedUser } = useSelectedUserStore();
const { isLogListVisible } = useLogger(); const { isLogListVisible } = useLogger();
const { setVersions } = useVersionHistoryStore(); const { setVersions } = useVersionHistoryStore();
const { activeTool } = useActiveTool(); const { activeTool } = useActiveTool();
useEffect(() => { useEffect(() => {
if (!email || !userId) { if (!email || !userId) {
console.error("User data not found in localStorage"); console.error("User data not found in localStorage");
navigate("/page-not-found"); navigate("/page-not-found");
return; return;
}
const fetchProjects = async () => {
try {
const projects = await getAllProjects(userId, organization);
const shared = await sharedWithMeProjects();
const allProjects = [...(projects?.Projects || []), ...(shared || [])];
const matchedProject = allProjects.find(
(val: any) => val.projectUuid === projectId || val._id === projectId
);
if (matchedProject) {
setProjectName(matchedProject.projectName);
await viewProject(organization, matchedProject._id, userId);
} 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);
}
};
fetchProjects(); const fetchProjects = async () => {
// eslint-disable-next-line react-hooks/exhaustive-deps try {
}, []); const projects = await getAllProjects(userId, organization);
const shared = await sharedWithMeProjects();
useEffect(() => { const allProjects = [...(projects?.Projects || []), ...(shared || [])];
if (!projectId) return;
getVersionHistoryApi(projectId) const matchedProject = allProjects.find(
.then((data) => { (val: any) => val.projectUuid === projectId || val._id === projectId
const versions: VersionHistory = []; );
data.versions.forEach((version: any) => { if (matchedProject) {
versions.push({ setProjectName(matchedProject.projectName);
version: version.version, await viewProject(organization, matchedProject._id, userId);
versionId: version.versionId, } else {
versionName: version.versionName, console.warn("Project not found with given ID:", projectId);
versionDescription: version.description, navigate(`/not_found#project_not_found#${projectId}`);
timeStamp: version.createdAt, }
createdBy: version.createdBy.userName, } catch (error) {
}); console.error("Error fetching projects:", error);
}); }
setVersions(versions); };
})
.catch(() => {
console.error("Error fetching version history");
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectId]);
useEffect(() => { fetchProjects();
setActiveModule("builder"); // eslint-disable-next-line react-hooks/exhaustive-deps
if (email) { }, []);
const token = localStorage.getItem("token");
const refreshToken = localStorage.getItem("refreshToken");
echo.warn('Validating token');
if (token && refreshToken) {
useSocketStore
.getState()
.initializeSocket(email, organization, token, refreshToken);
}
echo.success("Project initialized and loaded successfully");
} else {
navigate("/");
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => { useEffect(() => {
handleCanvasCursors(activeTool); if (!projectId) return;
}, [activeTool]);
return ( getVersionHistoryApi(projectId)
<div className="project-main"> .then((data) => {
<SceneProvider layout="Main Layout"> const versions: VersionHistory = [];
<VersionProvider> data.versions.forEach((version: any) => {
<MainSceneProvider /> versions.push({
</VersionProvider> version: version.version,
</SceneProvider> versionId: version.versionId,
<SceneProvider layout="Comparison Layout"> versionName: version.versionName,
<VersionProvider> versionDescription: version.description,
<ComparisonSceneProvider /> timeStamp: version.createdAt,
</VersionProvider> createdBy: version.createdBy.userName,
</SceneProvider> });
{selectedUser && <FollowPerson />} });
{isLogListVisible && ( setVersions(versions);
<RenderOverlay> })
<LogList /> .catch(() => {
</RenderOverlay> console.error("Error fetching version history");
)} });
</div> // eslint-disable-next-line react-hooks/exhaustive-deps
); }, [projectId]);
useEffect(() => {
setActiveModule("builder");
if (email) {
const token = localStorage.getItem("token");
const refreshToken = localStorage.getItem("refreshToken");
echo.warn('Validating token');
if (token && refreshToken) {
useSocketStore
.getState()
.initializeSocket(email, organization, token, refreshToken);
}
echo.success("Project initialized and loaded successfully");
} else {
navigate("/");
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
handleCanvasCursors(activeTool);
}, [activeTool]);
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>
)}
</div>
);
}; };
export default Project; export default Project;

View File

@@ -2,9 +2,7 @@ import React, { useState, FormEvent, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { LogoIconLarge } from "../components/icons/Logo"; import { LogoIconLarge } from "../components/icons/Logo";
import { EyeIcon } from "../components/icons/ExportCommonIcons"; import { EyeIcon } from "../components/icons/ExportCommonIcons";
import { import { useLoadingProgress } from "../store/builder/store";
useLoadingProgress,
} from "../store/builder/store";
import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi"; import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi"; import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
import FingerprintJS from "@fingerprintjs/fingerprintjs"; import FingerprintJS from "@fingerprintjs/fingerprintjs";
@@ -12,243 +10,232 @@ import { recentlyViewed } from "../services/dashboard/recentlyViewed";
import { getUserData } from "../functions/getUserData"; import { getUserData } from "../functions/getUserData";
const UserAuth: React.FC = () => { const UserAuth: React.FC = () => {
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [isSignIn, setIsSignIn] = useState(true); const [isSignIn, setIsSignIn] = useState(true);
const { userName } = getUserData(); const { userName } = getUserData();
const [name, setName] = useState<string>(userName || ''); const [name, setName] = useState<string>(userName || '');
const { setLoadingProgress } = useLoadingProgress(); const { setLoadingProgress } = useLoadingProgress();
const [fingerprint, setFingerprint] = useState(""); const [fingerprint, setFingerprint] = useState("");
const navigate = useNavigate(); const navigate = useNavigate();
const initializeFingerprint = async () => { const initializeFingerprint = async () => {
const fp = await FingerprintJS.load(); const fp = await FingerprintJS.load();
const result = await fp.get(); const result = await fp.get();
setFingerprint(result.visitorId); // Set the fingerprint setFingerprint(result.visitorId); // Set the fingerprint
}; };
useEffect(() => { useEffect(() => {
initializeFingerprint(); initializeFingerprint();
}, []); }, []);
const handleLogin = async (e: FormEvent<HTMLFormElement>) => { const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const organization = email.split("@")[1].split(".")[0];
try {
const res = await signInApi(email, password, organization, fingerprint);
if (res.message.message === "login successfull") {
setError("");
localStorage.setItem("userId", res.message.userId);
localStorage.setItem("email", res.message.email);
localStorage.setItem("userName", res.message.name);
localStorage.setItem("token", res.message.token);
localStorage.setItem("refreshToken", res.message.refreshToken);
try {
const projects = await recentlyViewed(
organization,
res.message.userId
);
if (res.message.isShare) {
if (Object.values(projects.RecentlyViewed).length > 0) {
const recent_opend_projectID = (
Object.values(projects?.RecentlyViewed || {})[0] as any
)?._id;
if (
Object.values(projects?.RecentlyViewed).filter(
(val: any) => val._id == recent_opend_projectID
)
) {
setLoadingProgress(1);
navigate(`/projects/${recent_opend_projectID}`);
} else {
navigate("/Dashboard");
}
} else {
setLoadingProgress(1);
navigate("/Dashboard");
}
}
} catch (error) {
console.error("Error fetching recent projects:", error);
}
} else if (res.message === "User Not Found!!! Kindly signup...") {
setError("Account not found");
} else if (
res.message === "Email & Password is invalid...Check the credentials"
) {
setError(res.message);
} else if (
res.message ===
"Already LoggedIn on another browser....Please logout!!!"
) {
setError("Already logged in on another browser. Please logout first.");
navigate("/");
setError("");
// setError("");
// setOrganization(organization);
// setUserName(res.ForceLogoutData.userName);
// console.log(' res.userId: ', res.ForceLogoutData.userId);
// localStorage.setItem("userId", res.ForceLogoutData.userId);
// localStorage.setItem("email", res.ForceLogoutData.Email);
// localStorage.setItem("userName", res.ForceLogoutData.userName);
// localStorage.setItem("token", res.ForceLogoutData.token);
// localStorage.setItem("refreshToken", res.ForceLogoutData.refreshToken);
// if (res.ForceLogoutData.isShare) {
// setLoadingProgress(1);
// navigate("/Dashboard");
// }
}
} catch (error) {
echo.error("Login failed");
}
};
const handleRegister = async (e: FormEvent) => {
e.preventDefault();
if (email && password && name) {
setError("");
try {
const organization = email.split("@")[1].split(".")[0]; const organization = email.split("@")[1].split(".")[0];
const res = await signUpApi(name, email, password, organization); try {
const res = await signInApi(email, password, organization, fingerprint);
if (res.message.message === "login successfull") {
setError("");
localStorage.setItem("userId", res.message.userId);
localStorage.setItem("email", res.message.email);
localStorage.setItem("userName", res.message.name);
localStorage.setItem("token", res.message.token);
localStorage.setItem("refreshToken", res.message.refreshToken);
if (res.message === "New User created") { try {
setIsSignIn(true); const projects = await recentlyViewed(
organization,
res.message.userId
);
if (res.message.isShare) {
if (Object.values(projects.RecentlyViewed).length > 0) {
const recent_opend_projectID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == recent_opend_projectID)) {
setLoadingProgress(1);
navigate(`/projects/${recent_opend_projectID}`);
} else {
navigate("/Dashboard");
}
} else {
setLoadingProgress(1);
navigate("/Dashboard");
}
}
} catch (error) {
console.error("Error fetching recent projects:", error);
}
} else if (res.message === "User Not Found!!! Kindly signup...") {
setError("Account not found");
} else if (res.message === "Email & Password is invalid...Check the credentials") {
setError(res.message);
} else if (res.message === "Already LoggedIn on another browser....Please logout!!!") {
setError("Already logged in on another browser. Please logout first.");
navigate("/");
setError("");
// setError("");
// setOrganization(organization);
// setUserName(res.ForceLogoutData.userName);
// console.log(' res.userId: ', res.ForceLogoutData.userId);
// localStorage.setItem("userId", res.ForceLogoutData.userId);
// localStorage.setItem("email", res.ForceLogoutData.Email);
// localStorage.setItem("userName", res.ForceLogoutData.userName);
// localStorage.setItem("token", res.ForceLogoutData.token);
// localStorage.setItem("refreshToken", res.ForceLogoutData.refreshToken);
// if (res.ForceLogoutData.isShare) {
// setLoadingProgress(1);
// navigate("/Dashboard");
// }
}
} catch (error) {
echo.error("Login failed");
} }
if (res.message === "User already exists") { };
setError("User already exists");
const handleRegister = async (e: FormEvent) => {
e.preventDefault();
if (email && password && name) {
setError("");
try {
const organization = email.split("@")[1].split(".")[0];
const res = await signUpApi(name, email, password, organization);
if (res.message === "New User created") {
setIsSignIn(true);
}
if (res.message === "User already exists") {
setError("User already exists");
}
} catch (error) {
echo.error("Register user failed");
}
} else {
setError("Please fill all the fields!");
} }
} catch (error) { };
echo.error("Register user failed");
}
} else {
setError("Please fill all the fields!");
}
};
return ( return (
<div className="auth-container"> <div className="auth-container">
<div className="logo-icon"> <div className="logo-icon">
<LogoIconLarge /> <LogoIconLarge />
</div> </div>
<h1>Welcome to Aalai</h1> <h1>Welcome to Aalai</h1>
<p> <p>
{isSignIn ? ( {isSignIn ? (
<> <>
Dont have an account?{" "} Dont have an account?{" "}
<span <span
className="link" className="link"
onClick={() => setIsSignIn(false)} onClick={() => setIsSignIn(false)}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
>
Register here!
</span>
</>
) : (
<>
Already have an account?{" "}
<span
className="link"
onClick={() => setIsSignIn(true)}
style={{ cursor: "pointer" }}
>
Login here!
</span>
</>
)}
</p>
<button id="google-login" className="google-login">
<span className="google-icon">G</span> Continue with Google
</button>
{error && <div className="error-message">🛈 {error}</div>}
<form
onSubmit={isSignIn ? handleLogin : handleRegister}
className="auth-form"
> >
Register here! {!isSignIn && (
</span> <input
</> type="text"
) : ( value={name}
<> placeholder="Username"
Already have an account?{" "} onChange={(e) => setName(e.target.value)}
<span required
className="link" />
onClick={() => setIsSignIn(true)} )}
style={{ cursor: "pointer" }} <input
> type="email"
Login here! name="email"
</span> value={email}
</> placeholder="Email"
)} autoComplete="email"
</p> onChange={(e) => setEmail(e.target.value)}
required
/>
<div className="password-container">
<input
name="password"
type={showPassword ? "text" : "password"}
value={password}
placeholder="Password"
autoComplete="current-password"
onChange={(e) => setPassword(e.target.value)}
required
/>
<button
id="toogle-password"
type="button"
className="toggle-password"
onClick={() => setShowPassword(!showPassword)}
>
<EyeIcon isClosed={showPassword} />
</button>
</div>
<button id="google-login" className="google-login"> {isSignIn && (
<span className="google-icon">G</span> Continue with Google <a href="forgot" className="forgot-password">
</button> Forgot password ?
</a>
)}
{error && <div className="error-message">🛈 {error}</div>} {!isSignIn && (
<div className="policy-checkbox">
<form <input type="checkbox" id="tos" required />
onSubmit={isSignIn ? handleLogin : handleRegister} <label htmlFor="tos" className="label">
className="auth-form" I have read and agree to the terms of service
> </label>
{!isSignIn && ( </div>
<input )}
type="text" <button id="form-submit" type="submit" className="continue-button">
value={name} {isSignIn ? "Continue" : "Register"}
placeholder="Username" </button>
onChange={(e) => setName(e.target.value)} </form>
required <p className="policy">
/> By signing up for, or logging into, an account, you agree to our{" "}
)} <span
<input className="link"
type="email" onClick={() => navigate("/privacy")}
name="email" style={{ cursor: "pointer" }}
value={email} >
placeholder="Email" privacy policy
autoComplete="email" </span>{" "}
onChange={(e) => setEmail(e.target.value)} &{" "}
required <span
/> className="link"
<div className="password-container"> onClick={() => navigate("/terms")}
<input style={{ cursor: "pointer" }}
name="password" >
type={showPassword ? "text" : "password"} terms of service
value={password} </span>{" "}
placeholder="Password" whether you read them or not. You can also find these terms on our
autoComplete="current-password" website.
onChange={(e) => setPassword(e.target.value)} </p>
required
/>
<button
id="toogle-password"
type="button"
className="toggle-password"
onClick={() => setShowPassword(!showPassword)}
>
<EyeIcon isClosed={showPassword} />
</button>
</div> </div>
);
{isSignIn && (
<a href="forgot" className="forgot-password">
Forgot password ?
</a>
)}
{!isSignIn && (
<div className="policy-checkbox">
<input type="checkbox" id="tos" required />
<label htmlFor="tos" className="label">
I have read and agree to the terms of service
</label>
</div>
)}
<button id="form-submit" type="submit" className="continue-button">
{isSignIn ? "Continue" : "Register"}
</button>
</form>
<p className="policy">
By signing up for, or logging into, an account, you agree to our{" "}
<span
className="link"
onClick={() => navigate("/privacy")}
style={{ cursor: "pointer" }}
>
privacy policy
</span>{" "}
&{" "}
<span
className="link"
onClick={() => navigate("/terms")}
style={{ cursor: "pointer" }}
>
terms of service
</span>{" "}
whether you read them or not. You can also find these terms on our
website.
</p>
</div>
);
}; };
export default UserAuth; export default UserAuth;

View File

@@ -1,31 +1,30 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
export const recentlyViewed = async (organization: string, userId: string) => { export const recentlyViewed = async (organization: string, userId: string) => {
try { try {
const response = await fetch( const response = await fetch(
`${url_Backend_dwinzo}/api/V1/RecentlyViewed`, `${url_Backend_dwinzo}/api/V1/RecentlyViewed`,
{ {
method: "GET", method: "GET",
headers: { headers: {
Authorization: "Bearer <access_token>", // Replace with actual token Authorization: "Bearer <access_token>", // Replace with actual token
"Content-Type": "application/json", "Content-Type": "application/json",
token: localStorage.getItem("token") || "", // Coerce null to empty string token: localStorage.getItem("token") || "", // Coerce null to empty string
refresh_token: localStorage.getItem("refreshToken") || "", refresh_token: localStorage.getItem("refreshToken") || "",
}, },
} }
); );
const newAccessToken = response.headers.get("x-access-token"); const newAccessToken = response.headers.get("x-access-token");
if (newAccessToken) { if (newAccessToken) {
//console.log("New token received:", newAccessToken); localStorage.setItem("token", newAccessToken);
localStorage.setItem("token", newAccessToken); }
} if (!response.ok) {
if (!response.ok) { console.error("Failed to fetch project");
console.error("Failed to fetch project"); }
}
return await response.json(); return await response.json();
} catch (error: any) { } catch (error: any) {
console.error("Failed to get project"); console.error("Failed to get project");
console.log(error.message); console.log(error.message);
} }
}; };