jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profile settings

Browse Source
This commit is contained in:
Jeet Debnath
2026-03-31 11:54:39 +05:30
parent 2defb7c02f
commit d1800b4888
2 changed files with 25 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/BottomNav.tsx
View File

@@ -1,4 +1,5 @@
import { useNavigate, useLocation } from 'react-router-dom'
import { useState } from 'react'
import { useAuth } from '../contexts/AuthContext'
export default function BottomNav() {
@@ -6,7 +7,9 @@ export default function BottomNav() {
const location = useLocation()
const { user, mongoUser } = useAuth()
const displayName = mongoUser?.displayName || user?.displayName || 'U'
const photoURL = (mongoUser && 'photoURL' in mongoUser) ? (mongoUser.photoURL || null) : (user?.photoURL || null)
const mongoPhoto = mongoUser && 'photoURL' in mongoUser ? mongoUser.photoURL : null
const photoURL = (mongoPhoto?.startsWith('data:')) ? mongoPhoto : (user?.photoURL || null)
const [imgError, setImgError] = useState(false)
const isActive = (path: string) => location.pathname === path
@@ -54,8 +57,8 @@ export default function BottomNav() {
onClick={() => navigate('/settings')}
aria-label="Settings"
>
{photoURL ? (
<img src={photoURL} alt={displayName} className="bottom-nav-avatar" />
{photoURL && !imgError ? (
<img src={photoURL} alt={displayName} className="bottom-nav-avatar" onError={() => setImgError(true)} />
) : (
<div className="bottom-nav-avatar bottom-nav-avatar-placeholder">
{displayName.charAt(0).toUpperCase()}

33
src/pages/SettingsPage.tsx
View File

@@ -77,8 +77,9 @@ export default function SettingsPage() {
}
const displayName = mongoUser?.displayName || user?.displayName || 'User'
// Prefer mongo photo; only fall back to Google photo if mongo has no photo set
const photoURL = (mongoUser && 'photoURL' in mongoUser) ? (mongoUser.photoURL || null) : (user?.photoURL || null)
// Use custom uploaded photo (base64) if set, otherwise always use Firebase's fresh Google URL
const mongoPhoto = mongoUser && 'photoURL' in mongoUser ? mongoUser.photoURL : null
const photoURL = (mongoPhoto?.startsWith('data:')) ? mongoPhoto : (user?.photoURL || null)
const openEditModal = () => {
setEditName(displayName)
@@ -206,9 +207,11 @@ export default function SettingsPage() {
<main className="settings-container">
{/* Profile Section */}
<div id="tour-edit-profile" className="settings-profile">
<div className="settings-avatar">
<div className="settings-avatar" onClick={openEditModal} style={{ cursor: 'pointer' }}>
{photoURL ? (
<img src={photoURL} alt={displayName} className="settings-avatar-img" />
<img src={photoURL} alt={displayName} className="settings-avatar-img"
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
/>
) : (
<div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem' }}>
{displayName.charAt(0).toUpperCase()}
@@ -465,9 +468,18 @@ export default function SettingsPage() {
<div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
<h3 className="edit-modal-title">Edit Profile</h3>
<div className="edit-modal-avatar" onClick={() => fileInputRef.current?.click()}>
<label className="edit-modal-avatar" style={{ cursor: 'pointer' }}>
<input
ref={fileInputRef}
type="file"
accept="image/*"
style={{ display: 'none' }}
onChange={handlePhotoSelect}
/>
{editPhotoPreview ? (
<img src={editPhotoPreview} alt="Preview" className="edit-modal-avatar-img" />
<img src={editPhotoPreview} alt="Preview" className="edit-modal-avatar-img"
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
/>
) : (
<div className="edit-modal-avatar-placeholder">
{editName.charAt(0).toUpperCase() || 'U'}
@@ -479,14 +491,7 @@ export default function SettingsPage() {
<circle cx="12" cy="13" r="4" />
</svg>
</div>
<input
ref={fileInputRef}
type="file"
accept="image/*"
style={{ display: 'none' }}
onChange={handlePhotoSelect}
/>
</div>
</label>
{editPhotoPreview && (
<button
type="button"