sigit/sigit.io
6
2
Fork 0
Code Issues 41 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

chore create a component for user

Browse Source
This commit is contained in:
SwiftHawk 2024-05-16 16:22:05 +05:00
parent cb688afb8d
commit 41f821159a
4 changed files with 101 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/username.tsx
View File

@ -1,6 +1,9 @@
import { Typography, IconButton } from '@mui/material'
import { Typography, IconButton, Box, useTheme } from '@mui/material'
import { useSelector } from 'react-redux'
import { State } from '../store/rootReducer'
import { hexToNpub } from '../utils'
import { Link } from 'react-router-dom'
import { getProfileRoute } from '../routes'
type Props = {
username: string
@ -44,3 +47,43 @@ const Username = ({ username, avatarContent, handleClick }: Props) => {
}
export default Username
type UserProps = {
pubkey: string
name: string
image?: string
}
export const UserComponent = ({ pubkey, name, image }: UserProps) => {
const theme = useTheme()
const npub = hexToNpub(pubkey)
const roboImage = `https://robohash.org/${npub}.png?set=set3`
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<img
src={image || roboImage}
alt="User Image"
className="profile-image"
style={{
borderWidth: '3px',
borderStyle: 'solid',
borderColor: `#${pubkey.substring(0, 6)}`
}}
/>
<Link to={getProfileRoute(pubkey)}>
<Typography
component="label"
sx={{
textAlign: 'center',
cursor: 'pointer',
color: theme.palette.text.primary
}}
>
{name}
</Typography>
</Link>
</Box>
)
}

49
src/pages/create/index.tsx
View File

@ -18,18 +18,22 @@ import {
Tooltip,
Typography
} from '@mui/material'
import JSZip from 'jszip'
import { MuiFileInput } from 'mui-file-input'
import { useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { UserComponent } from '../../components/username'
import { MetadataController, NostrController } from '../../controllers'
import { appPrivateRoutes, getProfileRoute } from '../../routes'
import { appPrivateRoutes } from '../../routes'
import { State } from '../../store/rootReducer'
import { ProfileMetadata, User, UserRole } from '../../types'
import {
encryptArrayBuffer,
generateEncryptionKey,
getHash,
getRoboHashPicture,
hexToNpub,
pubToHex,
queryNip05,
@ -39,10 +43,6 @@ import {
uploadToFileStorage
} from '../../utils'
import styles from './style.module.scss'
import { toast } from 'react-toastify'
import JSZip from 'jszip'
import { useSelector } from 'react-redux'
import { State } from '../../store/rootReducer'
export const CreatePage = () => {
const navigate = useNavigate()
@ -489,10 +489,6 @@ const DisplayUser = ({
})
}, [users])
const imageLoadError = (event: any, pubkey: string) => {
event.target.src = getRoboHashPicture(pubkey)
}
return (
<TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
<Table>
@ -506,31 +502,18 @@ const DisplayUser = ({
<TableBody>
{users.map((user, index) => {
const userMeta = metadata[user.pubkey]
const npub = hexToNpub(user.pubkey)
const roboUrl = `https://robohash.org/${npub}.png?set=set3`
return (
<TableRow key={index}>
<TableCell className={styles.tableCell}>
<Box className={styles.user}>
<img
onError={(event) => {imageLoadError(event, user.pubkey)}}
src={userMeta?.picture || roboUrl}
alt="Profile Image"
className="profile-image"
style={{
borderWidth: '3px',
borderStyle: 'solid',
borderColor: `#${user.pubkey.substring(0, 6)}`
}}
/>
<Link to={getProfileRoute(user.pubkey)}>
<Typography component="label" className={styles.name}>
{userMeta?.display_name ||
userMeta?.name ||
shorten(npub)}
</Typography>
</Link>
</Box>
<UserComponent
pubkey={user.pubkey}
name={
userMeta?.display_name ||
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/>
</TableCell>
<TableCell className={styles.tableCell}>
<Select

78
src/pages/sign/index.tsx
View File

@ -21,12 +21,12 @@ import { MuiFileInput } from 'mui-file-input'
import { EventTemplate } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { UserComponent } from '../../components/username'
import { MetadataController, NostrController } from '../../controllers'
import { appPrivateRoutes, getProfileRoute } from '../../routes'
import { appPrivateRoutes } from '../../routes'
import { State } from '../../store/rootReducer'
import { Meta, ProfileMetadata, User, UserRole } from '../../types'
import {
@ -635,15 +635,6 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
})
}, [users, meta.submittedBy])
const imageLoadError = (event: any) => {
event.target.src = placeholderAvatar
}
const getRoboImageUrl = (pubkey: string) => {
const npub = hexToNpub(pubkey)
return `https://robohash.org/${npub}.png?set=set3`
}
return (
<List
sx={{
@ -673,29 +664,15 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
<Typography variant="h6" sx={{ color: textColor }}>
Submitted By
</Typography>
<Box className={styles.user}>
<img
onError={imageLoadError}
src={
metadata[meta.submittedBy]?.picture ||
getRoboImageUrl(meta.submittedBy)
}
alt="Profile Image"
className="profile-image"
style={{
borderWidth: '3px',
borderStyle: 'solid',
borderColor: `#${meta.submittedBy.substring(0, 6)}`
}}
/>
<Link to={getProfileRoute(meta.submittedBy)}>
<Typography component="label" className={styles.name}>
{metadata[meta.submittedBy]?.display_name ||
metadata[meta.submittedBy]?.name ||
shorten(hexToNpub(meta.submittedBy))}
</Typography>
</Link>
</Box>
<UserComponent
pubkey={meta.submittedBy}
name={
metadata[meta.submittedBy]?.display_name ||
metadata[meta.submittedBy]?.name ||
shorten(hexToNpub(meta.submittedBy))
}
image={metadata[meta.submittedBy]?.picture}
/>
</ListItem>
<ListItem
sx={{
@ -727,8 +704,6 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
<TableBody>
{users.map((user, index) => {
const userMeta = metadata[user.pubkey]
const npub = hexToNpub(user.pubkey)
const roboUrl = `https://robohash.org/${npub}.png?set=set3`
let signedStatus = '-'
@ -746,26 +721,15 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
return (
<TableRow key={index}>
<TableCell className={styles.tableCell}>
<Box className={styles.user}>
<img
onError={imageLoadError}
src={userMeta?.picture || roboUrl}
alt="Profile Image"
className="profile-image"
style={{
borderWidth: '3px',
borderStyle: 'solid',
borderColor: `#${user.pubkey.substring(0, 6)}`
}}
/>
<Link to={getProfileRoute(user.pubkey)}>
<Typography component="label" className={styles.name}>
{userMeta?.display_name ||
userMeta?.name ||
shorten(npub)}
</Typography>
</Link>
</Box>
<UserComponent
pubkey={user.pubkey}
name={
userMeta?.display_name ||
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/>
</TableCell>
<TableCell className={styles.tableCell}>
{user.role}

53
src/pages/verify/index.tsx
View File

@ -9,22 +9,20 @@ import {
} from '@mui/material'
import JSZip from 'jszip'
import { MuiFileInput } from 'mui-file-input'
import { Event, verifyEvent } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { UserComponent } from '../../components/username'
import { MetadataController } from '../../controllers'
import { getProfileRoute } from '../../routes'
import { Meta, ProfileMetadata } from '../../types'
import {
getRoboHashPicture,
hexToNpub,
parseJson,
readContentOfZipEntry,
shorten
} from '../../utils'
import styles from './style.module.scss'
import { Event, verifyEvent } from 'nostr-tools'
export const VerifyPage = () => {
const theme = useTheme()
@ -113,15 +111,6 @@ export const VerifyPage = () => {
setIsLoading(false)
}
const imageLoadError = (event: any, pubkey: string) => {
const npub = hexToNpub(pubkey)
event.target.src = npub
}
const getRoboImageUrl = (pubkey: string) => {
return getRoboHashPicture(pubkey)
}
const displayUser = (pubkey: string, verifySignature = false) => {
const profile = metadata[pubkey]
@ -143,31 +132,21 @@ export const VerifyPage = () => {
}
return (
<Box className={styles.user}>
<img
onError={(event) => {imageLoadError(event, pubkey)}}
src={profile?.picture || getRoboImageUrl(pubkey)}
alt="Profile Image"
className="profile-image"
style={{
borderWidth: '3px',
borderStyle: 'solid',
borderColor: `#${pubkey.substring(0, 6)}`
}}
<>
<UserComponent
pubkey={pubkey}
name={
profile?.display_name || profile?.name || shorten(hexToNpub(pubkey))
}
image={profile?.picture}
/>
<Link to={getProfileRoute(pubkey)}>
<Typography component="label" className={styles.name}>
{profile?.display_name ||
profile?.name ||
shorten(hexToNpub(pubkey))}
</Typography>
</Link>
{verifySignature && (
<Typography component="label">
({isValidSignature ? 'Valid' : 'Not Valid'} Signature)
</Typography>
)}
</Box>
</>
)
}
@ -276,7 +255,15 @@ export const VerifyPage = () => {
</Typography>
<ul className={styles.usersList}>
{meta.signers.map((signer) => (
<li key={signer} style={{ color: textColor }}>
<li
key={signer}
style={{
color: textColor,
display: 'flex',
alignItems: 'center',
gap: '15px'
}}
>
{displayUser(signer, true)}
</li>
))}