From 8d4c9aaa8344a95726dcbfcbd520399e40f869ae Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Thu, 1 Aug 2024 16:31:52 -0500
Subject: [PATCH] handle no avatar

---
 src/components/CourseDetails.js          | 22 ++++-------------
 src/components/navbar/user/UserAvatar.js |  2 +-
 src/hooks/useImageProxy.js               | 30 +++++++++++++++++++-----
 src/pages/course/[slug].js               |  6 ++---
 src/pages/details/[slug].js              |  2 +-
 src/pages/draft/[slug]/index.js          |  2 +-
 src/pages/profile.js                     |  2 +-
 7 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/components/CourseDetails.js b/src/components/CourseDetails.js
index c09a05b..9234fa2 100644
--- a/src/components/CourseDetails.js
+++ b/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>
-                                        <Button
-                                            icon="pi pi-bolt"
-                                            label="Zap"
-                                            severity="success"
-                                            outlined
-                                            onClick={handleZapEvent}
-                                            pt={{
-                                                button: {
-                                                    icon: ({ context }) => ({
-                                                        className: 'bg-yellow-500'
-                                                    })
-                                                }
-                                            }}
-                                        />
+                                    <div className='w-full flex justify-end'>
+                                        <ZapDisplay zapAmount={zapAmount} event={processedEvent} />
                                     </div>
                                 )}
                             </div>
diff --git a/src/components/navbar/user/UserAvatar.js b/src/components/navbar/user/UserAvatar.js
index 1452672..25f6975 100644
--- a/src/components/navbar/user/UserAvatar.js
+++ b/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}
diff --git a/src/hooks/useImageProxy.js b/src/hooks/useImageProxy.js
index 2c5ca25..593c7dd 100644
--- a/src/hooks/useImageProxy.js
+++ b/src/hooks/useImageProxy.js
@@ -1,12 +1,30 @@
 import React from "react"
 
 export const useImageProxy = () => {
-
-    const returnImageProxy = (image) => {
-        const proxyUrl = `${process.env.NEXT_PUBLIC_PROXY_URL}?imageUrl=${encodeURIComponent(image)}`;
-
-        return proxyUrl;
+  // This function handles image URL generation for avatars
+  // It can process custom avatars, generate Gravatar URLs, or provide a default avatar
+  const returnImageProxy = (image, pubkey, size = 90) => {
+    // If a custom image URL is provided
+    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 };
 }
\ No newline at end of file
diff --git a/src/pages/course/[slug].js b/src/pages/course/[slug].js
index 25bdeac..3faf8d7 100644
--- a/src/pages/course/[slug].js
+++ b/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"
diff --git a/src/pages/details/[slug].js b/src/pages/details/[slug].js
index 17ec6b2..3a6705a 100644
--- a/src/pages/details/[slug].js
+++ b/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"
diff --git a/src/pages/draft/[slug]/index.js b/src/pages/draft/[slug]/index.js
index 82fce22..c0af5f1 100644
--- a/src/pages/draft/[slug]/index.js
+++ b/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"
diff --git a/src/pages/profile.js b/src/pages/profile.js
index d3e37f3..63f6474 100644
--- a/src/pages/profile.js
+++ b/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"