Refactor avatar implementation

.env.example

@@ -1 +1,2 @@
 PUBLIC_API_URL=http://api.roadmap.sh
+PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars

src/components/Profile/UploadProfilePicture.tsx

@@ -1,57 +1,76 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { httpCall, httpPost } from '../../lib/http';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
+import { httpCall, httpPost } from '../../lib/http';
 
 interface PreviewFile extends File {
   preview: string;
 }
-export default function UploadProfilePicture({
-  user,
-}: {
-  user: {
-    image: string;
-  };
-}) {
+
+type UploadProfilePictureProps = {
+  avatarUrl: string;
+};
+
+function getDimensions(file: File) {
+  return new Promise<{
+    width: number;
+    height: number;
+  }>((resolve) => {
+    const img = new Image();
+
+    img.onload = () => {
+      resolve({ width: img.width, height: img.height });
+    };
+
+    img.onerror = () => {
+      resolve({ width: 0, height: 0 });
+    };
+
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+async function validateImage(file: File): Promise<string | null> {
+  const dimensions = await getDimensions(file);
+
+  if (dimensions.width > 3000 || dimensions.height > 3000) {
+    return 'Image dimensions are too big. Maximum 3000x3000 pixels.';
+  }
+
+  if (dimensions.width < 100 || dimensions.height < 100) {
+    return 'Image dimensions are too small. Minimum 100x100 pixels.';
+  }
+
+  if (file.size > 1024 * 1024) {
+    return 'Image size is too big. Maximum 1MB.';
+  }
+
+  return null;
+}
+
+export default function UploadProfilePicture(props: UploadProfilePictureProps) {
+  const { avatarUrl } = props;
+
   const [file, setFile] = useState<PreviewFile | null>(null);
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleFileChange = async (e: Event) => {
+  const onImageChange = async (e: Event) => {
     setError('');
+
     const file = (e.target as HTMLInputElement).files?.[0];
-    if (!file) return;
-
-    // Check file size and dimension
-    const dimensions = await new Promise<{
-      width: number;
-      height: number;
-    }>((resolve) => {
-      const img = new Image();
-      img.onload = () => {
-        resolve({ width: img.width, height: img.height });
-      };
-      img.src = URL.createObjectURL(file);
-    });
-
-    // Image can't be larger than 3000x3000 pixels
-    if (dimensions.width > 3000 || dimensions.height > 3000) {
-      setError('Image dimensions are too big. Maximum 3000x3000 pixels.');
-      return;
-      // Image can't be smaller than 100x100 pixels
-    } else if (dimensions.width < 100 || dimensions.height < 100) {
-      setError('Image dimensions are too small. Minimum 100x100 pixels.');
+    if (!file) {
       return;
     }
 
-    // Image can't be larger than 1MB
-    if (file.size > 1024 * 1024) {
-      setError('Image size is too big. Maximum 1MB.');
+    const error = await validateImage(file);
+    if (error) {
+      setError(error);
       return;
     }
 
-    setError('');
     setFile(
       Object.assign(file, {
         preview: URL.createObjectURL(file),
@@ -63,11 +82,16 @@ export default function UploadProfilePicture({
     e.preventDefault();
     setError('');
     setIsLoading(true);
-    if (!file) return;
+
+    if (!file) {
+      return;
+    }
 
     const formData = new FormData();
     formData.append('name', 'avatar');
     formData.append('avatar', file);
+
+    // FIXME: Use `httpCall` helper instead of fetch
     const res = await fetch(
       `${import.meta.env.PUBLIC_API_URL}/v1-upload-profile-picture`,
       {
@@ -77,25 +101,29 @@ export default function UploadProfilePicture({
       }
     );
 
+    if (res.ok) {
+      window.location.reload();
+      return;
+    }
+
     const data = await res.json();
 
-    if (!res.ok) {
-      setError(data.message || 'Something went wrong');
-      setIsLoading(false);
-    }
+    setError(data?.message || 'Something went wrong');
+    setIsLoading(false);
+
     // Logout user if token is invalid
     if (data.status === 401) {
       Cookies.remove(TOKEN_COOKIE_NAME);
       window.location.reload();
     }
-
-    window.location.reload();
   };
 
   useEffect(() => {
     // Necessary to revoke the preview URL when the component unmounts for avoiding memory leaks
     return () => {
-      if (file) URL.revokeObjectURL(file.preview);
+      if (file) {
+        URL.revokeObjectURL(file.preview);
+      }
     };
   }, [file]);
 
@@ -105,27 +133,20 @@ export default function UploadProfilePicture({
       encType="multipart/form-data"
       className="mt-8 flex flex-col gap-2"
     >
-      <label
-        htmlFor="avatar"
-        className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
-      >
+      <label htmlFor="avatar" className="text-sm leading-none text-slate-500">
         Profile Picture
       </label>
-      <div className="mt-2 flex items-center gap-2">
+      <div className="mb-2 mt-2 flex items-center gap-2">
         <label
           htmlFor="avatar"
           title="Change profile picture"
           className="relative cursor-pointer"
         >
-          <div className="relative block h-24 w-24 overflow-hidden rounded-full">
+          <div className="relative block h-24 w-24 items-center overflow-hidden rounded-full">
             <img
-              className="absolute inset-0 h-full w-full object-cover"
-              src={
-                file?.preview ||
-                user.image ||
-                'https://d22sqt16nof9dt.cloudfront.net/placeholder.png'
-              }
-              alt={file?.name ?? 'Profile picture'}
+              className="absolute inset-0 h-full w-full bg-gray-100 object-cover text-sm leading-8 text-red-700"
+              src={file?.preview || avatarUrl}
+              alt={file?.name ?? 'Error!'}
               loading="lazy"
               decoding="async"
               onLoad={() => file && URL.revokeObjectURL(file.preview)}
@@ -152,7 +173,7 @@ export default function UploadProfilePicture({
           name="avatar"
           accept="image/png, image/jpeg, image/jpg, image/pjpeg"
           className="hidden"
-          onChange={handleFileChange}
+          onChange={onImageChange}
         />
 
         {file && (
@@ -173,7 +194,7 @@ export default function UploadProfilePicture({
               className="flex h-9 min-w-[96px] items-center justify-center rounded-md border border-gray-300 text-sm font-medium text-black disabled:cursor-not-allowed disabled:opacity-60"
               disabled={isLoading}
             >
-              {isLoading ? 'Uploading' : 'Upload'}
+              {isLoading ? 'Uploading..' : 'Upload'}
             </button>
           </div>
         )}

src/components/Setting/UpdateProfileForm.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'preact/hooks';
 import { httpGet, httpPost } from '../../lib/http';
-import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { pageLoadingMessage } from '../../stores/page';
 import UploadProfilePicture from '../Profile/UploadProfilePicture';
 
 export function UpdateProfileForm() {
   const [name, setName] = useState('');
-  const [image, setImage] = useState('');
+  const [avatar, setAvatar] = useState('');
   const [email, setEmail] = useState('');
   const [github, setGithub] = useState('');
   const [twitter, setTwitter] = useState('');
@@ -61,7 +59,7 @@ export function UpdateProfileForm() {
       return;
     }
 
-    const { name, email, links, image } = response;
+    const { name, email, links, avatar } = response;
 
     setName(name);
     setEmail(email);
@@ -69,7 +67,7 @@ export function UpdateProfileForm() {
     setLinkedin(links?.linkedin || '');
     setTwitter(links?.twitter || '');
     setWebsite(links?.website || '');
-    setImage(image || '');
+    setAvatar(avatar || '');
 
     setIsLoading(false);
   };
@@ -86,9 +84,15 @@ export function UpdateProfileForm() {
     <div>
       <h2 className="text-3xl font-bold sm:text-4xl">Profile</h2>
       <p className="mt-2">Update your profile details below.</p>
-      <UploadProfilePicture user={{ image }} />
-      <form className="mt-4 space-y-4">
-        <div className="flex w-full flex-col" onSubmit={handleSubmit}>
+      <UploadProfilePicture
+        avatarUrl={
+          avatar
+            ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
+            : '/images/default-avatar.png'
+        }
+      />
+      <form className="mt-4 space-y-4" onSubmit={handleSubmit}>
+        <div className="flex w-full flex-col">
           <label
             for="name"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'

src/env.d.ts

@@ -3,6 +3,7 @@
 interface ImportMetaEnv {
   GITHUB_SHA: string;
   PUBLIC_API_URL: string;
+  PUBLIC_AVATAR_BASE_URL: string;
 }
 
 interface ImportMeta {