From 655b67c3ad7af5a1a2144a91db52ee037bf02ee8 Mon Sep 17 00:00:00 2001 From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com> Date: Mon, 30 Sep 2024 12:27:51 +0530 Subject: [PATCH] fix: preserve last environment id (#3185) --- .../settings/components/ProductSettings.tsx | 4 +-- .../components/EnvironmentStorageHandler.tsx | 18 ++++++++++++ .../components/MainNavigation.tsx | 17 ----------- .../environments/[environmentId]/layout.tsx | 2 ++ apps/web/app/ClientEnvironmentRedirect.tsx | 28 +++++++++++++++++++ apps/web/app/page.tsx | 3 +- packages/lib/localStorage.ts | 2 +- 7 files changed, 52 insertions(+), 22 deletions(-) create mode 100644 apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.tsx create mode 100644 apps/web/app/ClientEnvironmentRedirect.tsx diff --git a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/components/ProductSettings.tsx b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/components/ProductSettings.tsx index 8b227aa75a..96ed8f0c75 100644 --- a/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/components/ProductSettings.tsx +++ b/apps/web/app/(app)/(onboarding)/organizations/[organizationId]/products/new/settings/components/ProductSettings.tsx @@ -7,7 +7,7 @@ import { useRouter } from "next/navigation"; import { useForm } from "react-hook-form"; import { toast } from "react-hot-toast"; import { getFormattedErrorMessage } from "@formbricks/lib/actionClient/helper"; -import { FORMBRICKS_PRODUCT_ID_LS, FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage"; +import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage"; import { PREVIEW_SURVEY } from "@formbricks/lib/styling/constants"; import { TProductConfigChannel, @@ -64,8 +64,6 @@ export const ProductSettings = ({ ); if (productionEnvironment) { if (typeof window !== "undefined") { - localStorage.setItem(FORMBRICKS_PRODUCT_ID_LS, productionEnvironment.productId); - // Rmove filters when creating a new product localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS); } diff --git a/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.tsx b/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.tsx new file mode 100644 index 0000000000..6fba90b3d0 --- /dev/null +++ b/apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.tsx @@ -0,0 +1,18 @@ +"use client"; + +import { useEffect } from "react"; +import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@formbricks/lib/localStorage"; + +interface EnvironmentStorageHandlerProps { + environmentId: string; +} + +const EnvironmentStorageHandler = ({ environmentId }: EnvironmentStorageHandlerProps) => { + useEffect(() => { + localStorage.setItem(FORMBRICKS_ENVIRONMENT_ID_LS, environmentId); + }, [environmentId]); + + return null; +}; + +export default EnvironmentStorageHandler; diff --git a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx index 6bb177fbc8..31c9ee9f4e 100644 --- a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx @@ -32,7 +32,6 @@ import Link from "next/link"; import { usePathname, useRouter } from "next/navigation"; import { useEffect, useMemo, useState } from "react"; import { cn } from "@formbricks/lib/cn"; -import { FORMBRICKS_PRODUCT_ID_LS, FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@formbricks/lib/localStorage"; import { getAccessFlags } from "@formbricks/lib/membership/utils"; import { capitalizeFirstLetter } from "@formbricks/lib/utils/strings"; import { TEnvironment } from "@formbricks/types/environment"; @@ -119,16 +118,6 @@ export const MainNavigation = ({ } }, [organization]); - useEffect(() => { - if (typeof window === "undefined") return; - - const productId = localStorage.getItem(FORMBRICKS_PRODUCT_ID_LS); - const targetProduct = products.find((product) => product.id === productId); - if (targetProduct && productId && product && product.id !== targetProduct.id) { - router.push(`/products/${targetProduct.id}/`); - } - }, []); - const sortedOrganizations = useMemo(() => { return [...organizations].sort((a, b) => a.name.localeCompare(b.name)); }, [organizations]); @@ -155,12 +144,6 @@ export const MainNavigation = ({ }, [products]); const handleEnvironmentChangeByProduct = (productId: string) => { - if (typeof window !== "undefined") { - localStorage.setItem(FORMBRICKS_PRODUCT_ID_LS, productId); - - // Remove filters when switching products - localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS); - } router.push(`/products/${productId}/`); }; diff --git a/apps/web/app/(app)/environments/[environmentId]/layout.tsx b/apps/web/app/(app)/environments/[environmentId]/layout.tsx index 31085552f5..8758776391 100644 --- a/apps/web/app/(app)/environments/[environmentId]/layout.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/layout.tsx @@ -11,6 +11,7 @@ import { getUser } from "@formbricks/lib/user/service"; import { AuthorizationError } from "@formbricks/types/errors"; import { ToasterClient } from "@formbricks/ui/components/ToasterClient"; import { FormbricksClient } from "../../components/FormbricksClient"; +import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler"; import { PosthogIdentify } from "./components/PosthogIdentify"; const EnvLayout = async ({ children, params }) => { @@ -54,6 +55,7 @@ const EnvLayout = async ({ children, params }) => { /> + {children} diff --git a/apps/web/app/ClientEnvironmentRedirect.tsx b/apps/web/app/ClientEnvironmentRedirect.tsx new file mode 100644 index 0000000000..d6a4c50935 --- /dev/null +++ b/apps/web/app/ClientEnvironmentRedirect.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { useEffect } from "react"; +import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@formbricks/lib/localStorage"; + +interface ClientEnvironmentRedirectProps { + environmentId: string; +} + +const ClientEnvironmentRedirect = ({ environmentId }: ClientEnvironmentRedirectProps) => { + const router = useRouter(); + + useEffect(() => { + const lastEnvironmentId = localStorage.getItem(FORMBRICKS_ENVIRONMENT_ID_LS); + + if (lastEnvironmentId) { + // Redirect to the last environment the user was in + router.push(`/environments/${lastEnvironmentId}`); + } else { + router.push(`/environments/${environmentId}`); + } + }, [environmentId, router]); + + return null; +}; + +export default ClientEnvironmentRedirect; diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 3314b73499..88126d89f0 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,3 +1,4 @@ +import ClientEnvironmentRedirect from "@/app/ClientEnvironmentRedirect"; import type { Session } from "next-auth"; import { getServerSession } from "next-auth"; import { redirect } from "next/navigation"; @@ -42,7 +43,7 @@ const Page = async () => { return redirect(`/organizations/${userOrganizations[0].id}/products/new/mode`); } - return redirect(`/environments/${environment.id}`); + return ; }; export default Page; diff --git a/packages/lib/localStorage.ts b/packages/lib/localStorage.ts index fa43d85596..aa99a2afff 100644 --- a/packages/lib/localStorage.ts +++ b/packages/lib/localStorage.ts @@ -1,3 +1,3 @@ export const FORMBRICKS_SURVEYS_ORIENTATION_KEY_LS = "formbricks-surveys-orientation"; export const FORMBRICKS_SURVEYS_FILTERS_KEY_LS = "formbricks-surveys-filters"; -export const FORMBRICKS_PRODUCT_ID_LS = "formbricks-product-id"; +export const FORMBRICKS_ENVIRONMENT_ID_LS = "formbricks-environment-id";