La til searchParam for abonner (#206)

Co-authored-by: simsine <simen@simsine.no>

Author: mathiasunneland

components/modals/calendarModal.tsx

@@ -1,27 +1,33 @@
 "use client"
 import Modal from "@/components/modals/modal"
-import { useEffect, useMemo, useState } from "react"
+import { type ReactNode, useEffect, useMemo, useState } from "react"
 import type { EventType } from "@/sanity/types"
 import Select from "@/components/select/select"
 import { getEventTypeLabel } from "@/sanity/lib/utils"
 import AddToCalendarDropdown from "@/components/dropdown/addToCalendarDropdown"
+import { useSearchParams } from "next/navigation"
 
-const CalendarModal: Component = () => (
-    <Modal
-        size={"xl"}
-        label={"Abonner på arrangementer"}
-        modalTitle={"Abonner på arrangementer i kalenderen din"}
-        modalContent={<ModalContent />}
-        trigger={toggle => (
-            <button
-                onClick={toggle}
-                className={"text-root-primary dark:text-root-light"}
-                aria-label={"Åpne meny"}>
-                Abonner på arrangementer
-            </button>
-        )}
-    />
-)
+const CalendarModal: Component = () => {
+    const searchParams = useSearchParams()
+    const initState = searchParams.has("abonner")
+    return (
+        <Modal
+            initialState={initState}
+            size={"xl"}
+            label={"Abonner på arrangementer"}
+            modalTitle={"Abonner på arrangementer i kalenderen din"}
+            modalContent={<ModalContent />}
+            trigger={toggle => (
+                <button
+                    onClick={toggle}
+                    className={"text-root-primary dark:text-root-light"}
+                    aria-label={"Åpne meny"}>
+                    Abonner på arrangementer
+                </button>
+            )}
+        />
+    )
+}
 
 export default CalendarModal
 

components/modals/modal.tsx

@@ -12,6 +12,7 @@ import useToggle from "@/hooks/useToggle"
 import { type ReactNode } from "react"
 
 interface ModalProps extends DefaultProps {
+    initialState?: boolean
     label?: string
     modalTitle?: string
     modalContent?: ReactNode
@@ -21,6 +22,7 @@ interface ModalProps extends DefaultProps {
 
 /**
  * En modal som flyter over innholdet på siden.
+ * @param initialState
  * @param label Tittelen på knappen som åpner modalen. Vises kun hvis trigger ikke er satt.
  * @param size Størrelsen på modalen.
  * @param modalTitle Tittelen på modalen. Vises på toppen av modalen.
@@ -29,14 +31,15 @@ interface ModalProps extends DefaultProps {
  * @param props Andre props som sendes til Modal komponenten.
  */
 const Modal: Component<ModalProps> = ({
+    initialState,
     label,
     size,
     modalTitle,
     modalContent,
     trigger,
     ...props
 }) => {
-    const [isOpen, toggleOpen] = useToggle()
+    const [isOpen, toggleOpen] = useToggle(initialState ?? false)
 
     function closeModal() {
         toggleOpen(false)