sigit.io/src/pages/profile/index.tsx

258 lines
7.6 KiB
TypeScript
Raw Normal View History

2024-03-01 10:16:35 +00:00
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import { List, ListItem, ListSubheader, TextField } from '@mui/material'
import { UnsignedEvent, nip19, kinds, VerifiedEvent } from 'nostr-tools'
import { useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
import { MetadataController, NostrController } from '../../controllers'
import { ProfileMetadata } from '../../types'
import styles from './style.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { State } from '../../store/rootReducer'
import { LoadingButton } from '@mui/lab'
import { Dispatch } from '../../store/store'
import { setMetadataEvent } from '../../store/actions'
import { LoadingSpinner } from '../../components/LoadingSpinner'
2024-03-19 09:36:34 +00:00
import { LoginMethods } from '../../store/auth/types'
2024-03-01 10:16:35 +00:00
export const ProfilePage = () => {
const { npub } = useParams()
const dispatch: Dispatch = useDispatch()
const metadataController = useMemo(() => new MetadataController(), [])
const nostrController = NostrController.getInstance()
const [pubkey, setPubkey] = useState<string>()
const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
const metadataState = useSelector((state: State) => state.metadata)
const keys = useSelector((state: State) => state.auth?.keyPair)
2024-03-19 09:36:34 +00:00
const { usersPubkey, loginMethod } = useSelector((state: State) => state.auth)
2024-03-01 10:16:35 +00:00
const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
const [isLoading, setIsLoading] = useState(true)
const [loadingSpinnerDesc] = useState('Fetching metadata')
useEffect(() => {
if (npub) {
try {
const hexPubkey = nip19.decode(npub).data as string
setPubkey(hexPubkey)
if (hexPubkey === usersPubkey) setIsUsersOwnProfile(true)
} catch (error) {
toast.error('Error occurred in decoding npub' + error)
}
}
}, [npub, usersPubkey])
useEffect(() => {
if (isUsersOwnProfile && metadataState) {
const metadataContent = metadataController.extractProfileMetadataContent(
metadataState as VerifiedEvent
)
if (metadataContent) {
setProfileMetadata(metadataContent)
setIsLoading(false)
}
return
}
if (pubkey) {
const getMetadata = async (pubkey: string) => {
const metadataEvent = await metadataController
.findMetadata(pubkey)
.catch((err) => {
toast.error(err)
return null
})
if (metadataEvent) {
const metadataContent =
metadataController.extractProfileMetadataContent(metadataEvent)
if (metadataContent) setProfileMetadata(metadataContent)
}
setIsLoading(false)
}
getMetadata(pubkey)
}
}, [isUsersOwnProfile, metadataState, pubkey, metadataController])
const editItem = (
key: keyof ProfileMetadata,
label: string,
multiline = false,
rows = 1
) => (
<ListItem sx={{ marginTop: 1 }}>
<TextField
label={label}
id={label.split(' ').join('-')}
value={profileMetadata![key] || ''}
size='small'
multiline={multiline}
rows={rows}
className={styles.textField}
disabled={!isUsersOwnProfile}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target
setProfileMetadata((prev) => ({
...prev,
[key]: value
}))
}}
/>
</ListItem>
)
const copyItem = (
value: string,
label: string,
copyValue?: string,
isPassword = false
) => (
<ListItem
sx={{ marginTop: 1 }}
onClick={() => {
navigator.clipboard.writeText(copyValue || value)
toast.success('Copied to clipboard', {
autoClose: 1000,
hideProgressBar: true
})
}}
>
<TextField
label={label}
id={label.split(' ').join('-')}
defaultValue={value}
size='small'
className={styles.textField}
disabled
type={isPassword ? 'password' : 'text'}
2024-03-05 09:08:18 +00:00
InputProps={{
endAdornment: <ContentCopyIcon className={styles.copyItem} />
}}
2024-03-01 10:16:35 +00:00
/>
</ListItem>
)
const handleSaveMetadata = async () => {
setSavingProfileMetadata(true)
const content = JSON.stringify(profileMetadata)
// We need to omit cachedAt and create new event
// Relay will reject if created_at is too late
const updatedMetadataState: UnsignedEvent = {
content: content,
created_at: Math.round(Date.now() / 1000),
kind: kinds.Metadata,
pubkey: pubkey!,
tags: metadataState?.tags || []
}
const signedEvent = await nostrController
.signEvent(updatedMetadataState)
.catch((error) => {
toast.error(`Error saving profile metadata. ${error}`)
})
if (signedEvent) {
if (!metadataController.validate(signedEvent)) {
toast.error(`Metadata is not valid.`)
}
await metadataController.publishMetadataEvent(signedEvent)
dispatch(setMetadataEvent(signedEvent))
}
setSavingProfileMetadata(false)
}
return (
<>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<div className={styles.container}>
<List
sx={{
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader
sx={{
paddingBottom: 1,
paddingTop: 1,
fontSize: '1.5rem'
}}
className={styles.subHeader}
>
Profile Settings
</ListSubheader>
}
>
{profileMetadata && (
<div>
<ListItem
sx={{
marginTop: 1,
display: 'flex',
flexDirection: 'column',
gap: 2
}}
>
<img
onError={(event: any) => {
event.target.src = placeholderAvatar
}}
className={styles.img}
src={profileMetadata.picture || placeholderAvatar}
alt='Profile Image'
/>
</ListItem>
{editItem('name', 'Username')}
{editItem('display_name', 'Display Name')}
{editItem('nip05', 'Nostr Address (nip05)')}
{editItem('lud16', 'Lightning Address (lud16)')}
{editItem('about', 'About', true, 4)}
{isUsersOwnProfile && (
<>
2024-03-19 09:36:34 +00:00
{usersPubkey &&
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
{loginMethod === LoginMethods.privateKey &&
keys &&
2024-03-01 10:16:35 +00:00
keys.private &&
copyItem(
'••••••••••••••••••••••••••••••••••••••••••••••••••',
'Private Key',
keys.private
)}
</>
)}
</div>
)}
</List>
{isUsersOwnProfile && (
<LoadingButton
loading={savingProfileMetadata}
variant='contained'
onClick={handleSaveMetadata}
>
SAVE
</LoadingButton>
)}
</div>
</>
)
}