diff --git a/src/ErrorBoundary.jsx b/src/ErrorBoundary.jsx new file mode 100644 index 0000000..c184763 --- /dev/null +++ b/src/ErrorBoundary.jsx @@ -0,0 +1,54 @@ +import { AlertCircle, RefreshCw } from "lucide-react"; +import { Component } from "react"; + +class GlobalErrorBoundary extends Component { + constructor(props) { + super(props); + this.state = { hasError: false, error: null }; + } + + static getDerivedStateFromError(error) { + return { hasError: true, error }; + } + + componentDidCatch(error, errorInfo) { + console.error("Global Error Caught:", error, errorInfo); + // You can log this to an external service like Sentry or LogRocket + } + + handleRetry = () => { + this.setState({ hasError: false, error: null }); + window.location.reload(); // Reload the app + }; + + render() { + if (this.state.hasError) { + return ( +
+
+
+
+ +
+

Oops! Something went wrong

+

+ {this.state.error?.message || "An unexpected error occurred."} +

+ +
+
+
+ ); + } + + return this.props.children; + } +} + +export default GlobalErrorBoundary; diff --git a/src/Home.jsx b/src/Home.jsx index 421812f..ea3be5c 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -18,7 +18,7 @@ import { useToast } from './hooks/use-toast'; import useProject from './hooks/useProject'; export const Home = () => { - const { activeObject } = useContext(ActiveObjectContext); + const { activeObject, setActiveObject } = useContext(ActiveObjectContext); const { canvas, selectedPanel } = useContext(CanvasContext); const { user, setUser } = useContext(AuthContext); const params = useParams(); @@ -62,11 +62,11 @@ export const Home = () => { if (token && !isLoading && data?.status === 201) { navigate("/"); } - if (projectData?.status === 404 || projectData?.status === 500) { + if (projectData?.status === 500 && id) { navigate("/"); toast({ variant: "destructive", title: projectData?.status, description: "No project found" }); } - if (projectData?.status === 200 & !projectLoading && projectData?.data?.object && canvas && selectedPanel === "project" && id) { + if (projectData && projectData?.status === 200 && !projectLoading && projectData?.data?.object && canvas && (selectedPanel === "project" || selectedPanel === "") && id) { const isEmpty = (obj) => Object.values(obj).length === 0; if (!isEmpty(projectData?.data?.object)) { canvas.loadFromJSON(projectData?.data?.object); @@ -75,8 +75,18 @@ export const Home = () => { } }, [navigate, isLoading, data, projectData, projectLoading, canvas, selectedPanel, id, toast]); + useEffect(() => { + if (!projectData && canvas) { + canvas.clear(); + canvas.renderAll(); + canvas.setBackgroundColor("#ffffff", canvas.renderAll.bind(canvas)); + + setActiveObject(null); + } + }, [projectData, canvas, setActiveObject]) + return ( -
+
{ isLoading &&
@@ -91,20 +101,20 @@ export const Home = () => { { activeObject && -
+
} -
+
-
+
-
+
@@ -118,6 +128,9 @@ export const Home = () => { }
+
+ +
) } diff --git a/src/components/Canvas/Canvas.jsx b/src/components/Canvas/Canvas.jsx index a92af36..5f24135 100644 --- a/src/components/Canvas/Canvas.jsx +++ b/src/components/Canvas/Canvas.jsx @@ -253,7 +253,7 @@ export default function Canvas() { >
+
{sidebarItems.map((item) => { const Icon = item.icon; return ( diff --git a/src/components/Pages/UnAuthenticated.jsx b/src/components/Pages/UnAuthenticated.jsx index 4df26b2..de3c5b9 100644 --- a/src/components/Pages/UnAuthenticated.jsx +++ b/src/components/Pages/UnAuthenticated.jsx @@ -16,7 +16,7 @@ const Unauthenticated = () => { Sorry, you need to be authenticated to access this page. Please log in to continue.

Go Back to Dashboard diff --git a/src/components/Panel/EditorPanel.jsx b/src/components/Panel/EditorPanel.jsx index 26ec807..6bb09f2 100644 --- a/src/components/Panel/EditorPanel.jsx +++ b/src/components/Panel/EditorPanel.jsx @@ -59,7 +59,7 @@ const EditorPanel = () => { return ( <> {selectedPanel !== "" && ( -
+
{renderPanel()}
)} diff --git a/src/components/Panel/ProjectPanel.jsx b/src/components/Panel/ProjectPanel.jsx index eec1779..c47bdfe 100644 --- a/src/components/Panel/ProjectPanel.jsx +++ b/src/components/Panel/ProjectPanel.jsx @@ -5,12 +5,15 @@ import { Loader, Trash, X } from 'lucide-react'; import { ScrollArea } from '../ui/scroll-area'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { getProjects } from '@/api/projectApi'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import useProject from '@/hooks/useProject'; export const ProjectPanel = () => { const { setSelectedPanel } = useContext(CanvasContext); + const params = useParams(); + const { id } = params; + const navigate = useNavigate(); const queryClient = useQueryClient(); // Initialize query client @@ -55,7 +58,7 @@ export const ProjectPanel = () => { return (
handleNavigate(project.id)} >

{project?.name}

diff --git a/src/components/SaveCanvas.jsx b/src/components/SaveCanvas.jsx index 067140b..d7cde93 100644 --- a/src/components/SaveCanvas.jsx +++ b/src/components/SaveCanvas.jsx @@ -6,10 +6,8 @@ import { Input } from './ui/input'; import { Label } from './ui/label'; import { Save, Trash2 } from 'lucide-react'; import { Textarea } from './ui/textarea'; -import { useMutation } from '@tanstack/react-query'; import { Button } from './ui/button'; import { Separator } from './ui/separator'; -import { deleteImage, uploadImage } from '@/api/uploadApi'; import useProject from '@/hooks/useProject'; import { captureCanvas } from '@/lib/captureCanvas'; import useCanvasCapture from '@/hooks/useCanvasCapture'; @@ -90,7 +88,7 @@ const SaveCanvas = () => { } const handleDeleteProject = () => { - projectDelete(); + projectDelete(id); } return ( diff --git a/src/hooks/useProject.jsx b/src/hooks/useProject.jsx index b081e42..1f8b56f 100644 --- a/src/hooks/useProject.jsx +++ b/src/hooks/useProject.jsx @@ -36,7 +36,7 @@ const useProject = () => { // Fetch project data const { data: projectData, isLoading } = useQuery({ queryKey: ["project", id], - queryFn: async () => await getProjectById(id), + queryFn: () => getProjectById(id), enabled: !!id, }); @@ -47,21 +47,25 @@ const useProject = () => { }, onSuccess: (data) => { if (data?.status === 200) { + if (selectedPanel === "canvas") { toast({ title: data?.status, description: data?.message, }) - setSelectedPanel(""); queryClient.invalidateQueries({ queryKey: ["project", id] }); queryClient.invalidateQueries({ queryKey: ["projects"] }); if (canvas) { canvas.clear(); canvas.renderAll(); canvas.setBackgroundColor("#ffffff", canvas.renderAll.bind(canvas)); + setActiveObject(null); + navigate("/"); + setSelectedPanel(""); } setActiveObject(null); navigate("/"); + setSelectedPanel(""); } queryClient.invalidateQueries({ queryKey: ["project", id] }); queryClient.invalidateQueries({ queryKey: ["projects"] }); diff --git a/src/main.jsx b/src/main.jsx index 2cf8462..4268609 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -8,6 +8,7 @@ import OpenContextProvider from "./components/Context/openContext/OpenContextPro import AuthContextProvider from "./components/Context/authContext/AuthProvider"; import { BrowserRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import GlobalErrorBoundary from "./ErrorBoundary"; // Create a client const queryClient = new QueryClient(); @@ -21,7 +22,9 @@ createRoot(document.getElementById("root")).render( - + + +