Improvement: Fix lint issues

gatsby-config.js

@@ -157,17 +157,17 @@ module.exports = {
         name: `repo-read-the-docs`,
         remote: `https://github.com/oceanprotocol/readthedocs.git`,
         local: 'markdowns/',
-        branch: `gatsby`,
-        patterns: `markdowns/**`
-    }
+        branch: 'gatsby',
+        patterns: 'markdowns/**'
+      }
     },
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
         path: `${__dirname}/markdowns/markdowns`,
-        name: `markdowns`,
-      },
+        name: 'markdowns'
+      }
     },
-    `gatsby-transformer-remark`,
+    'gatsby-transformer-remark'
   ]
 }

gatsby-node.js

@@ -58,24 +58,24 @@ exports.createPages = ({ graphql, actions }) => {
               }
             }
 
-            allRepoMarkdown: allMarkdownRemark (
-                filter: { fileAbsolutePath: { regex: "/markdowns/" } }
-              ) {
-                edges {
-                  node {
-                    id
-                    html
-                    htmlAst
-                    tableOfContents
-                    frontmatter {
-                      slug
-                      title
-                      section
-                      sub_section
-                    }
+            allRepoMarkdown: allMarkdownRemark(
+              filter: { fileAbsolutePath: { regex: "/markdowns/" } }
+            ) {
+              edges {
+                node {
+                  id
+                  html
+                  htmlAst
+                  tableOfContents
+                  frontmatter {
+                    slug
+                    title
+                    section
+                    sub_section
                   }
                 }
               }
+            }
 
             oceanJs: github {
               repository(name: "ocean.js", owner: "oceanprotocol") {
@@ -111,7 +111,7 @@ exports.createPages = ({ graphql, actions }) => {
 
         const docTemplate = path.resolve('./src/templates/Doc.jsx')
         const posts = result.data.allMarkdownRemark.edges
-        
+
         //
         // Create Doc pages
         //
@@ -156,16 +156,20 @@ exports.createPages = ({ graphql, actions }) => {
         // console.log("Query result:", JSON.stringify(result))
         const markdowns = result.data.allRepoMarkdown.edges
         const prefix = '/read-the-docs'
-        let oceanPyList = markdowns.filter(({node}) => node.frontmatter.slug.startsWith(prefix + '/ocean-py/'))
-        let aquariusList = markdowns.filter(({node}) => node.frontmatter.slug.startsWith(prefix + '/aquarius/'))
-        let providerList = markdowns.filter(({node}) => node.frontmatter.slug.startsWith(prefix + '/provider/'))
-
+        const oceanPyList = filterMarkdownList(markdowns, prefix + '/ocean-py/')
+        const aquariusList = filterMarkdownList(
+          markdowns,
+          prefix + '/aquarius/'
+        )
+        const providerList = filterMarkdownList(
+          markdowns,
+          prefix + '/provider/'
+        )
 
         await createReadTheDocsPage(createPage, 'ocean-py', oceanPyList)
         await createReadTheDocsPage(createPage, 'aquarius', aquariusList)
         await createReadTheDocsPage(createPage, 'provider', providerList)
 
-
         resolve()
       })
     )
@@ -289,7 +293,7 @@ const createSwaggerPages = async (createPage) => {
   }
 }
 
-const createReadTheDocsPage = async (createPage, name, list)=>{
+const createReadTheDocsPage = async (createPage, name, list) => {
   const markdownListTemplate = path.resolve('./src/templates/MarkdownList.jsx')
   createPage({
     path: `/read-the-docs/${name}`,
@@ -300,18 +304,22 @@ const createReadTheDocsPage = async (createPage, name, list)=>{
     }
   })
 
-  list.forEach((element)=>{
+  list.forEach((element) => {
     createMarkdownPage(createPage, element)
   })
-
 }
 
-
-const createMarkdownPage = async (createPage, element)=>{
+const createMarkdownPage = async (createPage, element) => {
   // console.log("element", JSON.stringify(element.node.frontmatter))
   const markdownTemplate = path.resolve('./src/templates/MarkdownTemplate.jsx')
   createPage({
     path: element.node.frontmatter.slug,
     component: markdownTemplate
   })
-}
+}
+
+const filterMarkdownList = (markdownList, string) => {
+  return markdownList.filter(({ node }) =>
+    node.frontmatter.slug.startsWith(string)
+  )
+}

src/templates/MarkdownList.jsx

@@ -1,61 +1,73 @@
-import { Link } from "gatsby"
-import React, {useState} from "react"
-import Layout from "../components/Layout"
+import React, { useState } from 'react'
+import Layout from '../components/Layout'
 import HeaderSection from '../components/HeaderSection'
 import Content from '../components/Content'
 import styles from '../templates/Doc.module.scss'
 import MarkdownTemplate from './MarkdownTemplate'
-import stylesDoc from '../templates/Doc.module.scss'
 
-export default function MarkdownList({pageContext}) {
-
-  const sub_sections =  {}
-  pageContext.markdownList.map(({node}, index) => {
-    if(!sub_sections[node.frontmatter.sub_section]){
+export default function MarkdownList({ pageContext }) {
+  const sub_sections = {}
+  pageContext.markdownList.map(({ node }) => {
+    if (!sub_sections[node.frontmatter.sub_section]) {
       sub_sections[node.frontmatter.sub_section] = []
     }
     sub_sections[node.frontmatter.sub_section].push(node)
   })
 
-  const [selectedSubSection, setSelectedSubSection] = useState(0);
-  const [elem, setElem] = useState(sub_sections[Object.keys(sub_sections)[selectedSubSection]][0]);
+  const [selectedSubSection, setSelectedSubSection] = useState(0)
+  const [elem, setElem] = useState(
+    sub_sections[Object.keys(sub_sections)[selectedSubSection]][0]
+  )
 
-
-  const changePage = (sub_section_index, node)=>{
+  const changePage = (subSectionIndex, node) => {
     setElem(node)
-    setSelectedSubSection(sub_section_index)
-  };
+    setSelectedSubSection(subSectionIndex)
+  }
 
-  const changeSubsection = (index)=>{
+  const changeSubsection = (index) => {
     setSelectedSubSection(index)
     setElem(sub_sections[Object.keys(sub_sections)[index]][0])
-
-  };
+  }
 
   return (
     <Layout>
-        <HeaderSection title={pageContext.name} />
-        <Content>
+      <HeaderSection title={pageContext.name} />
+      <Content>
         <main className={styles.wrapper}>
-        <aside className={styles.sidebar}>
-        <ul>
-        {Object.keys(sub_sections).map((ele, sub_section_index)=>{
-          return selectedSubSection === sub_section_index?
-          (<li key={sub_section_index}>
-         <div onClick={()=>changeSubsection(sub_section_index)}>{ele.replaceAll('_', ' ')}</div> 
-        <ul>
-          {sub_sections[ele].map((node)=><li key={node.id} onClick={()=>changePage(sub_section_index, node)}>{node.frontmatter.title.replaceAll('_', ' ')}</li>)}
-        </ul>
-        </li>): <li><div onClick={()=>changeSubsection(sub_section_index)}>{ele.replaceAll('_', ' ')}</div></li> })}
-        </ul>
-        </aside>
-        <article className={stylesDoc.main}>
-          <MarkdownTemplate data={elem}></MarkdownTemplate>
-        </article>
+          <aside className={styles.sidebar}>
+            <ul>
+              {Object.keys(sub_sections).map((ele, subSectionIndex) => {
+                return selectedSubSection === subSectionIndex ? (
+                  <li key={subSectionIndex}>
+                    <div onClick={() => changeSubsection(subSectionIndex)}>
+                      {ele.replaceAll('_', ' ')}
+                    </div>
+                    <ul>
+                      {sub_sections[ele].map((node) => (
+                        <li
+                          key={node.id}
+                          onClick={() => changePage(subSectionIndex, node)}
+                        >
+                          {node.frontmatter.title.replaceAll('_', ' ')}
+                        </li>
+                      ))}
+                    </ul>
+                  </li>
+                ) : (
+                  <li>
+                    <div onClick={() => changeSubsection(subSectionIndex)}>
+                      {ele.replaceAll('_', ' ')}
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          </aside>
+          <article className={styles.main}>
+            <MarkdownTemplate data={elem}></MarkdownTemplate>
+          </article>
         </main>
-        </Content>
+      </Content>
     </Layout>
   )
 }
-
-

src/templates/MarkdownTemplate.jsx

@@ -1,23 +1,18 @@
-import { graphql } from 'gatsby'
 import React from 'react'
-import DocToc from '../components/DocToc'
-import DocHeader from '../components/DocHeader'
 import DocContent from '../components/DocContent'
-import Layout from '../components/Layout'
-import HeaderSection from '../components/HeaderSection'
 import Content from '../components/Content'
 
-export default function MarkdownTemplate({data}) {
+export default function MarkdownTemplate({ data }) {
   const post = data
   return (
     <>
-        {/* <div dangerouslySetInnerHTML={{__html:post.html}}></div> */}
-        {/* <DocHeader title={post.frontmatter.title}/> */}
-        {/* <HeaderSection title={post.frontmatter.title} />
+      {/* <div dangerouslySetInnerHTML={{__html:post.html}}></div> */}
+      {/* <DocHeader title={post.frontmatter.title}/> */}
+      {/* <HeaderSection title={post.frontmatter.title} />
         {post.tableOfContents && <DocToc tableOfContents={post.tableOfContents} />}*/}
-        <Content>
+      <Content>
         <DocContent html={post.html} htmlAst={post.htmlAst} />
-        </Content> 
+      </Content>
     </>
   )
 }
@@ -45,4 +40,3 @@ export default function MarkdownTemplate({data}) {
 //     }
 //   }
 //`
-