style: format code with prettier and fix lint issues

client/package.json

@@ -63,4 +63,4 @@
 		"*.{js,jsx,ts,tsx}": "eslint --fix",
 		"*.--write": "prettier --write ."
 	}
-}
+}

client/src/components/UserAvatar.jsx

@@ -4,33 +4,34 @@ import PropTypes from 'prop-types';
 
 export default function UserAvatar({ imageRef, onUploadClick, onEditClick }) {
 	return (
-    <div className="relative group">  
+		<div className="relative group">
 			{imageRef?.current.src ? (
-        <> 
+				<>
 					<img
 						src={imageRef.current.src}
 						ref={imageRef}
-            alt="Profile Image"
-            className="h-20 w-20 rounded-full"
-          />   
-          <button className="absolute -top-2 right-0 opacity-0 group-hover:opacity-100 flex items-center bg-highlight p-2 rounded-full cursor-pointer" onClick={onEditClick}>
-            <HiPencil className="h-3 w-3 text-light" />
-          </button>
+						alt="Profile Image"
+						className="h-20 w-20 rounded-full"
+					/>
+					<button
+						className="absolute -top-2 right-0 opacity-0 group-hover:opacity-100 flex items-center bg-highlight p-2 rounded-full cursor-pointer"
+						onClick={onEditClick}
+					>
+						<HiPencil className="h-3 w-3 text-light" />
+					</button>
 				</>
-      ) : ( 
-
-          <HiUserAdd
-            className="bg-highlight text-light rounded-full p-5 h-20 w-20 cursor-pointer"
-            onClick={onUploadClick}
-            title="upload profile image"
-          />
-
+			) : (
+				<HiUserAdd
+					className="bg-highlight text-light rounded-full p-5 h-20 w-20 cursor-pointer"
+					onClick={onUploadClick}
+					title="upload profile image"
+				/>
 			)}
 		</div>
 	);
 }
 
-UserAvatar.propTypes = { 
+UserAvatar.propTypes = {
 	imageRef: PropTypes.object,
 	onUploadClick: PropTypes.func,
 	onEditClick: PropTypes.func,

client/src/pages/Profile.jsx

@@ -46,13 +46,13 @@ const Profile = () => {
 	const handlerisImageSafe = async () => {
 		setLoading(true);
 		try {
-      const model = await nsfwjs.load();
+			const model = await nsfwjs.load();
 			const predictions = await model.classify(imageRef.current);
 			const neutralProb = predictions.find((p) => p.className === 'Neutral');
 			return neutralProb.probability >= 0.6;
-    } catch (error) {
+		} catch (error) {
 			console.error('Error classifying image:', error);
-      return null;
+			return null;
 		}
 	};
 	const handleImageUpload = () => {
@@ -68,13 +68,13 @@ const Profile = () => {
 					setLoading(true);
 					const imageSafe = await handlerisImageSafe();
 
-          if (imageSafe === null) {
-            setProfileResponse(`Error: Service to uplaod image is currently unavailable`)
-          }
+					if (imageSafe === null) {
+						setProfileResponse(`Error: Service to uplaod image is currently unavailable`);
+					}
 
 					imageSafe
-            ? setProfileResponse('Image added Successfully, please save changes')
-            : setProfileResponse(`Error: Image uploaded isn't safe, try another`);
+						? setProfileResponse('Image added Successfully, please save changes')
+						: setProfileResponse(`Error: Image uploaded isn't safe, try another`);
 
 					setImageSafe(imageSafe);
 					setImageFile(file);
@@ -140,7 +140,7 @@ const Profile = () => {
 	};
 
 	useEffect(() => {
-    if (!email || email === '') {
+		if (!email || email === '') {
 			return;
 		}
 		getProfileData(email);
@@ -238,7 +238,9 @@ const Profile = () => {
 					</button>
 					{profileResponse ? (
 						<div>
-                <p className={profileResponse.includes('Error') ? 'text-red' : 'text-green-500'}>{profileResponse}</p>
+							<p className={profileResponse.includes('Error') ? 'text-red' : 'text-green-500'}>
+								{profileResponse}
+							</p>
 						</div>
 					) : null}
 				</>