Move logic of toggle component into a convenience hook

nulib · Mar 4, 2024 · 31f7df8 · 31f7df8
1 parent 3d8c80d
commit 31f7df8
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 59 deletions.
diff --git a/components/Search/GenerativeAIToggle.tsx b/components/Search/GenerativeAIToggle.tsx
@@ -4,15 +4,13 @@ import {
   CheckboxRoot,
   GenerativeAIToggleWrapper,
 } from "./Search.styled";
-import React, { useEffect, useState } from "react";
 
 import { DCAPI_ENDPOINT } from "@/lib/constants/endpoints";
 import GenerativeAIDialog from "@/components/Shared/Dialog";
 import { IconCheck } from "@/components/Shared/SVG/Icons";
 import { IconInfo } from "@/components/Shared/SVG/Icons";
-import { UserContext } from "@/context/user-context";
-import { useRouter } from "next/router";
-import { useSearchState } from "@/context/search-context";
+import React from "react";
+import useGenerativeAISearchToggle from "@/hooks/useGenerativeAISearchToggle";
 
 type GenerativeAIToggleProps = {
   isSearchActive: boolean;
@@ -21,59 +19,18 @@ type GenerativeAIToggleProps = {
 export default function GenerativeAIToggle({
   isSearchActive,
 }: GenerativeAIToggleProps) {
-  const router = useRouter();
-  const { searchState, searchDispatch } = useSearchState();
-  const { user } = React.useContext(UserContext);
-
-  const [modalGenerativeAI, setModalGenerativeUI] = useState({
-    isOpen: false,
-    title: "Generative AI Dialog",
-  });
-  const [genAICheckBox, setGenAICheckBox] = useState<boolean>(
-    searchState.isGenerativeAI
-  );
-
-  const handleGenerativeAIChange = (checked: boolean) => {
-    if (!user?.isLoggedIn) {
-      setModalGenerativeUI({ ...modalGenerativeAI, isOpen: checked });
-    }
-
-    if (user?.isLoggedIn) {
-      searchDispatch({
-        isGenerativeAI: checked,
-        type: "updateGenerativeAI",
-      });
-    }
-  };
-
-  useEffect(() => {
-    setGenAICheckBox(searchState.isGenerativeAI);
-  }, [searchState.isGenerativeAI]);
-
-  // TODO: This needs to accept more than one query param when
-  // directing to NU SSO.  We need the additional query param
-  // to know that user came wanting to use Generative AI
-  function goToLocation() {
-    const currentUrl = `${window.location.origin}${router.asPath}`;
-    const url = new URL(currentUrl);
-    url.searchParams.set("ai", "true");
-    console.log("url.toString()", url.toString());
-    return url.toString();
-  }
-
-  function handleModalClose() {
-    setModalGenerativeUI({ ...modalGenerativeAI, isOpen: false });
-  }
+  const { closeDialog, dialog, goToUrl, isChecked, handleCheckChange } =
+    useGenerativeAISearchToggle();
 
   return (
     <>
       <GenerativeAIToggleWrapper
         {...(isSearchActive ? { css: { marginRight: "$gr5" } } : {})}
       >
         <CheckboxRoot
-          checked={genAICheckBox}
-          name="isGenerativeAI"
-          onCheckedChange={handleGenerativeAIChange}
+          checked={isChecked}
+          id="isGenerativeAI"
+          onCheckedChange={handleCheckChange}
         >
           <CheckboxIndicator>
             <IconCheck />
@@ -84,12 +41,12 @@ export default function GenerativeAIToggle({
         <IconInfo />
       </GenerativeAIToggleWrapper>
       <GenerativeAIDialog
-        isOpen={modalGenerativeAI.isOpen}
-        title={modalGenerativeAI.title}
-        handleCloseClick={handleModalClose}
+        isOpen={dialog.isOpen}
+        title={dialog.title}
+        handleCloseClick={closeDialog}
       >
         <p>
-          <a href={`${DCAPI_ENDPOINT}/auth/login?goto=${window.location}`}>
+          <a href={`${DCAPI_ENDPOINT}/auth/login?goto=${goToUrl()}`}>
             Click here
           </a>{" "}
           to login

diff --git a/hooks/useGenerativeAISearch.ts b/hooks/useGenerativeAISearch.ts
diff --git a/hooks/useGenerativeAISearchToggle.ts b/hooks/useGenerativeAISearchToggle.ts
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+
+import { UserContext } from "@/context/user-context";
+import { useRouter } from "next/router";
+import { useSearchState } from "@/context/search-context";
+
+const defaultModalState = {
+  isOpen: false,
+  title: "Generative AI Dialog",
+};
+
+export default function useGenerativeAISearchToggle() {
+  const { searchState, searchDispatch } = useSearchState();
+  const { user } = React.useContext(UserContext);
+  const router = useRouter();
+
+  const [dialog, setDialog] = useState(defaultModalState);
+  const [isChecked, setIsChecked] = useState<boolean>(
+    searchState.isGenerativeAI
+  );
+
+  const handleCheckChange = (checked: boolean) => {
+    if (!user?.isLoggedIn) {
+      setDialog({ ...dialog, isOpen: checked });
+    }
+
+    if (user?.isLoggedIn) {
+      searchDispatch({
+        isGenerativeAI: checked,
+        type: "updateGenerativeAI",
+      });
+    }
+  };
+
+  useEffect(() => {
+    setIsChecked(searchState.isGenerativeAI);
+  }, [searchState.isGenerativeAI]);
+
+  // TODO: This needs to accept more than one query param when
+  // directing to NU SSO.  We need the additional query param
+  // to know that user came wanting to use Generative AI
+  function goToLocation() {
+    const currentUrl = `${window.location.origin}${router.asPath}`;
+    const url = new URL(currentUrl);
+    url.searchParams.set("ai", "true");
+    return url.toString();
+  }
+
+  function closeDialog() {
+    setDialog({ ...dialog, isOpen: false });
+  }
+
+  return {
+    closeDialog,
+    dialog,
+    goToUrl: goToLocation,
+    handleCheckChange,
+    isChecked,
+  };
+}