refactor: Proxy and cache avatar images (#907)

* refactor: proxy and cache user avatar images

* fix: extract keys

* fix: set avatar image URL

* fix: show the correct avatar in the list of available users in advanced request

* fix(s): set correct src URL for cached image

* fix: remove unexpired unused image when a user changes their avatar

* fix: requested changes

* refactor: use 'mime' package to detmerine file extension

* style: grammar

* refactor: checks if the default avatar is cached to avoid creating duplicates for different users

* fix: fix vulnerability

* fix: fix incomplete URL substring sanitization

* refactor: only cache avatar with http url protocol

* fix: remove log and correctly set the if statement for the cached image component

* fix: avatar images not showing on issues page

* style: formatting

---------

Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import CachedImage from '@app/components/Common/CachedImage';
 import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
 import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
@@ -14,7 +15,6 @@ import type {
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import { isEqual } from 'lodash';
-import Image from 'next/image';
 import { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Select from 'react-select';
@@ -561,7 +561,7 @@ const AdvancedRequester = ({
                     <span className="inline-block w-full rounded-md shadow-sm">
                       <Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
                         <span className="flex items-center">
-                          <Image
+                          <CachedImage
                             src={selectedUser.avatar}
                             alt=""
                             className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
@@ -613,7 +613,7 @@ const AdvancedRequester = ({
                                     selected ? 'font-semibold' : 'font-normal'
                                   } flex items-center`}
                                 >
-                                  <Image
+                                  <CachedImage
                                     src={user.avatar}
                                     alt=""
                                     className="h-6 w-6 flex-shrink-0 rounded-full object-cover"