From 3679854c4340441d0cb1ae57c3018d573c897fdf Mon Sep 17 00:00:00 2001
From: Greg Pabian <35925521+grzpab@users.noreply.github.com>
Date: Mon, 23 Oct 2023 20:54:33 +0200
Subject: [PATCH] chore: [app dir bootstrapping 3] check nullability in
 AppListCard (#11980)

---
 apps/web/components/AppListCard.tsx      | 17 ++++++++++-------
 apps/web/playwright/app-list-card.e2e.ts | 14 ++++++++++++++
 2 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/playwright/app-list-card.e2e.ts

diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx
index 7252a8ffc6..2f9547fbb7 100644
--- a/apps/web/components/AppListCard.tsx
+++ b/apps/web/components/AppListCard.tsx
@@ -60,14 +60,18 @@ export default function AppListCard(props: AppListCardProps) {
   const pathname = usePathname();
 
   useEffect(() => {
-    if (shouldHighlight && highlight) {
-      const timer = setTimeout(() => {
-        setHighlight(false);
+    if (shouldHighlight && highlight && searchParams !== null && pathname !== null) {
+      timeoutRef.current = setTimeout(() => {
         const _searchParams = new URLSearchParams(searchParams);
         _searchParams.delete("hl");
-        router.replace(`${pathname}?${_searchParams.toString()}`);
+        _searchParams.delete("category"); // this comes from params, not from search params
+
+        setHighlight(false);
+
+        const stringifiedSearchParams = _searchParams.toString();
+
+        router.replace(`${pathname}${stringifiedSearchParams !== "" ? `?${stringifiedSearchParams}` : ""}`);
       }, 3000);
-      timeoutRef.current = timer;
     }
     return () => {
       if (timeoutRef.current) {
@@ -75,8 +79,7 @@ export default function AppListCard(props: AppListCardProps) {
         timeoutRef.current = null;
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [highlight, pathname, router, searchParams, shouldHighlight]);
 
   return (
     <div className={classNames(highlight && "dark:bg-muted bg-yellow-100")}>
diff --git a/apps/web/playwright/app-list-card.e2e.ts b/apps/web/playwright/app-list-card.e2e.ts
new file mode 100644
index 0000000000..780bf759af
--- /dev/null
+++ b/apps/web/playwright/app-list-card.e2e.ts
@@ -0,0 +1,14 @@
+import { test } from "./lib/fixtures";
+
+test.describe("AppListCard", async () => {
+  test("should remove the highlight from the URL", async ({ page, users }) => {
+    const user = await users.create({});
+    await user.apiLogin();
+
+    await page.goto("/apps/installed/conferencing?hl=daily-video");
+
+    await page.waitForLoadState();
+
+    await page.waitForURL("/apps/installed/conferencing");
+  });
+});