Refactor avatar implementation

2 years ago · 7441f1a203
parent 4d3ebb0ac6
commit 7441f1a203
5 changed files with 92 additions and 65 deletions
--- a/.env.example
+++ b/.env.example
@ -1 +1,2 @@
 PUBLIC_API_URL=http://api.roadmap.sh
+PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars
--- a/public/images/default-avatar.png
+++ b/public/images/default-avatar.png
--- a/src/components/Profile/UploadProfilePicture.tsx
+++ b/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;
-  };
-}) {
-  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) => {
-    setError('');
-    const file = (e.target as HTMLInputElement).files?.[0];
-    if (!file) return;
+type UploadProfilePictureProps = {
+  avatarUrl: string;
+};

-    // Check file size and dimension
-    const dimensions = await new Promise<{
+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);

-    // 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.');
-      return;
+    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.';
  }

-    // Image can't be larger than 1MB
  if (file.size > 1024 * 1024) {
-      setError('Image size is too big. Maximum 1MB.');
-      return;
+    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 onImageChange = async (e: Event) => {
    setError('');
+
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file) {
+      return;
+    }
+
+    const error = await validateImage(file);
+    if (error) {
+      setError(error);
+      return;
+    }
+
    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');
+    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>
        )}
--- a/src/components/Setting/UpdateProfileForm.tsx
+++ b/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-["*"]'
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -3,6 +3,7 @@
 interface ImportMetaEnv {
  GITHUB_SHA: string;
  PUBLIC_API_URL: string;
+  PUBLIC_AVATAR_BASE_URL: string;
 }

 interface ImportMeta {