XeNote/components/MDContent.tsx

import React from 'react';
import { useRouter } from 'next/router'

interface BackLinksProps {
  linkList: unknown[]
}

function BackLinks({ linkList }) {
  return (<div className="note-footer">
    <h3 className="backlink-heading">Link to this note</h3>
    {(linkList != null && linkList.length > 0)
      ?
      <>
        <div className="backlink-container">
          {linkList.map(aLink =>
            <div key={aLink.slug} className="backlink">
              {/*<Link href={aLink.slug}>*/}
              <a href={aLink.slug}>
                <p className="backlink-title">{aLink.title}</p>
                <p className="backlink-preview">{aLink.shortSummary} </p>
              </a>
              {/*</Link>*/}
            </div>
          )}
        </div>
      </>
      : <> <p className="no-backlinks"> No backlinks found</p> </>}
  </div>);
}


interface MDContentProps {
  content: unknown
  backLinks: unknown[]
  handleOpenNewContent: (arg?: unknown) => void
}

function MDContent({ content, backLinks, handleOpenNewContent }: MDContentProps) {

  function _handleInternalLinkClick() {
    //Processing fetching
    //pass result up to parent container
    //TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent
    handleOpenNewContent(content)
  }

  useRouter();

  return (

    <div className="markdown-rendered">
      <div dangerouslySetInnerHTML={{ __html: content }} />
      <BackLinksGroup links={backLinks} />
      <hr />
      <footer>
        <p>Powered by  <a href="https://gitlab.com/Tarmstrong95">Triston</a>, © {new Date().getFullYear()}</p>
      </footer>
    </div>
  );
}

function BackLinksGroup({ links }) {

  if (!links?.length) {
    return (
      <p className="no-backlinks"> No backlinks found</p>
    )
  }

  return (
    <details>
      <summary>
        BackLinks
      </summary>
      <BackLinks linkList={links} />
    </details>
  )
}

export default MDContent;