feat(UI-1171): add custom error page and improve organization switchi…

…ng logic

src/app.tsx

@@ -31,7 +31,16 @@ import {
 import { EventsList } from "@components/organisms/shared";
 import { AddTrigger, EditTrigger, TriggersTable } from "@components/organisms/triggers";
 import { AddVariable, EditVariable, VariablesTable } from "@components/organisms/variables";
-import { Connections, Dashboard, Internal404, Intro, Project, Triggers, Variables } from "@components/pages";
+import {
+	Connections,
+	CustomError,
+	Dashboard,
+	Internal404,
+	Intro,
+	Project,
+	Triggers,
+	Variables,
+} from "@components/pages";
 import { AppLayout, EventsLayout } from "@components/templates";
 import { SettingsLayout } from "@components/templates/settingsLayout";
 
@@ -262,6 +271,10 @@ export const App = () => {
 			</Route>
 
 			<Route element={<Navigate replace to="/404" />} path="*" />
+
+			<Route element={<AppLayout hideTopbar />} path="error">
+				<Route element={<CustomError />} index />
+			</Route>
 		</AKRoutes>
 	);
 };

src/components/organisms/settings/organization/switchOrganization.tsx

@@ -1,19 +1,48 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { Navigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Navigate, useNavigate, useParams } from "react-router-dom";
 
-import { useOrganizationStore } from "@src/store";
+import { useOrganizationStore, useProjectStore } from "@src/store";
+
+import { Loader } from "@components/atoms";
 
 export const SwitchOrganization = () => {
+	const { t } = useTranslation("errors");
 	const { organizationId } = useParams();
-	const { setCurrentOrganizationId } = useOrganizationStore();
+	const [isProcessing, setIsProcessing] = useState(true);
+	const { organizationsList, setCurrentOrganizationId } = useOrganizationStore();
+	const { getProjectsList } = useProjectStore();
+	const navigate = useNavigate();
+
+	const currentOrganization = useMemo(
+		() => organizationsList?.find((organization) => organization.orgId === organizationId),
+		[organizationId, organizationsList]
+	);
+
+	const switchProjectList = useCallback(async () => {
+		try {
+			if (organizationId) {
+				await getProjectsList(organizationId);
+			}
+		} finally {
+			setIsProcessing(false);
+		}
+	}, [organizationId, getProjectsList]);
 
 	useEffect(() => {
-		if (organizationId) {
+		if (organizationId && currentOrganization) {
 			setCurrentOrganizationId(organizationId);
+			switchProjectList();
+		} else if (!currentOrganization) {
+			navigate("/error", { state: { error: t("organizationNotFound") } });
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [organizationId, currentOrganization]);
+
+	if (isProcessing) {
+		return <Loader isCenter size="lg" />;
+	}
 
 	return <Navigate state={{ organizationId }} to="/" />;
 };

src/components/pages/customError.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { useTranslation } from "react-i18next";
+import { Link, useLocation } from "react-router-dom";
+
+import { homepageURL } from "@constants/global.constants";
+
+export const CustomError = () => {
+	const { t } = useTranslation("global", { keyPrefix: "customError" });
+	const location = useLocation();
+	const stateError = location.state as { error?: string };
+
+	return (
+		<div className="flex w-full flex-1 flex-col items-center justify-center py-5">
+			<div className="mt-16 font-fira-code text-lg text-black">
+				{t("error")}: {stateError?.error}
+			</div>
+
+			<Link className="mt-4 font-fira-code text-lg font-bold text-black" to={homepageURL}>
+				{t("goToHomepage")}
+			</Link>
+		</div>
+	);
+};

src/components/pages/dashboard.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useId, useMemo } from "react";
 
-import { useLocation } from "react-router-dom";
-
 import { useResize, useWindowDimensions } from "@src/hooks";
 import { useProjectStore } from "@src/store";
 
@@ -15,12 +13,10 @@ export const Dashboard = () => {
 	const [leftSideWidth] = useResize({ direction: "horizontal", initial: 70, max: 70, min: 30, id: resizeId });
 	const { isMobile } = useWindowDimensions();
 	const { getProjectsList, isLoadingProjectsList, projectsList } = useProjectStore();
-	const location = useLocation();
-	const state = location.state as { organizationId?: string };
 
 	useEffect(() => {
-		if ((!projectsList.length && isMobile) || state?.organizationId) {
-			getProjectsList(state?.organizationId);
+		if (!projectsList.length && isMobile) {
+			getProjectsList();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);

src/components/pages/index.ts

@@ -1,4 +1,5 @@
 export { Connections } from "@components/pages/connections";
+export { CustomError } from "@components/pages/customError";
 export { Dashboard } from "@components/pages/dashboard";
 export { External404 } from "@components/pages/external404";
 export { Internal404 } from "@components/pages/internal404";

src/locales/en/errors/translation.json

@@ -96,5 +96,6 @@
 	"errorFetchingIntegrations": "Error fetching integrations",
 	"errorSendingFeedback": "Error sending feedback",
 	"errorSendingFeedbackExtended": "Error sending feedback, error: {{error}}",
-	"errorCreateNewOrganization": "Error creating a new organization"
+	"errorCreateNewOrganization": "Error creating a new organization",
+	"organizationNotFound": "Organization not found"
 }

src/locales/en/global/translation.json

@@ -29,5 +29,9 @@
 			},
 			"error": "Something went wrong, please try again later"
 		}
+	},
+	"customError": {
+		"goToHomepage": "Back to Homepage",
+		"error": "Error"
 	}	
 }