From ca5e4c13d31aeb603660972536712ea161c6f870 Mon Sep 17 00:00:00 2001
From: Abdulrahman Alshahrani <62489819+Abdomash@users.noreply.github.com>
Date: Tue, 31 Dec 2024 22:44:16 +0300
Subject: [PATCH] feat: add 'new search' link to the course catalog page (#456)

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
---
 src/views/components/CourseCatalogMain.tsx    |  2 +
 .../components/injected/NewSearchLink.tsx     | 49 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/views/components/injected/NewSearchLink.tsx

diff --git a/src/views/components/CourseCatalogMain.tsx b/src/views/components/CourseCatalogMain.tsx
index d7c0f9f7..fda10b7e 100644
--- a/src/views/components/CourseCatalogMain.tsx
+++ b/src/views/components/CourseCatalogMain.tsx
@@ -2,6 +2,7 @@ import type { Course, ScrapedRow } from '@shared/types/Course';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import AutoLoad from '@views/components/injected/AutoLoad/AutoLoad';
 import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
+import NewSearchLink from '@views/components/injected/NewSearchLink';
 import RecruitmentBanner from '@views/components/injected/RecruitmentBanner/RecruitmentBanner';
 import TableHead from '@views/components/injected/TableHead';
 import TableRow from '@views/components/injected/TableRow/TableRow';
@@ -61,6 +62,7 @@ export default function CourseCatalogMain({ support }: Props): JSX.Element | nul
 
     return (
         <ExtensionRoot>
+            <NewSearchLink />
             <RecruitmentBanner />
             <TableHead>Plus</TableHead>
             {rows.map(
diff --git a/src/views/components/injected/NewSearchLink.tsx b/src/views/components/injected/NewSearchLink.tsx
new file mode 100644
index 00000000..6c7e4b81
--- /dev/null
+++ b/src/views/components/injected/NewSearchLink.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * This creates a 'Begin a new search' link above the course catalog table.
+ *
+ * @returns a react portal to the new link container or null if the container is not found.
+ */
+export default function NewSearchLink() {
+    const [container, setContainer] = useState<HTMLElement | null>(null);
+    const newContainerId = 'ut-registration-plus-new-search-link';
+
+    const searchLink = document.querySelector('#bottom_nav > p:nth-child(2)');
+    const linkContent = {
+        href: searchLink?.querySelector('a')?.href,
+        title: searchLink?.querySelector('a')?.title,
+        text: searchLink?.querySelector('a')?.textContent,
+    };
+
+    useEffect(() => {
+        if (document.getElementById(newContainerId)) {
+            return;
+        }
+
+        const innerBody = document.querySelector('#inner_body');
+        if (!innerBody) {
+            return;
+        }
+
+        const containerElement = document.createElement('div');
+        containerElement.setAttribute('id', newContainerId);
+
+        innerBody.prepend(containerElement);
+        setContainer(containerElement);
+    }, []);
+
+    if (!container) {
+        return null;
+    }
+
+    return createPortal(
+        <p>
+            <a href={linkContent.href} title={linkContent.title}>
+                {linkContent.text}
+            </a>
+        </p>,
+        container
+    );
+}