degmods.com/src/pages/settings/preference.tsx

233 lines
7.7 KiB
TypeScript
Raw Normal View History

2024-11-11 22:37:49 +05:00
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk'
import { LoadingSpinner } from 'components/LoadingSpinner'
import { useAppDispatch, useAppSelector, useNDKContext } from 'hooks'
import { kinds, UnsignedEvent, Event } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { toast } from 'react-toastify'
import { setUserWotLevel } from 'store/reducers/wot'
import { UserRelaysType } from 'types'
import { log, LogType, now } from 'utils'
2024-09-24 21:53:06 +05:00
// todo: use components from Input.tsx
export const PreferencesSetting = () => {
2024-11-18 12:27:43 +05:00
const { ndk, fetchEventFromUserRelays, publish } = useNDKContext()
2024-11-11 22:37:49 +05:00
const dispatch = useAppDispatch()
const user = useAppSelector((state) => state.user.user)
2024-11-18 12:27:43 +05:00
const { userWotLevel } = useAppSelector((state) => state.wot)
const [wotLevel, setWotLevel] = useState(userWotLevel)
const [isSaving, setIsSaving] = useState(false)
2024-11-11 22:37:49 +05:00
useEffect(() => {
if (user?.pubkey) {
fetchEventFromUserRelays(
{
kinds: [NDKKind.AppSpecificData],
'#d': ['degmods']
},
user.pubkey as string,
UserRelaysType.Both
).then((event) => {
if (event) {
console.log('event :>> ', event)
const wot = event.tagValue('wot')
if (wot) setWotLevel(parseInt(wot))
}
})
}
}, [user, fetchEventFromUserRelays])
const handleSave = async () => {
setIsSaving(true)
let hexPubkey: string
if (user?.pubkey) {
hexPubkey = user.pubkey as string
} else {
hexPubkey = (await window.nostr?.getPublicKey()) as string
}
if (!hexPubkey) {
toast.error('Could not get pubkey')
setIsSaving(false)
return
}
const unsignedEvent: UnsignedEvent = {
kind: kinds.Application,
created_at: now(),
pubkey: hexPubkey,
content: '',
tags: [
['d', 'degmods'],
['wot', wotLevel.toString()]
]
}
const signedEvent = await window.nostr
?.signEvent(unsignedEvent)
.then((event) => event as Event)
.catch((err) => {
toast.error('Failed to sign the event!')
log(true, LogType.Error, 'Failed to sign the event!', err)
return null
})
if (!signedEvent) {
setIsSaving(false)
return
}
const ndkEvent = new NDKEvent(ndk, signedEvent)
await publish(ndkEvent)
2024-11-18 12:27:43 +05:00
.then((publishedOnRelays) => {
toast.success(
`Preferences published to following relays: \n\n${publishedOnRelays.join(
'\n'
)}`
)
2024-11-11 22:37:49 +05:00
2024-11-18 12:27:43 +05:00
dispatch(setUserWotLevel(wotLevel))
})
.catch((err) => {
console.error(err)
toast.error('Error: Failed to publish preferences!')
})
.finally(() => {
setIsSaving(false)
})
2024-11-11 22:37:49 +05:00
}
2024-09-24 21:53:06 +05:00
return (
2024-11-11 22:37:49 +05:00
<>
{isSaving && <LoadingSpinner desc='Saving preferences to relays' />}
<div className='IBMSMSplitMainFullSideFWMid'>
<div className='IBMSMSplitMainFullSideSec'>
<div className='IBMSMSMBS_Write'>
<div className='inputLabelWrapperMain'>
<div className='labelWrapperMain'>
<p className='labelMain'>Notifications</p>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
<label className='form-label labelMain'>
When someone follows you
</label>
<input
type='checkbox'
className='CheckboxMain'
name='notificationsSettings'
checked
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
<label className='form-label labelMain'>
When someone mentions you
</label>
<input
type='checkbox'
className='CheckboxMain'
name='notificationsSettings'
checked
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
<label className='form-label labelMain'>
When someone sends a reaction to your post
</label>
<input
type='checkbox'
className='CheckboxMain'
name='notificationsSettings'
checked
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
<label className='form-label labelMain'>
When someone Tips/Zaps you
</label>
<input
type='checkbox'
className='CheckboxMain'
name='notificationsSettings'
checked
/>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
<label className='form-label labelMain'>
When someone re-posts your post
</label>
<input
type='checkbox'
className='CheckboxMain'
name='notificationsSettings'
checked
/>
</div>
2024-09-24 21:53:06 +05:00
</div>
2024-11-11 22:37:49 +05:00
<div className='inputLabelWrapperMain'>
<div className='labelWrapperMain'>
<p className='labelMain'>Not Safe For Work (NSFW)</p>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
<label className='form-label labelMain'>
Show all NSFW posts
</label>
<input
type='checkbox'
className='CheckboxMain'
name='NSFWPreference'
/>
</div>
2024-09-24 21:53:06 +05:00
</div>
2024-11-11 22:37:49 +05:00
<div className='inputLabelWrapperMain'>
<div className='labelWrapperMain'>
<p className='labelMain'>Web of Trust (WoT) level</p>
</div>
<p className='labelDescriptionMain'>
This affects what posts you see, reactions, DMs, and
notifications. Learn more:&nbsp;Link
</p>
<div className='inputLabelWrapperMainSliderWrapper'>
<input
className='form-range inputRangeMain inputRangeMainZap'
type='range'
max='100'
min='0'
value={wotLevel}
onChange={(e) => setWotLevel(parseInt(e.target.value))}
step='1'
required
name='WoTLevel'
/>
<p className='ZapSplitUserBoxRangeText'>{wotLevel}</p>
</div>
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
<label className='form-label labelMain'>
Consider those who zap/tip, regardless of WoT level
</label>
<input
type='checkbox'
className='CheckboxMain'
name='WoTZap'
checked
/>
</div>
2024-09-24 21:53:06 +05:00
</div>
2024-11-11 22:37:49 +05:00
<div className='IBMSMSMBS_WriteAction'>
<button
className='btn btnMain'
type='button'
onClick={handleSave}
>
Save
</button>
2024-09-24 21:53:06 +05:00
</div>
</div>
</div>
</div>
2024-11-11 22:37:49 +05:00
</>
2024-09-24 21:53:06 +05:00
)
}