feat: implemented mod details page #3
18
src/components/LoadingSpinner/index.tsx
Normal file
18
src/components/LoadingSpinner/index.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import styles from '../../styles/loadingSpinner.module.scss'
|
||||
|
||||
interface Props {
|
||||
desc: string
|
||||
}
|
||||
|
||||
export const LoadingSpinner = (props: Props) => {
|
||||
const { desc } = props
|
||||
|
||||
return (
|
||||
<div className={styles.loadingSpinnerOverlay}>
|
||||
<div className={styles.loadingSpinnerContainer}>
|
||||
<div className={styles.loadingSpinner}></div>
|
||||
{desc && <span>{desc}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -20,6 +20,7 @@ import { RelayController } from '../controllers'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { getModsInnerPageRoute } from '../routes'
|
||||
import { DownloadUrl, FormState } from '../types'
|
||||
import { LoadingSpinner } from './LoadingSpinner'
|
||||
|
||||
interface FormErrors {
|
||||
game?: string
|
||||
@ -348,6 +349,7 @@ export const ModForm = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{isPublishing && <LoadingSpinner desc='Publishing mod to relays' />}
|
||||
<GameDropdown
|
||||
options={gameOptions}
|
||||
selected={formState.game}
|
||||
|
@ -16,12 +16,15 @@ import '../styles/tabs.css'
|
||||
import '../styles/tags.css'
|
||||
import '../styles/write.css'
|
||||
import { ModDetails } from '../types'
|
||||
import { extractModData } from '../utils'
|
||||
import { extractModData, log, LogType } from '../utils'
|
||||
import { formatDate } from 'date-fns'
|
||||
import { LoadingSpinner } from '../components/LoadingSpinner'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
export const InnerModPage = () => {
|
||||
const { nevent } = useParams()
|
||||
const [modData, setModData] = useState<ModDetails>()
|
||||
const [isFetching, setIsFetching] = useState(true)
|
||||
|
||||
useDidMount(async () => {
|
||||
if (nevent) {
|
||||
@ -42,15 +45,22 @@ export const InnerModPage = () => {
|
||||
RelayController.getInstance()
|
||||
.fetchEvent(filter, relays)
|
||||
.then((event) => {
|
||||
console.log('event :>> ', event)
|
||||
|
||||
if (event) {
|
||||
const extracted = extractModData(event)
|
||||
setModData(extracted)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err :>> ', err)
|
||||
log(
|
||||
true,
|
||||
LogType.Error,
|
||||
'An error occurred in fetching mod details from relays',
|
||||
err
|
||||
)
|
||||
toast.error('An error occurred in fetching mod details from relays')
|
||||
})
|
||||
.finally(() => {
|
||||
setIsFetching(false)
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -74,6 +84,9 @@ export const InnerModPage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
if (isFetching)
|
||||
return <LoadingSpinner desc='Fetching mod details from relays' />
|
||||
|
||||
if (!modData) return null
|
||||
|
||||
return (
|
||||
|
37
src/styles/loadingSpinner.module.scss
Normal file
37
src/styles/loadingSpinner.module.scss
Normal file
@ -0,0 +1,37 @@
|
||||
.loadingSpinnerOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999;
|
||||
|
||||
.loadingSpinnerContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loadingSpinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user