handle no avatar

src/components/CourseDetails.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { useNostr } from '@/hooks/useNostr';
 import { findKind0Fields } from '@/utils/nostr';
 import { useImageProxy } from '@/hooks/useImageProxy';
-import { Button } from 'primereact/button';
+import ZapDisplay from '@/components/zaps/ZapDisplay';
 import { Tag } from 'primereact/tag';
 import { nip19 } from 'nostr-tools';
 import { useLocalStorageWithEffect } from '@/hooks/useLocalStorage';
@@ -31,6 +31,7 @@ export default function CourseDetails({processedEvent}) {
     const [bitcoinConnect, setBitcoinConnect] = useState(false);
     const [nAddress, setNAddress] = useState(null);
     const [user] = useLocalStorageWithEffect('user', {});
+    const [zapAmount, setZapAmount] = useState(0);
     const { returnImageProxy } = useImageProxy();
     const { fetchKind0, zapEvent } = useNostr();
 
@@ -98,7 +99,7 @@ export default function CourseDetails({processedEvent}) {
                         <div className='flex flex-row w-full mt-6 items-center'>
                             <Image
                                 alt="avatar thumbnail"
-                                src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+                                src={returnImageProxy(author?.avatar, author?.pubkey)}
                                 width={50}
                                 height={50}
                                 className="rounded-full mr-4"
@@ -126,21 +127,8 @@ export default function CourseDetails({processedEvent}) {
                                         <BitcoinConnectPayButton onClick={handleZapEvent} />
                                     </div>
                                 ) : (
-                                    <div>
+                                    <div className='w-full flex justify-end'>
-                                        <Button
+                                        <ZapDisplay zapAmount={zapAmount} event={processedEvent} />
-                                            icon="pi pi-bolt"
-                                            label="Zap"
-                                            severity="success"
-                                            outlined
-                                            onClick={handleZapEvent}
-                                            pt={{
-                                                button: {
-                                                    icon: ({ context }) => ({
-                                                        className: 'bg-yellow-500'
-                                                    })
-                                                }
-                                            }}
-                                        />
                                     </div>
                                 )}
                             </div>

src/components/navbar/user/UserAvatar.js

@@ -65,7 +65,7 @@ const UserAvatar = () => {
                 <div onClick={(event) => menu.current.toggle(event)} className='flex flex-row items-center justify-between cursor-pointer hover:opacity-75'>
                     <Image
                         alt="logo"
-                        src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+                        src={returnImageProxy(user.avatar, user.pubkey)}
                         width={50}
                         height={50}
                         className={styles.logo}

src/hooks/useImageProxy.js

@@ -1,12 +1,30 @@
 import React from "react"
 
 export const useImageProxy = () => {
-
+  // This function handles image URL generation for avatars
-    const returnImageProxy = (image) => {
+  // It can process custom avatars, generate Gravatar URLs, or provide a default avatar
-        const proxyUrl = `${process.env.NEXT_PUBLIC_PROXY_URL}?imageUrl=${encodeURIComponent(image)}`;
+  const returnImageProxy = (image, pubkey, size = 90) => {
-
+    // If a custom image URL is provided
-        return proxyUrl;
+    if (image) {
+      // Use the proxy URL to avoid CORS issues and potentially optimize the image
+      const proxyUrl = `${process.env.NEXT_PUBLIC_PROXY_URL}?imageUrl=${encodeURIComponent(image)}`;
+      return proxyUrl;
+    } 
+    // If no image is provided, but a pubkey is available
+    else if (pubkey) {
+      // Generate a Gravatar URL using the pubkey as the identifier
+      // 's' parameter sets the size of the image
+      // 'd=identicon' ensures a default identicon is generated if no Gravatar exists for this pubkey
+      return `https://secure.gravatar.com/avatar/${pubkey}?s=${size}&d=identicon`;
+    } 
+    // If neither image nor pubkey is provided
+    else {
+      // Return a completely generic Gravatar URL
+      // This will always generate a random identicon
+      return `https://secure.gravatar.com/avatar/?s=${size}&d=identicon`;
     }
+  }
 
-    return { returnImageProxy };
+  // Return the function so it can be used by components
+  return { returnImageProxy };
 }

src/pages/course/[slug].js

@@ -109,9 +109,7 @@ const Course = () => {
     return (
         <>
             <CourseDetails processedEvent={course} />
-            {
+            {lessons.length > 0 && lessons.map((lesson, index) => (
-
-                lessons.length > 0 && lessons.map((lesson, index) => (
                     <div key={index} className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>
                         <div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
                             <div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
@@ -129,7 +127,7 @@ const Course = () => {
                                     <div className='flex flex-row w-full mt-6 items-center'>
                                         <Image
                                             alt="avatar thumbnail"
-                                            src={returnImageProxy(lesson.author?.avatar)}
+                                            src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
                                             width={50}
                                             height={50}
                                             className="rounded-full mr-4"

src/pages/details/[slug].js

@@ -124,7 +124,7 @@ export default function Details() {
                         <div className='flex flex-row w-full mt-6 items-center'>
                             <Image
                                 alt="avatar image"
-                                src={returnImageProxy(author?.avatar)}
+                                src={returnImageProxy(author?.avatar, author?.pubkey)}
                                 width={50}
                                 height={50}
                                 className="rounded-full mr-4"

src/pages/draft/[slug]/index.js

@@ -266,7 +266,7 @@ export default function Details() {
                         <div className='flex flex-row w-full mt-6 items-center'>
                             <Image
                                 alt="resource thumbnail"
-                                src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+                                src={returnImageProxy(draft.author?.avatar, draft.author?.pubkey)}
                                 width={50}
                                 height={50}
                                 className="rounded-full mr-4"

src/pages/profile.js

@@ -73,7 +73,7 @@ const Profile = () => {
                     <div className="relative flex w-full items-center justify-center">
                         <Image
                             alt="user's avatar"
-                            src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+                            src={returnImageProxy(user.avatar, user.pubkey)}
                             width={100}
                             height={100}
                             className="rounded-full my-4"