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