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 useModuleStore from "../store/useModuleStore";
import {
useSocketStore,
useProjectName,
useActiveTool,
} from "../store/builder/store";
import { useSocketStore, useProjectName, useActiveTool, } from "../store/builder/store";
import { useNavigate, useParams } from "react-router-dom";
import { useSelectedUserStore } from "../store/collaboration/useCollabStore";
import FollowPerson from "../components/templates/FollowPerson";
@@ -24,116 +20,116 @@ import { sharedWithMeProjects } from "../services/dashboard/sharedWithMeProject"
import { handleCanvasCursors } from "../utils/mouseUtils/handleCanvasCursors";
const Project: React.FC = () => {
let navigate = useNavigate();
const echo = useLogger();
const { setActiveModule } = useModuleStore();
const { projectId } = useParams();
const { setProjectName } = useProjectName();
const { userId, email, organization, userName } = getUserData();
const { selectedUser } = useSelectedUserStore();
const { isLogListVisible } = useLogger();
const { setVersions } = useVersionHistoryStore();
const { activeTool } = useActiveTool();
let navigate = useNavigate();
const echo = useLogger();
const { setActiveModule } = useModuleStore();
const { projectId } = useParams();
const { setProjectName } = useProjectName();
const { userId, email, organization } = getUserData();
const { selectedUser } = useSelectedUserStore();
const { isLogListVisible } = useLogger();
const { setVersions } = useVersionHistoryStore();
const { activeTool } = useActiveTool();
useEffect(() => {
if (!email || !userId) {
console.error("User data not found in localStorage");
navigate("/page-not-found");
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}`);
useEffect(() => {
if (!email || !userId) {
console.error("User data not found in localStorage");
navigate("/page-not-found");
return;
}
} catch (error) {
console.error("Error fetching projects:", error);
}
};
fetchProjects();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const fetchProjects = async () => {
try {
const projects = await getAllProjects(userId, organization);
const shared = await sharedWithMeProjects();
useEffect(() => {
if (!projectId) return;
const allProjects = [...(projects?.Projects || []), ...(shared || [])];
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);
})
.catch(() => {
console.error("Error fetching version history");
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [projectId]);
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);
}
};
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
}, []);
fetchProjects();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
handleCanvasCursors(activeTool);
}, [activeTool]);
useEffect(() => {
if (!projectId) return;
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>
);
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);
})
.catch(() => {
console.error("Error fetching version history");
});
// 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;

View File

@@ -2,9 +2,7 @@ import React, { useState, FormEvent, useEffect } from "react";
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 { useLoadingProgress } from "../store/builder/store";
import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
import FingerprintJS from "@fingerprintjs/fingerprintjs";
@@ -12,243 +10,232 @@ import { recentlyViewed } from "../services/dashboard/recentlyViewed";
import { getUserData } from "../functions/getUserData";
const UserAuth: React.FC = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState("");
const [isSignIn, setIsSignIn] = useState(true);
const { userName } = getUserData();
const [name, setName] = useState<string>(userName || '');
const { setLoadingProgress } = useLoadingProgress();
const [fingerprint, setFingerprint] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState("");
const [isSignIn, setIsSignIn] = useState(true);
const { userName } = getUserData();
const [name, setName] = useState<string>(userName || '');
const { setLoadingProgress } = useLoadingProgress();
const [fingerprint, setFingerprint] = useState("");
const navigate = useNavigate();
const navigate = useNavigate();
const initializeFingerprint = async () => {
const fp = await FingerprintJS.load();
const result = await fp.get();
setFingerprint(result.visitorId); // Set the fingerprint
};
const initializeFingerprint = async () => {
const fp = await FingerprintJS.load();
const result = await fp.get();
setFingerprint(result.visitorId); // Set the fingerprint
};
useEffect(() => {
initializeFingerprint();
}, []);
useEffect(() => {
initializeFingerprint();
}, []);
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
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 handleLogin = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
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") {
setIsSignIn(true);
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");
}
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 (
<div className="auth-container">
<div className="logo-icon">
<LogoIconLarge />
</div>
<h1>Welcome to Aalai</h1>
<p>
{isSignIn ? (
<>
Dont have an account?{" "}
<span
className="link"
onClick={() => setIsSignIn(false)}
style={{ cursor: "pointer" }}
return (
<div className="auth-container">
<div className="logo-icon">
<LogoIconLarge />
</div>
<h1>Welcome to Aalai</h1>
<p>
{isSignIn ? (
<>
Dont have an account?{" "}
<span
className="link"
onClick={() => setIsSignIn(false)}
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!
</span>
</>
) : (
<>
Already have an account?{" "}
<span
className="link"
onClick={() => setIsSignIn(true)}
style={{ cursor: "pointer" }}
>
Login here!
</span>
</>
)}
</p>
{!isSignIn && (
<input
type="text"
value={name}
placeholder="Username"
onChange={(e) => setName(e.target.value)}
required
/>
)}
<input
type="email"
name="email"
value={email}
placeholder="Email"
autoComplete="email"
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">
<span className="google-icon">G</span> Continue with Google
</button>
{isSignIn && (
<a href="forgot" className="forgot-password">
Forgot password ?
</a>
)}
{error && <div className="error-message">🛈 {error}</div>}
<form
onSubmit={isSignIn ? handleLogin : handleRegister}
className="auth-form"
>
{!isSignIn && (
<input
type="text"
value={name}
placeholder="Username"
onChange={(e) => setName(e.target.value)}
required
/>
)}
<input
type="email"
name="email"
value={email}
placeholder="Email"
autoComplete="email"
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>
{!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>
{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;

View File

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