Slight refactor

Author: carolstran

src/components/FAQLayout/index.tsx

@@ -3,16 +3,12 @@ import FAQSection from "../FAQSection"
 
 interface Props {
   title: string
-  permalink: string
-  questions: string
   rawMarkdownBody: string
   pageContext: any
 }
 
 const index = ({
   title,
-  permalink,
-  questions,
   rawMarkdownBody,
   pageContext
 }: Props) => {
@@ -21,8 +17,6 @@ const index = ({
       <div className="documentationContent">
         <FAQSection
           title={title}
-          permalink={permalink}
-          questions={questions}
           rawMarkdownBody={rawMarkdownBody}
           pageContext={pageContext}
         />

src/components/FAQSection/index.tsx

@@ -3,7 +3,6 @@ import Marked from "../Marked"
 
 interface Props {
   title: string
-  permalink: string
   rawMarkdownBody: string
   pageContext: any
 }

src/content/faq/BestPractices.md

@@ -2,7 +2,6 @@
 title: Best Practices
 layout: faq
 permalink: /faq/#best-practices
-questions: Is GraphQL scalable?,Does GraphQL support offline usage?,What are the security concerns with GraphQL?,How can I set up authorization with GraphQL?,How does authentication work with GraphQL?,Is GraphQL the right fit for designing a microservice architecture?,How does versioning work in GraphQL?,How can I document my GraphQL API?
 position: 3
 ---
 

src/content/faq/Frontend.md

@@ -2,7 +2,6 @@
 title: Frontend
 layout: faq
 permalink: /faq/#frontend
-questions: Does GraphQL replace Redux or other state management libraries?
 position: 5
 ---
 

src/content/faq/General.md

@@ -2,7 +2,6 @@
 title: General
 layout: faq
 permalink: /faq/#general
-questions: Is GraphQL frontend or backend?,Does GraphQL use HTTP?,How does GraphQL affect my product’s performance?,What is a GraphQL client and why would I use one?,Does GraphQL replace ORMs?,Is GraphQL owned by Facebook?,Who is behind GraphQL?,What is the GraphQL Foundation?
 position: 2
 ---
 

src/content/faq/GettingStarted.md

@@ -2,7 +2,6 @@
 title: Getting Started
 layout: faq
 permalink: /faq/#getting-started
-questions: Why should I use GraphQL?,Does GraphQL replace REST?,Is GraphQL a database language like SQL?,How can I learn GraphQL?,Is GraphQL only for React or JavaScript developers?
 position: 1
 ---
 

src/content/faq/Specification.md

@@ -2,7 +2,6 @@
 title: Specification
 layout: faq
 permalink: /faq/#specification
-questions: What is the best way to follow specification releases?,How can I contribute to the GraphQL specification?,Where is the documentation for subscriptions?
 position: 4
 ---
 

src/pages/faq.tsx

@@ -1,72 +1,11 @@
-import React, { useEffect } from "react"
+import React from "react"
 import Layout from "../components/Layout"
 import FAQSection from "../components/FAQSection"
 import { graphql } from "gatsby"
-
-export const useAccordion = () => {
-  const toggleChildrenClass = (element: React.ReactNode) => {
-    console.log(nextUntil(element, 'h3'))
-    Array.from(nextUntil(element, 'h3')).map(p =>
-      p.classList.toggle('show')
-    );
-  };
-
-  var nextUntil = function (elem: any, selector: string) {
-
-    // Setup siblings array
-    var siblings = [];
-  
-    // Get the next sibling element
-    let nextElement = elem.nextElementSibling;
-  
-    // As long as a sibling exists
-    while (nextElement) {
-  
-      // If we've reached our match, bail
-      if (nextElement.matches(selector)) break;
-  
-      // Otherwise, push it to the siblings array
-      siblings.push(nextElement);
-  
-      // Get the next sibling element
-      nextElement = nextElement.nextElementSibling;
-  
-    }
-  
-    return siblings;
-  
-  };
-
-  useEffect(() => {
-    const hash = location.hash ? location.hash.split('#')[1] : '';
-
-    if (hash) {
-      const anchor = document && document.getElementById(hash)
-      const heading: any = anchor && anchor.parentNode;
-
-      if (heading) {
-        heading.classList.toggle('open');
-        toggleChildrenClass(heading);
-      }
-    }
-
-    const toggleClasses = (e: any) => {
-      if (e.target.localName !== 'h3') return;
-      history.replaceState({}, '', '#' + e.target.getElementsByTagName('a')[0].id);
-      history.scrollRestoration = 'manual';
-
-      e.target.classList.toggle('open');
-      toggleChildrenClass(e.target);
-    };
-
-    document.addEventListener('click', toggleClasses);
-
-    return () => document.removeEventListener('click', toggleClasses);
-  }, []);
-};
+import { useFAQAccordion } from "../utils/useFAQAccordion"
 
 export default ({ pageContext, data }: any) => {
-  useAccordion()
+  useFAQAccordion()
 
   const sections = data.allMarkdownRemark.edges
     .map((e: any) => e.node)
@@ -120,8 +59,6 @@ export const query = graphql`
         node {
           frontmatter {
             title
-            permalink
-            questions
             position
           }
           id

src/templates/doc.tsx

@@ -21,7 +21,7 @@ const layoutMap: any = {
 const Blog = ({ data, pageContext }: Props) => {
   const {
     doc: {
-      frontmatter: { title, date, permalink, byline, guestBio, layout, questions },
+      frontmatter: { title, date, permalink, byline, guestBio, layout },
       rawMarkdownBody,
     },
     nextDoc,
@@ -35,7 +35,6 @@ const Blog = ({ data, pageContext }: Props) => {
         permalink={permalink}
         byline={byline}
         guestBio={guestBio}
-        questions={questions}
         rawMarkdownBody={rawMarkdownBody}
         nextDoc={nextDoc}
         sideBarData={pageContext.sideBarData}
@@ -56,7 +55,6 @@ export const query = graphql`
         guestBio
         sublinks
         layout
-        questions
       }
       id
       rawMarkdownBody

src/utils/useFAQAccordion.ts

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react"
+
+export const useFAQAccordion = () => {
+    const toggleChildrenClass = (element: React.ReactNode) => {
+      console.log(nextUntil(element, 'h3'))
+      Array.from(nextUntil(element, 'h3')).map(p =>
+        p.classList.toggle('show')
+      );
+    };
+  
+    const nextUntil = (elem: any, selector: string) => {
+      const siblings = [];
+      let nextElement = elem.nextElementSibling;
+
+      while (nextElement) {
+        if (nextElement.matches(selector)) break;
+
+        siblings.push(nextElement);
+
+        nextElement = nextElement.nextElementSibling;
+      }
+    
+      return siblings;
+    
+    };
+  
+    useEffect(() => {
+      const hash = location.hash ? location.hash.split('#')[1] : '';
+  
+      if (hash) {
+        const anchor = document && document.getElementById(hash)
+        const heading: any = anchor && anchor.parentNode;
+  
+        if (heading) {
+          heading.classList.toggle('open');
+          toggleChildrenClass(heading);
+        }
+      }
+  
+      const toggleClasses = (e: any) => {
+        if (e.target.localName !== 'h3') return;
+        history.replaceState({}, '', '#' + e.target.getElementsByTagName('a')[0].id);
+        history.scrollRestoration = 'manual';
+  
+        e.target.classList.toggle('open');
+        toggleChildrenClass(e.target);
+      };
+  
+      document.addEventListener('click', toggleClasses);
+  
+      return () => document.removeEventListener('click', toggleClasses);
+    }, []);
+  };