Skip to content

Commit 3f45cf6

Browse files
PentSecPentSec
committed
Add loading state and markdown fetching to ProfilesDetails component; update API URLs in context files
1 parent fdf8258 commit 3f45cf6

4 files changed

Lines changed: 63 additions & 36 deletions

File tree

‎src/components/ProfilesDetails/ProfilesDetails.tsx‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ import {
88
Divider,
99
Chip,
1010
Image,
11-
Avatar
11+
Avatar,
12+
Spinner
1213
} from '@heroui/react'
1314
import ReactMarkdown from 'react-markdown'
1415
import { classIcon, roleIcon } from '@/utils/classIcon'
1516
import remarkGfm from 'remark-gfm'
1617
import rehypeRaw from 'rehype-raw'
1718
import hljs from 'highlight.js'
18-
import { useEffect } from 'react'
19+
import { useEffect, useState } from 'react'
1920
import { GroupIcon } from '@/assets/Icons'
2021

2122
interface ProfilesDetailsProps {
@@ -25,6 +26,34 @@ interface ProfilesDetailsProps {
2526
}
2627

2728
const ProfilesDetails = ({ data, isOpen, onOpenChange }: ProfilesDetailsProps) => {
29+
const [markdownContent, setMarkdownContent] = useState<string | null>(null)
30+
const [isLoading, setIsLoading] = useState(false)
31+
32+
useEffect(() => {
33+
if (isOpen && data.md) {
34+
setIsLoading(true)
35+
fetch(data.md)
36+
.then((response) => {
37+
if (!response.ok) {
38+
throw new Error('Failed to fetch markdown content.')
39+
}
40+
return response.text()
41+
})
42+
.then((data) => {
43+
setMarkdownContent(data)
44+
})
45+
.catch((error) => {
46+
console.error('Error fetching markdown content:', error)
47+
setMarkdownContent('Failed to load content.')
48+
})
49+
.finally(() => {
50+
setIsLoading(false)
51+
})
52+
} else {
53+
setMarkdownContent(null)
54+
}
55+
}, [isOpen, data.md])
56+
2857
useEffect(() => {
2958
document.querySelectorAll('pre code').forEach((block) => {
3059
hljs.highlightElement(block as HTMLElement)
@@ -118,13 +147,17 @@ const ProfilesDetails = ({ data, isOpen, onOpenChange }: ProfilesDetailsProps) =
118147
<Divider className="my-2" />
119148
<h2 className="text-lg font-extrabold">Description</h2>
120149
<article className="markdown-body p-1 !bg-transparent">
121-
<ReactMarkdown
122-
remarkPlugins={[remarkGfm]}
123-
rehypePlugins={[rehypeRaw]}
124-
className="text-default-900 gap-4 w-auto p-4 mx-auto flex-col lg:flex-row rounded-md"
125-
>
126-
{data.md}
127-
</ReactMarkdown>
150+
{isLoading ? (
151+
<Spinner className="items-center justify-center" />
152+
) : (
153+
<ReactMarkdown
154+
remarkPlugins={[remarkGfm]}
155+
rehypePlugins={[rehypeRaw]}
156+
className="text-default-900 gap-4 w-auto p-4 mx-auto flex-col lg:flex-row rounded-md"
157+
>
158+
{markdownContent || 'No content available.'}
159+
</ReactMarkdown>
160+
)}
128161
</article>
129162
</DrawerBody>
130163
<DrawerFooter>

‎src/context/AddonsContext.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { createContext, FC, ReactNode, useContext } from 'react'
22
import { useQuery } from '@tanstack/react-query'
33
import { AddonsDataState } from '@/types'
44

5-
const jsonUrl =
6-
'https://raw.githubusercontent.com/PentSec/MaddonsManager/refs/heads/main/API/Maddons.json'
5+
const jsonUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/API/API/Maddons.json'
6+
const baseUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/API/API/Addons'
77

88
interface AddonsContextValue {
99
data: AddonsDataState[]
@@ -26,9 +26,9 @@ const fetchAddons = async (url: string) => {
2626
const jsonData = await response.json()
2727
return Promise.all(
2828
jsonData.map(async (item: AddonsDataState) => {
29-
const mdUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/refs/heads/main/API/Addons/${item.expansion}/${item.file_name}/post.md`
30-
const logoUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/refs/heads/main/API/Addons/${item.expansion}/${item.file_name}/${item.file_name}.webp`
31-
const zipUrl = `https://github.com/PentSec/MaddonsManager/raw/refs/heads/main/API/Addons/${item.expansion}/${item.file_name}/${item.file_name}.zip`
29+
const mdUrl = `${baseUrl}/${item.expansion}/${item.file_name}/post.md`
30+
const logoUrl = `${baseUrl}/${item.expansion}/${item.file_name}/${item.file_name}.webp`
31+
const zipUrl = `${baseUrl}/${item.expansion}/${item.file_name}/${item.file_name}.zip`
3232

3333
return { ...item, md: mdUrl, logo: logoUrl, zip: zipUrl }
3434
})

‎src/context/ElvUIContext.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { createContext, useContext, FC, ReactNode } from 'react'
22
import { StringItems } from '@/types'
33
import { useQuery } from '@tanstack/react-query'
44

5-
const jsonUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/ElvUI.json'
5+
const jsonUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/API/API/ElvUI.json'
6+
const baseUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/API/API/ElvUI'
67

78
interface ElvUIContextValue {
89
data: StringItems[]
@@ -25,22 +26,15 @@ const fetchElvUIWithContent = async (url: string): Promise<StringItems[]> => {
2526
const jsonData = await response.json()
2627
return Promise.all(
2728
jsonData.map(async (item: StringItems) => {
28-
const txtUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/ElvUI/${item.expansion}/${item.file_name}/${item.file_name}.txt`
29-
const logoUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/ElvUI/${item.expansion}/${item.file_name}/${item.file_name}.webp`
30-
const mdUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/ElvUI/${item.expansion}/${item.file_name}/post.md`
29+
const txtUrl = `${baseUrl}/${item.expansion}/${item.file_name}/${item.file_name}.txt`
30+
const logoUrl = `${baseUrl}/${item.expansion}/${item.file_name}/${item.file_name}.webp`
31+
const mdUrl = `${baseUrl}/${item.expansion}/${item.file_name}/post.md`
3132

32-
const [content, md] = await Promise.all([
33-
fetch(txtUrl).then((res) => {
34-
if (!res.ok) throw new Error(`Failed to fetch txt for ${item.file_name}`)
35-
return res.text()
36-
}),
37-
fetch(mdUrl).then((res) => {
38-
if (!res.ok) throw new Error(`Failed to fetch md for ${item.file_name}`)
39-
return res.text()
40-
})
33+
const [content] = await Promise.all([
34+
fetch(txtUrl).then((res) => (res.ok ? res.text() : null))
4135
])
4236

43-
return { ...item, content, logo: logoUrl, md }
37+
return { ...item, content, logo: logoUrl, md: mdUrl }
4438
})
4539
)
4640
}

‎src/context/WeakAurasContext.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { createContext, FC, ReactNode, useContext } from 'react'
22
import { useQuery } from '@tanstack/react-query'
33
import { StringItems } from '@/types'
44

5-
const jsonUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/WeakAuras.json'
5+
const jsonUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/API/API/WeakAuras.json'
6+
const baseUrl = 'https://raw.githubusercontent.com/PentSec/MaddonsManager/API/API/WeakAuras'
67

78
interface WeakAurasContextValue {
89
data: StringItems[]
@@ -25,15 +26,14 @@ const fetchWeakAurasWithContent = async (url: string): Promise<StringItems[]> =>
2526
const jsonData = await response.json()
2627
return Promise.all(
2728
jsonData.map(async (item: any) => {
28-
const txtUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/WeakAuras/${item.expansion}/${item.file_name}/${item.file_name}.txt`
29-
const logoUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/WeakAuras/${item.expansion}/${item.file_name}/${item.file_name}.webp`
30-
const mdUrl = `https://raw.githubusercontent.com/PentSec/MaddonsManager/main/API/WeakAuras/${item.expansion}/${item.file_name}/post.md`
29+
const txtUrl = `${baseUrl}/${item.expansion}/${item.file_name}/${item.file_name}.txt`
30+
const logoUrl = `${baseUrl}/${item.expansion}/${item.file_name}/${item.file_name}.webp`
31+
const mdUrl = `${baseUrl}/${item.expansion}/${item.file_name}/post.md`
3132

32-
const [content, md] = await Promise.all([
33-
fetch(txtUrl).then((res) => (res.ok ? res.text() : null)),
34-
fetch(mdUrl).then((res_1) => (res_1.ok ? res_1.text() : null))
33+
const [content] = await Promise.all([
34+
fetch(txtUrl).then((res) => (res.ok ? res.text() : null))
3535
])
36-
return { ...item, content, logo: logoUrl, md }
36+
return { ...item, content, logo: logoUrl, md: mdUrl }
3737
})
3838
)
3939
}

0 commit comments

Comments
 (0)