refactor(accordion): lift up toggle and isOpen

yoshinorin · Aug 8, 2023 · dc0ebea · dc0ebea
1 parent 3857cfd
commit dc0ebea
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/components/content.tsx b/components/content.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Content, ContentMeta } from '../models/content';
 import { Insight } from '../models/insight';
 import containerStyles from '../styles/components/container.module.scss';
 import contentStyles from '../styles/components/content.module.scss';
-import Accordion from './accordion';
+import Accordion from './contentAccordion';
 
 const ContentComponent: React.FunctionComponent<{ content: Content, insight: Insight | null }> = ({content, insight}) => {
 
@@ -22,11 +23,19 @@ const ContentComponent: React.FunctionComponent<{ content: Content, insight: Ins
     insight: insight
   }, null, 2);
 
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => {
+    setIsOpen(!isOpen);
+  };
+
   return(
     <article className={contentStyles.content}>
       <div className={containerStyles.container} >
         <div className={`${contentStyles['accordion-wrap']}`} >
           <Accordion
+            open={isOpen}
+            onclick={toggle}
             title="Attributes / Insight ▼"
             content={json}
           />

diff --git a/components/accordion.tsx → components/contentAccordion.tsx b/components/accordion.tsx → components/contentAccordion.tsx
@@ -1,20 +1,13 @@
-import { useState } from 'react';
 import styles from '../styles/accordion.module.scss';
 
-const Accordion: React.FunctionComponent<{ title, content: string }> = ({title, content}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggle = () => {
-    setIsOpen(!isOpen);
-  };
-
+const Accordion: React.FunctionComponent<{ open: boolean, onclick: () => void, title: string, content: string }> = ({open, onclick, title, content}) => {
   return (
     <div className={styles.accordion} >
       <span className={`'unstyled' ${styles['menu-button']}`}
-            onClick={toggle}
+            onClick={onclick}
             dangerouslySetInnerHTML={{ __html: title }} >
       </span>
-      {isOpen && (
+      {open && (
         <pre className="accordion-content">
           {content}
         </pre>