From 7c38f751f2731fd51dfb1470a58295abd824061d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 6 Jul 2023 13:22:15 +0200
Subject: [PATCH] Fix HeaderPicker/AvatarPicker for missing images
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/edit-profile/components/header-picker.tsx    | 8 +++++++-
 app/soapbox/utils/accounts.ts                             | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/edit-profile/components/header-picker.tsx b/app/soapbox/features/edit-profile/components/header-picker.tsx
index bb3b72054..8339f95ff 100644
--- a/app/soapbox/features/edit-profile/components/header-picker.tsx
+++ b/app/soapbox/features/edit-profile/components/header-picker.tsx
@@ -19,6 +19,12 @@ interface IMediaInput {
 const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onChange, onClear, accept, disabled }, ref) => {
   const intl = useIntl();
 
+  const handleClear: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+
+    onClear!();
+  };
+
   return (
     <label
       className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
@@ -54,7 +60,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
       </HStack>
       {onClear && src && (
         <IconButton
-          onClick={onClear}
+          onClick={handleClear}
           src={require('@tabler/icons/x.svg')}
           theme='dark'
           className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900'
diff --git a/app/soapbox/utils/accounts.ts b/app/soapbox/utils/accounts.ts
index d8d946f9d..a51ed9aad 100644
--- a/app/soapbox/utils/accounts.ts
+++ b/app/soapbox/utils/accounts.ts
@@ -34,9 +34,10 @@ export const isLocal = (account: Pick<Account, 'acct'>): boolean => {
 export const isRemote = (account: Pick<Account, 'acct'>): boolean => !isLocal(account);
 
 /** Default header filenames from various backends */
-const DEFAULT_HEADERS = [
+const DEFAULT_HEADERS: string[] = [
   '/headers/original/missing.png', // Mastodon
   '/images/banner.png', // Pleroma
+  require('assets/images/header-missing.png'), // header not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */
@@ -48,6 +49,7 @@ export const isDefaultHeader = (url: string) => {
 const DEFAULT_AVATARS = [
   '/avatars/original/missing.png', // Mastodon
   '/images/avi.png', // Pleroma
+  require('assets/images/avatar-missing.png'), // avatar not provided by backend
 ];
 
 /** Check if the avatar is a default avatar */