From 0576716c4a3c838e8b5d914b745203514d088e1b Mon Sep 17 00:00:00 2001
From: Tom <tsmith123@users.noreply.github.com>
Date: Fri, 31 May 2024 16:20:52 +0100
Subject: [PATCH] Close related section (#1207)

* Fix issue with closing accordian

* Use onSelect

* Remove change to AccoridanCard

* Fix className typo

* Restore conditional
---
 components/accordian-item.js | 20 ++++++++++++++++----
 components/item-full.js      |  9 ++++++++-
 components/reply.js          | 10 +++++++++-
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/components/accordian-item.js b/components/accordian-item.js
index c3f5153b..7700eead 100644
--- a/components/accordian-item.js
+++ b/components/accordian-item.js
@@ -3,7 +3,9 @@ import AccordionContext from 'react-bootstrap/AccordionContext'
 import { useAccordionButton } from 'react-bootstrap/AccordionButton'
 import ArrowRight from '@/svgs/arrow-right-s-fill.svg'
 import ArrowDown from '@/svgs/arrow-down-s-fill.svg'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
+
+const KEY_ID = '0'
 
 function ContextAwareToggle ({ children, headerColor = 'var(--theme-grey)', eventKey, show }) {
   const { activeEventKey } = useContext(AccordionContext)
@@ -29,10 +31,20 @@ function ContextAwareToggle ({ children, headerColor = 'var(--theme-grey)', even
 }
 
 export default function AccordianItem ({ header, body, headerColor = 'var(--theme-grey)', show }) {
+  const [activeKey, setActiveKey] = useState()
+
+  useEffect(() => {
+    setActiveKey(show ? KEY_ID : null)
+  }, [show])
+
+  const handleOnSelect = () => {
+    setActiveKey(activeKey === KEY_ID ? null : KEY_ID)
+  }
+
   return (
-    <Accordion defaultActiveKey={show ? '0' : undefined}>
-      <ContextAwareToggle show={show} eventKey='0'><div style={{ color: headerColor }}>{header}</div></ContextAwareToggle>
-      <Accordion.Collapse eventKey='0' className='mt-2'>
+    <Accordion defaultActiveKey={activeKey} activeKey={activeKey} onSelect={handleOnSelect}>
+      <ContextAwareToggle show={show} eventKey={KEY_ID}><div style={{ color: headerColor }}>{header}</div></ContextAwareToggle>
+      <Accordion.Collapse eventKey={KEY_ID} className='mt-2'>
         <div>{body}</div>
       </Accordion.Collapse>
     </Accordion>
diff --git a/components/item-full.js b/components/item-full.js
index 222fce63..4dfd2f9c 100644
--- a/components/item-full.js
+++ b/components/item-full.js
@@ -176,7 +176,14 @@ function TopLevelItem ({ item, noReply, ...props }) {
       </article>
       {!noReply &&
         <>
-          <Reply item={item} replyOpen placeholder={item.ncomments > 3 ? 'fractions of a penny for your thoughts?' : 'early comments get more zaps'} onCancelQuote={cancelQuote} onQuoteReply={quoteReply} quote={quote} />
+          <Reply
+            item={item}
+            replyOpen
+            placeholder={item.ncomments > 3 ? 'fractions of a penny for your thoughts?' : 'early comments get more zaps'}
+            onCancelQuote={cancelQuote}
+            onQuoteReply={quoteReply}
+            quote={quote}
+          />
           {
           // Don't show related items for Saloon items (position is set but no subName)
           (!item.position && item.subName) &&
diff --git a/components/reply.js b/components/reply.js
index a5d13668..2ab5dacd 100644
--- a/components/reply.js
+++ b/components/reply.js
@@ -31,7 +31,15 @@ export function ReplyOnAnotherPage ({ item }) {
   )
 }
 
-export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children, placeholder, onQuoteReply, onCancelQuote, quote }, ref) {
+export default forwardRef(function Reply ({
+  item,
+  replyOpen,
+  children,
+  placeholder,
+  onQuoteReply,
+  onCancelQuote,
+  quote
+}, ref) {
   const [reply, setReply] = useState(replyOpen || quote)
   const me = useMe()
   const parentId = item.id