Refactor Vmacros component to use custom useMacros hook and streamline repo context handling

Author: PentSec

src/context/MacroContext.tsx

@@ -1,15 +1,10 @@
+import { RepoItem } from '@/types'
 import { useQuery } from '@tanstack/react-query'
 import { createContext, FC, ReactNode, useContext } from 'react'
 
 const GITHUB_API_URL =
     'https://api.github.com/repos/MaddonsManager/Vanilla-Macros/git/trees/master?recursive=1'
 
-interface RepoItem {
-    path: string
-    type: 'blob' | 'tree'
-    mdContent: string | null
-}
-
 interface RepoContextValue {
     repoTree: RepoItem[]
     error: string | null

src/hook/useVMacros.ts

@@ -0,0 +1,65 @@
+import { useRepoContext } from '@/context/MacroContext'
+import { useEffect, useMemo, useState } from 'react'
+
+export const useMacros = () => {
+    const { repoTree, isPending, error } = useRepoContext()
+    const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null)
+    const [fileContent, setFileContent] = useState<string>('')
+    const [searchTerm, setSearchTerm] = useState<string>('')
+
+    useEffect(() => {
+        if (selectedFilePath) {
+            const file = repoTree.find((item) => item.path === selectedFilePath)
+            setFileContent(file?.mdContent || 'Dont have content for this file.')
+        }
+    }, [selectedFilePath, repoTree])
+
+    const folders = useMemo(() => {
+        return repoTree.reduce<
+            Record<string, Record<string, { path: string; mdContent: string | null }[]>>
+        >((acc, item) => {
+            if (item.type === 'blob' && item.path.endsWith('.md')) {
+                const parts = item.path.split('/')
+                const folder = parts[0]
+                const subFolder = parts.length > 2 ? parts[1] : ''
+
+                acc[folder] = acc[folder] || {}
+                acc[folder][subFolder] = acc[folder][subFolder] || []
+                acc[folder][subFolder].push({ path: item.path, mdContent: item.mdContent })
+            }
+            return acc
+        }, {})
+    }, [repoTree])
+
+    const filteredFolders = useMemo(() => {
+        if (!searchTerm) return folders
+
+        const lowerSearch = searchTerm.toLowerCase()
+        const result: typeof folders = {}
+
+        for (const [folder, subfolders] of Object.entries(folders)) {
+            for (const [subfolder, files] of Object.entries(subfolders)) {
+                const filteredFiles = files.filter(({ path }) =>
+                    path.toLowerCase().includes(lowerSearch)
+                )
+
+                if (filteredFiles.length > 0) {
+                    if (!result[folder]) result[folder] = {}
+                    result[folder][subfolder] = filteredFiles
+                }
+            }
+        }
+        return result
+    }, [folders, searchTerm])
+
+    return {
+        isPending,
+        error,
+        selectedFilePath,
+        setSelectedFilePath,
+        fileContent,
+        searchTerm,
+        setSearchTerm,
+        filteredFolders
+    }
+}

src/pages/Vmacros/Vmacros.tsx

@@ -1,6 +1,6 @@
 import { BookTextIcon, MenuIcon } from '@/assets/Icons'
 import { Markdown } from '@/components'
-import { useRepoContext } from '@/context/MacroContext'
+import { useMacros } from '@/hook/useVMacros'
 import {
     Accordion,
     AccordionItem,
@@ -11,7 +11,6 @@ import {
     Snippet,
     Spinner
 } from '@heroui/react'
-import { useEffect, useMemo, useState } from 'react'
 
 const getBreadcrumbs = (path: string) =>
     path
@@ -23,55 +22,16 @@ const getBreadcrumbs = (path: string) =>
         ))
 
 export default function Vmacros() {
-    const { repoTree, isPending, error } = useRepoContext()
-    const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null)
-    const [fileContent, setFileContent] = useState<string>('')
-    const [searchTerm, setSearchTerm] = useState<string>('')
-
-    useEffect(() => {
-        if (selectedFilePath) {
-            const file = repoTree.find((item) => item.path === selectedFilePath)
-            setFileContent(file?.mdContent || 'No hay contenido disponible para este archivo.')
-        }
-    }, [selectedFilePath, repoTree])
-
-    const folders = useMemo(() => {
-        return repoTree.reduce<
-            Record<string, Record<string, { path: string; mdContent: string | null }[]>>
-        >((acc, item) => {
-            if (item.type === 'blob' && item.path.endsWith('.md')) {
-                const parts = item.path.split('/')
-                const folder = parts[0]
-                const subFolder = parts.length > 2 ? parts[1] : ''
-
-                acc[folder] = acc[folder] || {}
-                acc[folder][subFolder] = acc[folder][subFolder] || []
-                acc[folder][subFolder].push({ path: item.path, mdContent: item.mdContent })
-            }
-            return acc
-        }, {})
-    }, [repoTree])
-
-    const filteredFolders = useMemo(() => {
-        if (!searchTerm) return folders
-
-        const lowerSearch = searchTerm.toLowerCase()
-        const result: typeof folders = {}
-
-        for (const [folder, subfolders] of Object.entries(folders)) {
-            for (const [subfolder, files] of Object.entries(subfolders)) {
-                const filteredFiles = files.filter(({ path }) =>
-                    path.toLowerCase().includes(lowerSearch)
-                )
-
-                if (filteredFiles.length > 0) {
-                    if (!result[folder]) result[folder] = {}
-                    result[folder][subfolder] = filteredFiles
-                }
-            }
-        }
-        return result
-    }, [folders, searchTerm])
+    const {
+        isPending,
+        error,
+        selectedFilePath,
+        setSelectedFilePath,
+        fileContent,
+        searchTerm,
+        setSearchTerm,
+        filteredFolders
+    } = useMacros()
 
     return (
         <div className="flex h-screen">
@@ -167,8 +127,7 @@ export default function Vmacros() {
                     </div>
                 ) : (
                     <p className="">
-                        {repoTree.length} Vanilla Macros found, select a file to view its content or
-                        create a new one.
+                        Vanilla Macros found, select a file to view its content or create a new one.
                     </p>
                 )}
             </main>

src/types/index.ts

@@ -78,3 +78,9 @@ export type StringItems = {
     class: string[]
     content: string
 }
+
+export type RepoItem = {
+    path: string
+    type: 'blob' | 'tree'
+    mdContent: string | null
+}