Profile pictures incosistencies #58

Merged
b merged 7 commits from pictures-fixes into main 2024-05-17 11:52:36 +00:00
6 changed files with 28 additions and 21 deletions
Showing only changes of commit 194c564ddc - Show all commits

View File

@ -45,8 +45,10 @@ export const AppBar = () => {
useEffect(() => {
if (metadataState) {
if (metadataState.content) {
const { picture, display_name, name } = JSON.parse(metadataState.content)
const { picture, display_name, name } = JSON.parse(
metadataState.content
)
if (picture || userRobotImage) {
setUserAvatar(picture || userRobotImage)
}
@ -85,12 +87,8 @@ export const AppBar = () => {
nsecBunkerPubkey: undefined
})
)
dispatch(
setMetadataEvent(metadataController.getEmptyMetadataEvent())
)
dispatch(
setUserRobotImage(null)
)
dispatch(setMetadataEvent(metadataController.getEmptyMetadataEvent()))
dispatch(setUserRobotImage(null))
m marked this conversation as resolved
Review

the app will clear local storage on logout anyway

the app will clear local storage on logout anyway
Review

This is a redux bit, won't get cleared automatically.

This is a redux bit, won't get cleared automatically.
// clear authToken saved in local storage
clearAuthToken()

View File

@ -5,7 +5,13 @@ import { useDispatch, useSelector } from 'react-redux'
import { Outlet } from 'react-router-dom'
import { AppBar } from '../components/AppBar/AppBar'
import { restoreState, setAuthState, setMetadataEvent } from '../store/actions'
import { clearAuthToken, clearState, getRoboHashPicture, loadState, saveNsecBunkerDelegatedKey } from '../utils'
import {
clearAuthToken,
clearState,
getRoboHashPicture,
loadState,
saveNsecBunkerDelegatedKey
} from '../utils'
import { LoadingSpinner } from '../components/LoadingSpinner'
import { Dispatch } from '../store/store'
import { MetadataController, NostrController } from '../controllers'
@ -76,11 +82,9 @@ export const MainLayout = () => {
useEffect(() => {
if (authState && authState.loggedIn) {
const pubkey = authState.usersPubkey || authState.keyPair?.public
if (pubkey) {
dispatch(
setUserRobotImage(getRoboHashPicture(pubkey))
)
dispatch(setUserRobotImage(getRoboHashPicture(pubkey)))
}
}
}, [authState])

View File

@ -47,9 +47,9 @@ export const Login = () => {
* Call login function when enter is pressed
*/
const handleInputKeyDown = (event: any) => {
if (event.code === "Enter" || event.code === "NumpadEnter") {
event.preventDefault();
login()
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
event.preventDefault()
login()
}
}

View File

@ -246,14 +246,14 @@ export const ProfilePage = () => {
/**
* Handles the logic for Image URL.
* If no picture in kind 0 found - use robohash avatar
*
*
* @returns robohash image url
*/
const getProfileImage = (metadata: ProfileMetadata) => {
if (!isUsersOwnProfile) {
return metadata.picture || getRoboHashPicture(npub!)
}
// userRobotImage is used only when visiting own profile
// while kind 0 picture is not set
return metadata.picture || userRobotImage || getRoboHashPicture(npub!)
@ -293,7 +293,7 @@ export const ProfilePage = () => {
<img
onError={(event: any) => {
event.target.src = getRoboHashPicture(npub!)
}}
}}
className={styles.img}
src={getProfileImage(profileMetadata)}
alt="Profile Image"

View File

@ -1,7 +1,9 @@
import * as ActionTypes from '../actionTypes'
import { SetUserRobotImage } from './types'
export const setUserRobotImage = (payload: string | null): SetUserRobotImage => ({
export const setUserRobotImage = (
payload: string | null
): SetUserRobotImage => ({
type: ActionTypes.SET_USER_ROBOT_IMAGE,
payload
})

View File

@ -143,7 +143,10 @@ export const base64DecodeAuthToken = (authToken: string): SignedEvent => {
* @param pubkey in hex or npub format
* @returns robohash.org url for the avatar
*/
export const getRoboHashPicture = (pubkey?: string, set: number = 1): string => {
export const getRoboHashPicture = (
pubkey?: string,
set: number = 1
): string => {
if (!pubkey) return ''
const npub = hexToNpub(pubkey)
return `https://robohash.org/${npub}.png?set=set${set}`