feat: enhance user profile handling by generating unique avatar filenames and improving form input validation

Author: kingRayhan

src/app/api/auth/github/callback/route.ts

@@ -27,7 +27,7 @@ export async function GET(request: Request) {
 
   const uploadedFileResponse = await storageActions.uploadByUrl({
     url: githubUser?.data?.avatar_url,
-    key: `${DIRECTORY_NAME.USER_AVATARS}/${githubUser?.data?.login}.jpeg`,
+    key: `${DIRECTORY_NAME.USER_AVATARS}/${crypto.randomUUID()}.jpeg`,
   });
 
   const bootedSocialUser = await userActions.bootSocialUser({

src/app/dashboard/settings/_components/GeneralForm.tsx

@@ -24,6 +24,7 @@ import z from "zod";
 import { Loader2, User2 } from "lucide-react";
 import { toast } from "sonner";
 import ImageDropzoneWithCropper from "@/components/ImageDropzoneWithCropper";
+import { filterUndefined } from "@/lib/utils";
 
 // fields
 // name -> ✅
@@ -54,7 +55,7 @@ const GeneralForm: React.FC<Props> = ({ user }) => {
     },
   });
   const form = useForm({
-    defaultValues: {
+    defaultValues: filterUndefined({
       name: user?.name,
       username: user?.username,
       bio: user?.bio,
@@ -64,7 +65,7 @@ const GeneralForm: React.FC<Props> = ({ user }) => {
       education: user.education,
       designation: user.designation,
       location: user.location,
-    },
+    }),
     resolver: zodResolver(UserActionInput.updateMyProfileInput),
   });
 
@@ -162,7 +163,11 @@ const GeneralForm: React.FC<Props> = ({ user }) => {
             <FormItem>
               <FormLabel>{_t("Website url")}</FormLabel>
               <FormControl>
-                <Input className="py-6" {...field} />
+                <Input
+                  className="py-6"
+                  onChange={field.onChange}
+                  value={field.value ?? undefined}
+                />
               </FormControl>
               <FormDescription />
               <FormMessage />

src/backend/services/inputs/user.input.ts

@@ -27,11 +27,11 @@ export const UserActionInput = {
       })
       .optional()
       .nullable(),
-    education: z.string().optional(),
-    designation: z.string().optional(),
-    bio: z.string().optional(),
-    websiteUrl: z.string().url().optional(),
-    location: z.string().optional(),
+    education: z.string().optional().nullable(),
+    designation: z.string().optional().nullable(),
+    bio: z.string().optional().nullable(),
+    websiteUrl: z.string().url().optional().nullable(),
+    location: z.string().optional().nullable(),
     social_links: z
       .object({
         github: z
@@ -84,7 +84,7 @@ export const UserActionInput = {
           .optional(),
       })
       .optional(),
-    profile_readme: z.string().optional(),
-    skills: z.string().optional(),
+    profile_readme: z.string().optional().nullable(),
+    skills: z.string().optional().nullable(),
   }),
 };

src/components/ImageDropzoneWithCropper.tsx

@@ -89,6 +89,7 @@ const ImageDropzoneWithCropper: React.FC<DropzoneWithCropperProps> = ({
     useDropzone({
       maxFiles: 1,
       disabled,
+      accept: { "image/*": [".*"] },
       async onDrop(acceptedFiles) {
         if (acceptedFiles.length > 0) {
           const base64 = (await getImageBase64(acceptedFiles[0])) as string;

src/lib/utils.ts

@@ -105,7 +105,7 @@ export const removeNullOrUndefinedFromObject = (obj: any) => {
   return newObj;
 };
 
-export function filterUndefined<T>(
+export function filterUndefined<T = unknown>(
   mapping: Partial<Record<keyof T, any>>
 ): Partial<Record<string, any>> {
   return Object.fromEntries(