chore(refactor): implement a custom hook for comments

src/hooks/useComments.ts

@@ -0,0 +1,46 @@
+import {
+  MetadataController,
+  RelayController,
+  UserRelaysType
+} from 'controllers'
+import { Filter, kinds } from 'nostr-tools'
+import { useState } from 'react'
+import { CommentEvent, ModDetails } from 'types'
+import { useDidMount } from './useDidMount'
+
+export const useComments = (mod: ModDetails) => {
+  const [commentEvents, setCommentEvents] = useState<CommentEvent[]>([])
+
+  useDidMount(async () => {
+    const metadataController = await MetadataController.getInstance()
+
+    const authorReadRelays = await metadataController.findUserRelays(
+      mod.author,
+      UserRelaysType.Read
+    )
+
+    const filter: Filter = {
+      kinds: [kinds.ShortTextNote],
+      '#a': [mod.aTag]
+    }
+
+    RelayController.getInstance().subscribeForEvents(
+      filter,
+      authorReadRelays,
+      (event) => {
+        setCommentEvents((prev) => {
+          if (prev.find((e) => e.id === event.id)) {
+            return [...prev]
+          }
+
+          return [event, ...prev]
+        })
+      }
+    )
+  })
+
+  return {
+    commentEvents,
+    setCommentEvents
+  }
+}

src/pages/mod/internal/comment/index.tsx

@@ -6,19 +6,24 @@ import {
 } from 'controllers'
 import { formatDate } from 'date-fns'
 import { useAppSelector, useDidMount, useReactions } from 'hooks'
-import {
-  Event,
-  kinds,
-  nip19,
-  Filter as NostrEventFilter,
-  UnsignedEvent
-} from 'nostr-tools'
-import React, { useEffect, useMemo } from 'react'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { useComments } from 'hooks/useComments'
+import { Event, kinds, nip19, UnsignedEvent } from 'nostr-tools'
+import React, {
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useMemo,
+  useState
+} from 'react'
 import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { getProfilePageRoute } from 'routes'
-import { ModDetails, UserProfile } from 'types'
+import {
+  CommentEvent,
+  CommentEventStatus,
+  ModDetails,
+  UserProfile
+} from 'types/index.ts'
 import { abbreviateNumber, hexToNpub, log, LogType, now } from 'utils'
 
 enum SortByEnum {
@@ -36,23 +41,13 @@ type FilterOptions = {
   author: AuthorFilterEnum
 }
 
-enum CommentEventStatus {
-  Publishing = 'Publishing comment...',
-  Published = 'Published!',
-  Failed = 'Failed to publish comment.'
-}
-
-interface CommentEvent extends Event {
-  status?: CommentEventStatus
-}
-
 type Props = {
   modDetails: ModDetails
   setCommentCount: Dispatch<SetStateAction<number>>
 }
 
 export const Comments = ({ modDetails, setCommentCount }: Props) => {
-  const [commentEvents, setCommentEvents] = useState<CommentEvent[]>([])
+  const { commentEvents, setCommentEvents } = useComments(modDetails)
   const [filterOptions, setFilterOptions] = useState<FilterOptions>({
     sort: SortByEnum.Latest,
     author: AuthorFilterEnum.All_Comments
@@ -64,34 +59,6 @@ export const Comments = ({ modDetails, setCommentCount }: Props) => {
 
   const userState = useAppSelector((state) => state.user)
 
-  useDidMount(async () => {
-    const metadataController = await MetadataController.getInstance()
-
-    const authorReadRelays = await metadataController.findUserRelays(
-      modDetails.author,
-      UserRelaysType.Read
-    )
-
-    const filter: NostrEventFilter = {
-      kinds: [kinds.ShortTextNote],
-      '#a': [modDetails.aTag]
-    }
-
-    RelayController.getInstance().subscribeForEvents(
-      filter,
-      authorReadRelays,
-      (event) => {
-        setCommentEvents((prev) => {
-          if (prev.find((e) => e.id === event.id)) {
-            return [...prev]
-          }
-
-          return [event, ...prev]
-        })
-      }
-    )
-  })
-
   const handleSubmit = async (content: string): Promise<boolean> => {
     if (content === '') return false
 

src/types/mod.ts

@@ -1,3 +1,15 @@
+import { Event } from 'nostr-tools'
+
+export enum CommentEventStatus {
+  Publishing = 'Publishing comment...',
+  Published = 'Published!',
+  Failed = 'Failed to publish comment.'
+}
+
+export interface CommentEvent extends Event {
+  status?: CommentEventStatus
+}
+
 export type Game = {
   'Game Name': string
   '16 by 9 image': string