Make avatar pic if no pictures

web/components/widgets/avatar.tsx

@@ -1,37 +1,37 @@
 import Router from 'next/router'
 import clsx from 'clsx'
-import { memo, MouseEvent, useEffect, useState } from 'react'
-import { UserCircleIcon, UserIcon, UsersIcon } from '@heroicons/react/solid'
+import {memo, MouseEvent, useEffect, useState} from 'react'
+import {UserIcon, UsersIcon} from '@heroicons/react/solid'
 import Image from 'next/image'
-import { floor } from 'lodash'
+import {floor} from 'lodash'
 
 export type AvatarSizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export const Avatar = memo(
   (props: {
     username?: string
-    avatarUrl?: string
+    avatarUrl?: string | null
     noLink?: boolean
     size?: AvatarSizeType
     className?: string
     preventDefault?: boolean
   }) => {
-    const { username, noLink, size, className, preventDefault } = props
+    const {username, noLink, size, className, preventDefault} = props
     const [avatarUrl, setAvatarUrl] = useState(props.avatarUrl)
     useEffect(() => setAvatarUrl(props.avatarUrl), [props.avatarUrl])
     const s =
       size == '2xs'
         ? 4
         : size == 'xs'
-        ? 6
-        : size == 'sm'
-        ? 8
-        : size == 'md'
-        ? 10
-        : size == 'lg'
-        ? 12
-        : size == 'xl'
-        ? 24
-        : 10
+          ? 6
+          : size == 'sm'
+            ? 8
+            : size == 'md'
+              ? 10
+              : size == 'lg'
+                ? 12
+                : size == 'xl'
+                  ? 24
+                  : 10
     const sizeInPx = s * 4
 
     const onClick = (e: MouseEvent) => {
@@ -44,9 +44,18 @@ export const Avatar = memo(
       }
     }
 
+    const fallbackInitial = (username || 'U')[0]; // first character, not encoded string
+    const url: string = avatarUrl && avatarUrl.length > 0
+      ? avatarUrl
+      : `https://ui-avatars.com/api/?name=${encodeURIComponent(fallbackInitial)}`;
+
+
+    // console.log(url)
+
     // there can be no avatar URL or username in the feed, we show a "submit comment"
     // item with a fake grey user circle guy even if you aren't signed in
-    return avatarUrl ? (
+    // return url ? (
+    return <div className="relative inline-block group">
       <Image
         width={sizeInPx}
         height={sizeInPx}
@@ -56,25 +65,30 @@ export const Avatar = memo(
           !noLink && 'cursor-pointer',
           className
         )}
-        style={{ maxWidth: `${s * 0.25}rem` }}
-        src={avatarUrl}
+        style={{maxWidth: `${s * 0.25}rem`}}
+        src={url}
         onClick={onClick}
         alt={`${username ?? 'Unknown user'} avatar`}
-        onError={() => {
-          // If the image doesn't load, clear the avatarUrl to show the default
-          // Mostly for localhost, when getting a 403 from googleusercontent
-          setAvatarUrl('')
-        }}
+        onError={() => setAvatarUrl('')}
       />
-    ) : (
-      <UserCircleIcon
-        className={clsx(
-          `bg-canvas-0 flex-shrink-0 rounded-full w-${s} h-${s} text-ink-500`,
-          className
-        )}
-        aria-hidden="true"
-      />
-    )
+
+      {/*<div className="absolute -top-8 left-1/2 -translate-x-1/2*/}
+      {/*          rounded-md bg-gray-800 px-2 py-1 text-xs text-white*/}
+      {/*          opacity-0 group-hover:opacity-100 group-focus-within:opacity-100*/}
+      {/*          transition-opacity pointer-events-none whitespace-nowrap">*/}
+      {/*  {username ?? 'Unknown user'}*/}
+      {/*</div>*/}
+    </div>
+
+    // ) : (
+    //   <UserCircleIcon
+    //     className={clsx(
+    //       `bg-canvas-0 flex-shrink-0 rounded-full w-${s} h-${s} text-ink-500`,
+    //       className
+    //     )}
+    //     aria-hidden="true"
+    //   />
+    // )
   }
 )
 
@@ -83,7 +97,7 @@ export function EmptyAvatar(props: {
   size?: number
   multi?: boolean
 }) {
-  const { className, size = 8, multi } = props
+  const {className, size = 8, multi} = props
   const insize = size - floor(size / 3)
   const Icon = multi ? UsersIcon : UserIcon
 
@@ -94,7 +108,7 @@ export function EmptyAvatar(props: {
         className
       )}
     >
-      <Icon className={`h-${insize} w-${insize} text-ink-500`} aria-hidden />
+      <Icon className={`h-${insize} w-${insize} text-ink-500`} aria-hidden/>
     </div>
   )
 }

web/components/widgets/likes-display.tsx

@@ -26,14 +26,14 @@ export const LikesDisplay = (props: {
   const { likesGiven, likesReceived, ships, refreshShips, profileLover } = props
 
   const likesGivenByUserId = keyBy(likesGiven, (l) => l.user_id)
-  const likesRecievedByUserId = keyBy(likesReceived, (l) => l.user_id)
+  const likesReceivedByUserId = keyBy(likesReceived, (l) => l.user_id)
   const mutualLikeUserIds = Object.keys(likesGivenByUserId).filter(
-    (userId) => likesRecievedByUserId[userId]
+    (userId) => likesReceivedByUserId[userId]
   )
 
   const mutualLikes = mutualLikeUserIds.map((user_id) => {
     const likeGiven = likesGivenByUserId[user_id]
-    const likeReceived = likesRecievedByUserId[user_id]
+    const likeReceived = likesReceivedByUserId[user_id]
     const created_time = Math.max(
       likeGiven.created_time,
       likeReceived.created_time
@@ -42,7 +42,7 @@ export const LikesDisplay = (props: {
   })
   const sortedMutualLikes = orderBy(mutualLikes, 'created_time', 'desc')
   const onlyLikesGiven = likesGiven.filter(
-    (l) => !likesRecievedByUserId[l.user_id]
+    (l) => !likesReceivedByUserId[l.user_id]
   )
   const onlyLikesReceived = likesReceived.filter(
     (l) => !likesGivenByUserId[l.user_id]
@@ -125,7 +125,9 @@ const UserAvatar = (props: { userId: string; className?: string }) => {
   const lover = useLoverByUserId(userId)
   const user = useUserById(userId)
 
-  if (!lover || !lover.pinned_url)
+  // console.log('UserAvatar', user?.username, lover?.pinned_url)
+
+  if (!lover)
     return <EmptyAvatar className={className} size={10} />
   return (
     <Avatar

web/next.config.js

@@ -47,6 +47,7 @@ module.exports = {
       { hostname: 'storage.googleapis.com' },
       { hostname: 'picsum.photos' },
       { hostname: '*.giphy.com' },
+      { hostname: 'ui-avatars.com' },
     ],
   },
   webpack: (config) => {