From 00577cd8861bab31814861d0d8d964f923f70538 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sat, 7 Oct 2023 11:32:43 +0800
Subject: [PATCH] fix: friend avatar image fallback

---
 src/app/friends/page.tsx            |  4 ++-
 src/app/says/page.tsx               |  9 ++++---
 src/components/ui/avatar/Avatar.tsx | 42 ++++++++++++++++++++++-------
 src/components/ui/tag/Tag.tsx       |  7 +++--
 4 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/app/friends/page.tsx b/src/app/friends/page.tsx
index f9ec8cb1b8..d649875f91 100644
--- a/src/app/friends/page.tsx
+++ b/src/app/friends/page.tsx
@@ -160,12 +160,14 @@ const Card: FC<{ link: LinkModel }> = ({ link }) => {
       <AnimatePresence mode="wait">{enter && <LayoutBg />}</AnimatePresence>
 
       <Avatar
+        randomColor
         imageUrl={link.avatar}
         lazy
+        radius={8}
         text={link.name[0]}
         alt={`Avatar of ${link.name}`}
         size={64}
-        className="rounded-xl ring-2 ring-gray-400/30 dark:ring-slate-50"
+        className="ring-2 ring-gray-400/30 dark:ring-slate-50"
       />
       <span className="flex h-full flex-col items-center justify-center space-y-2 py-3">
         <span className="text-lg font-medium">{link.name}</span>
diff --git a/src/app/says/page.tsx b/src/app/says/page.tsx
index a24572e339..5ee10d624f 100644
--- a/src/app/says/page.tsx
+++ b/src/app/says/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useInfiniteQuery } from '@tanstack/react-query'
-import { memo, useRef } from 'react'
+import { memo, useMemo } from 'react'
 import { m } from 'framer-motion'
 import Markdown from 'markdown-to-jsx'
 import type { SayModel } from '@mx-space/api-client'
@@ -110,9 +110,10 @@ const Item = memo<{
   const hasSource = !!say.source
   const hasAuthor = !!say.author
   // const color = colorsMap.get(say.id)
-  const { dark: darkColors, light: lightColors } = useRef(
-    getColorScheme(stringToHue(say.id)),
-  ).current
+  const { dark: darkColors, light: lightColors } = useMemo(
+    () => getColorScheme(stringToHue(say.id)),
+    [say.id],
+  )
   const isDark = useIsDark()
 
   return (
diff --git a/src/components/ui/avatar/Avatar.tsx b/src/components/ui/avatar/Avatar.tsx
index 98fde5d834..af56d57315 100644
--- a/src/components/ui/avatar/Avatar.tsx
+++ b/src/components/ui/avatar/Avatar.tsx
@@ -1,8 +1,10 @@
 'use client'
 
-import React, { createElement, useRef, useState } from 'react'
+import React, { createElement, useMemo, useRef, useState } from 'react'
 import type { DetailedHTMLProps, FC, ImgHTMLAttributes } from 'react'
 
+import { useIsDark } from '~/hooks/common/use-is-dark'
+import { getColorScheme, stringToHue } from '~/lib/color'
 import { clsxm } from '~/lib/helper'
 
 import { FlexText } from '../text'
@@ -16,6 +18,8 @@ interface AvatarProps {
 
   shadow?: boolean
   text?: string
+  randomColor?: boolean
+  radius?: number
 
   lazy?: boolean
 }
@@ -32,13 +36,25 @@ export const Avatar: FC<
     imageUrl,
     text,
     url,
+    randomColor,
+    radius,
     ...imageProps
   } = props
   const avatarRef = useRef<HTMLDivElement>(null)
 
   const [loaded, setLoaded] = useState(!lazy)
+  const [loadError, setLoadError] = useState(false)
 
   const { className, ...restProps } = wrapperProps
+  const colors = useMemo(
+    () =>
+      (text || imageUrl) &&
+      randomColor &&
+      (getColorScheme(stringToHue(text || imageUrl!)) as any),
+    [text, imageUrl, randomColor],
+  )
+  const isDark = useIsDark()
+  const bgColor = isDark ? colors?.dark.background : colors?.light.background
 
   return (
     <div
@@ -48,11 +64,13 @@ export const Avatar: FC<
         className,
       )}
       ref={avatarRef}
-      style={
-        size
+      style={{
+        ...(size
           ? { height: `${size || 80}px`, width: `${size || 80}px` }
-          : undefined
-      }
+          : undefined),
+        ...(bgColor ? { backgroundColor: bgColor } : undefined),
+        ...(radius ? { borderRadius: `${radius}px` } : undefined),
+      }}
       {...restProps}
     >
       {createElement(
@@ -68,30 +86,34 @@ export const Avatar: FC<
               }
             : {}),
         },
-        imageUrl ? (
+        imageUrl && !loadError ? (
           <div
             className={clsxm(
               'h-full w-full bg-cover bg-center bg-no-repeat transition-opacity duration-300',
               className,
             )}
-            style={{ opacity: loaded ? 1 : 0 }}
           >
             <img
               src={imageUrl}
+              style={{
+                ...{ opacity: loaded ? 1 : 0 },
+                ...(radius ? { borderRadius: `${radius}px` } : undefined),
+              }}
               height={size}
               width={size}
               onLoad={() => setLoaded(true)}
+              onError={() => setLoadError(true)}
               loading={lazy ? 'lazy' : 'eager'}
               {...imageProps}
               className={clsxm(
-                'aspect-square rounded-full',
+                'aspect-square rounded-full duration-200',
                 imageProps.className,
               )}
             />
           </div>
         ) : text ? (
-          <div className="relative flex h-full w-full flex-grow items-center justify-center">
-            <FlexText scale={0.8} text={text} />
+          <div className="relative flex h-full w-full flex-grow select-none items-center justify-center">
+            <FlexText scale={0.5} text={text} />
           </div>
         ) : null,
       )}
diff --git a/src/components/ui/tag/Tag.tsx b/src/components/ui/tag/Tag.tsx
index 7d9f444b06..50c499e5ec 100644
--- a/src/components/ui/tag/Tag.tsx
+++ b/src/components/ui/tag/Tag.tsx
@@ -1,4 +1,4 @@
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 
 import { useIsDark } from '~/hooks/common/use-is-dark'
 import { addAlphaToHSL, getColorScheme, stringToHue } from '~/lib/color'
@@ -12,7 +12,10 @@ export const Tag = memo(function Tag<T>(props: {
   count?: number
 }) {
   const { text, count, passProps, onClick } = props
-  const { dark, light } = getColorScheme(stringToHue(text))
+  const { dark, light } = useMemo(
+    () => getColorScheme(stringToHue(text)),
+    [text],
+  )
   const isDark = useIsDark()
 
   const bgColor = isDark ? dark.background : light.background