Abonner

components/modals/calendarModal.tsx

@@ -5,23 +5,30 @@ 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()
+    // Parameter for å åpne modal når side laster
+    const startOpen = searchParams.has("abonner")
+    return (
+        <Modal
+            initialState={startOpen}
+            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

@@ -6,12 +6,13 @@ import {
     ModalFooter,
     ModalHeader,
     ModalProps as _ModalProps,
+    useDisclosure,
 } from "@heroui/react"
 import { Button } from "@/components/buttons/button"
-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 State til om modal skal starte åpen eller lukket
  * @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,31 +31,28 @@ 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()
-
-    function closeModal() {
-        toggleOpen(false)
-    }
+    const { isOpen, onOpen, onOpenChange } = useDisclosure({defaultOpen: initialState})
 
     return (
         <>
             {trigger ? (
-                trigger(toggleOpen)
+                trigger(onOpen)
             ) : (
-                <Button onClick={() => toggleOpen()} aria-label={"Åpne dialogboks"}>
+                <Button onClick={() => onOpen()} aria-label={"Åpne dialogboks"}>
                     {label}
                 </Button>
             )}
             <_Modal
                 isOpen={isOpen}
-                onClose={closeModal}
+                onOpenChange={onOpenChange}
                 size={size}
                 placement={"center"}
                 classNames={{ wrapper: ["z-[150]"], backdrop: ["z-[150]"] }}