Fix: Null issue comments and markdown rendering (#98)

* intall necessary dependencies

* add markdown wrapper to issue comment body

* fix issue comment returning empty values for next year

Author: IgboPharaoh

package.json

@@ -18,7 +18,8 @@
         "next": "13.5.4",
         "next-auth": "^4.24.4",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-markdown": "^9.0.1"
     },
     "devDependencies": {
         "@types/node": "^20",

src/app/components/collapsible/issues/index.tsx

@@ -12,6 +12,7 @@ import {
     contentHeading,
     getIssueNumber
 } from "@/helpers/utils"
+import { MarkdownWrapper } from "../../wrapper/MarkdownWrapper"
 
 type CollapsibleIssueProps = {
     issues: Comment[]
@@ -89,9 +90,10 @@ const CollaspsibleIssue = ({
                                             {issue.url}
                                         </Link>
                                     </section>
-                                    <p className="text-sm  text-black">
-                                        {issue.body}
-                                    </p>
+                                    <MarkdownWrapper
+                                        summary={issue.body}
+                                        className="text-sm  text-black"
+                                    />
 
                                     <div className="flex flex-row w-full gap-3 items-center text-xs text-black">
                                         <section className="flex items-center w-max gap-2">

src/app/components/wrapper/MarkdownWrapper.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+import ReactMarkdown from "react-markdown"
+import "../../globals.css"
+
+export const MarkdownWrapper = ({
+    summary,
+    className
+}: {
+    summary: string
+    className?: string | null | undefined
+}) => {
+    return (
+        <ReactMarkdown className={`markdownStyles ${className}`}>
+            {summary}
+        </ReactMarkdown>
+    )
+}

src/app/globals.css

@@ -40,3 +40,15 @@ body {
 .arrowLeftIcon:hover {
     background-color: #eeeeee;
 }
+
+.markdownStyles p {
+    margin: 16px 0px;
+}
+
+.summaryTags p {
+    margin: 0px 0px;
+}
+
+.markdownStyles a {
+    text-decoration: underline;
+}

src/helpers/get-issues-data.ts

@@ -74,11 +74,17 @@ export async function getIssueCommentsData({
 
             const data = await res.json()
             const jsonData: IssueCommentDataType = data.data.user
+            const {
+                startCursor,
+                hasNextPage: pageHasNextPage,
+                endCursor: pageEndCursor
+            } = jsonData?.issueComments?.pageInfo
 
             const nodes_data = jsonData?.issueComments?.nodes
-            const start_cursor = jsonData?.issueComments?.pageInfo?.startCursor
-            const isNextPage = jsonData?.issueComments?.pageInfo?.hasNextPage
-            const end_cursor = jsonData?.issueComments?.pageInfo?.endCursor
+            const start_cursor = startCursor
+            const isNextPage = pageHasNextPage
+            const end_cursor =
+                nodes_data.length >= 100 ? pageEndCursor : startCursor
 
             // get previous year from start date of query
             const prevYear = Number(getYearFromDate) - 1