chg: dev: massive refactor on front-end for unification and readiness #8

assets/js/components/AvatarUpload.jsx

@@ -1,36 +1,32 @@
-import React, { useRef, useState } from 'react';
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
-export default function AvatarUpload({ uploadUrl, initialThumbUrl, initials }) {
-  const [thumbUrl, setThumbUrl] = useState(initialThumbUrl || null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
+import React, { useMemo, useRef } from 'react';
+import { string } from 'prop-types';
+import { useProfileDataProvider } from '@mine-hooks/useGameDataProvider';
+
+export const AvatarUpload = ({ uploadUrl, initialThumbUrl, initials }) => {
   const inputRef = useRef(null);
+  const [thumbUrl, setThumbUrl] = React.useState(initialThumbUrl || null);
+  const { uploadAvatarMutation: { isPending, error, mutate } } = useProfileDataProvider();
 
-  function handleClick() {
-    inputRef.current?.click();
-  }
-
-  function handleChange(e) {
+  const handleChange = e => {
     const file = e.target.files?.[0];
     if (!file) return;
 
-    const fd = new FormData();
-    fd.append('avatar', file);
-
-    setLoading(true);
-    setError(null);
-
-    fetch(uploadUrl, { method: 'POST', body: fd })
-      .then(r => r.json())
-      .then(data => {
-        if (data.error) {
-          setError(data.error);
-          return;
-        }
+    mutate({ uploadUrl, file }, {
+      onSuccess: data => {
         setThumbUrl(data.thumbUrl);
 
         const navImg = document.querySelector('.hero-auth-avatar:not(.hero-auth-avatar--initials)');
         const navInitials = document.querySelector('.hero-auth-avatar.hero-auth-avatar--initials');
+
         if (navImg) {
           navImg.src = data.thumbUrl;
         } else if (navInitials) {
@@ -40,16 +36,17 @@ export default function AvatarUpload({ uploadUrl, initialThumbUrl, initials }) {
           img.className = 'hero-auth-avatar';
           navInitials.replaceWith(img);
         }
-      })
-      .catch(() => setError('Upload failed. Please try again.'))
-      .finally(() => setLoading(false));
-  }
+      },
+    });
+  };
+
+  const errorMessage = useMemo(() => error?.message ?? null, [error]);
 
   return (
     <div
-      className={`profile-avatar${loading ? ' profile-avatar--loading' : ''}`}
+      className={`profile-avatar${isPending ? ' profile-avatar--loading' : ''}`}
       title="Click to change profile picture"
-      onClick={handleClick}
+      onClick={() => inputRef.current?.click()}
     >
       {thumbUrl
         ? <img src={thumbUrl} alt={initials} className="profile-avatar__img" />
@@ -65,7 +62,13 @@ export default function AvatarUpload({ uploadUrl, initialThumbUrl, initials }) {
         style={{ display: 'none' }}
         onChange={handleChange}
       />
-      {error && <div className="profile-avatar__error">{error}</div>}
+      {errorMessage && <div className="profile-avatar__error">{errorMessage}</div>}
     </div>
   );
 }
+
+AvatarUpload.propTypes = {
+  uploadUrl: string.isRequired,
+  initialThumbUrl: string,
+  initials: string.isRequired,
+};