Allow edit profile image

Author: nalves599

package.json

@@ -28,6 +28,7 @@
     "react-confetti": "^6.2.2",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.54.2",
+    "react-image-file-resizer": "^0.4.8",
     "react-qr-code": "^2.0.12",
     "react-social-icons": "^6.18.0",
     "react-use": "^17.6.0",

src/app/(authenticated)/profile/edit/EditProfileForm.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { Plus, Save, Upload, X } from "lucide-react";
 import CountryList from "country-list";
 import { ChangeEvent, useState } from "react";
+import Resizer from "react-image-file-resizer";
 
 interface EditProfileFormProps {
   user: User;
@@ -44,7 +45,7 @@ export default function EditProfileForm({
   updateUser,
 }: EditProfileFormProps) {
   const [profilePicturePreview, setProfilePicturePreview] = useState<string>(
-    user.img
+    user.img,
   );
   const {
     control,
@@ -53,6 +54,7 @@ export default function EditProfileForm({
     register,
     setValue,
     getValues,
+    resetField,
     watch,
   } = useForm<FormData>({
     defaultValues: {
@@ -108,11 +110,27 @@ export default function EditProfileForm({
     if (formData.lookingFor.partTime) lookingFor.push("Part-time");
     if (formData.lookingFor.fullTime) lookingFor.push("Full-time");
 
+    const imgFile = formData.imgFile.item(0);
+
+    async function resizeImageAndConvert(file: File): Promise<string> {
+      return new Promise((resolve) =>
+        Resizer.imageFileResizer(
+          file,
+          300, // Max width
+          300, // Max height
+          "JPEG", // Output compression
+          100, // Quality
+          0, // Rotation
+          (uri) => resolve(uri as string),
+          "base64", // Output format
+        ),
+      );
+    }
+
     await updateUser({
       id: user.id,
-      // TODO: Add profile picture
       role: user.role,
-      img: user.img,
+      img: (imgFile && (await resizeImageAndConvert(imgFile))) || user.img,
       name: formData.name,
       title: formData.title,
       nationality: formData.nationality,

src/components/SocialNetwork.tsx

@@ -41,6 +41,7 @@ export function SocialNetwork({ text, type }: SocialNetworkProps) {
   return (
     <SocialIcon
       url={url}
+      target="_blank"
       style={{ height: 32, width: 32 }}
       {...(socialNetwork.extraProps ?? {})}
     />

yarn.lock

@@ -3064,6 +3064,11 @@ react-hook-form@^7.54.2:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.54.2.tgz#8c26ed54c71628dff57ccd3c074b1dd377cfb211"
   integrity sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==
 
+react-image-file-resizer@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz#85f4ae4469fd2867d961568af660ef403d7a79af"
+  integrity sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"