refactor: Profile editing to be able to upload image directly

Author: wzrdx

src/components/account/profile/ImageUpload.tsx

@@ -4,6 +4,8 @@ import { resizeImage } from '@lib/utils';
 import { useCallback, useRef } from 'react';
 import toast from 'react-hot-toast';
 
+const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png'];
+
 export default function ImageUpload({
     onSuccessfulUpload,
     setImageLoading,
@@ -23,6 +25,17 @@ export default function ImageUpload({
                 return;
             }
 
+            // Check if file extension is allowed
+            const fileName = file.name.toLowerCase();
+            const fileExtension = fileName.substring(fileName.lastIndexOf('.'));
+
+            if (!ALLOWED_IMAGE_EXTENSIONS.includes(fileExtension)) {
+                toast.error('Only .jpg, .jpeg, and .png images are allowed.');
+                setImageLoading(false);
+                event.target.value = '';
+                return;
+            }
+
             if (file.size > 50_000) {
                 const resizedBlob = await resizeImage(file);
                 console.log('Resized size (KB):', resizedBlob.size / 1024);
@@ -59,7 +72,7 @@ export default function ImageUpload({
                 ref={inputRef}
                 id="image-input"
                 type="file"
-                accept="image/*"
+                accept=".jpg,.jpeg,.png"
                 onChange={handleFileChange}
                 className="hidden"
             />

src/components/account/profile/PublicProfile.tsx

@@ -131,33 +131,18 @@ export default function PublicProfile() {
                         />
                     </div>
 
-                    {isEditing ? (
-                        <div className="col items-center gap-2">
-                            <ImageUpload
-                                onSuccessfulUpload={() => {
-                                    // Bust cached image and re-attempt load
-                                    setImageError(false);
-                                    setImageRefreshToken(Date.now());
-                                }}
-                                setImageLoading={setImageLoading}
-                            />
-
-                            <div className="text-sm text-slate-500">The maximum file size allowed is 500 KB.</div>
-                        </div>
-                    ) : (
-                        <div>
-                            <Button
-                                className="h-9 border-2 border-slate-200 bg-white data-[hover=true]:opacity-65!"
-                                color="default"
-                                size="sm"
-                                variant="solid"
-                                onPress={() => setEditing(true)}
-                                isDisabled={isLoading}
-                            >
-                                <div className="text-sm">Edit profile</div>
-                            </Button>
-                        </div>
-                    )}
+                    <div className="col items-center gap-2">
+                        <ImageUpload
+                            onSuccessfulUpload={() => {
+                                // Bust cached image and re-attempt load
+                                setImageError(false);
+                                setImageRefreshToken(Date.now());
+                            }}
+                            setImageLoading={setImageLoading}
+                        />
+
+                        <div className="text-sm text-slate-500">Only .jpg, .jpeg, and .png images are allowed.</div>
+                    </div>
                 </div>
 
                 {/* Details */}
@@ -229,6 +214,19 @@ export default function PublicProfile() {
                                 </div>
                             </DetailsCard>
                         )}
+
+                        <div className="center-all mt-2">
+                            <Button
+                                className="h-9 border-2 border-slate-200 bg-white data-[hover=true]:opacity-65!"
+                                color="default"
+                                size="sm"
+                                variant="solid"
+                                onPress={() => setEditing(true)}
+                                isDisabled={isLoading}
+                            >
+                                <div className="text-sm">Edit profile</div>
+                            </Button>
+                        </div>
                     </>
                 )}
             </div>