Redirect user back to names page if they try to visit a reserved prof…

…ile (#904)

* Redirect user back to names page if they try to visit a reserved name profile

* Remove console log

apps/web/src/components/Basenames/UsernameProfileNotFound/index.tsx

@@ -3,13 +3,39 @@ import notFoundIllustration from './notFoundIllustration.svg';
 import { StaticImageData } from 'next/image';
 import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button';
 import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
+import { redirect, useSearchParams } from 'next/navigation';
 import ImageWithLoading from 'apps/web/src/components/ImageWithLoading';
+import { useIsNameAvailable } from 'apps/web/src/hooks/useIsNameAvailable';
+import classNames from 'classnames';
+import { Icon } from 'libs/base-ui';
+
+const spinnerWrapperClasses = classNames('flex w-full items-center justify-center');
 
 export default function UsernameProfileNotFound() {
   const params = useSearchParams();
   const username = params?.get('name');
 
+  if (!username) {
+    redirect(`/names`);
+  }
+  const {
+    isLoading: isLoadingNameAvailability,
+    data: isNameAvailable,
+    isFetching,
+  } = useIsNameAvailable(username);
+
+  if (isFetching && isLoadingNameAvailability) {
+    return (
+      <div className={spinnerWrapperClasses}>
+        <Icon name="spinner" color="black" />
+      </div>
+    );
+  }
+
+  if (!isFetching && !isLoadingNameAvailability && !isNameAvailable) {
+    redirect(`/names`);
+  }
+
   const title = `${username ?? 'Name'} is not found`;
   const description = username
     ? "There's no profile associated with this name, but it could be yours!"