degmods/degmods.com
5
0
Fork 0
Code Issues 14 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: mod report popup

Browse Source
This commit is contained in:
enes 2024-10-23 17:39:33 +02:00
parent 8810673492
commit a95cd8b6ec
1 changed files with 25 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/pages/mod/index.tsx
View File

@ -45,6 +45,7 @@ import {
import { Comments } from './internal/comment'
import { Reactions } from './internal/reactions'
import { Zap } from './internal/zap'
import { CheckboxField } from 'components/Inputs'
import placeholder from '../../assets/img/DEGMods Placeholder Img.png'
export const ModPage = () => {
@ -666,18 +667,25 @@ type ReportPopupProps = {
handleClose: () => void
}
const MOD_REPORT_REASONS = [
{ label: 'Actually CP', key: 'actuallyCP' },
{ label: 'Spam', key: 'spam' },
{ label: 'Scam', key: 'scam' },
{ label: 'Not a game mod', key: 'notAGameMod' },
{ label: 'Stolen game mod', key: 'stolenGameMod' },
{ label: `Wasn't tagged NSFW`, key: 'wasntTaggedNSFW' },
{ label: 'Other reason', key: 'otherReason' }
]
const ReportPopup = ({ aTag, handleClose }: ReportPopupProps) => {
const { ndk, fetchEventFromUserRelays, publish } = useNDKContext()
const userState = useAppSelector((state) => state.user)
const [selectedOptions, setSelectedOptions] = useState({
actuallyCP: false,
spam: false,
scam: false,
notAGameMod: false,
stolenGameMod: false,
wasntTaggedNSFW: false,
otherReason: false
})
const [selectedOptions, setSelectedOptions] = useState(
MOD_REPORT_REASONS.reduce((acc: { [key: string]: boolean }, cur) => {
acc[cur.key] = false
return acc
}, {})
)
const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@ -823,86 +831,15 @@ const ReportPopup = ({ aTag, handleClose }: ReportPopupProps) => {
>
Why are you reporting this?
</label>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt'>
<label className='form-label labelMain'>
Actually CP
</label>
<input
type='checkbox'
className='CheckboxMain'
name='reportOption'
checked={selectedOptions.actuallyCP}
onChange={() => handleCheckboxChange('actuallyCP')}
{MOD_REPORT_REASONS.map((r) => (
<CheckboxField
key={r.key}
label={r.label}
name={r.key}
isChecked={selectedOptions[r.key]}
handleChange={() => handleCheckboxChange(r.key)}
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt'>
<label className='form-label labelMain'>Spam</label>
<input
type='checkbox'
className='CheckboxMain'
name='reportOption'
checked={selectedOptions.spam}
onChange={() => handleCheckboxChange('spam')}
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt'>
<label className='form-label labelMain'>Scam</label>
<input
type='checkbox'
className='CheckboxMain'
name='reportOption'
checked={selectedOptions.scam}
onChange={() => handleCheckboxChange('scam')}
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt'>
<label className='form-label labelMain'>
Not a game mod
</label>
<input
type='checkbox'
className='CheckboxMain'
name='reportOption'
checked={selectedOptions.notAGameMod}
onChange={() => handleCheckboxChange('notAGameMod')}
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt'>
<label className='form-label labelMain'>
Stolen game mod
</label>
<input
type='checkbox'
className='CheckboxMain'
name='reportOption'
checked={selectedOptions.stolenGameMod}
onChange={() => handleCheckboxChange('stolenGameMod')}
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt'>
<label className='form-label labelMain'>
Wasn't tagged NSFW
</label>
<input
type='checkbox'
className='CheckboxMain'
name='reportOption'
checked={selectedOptions.wasntTaggedNSFW}
onChange={() => handleCheckboxChange('wasntTaggedNSFW')}
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt'>
<label className='form-label labelMain'>
Other reason
</label>
<input
type='checkbox'
className='CheckboxMain'
name='reportOption'
checked={selectedOptions.otherReason}
onChange={() => handleCheckboxChange('otherReason')}
/>
</div>
))}
</div>
<button
className='btn btnMain pUMCB_Report'