Fix #4838 when showing avatars of deleted users

Author: jc21

frontend/src/components/Table/Formatter/GravatarFormatter.tsx

@@ -1,5 +1,7 @@
+const defaultImg = "/images/default-avatar.jpg";
+
 interface Props {
-	url: string;
+	url?: string;
 	name?: string;
 }
 export function GravatarFormatter({ url, name }: Props) {
@@ -9,7 +11,7 @@ export function GravatarFormatter({ url, name }: Props) {
 				title={name}
 				className="avatar avatar-2 me-2"
 				style={{
-					backgroundImage: `url(${url})`,
+					backgroundImage: `url(${url || defaultImg})`,
 				}}
 			/>
 		</div>

frontend/src/pages/Access/Table.tsx

@@ -21,7 +21,10 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 		() => [
 			columnHelper.accessor((row: any) => row.owner, {
 				id: "owner",
-				cell: (info: any) => <GravatarFormatter url={info.getValue().avatar} name={info.getValue().name} />,
+				cell: (info: any) => {
+					const value = info.getValue();
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
+				},
 				meta: {
 					className: "w-1",
 				},

frontend/src/pages/AuditLog/Table.tsx

@@ -18,7 +18,7 @@ export default function Table({ data, isFetching, onSelectItem }: Props) {
 				id: "user.avatar",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",

frontend/src/pages/Certificates/Table.tsx

@@ -31,7 +31,7 @@ export default function Table({ data, isFetching, onDelete, onRenew, onDownload,
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",

frontend/src/pages/Nginx/DeadHosts/Table.tsx

@@ -31,7 +31,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",

frontend/src/pages/Nginx/ProxyHosts/Table.tsx

@@ -32,7 +32,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",

frontend/src/pages/Nginx/RedirectionHosts/Table.tsx

@@ -31,7 +31,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",

frontend/src/pages/Nginx/Streams/Table.tsx

@@ -31,7 +31,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
-					return <GravatarFormatter url={value.avatar} name={value.name} />;
+					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
 				meta: {
 					className: "w-1",