feat: add ListingGroup props (#162)

* feat: add props

* feat: add isOpen prop

src/page_components/listing/ListingsGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { Button } from "../../actions/Button"
 import { Icon, UniversalIconType } from "../../icons/Icon"
 import "./ListingsGroup.scss"
@@ -11,6 +11,9 @@ export interface ListingsGroupProps {
   info?: string
   listingsCount: number
   showButtonText: string
+  refKey?: string
+  observerRef?: React.MutableRefObject<null | IntersectionObserver>
+  isOpen?: boolean
 }
 
 const ListingsGroup = (props: ListingsGroupProps) => {
@@ -19,6 +22,12 @@ const ListingsGroup = (props: ListingsGroupProps) => {
 
   const listingsCount = ` (${props.listingsCount})`
 
+  useEffect(() => {
+    if (props.isOpen) {
+      setShowListings(true)
+    }
+  }, [props.isOpen])
+
   return (
     <div className="listings-group">
       <div className="listings-group__header">
@@ -27,7 +36,17 @@ const ListingsGroup = (props: ListingsGroupProps) => {
             <Icon size="xlarge" symbol={props.icon ?? `clock`} />
           </div>
           <div className="listings-group__header-group">
-            <h2 className="listings-group__title">{props.header}</h2>
+            <h2
+              id={props.refKey ?? props.header}
+              ref={(el) => {
+                if (el) {
+                  props.observerRef?.current?.observe(el)
+                }
+              }}
+              className="listings-group__title"
+            >
+              {props.header}
+            </h2>
             {props.info && <div className="listings-group__info">{props.info}</div>}
           </div>
         </div>