40 lines
1.4 KiB
TypeScript

import { LoadingSpinner } from 'components/LoadingSpinner'
import { ModForm } from 'components/ModForm'
import { ProfileSection } from 'components/ProfileSection'
import { useAppSelector } from 'hooks'
import { useLoaderData, useNavigation } from 'react-router-dom'
import { ModPageLoaderResult } from 'types'
export const SubmitModPage = () => {
const data = useLoaderData() as ModPageLoaderResult
const mod = data?.mod
const navigation = useNavigation()
const userState = useAppSelector((state) => state.user)
const title = mod ? 'Edit Mod' : 'Submit a mod'
return (
<div className='InnerBodyMain'>
<div className='ContainerMain'>
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
<div className='IBMSMSplitMain'>
<div className='IBMSMSplitMainBigSide'>
<div className='IBMSMTitleMain'>
<h2 className='IBMSMTitleMainHeading'>{title}</h2>
</div>
{navigation.state === 'loading' && (
<LoadingSpinner desc='Fetching mod details from relays' />
)}
{navigation.state === 'submitting' && (
<LoadingSpinner desc='Publishing mod to relays' />
)}
<ModForm />
</div>
{userState.auth && userState.user?.pubkey && (
<ProfileSection pubkey={userState.user.pubkey as string} />
)}
</div>
</div>
</div>
</div>
)
}