feat: on blur check username

src/components/UpdateProfile/ProfileUsername.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import type { AllowedProfileVisibility } from '../../api/user';
+import { httpGet, httpPost } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { CheckIcon, Loader2, X, XCircle } from 'lucide-react';
+
+type ProfileUsernameProps = {
+  username: string;
+  setUsername: (username: string) => void;
+  profileVisibility: AllowedProfileVisibility;
+  currentUsername?: string;
+};
+
+export function ProfileUsername(props: ProfileUsernameProps) {
+  const { username, setUsername, profileVisibility, currentUsername } = props;
+
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isUnique, setIsUnique] = useState<boolean | null>(null);
+
+  const checkIsUnique = async (username: string) => {
+    if (isLoading || username.length < 3) {
+      return;
+    }
+
+    if (currentUsername && username === currentUsername && isUnique !== false) {
+      setIsUnique(true);
+      return;
+    }
+
+    setIsLoading(true);
+    const { response, error } = await httpPost<{
+      isUnique: boolean;
+    }>(`${import.meta.env.PUBLIC_API_URL}/v1-check-is-unique-username`, {
+      username,
+    });
+
+    if (error || !response) {
+      setIsUnique(null);
+      setIsLoading(false);
+      toast.error(error?.message || 'Something went wrong. Please try again.');
+      return;
+    }
+
+    setIsUnique(response.isUnique);
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <label htmlFor="username" className="text-sm leading-none text-slate-500">
+        Username
+      </label>
+      <div className="mt-2 flex items-center overflow-hidden rounded-lg border border-gray-300">
+        <span className="border-r border-gray-300 bg-gray-100 p-2">
+          roadmap.sh/u/
+        </span>
+
+        <div className="relative grow">
+          <input
+            type="text"
+            name="username"
+            id="username"
+            className="w-full px-3 py-2 outline-none placeholder:text-gray-400"
+            placeholder="johndoe"
+            spellCheck={false}
+            value={username}
+            title="Username must be at least 3 characters long and can only contain letters, numbers, and underscores"
+            onChange={(e) => setUsername((e.target as HTMLInputElement).value)}
+            onBlur={(e) => checkIsUnique((e.target as HTMLInputElement).value)}
+            required={profileVisibility === 'public'}
+          />
+
+          <span className="absolute bottom-0 right-0 top-0 flex items-center px-2">
+            {isLoading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : isUnique === false ? (
+              <X className="h-4 w-4 text-red-500" />
+            ) : isUnique === true ? (
+              <CheckIcon className="h-4 w-4 text-green-500" />
+            ) : null}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/UpdateProfile/UpdatePublicProfileForm.tsx

@@ -12,6 +12,7 @@ import { ArrowUpRight, Eye, EyeOff } from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
 import { VisibilityDropdown } from './VisibilityDropdown.tsx';
+import { ProfileUsername } from './ProfileUsername.tsx';
 
 type RoadmapType = {
   id: string;
@@ -43,6 +44,8 @@ export function UpdatePublicProfileForm() {
   const [roadmaps, setRoadmaps] = useState<string[]>([]);
   const [customRoadmaps, setCustomRoadmaps] = useState<string[]>([]);
 
+  const [currentUsername, setCurrentUsername] = useState('');
+
   const [github, setGithub] = useState('');
   const [twitter, setTwitter] = useState('');
   const [linkedin, setLinkedin] = useState('');
@@ -109,6 +112,7 @@ export function UpdatePublicProfileForm() {
 
     setPublicProfileUrl(username ? `/u/${username}` : '');
     setUsername(username || '');
+    setCurrentUsername(username || '');
     setGithub(links?.github || '');
     setTwitter(links?.twitter || '');
     setLinkedin(links?.linkedin || '');
@@ -187,9 +191,11 @@ export function UpdatePublicProfileForm() {
         <CreateRoadmapModal onClose={() => setIsCreatingRoadmap(false)} />
       )}
 
-        <div className="flex gap-2 flex-col sm:flex-row justify-between mb-1">
+      <div className="mb-1 flex flex-col justify-between gap-2 sm:flex-row">
-          <div className="flex gap-2 flex-grow flex-col sm:flex-row items-start">
+        <div className="flex flex-grow flex-col items-start gap-2 sm:flex-row">
-            <h3 className="mr-1 text-xl sm:text-3xl font-bold">Personal Profile</h3>
+          <h3 className="mr-1 text-xl font-bold sm:text-3xl">
+            Personal Profile
+          </h3>
           {publicProfileUrl && (
             <a
               href={publicProfileUrl}
@@ -206,7 +212,7 @@ export function UpdatePublicProfileForm() {
           setVisibility={setProfileVisibility}
         />
       </div>
-      <p className="text-gray-400 text-sm sm:text-base mt-2 sm:mt-0 hidden sm:block">
+      <p className="mt-2 hidden text-sm text-gray-400 sm:mt-0 sm:block sm:text-base">
         Set up your public profile to showcase your learning progress.
       </p>
 
@@ -229,40 +235,19 @@ export function UpdatePublicProfileForm() {
             required={profileVisibility === 'public'}
           />
         </div>
-        <div className="flex w-full flex-col">
-          <label
-            htmlFor="username"
-            className="text-sm leading-none text-slate-500"
-          >
-            Username
-          </label>
-          <div className="mt-2 flex items-center overflow-hidden rounded-lg border border-gray-300">
-            <span className="border-r border-gray-300 bg-gray-100 p-2">
-              roadmap.sh/u/
-            </span>
 
-            <input
+        <ProfileUsername
-              type="text"
+          username={username}
-              name="username"
+          setUsername={setUsername}
-              id="username"
+          profileVisibility={profileVisibility}
-              className="w-full px-3 py-2 outline-none placeholder:text-gray-400"
+          currentUsername={currentUsername}
-              placeholder="johndoe"
-              spellCheck={false}
-              value={username}
-              title="Username must be at least 3 characters long and can only contain letters, numbers, and underscores"
-              onChange={(e) =>
-                setUsername((e.target as HTMLInputElement).value)
-              }
-              required={profileVisibility === 'public'}
         />
-          </div>
-        </div>
 
         <div className="rounded-md border p-4">
           <h3 className="text-sm font-medium">
             Which roadmap progresses do you want to show on your profile?
           </h3>
-          <div className="mt-3 flex items-center flex-wrap gap-2">
+          <div className="mt-3 flex flex-wrap items-center gap-2">
             <SelectionButton
               type="button"
               text="All Progress"
@@ -332,7 +317,7 @@ export function UpdatePublicProfileForm() {
           <h3 className="text-sm font-medium">
             Pick your custom roadmaps to show on your profile
           </h3>
-          <div className="mt-3 flex items-center gap-2 flex-wrap">
+          <div className="mt-3 flex flex-wrap items-center gap-2">
             <SelectionButton
               type="button"
               text="All Roadmaps"