fix: diff matcher

app/src/User/pages/Settings.tsx

@@ -2,28 +2,23 @@ import React, { FormEvent, useRef, useState } from 'react';
 import JAvatar from 'src/Lib/JAvatar';
 import JButton from 'src/Lib/JButton';
 import JContainer from 'src/Lib/JContainer';
-// import JImage from 'src/Lib/JImage';
 import JInput from 'src/Lib/JInput';
 import { useUserStore } from 'src/User/store/useUserStore';
 import { useAlert } from 'src/Lib/store/alerts';
 import { updateUserById } from '../services/users';
 import { UpdateUserData } from 'src/utils/types';
 import { useNavigate } from 'react-router-dom';
+import { useLoader } from 'src/Shared/store/loader';
+import { diffMatcher } from 'src/utils/helpers';
 
 interface Props {}
-interface UserDetails {
-  name: string;
-  email: string;
-  bio?: string;
-  image?: string;
-  username?: string;
-}
 
 const Settings: React.FC<Props> = () => {
   const user = useUserStore((state) => state.user);
   const setAlert = useAlert((state) => state.setAlert);
+  const setLoader = useLoader((s) => s.setLoader);
   const navigate = useNavigate();
-  console.log(user);
+
   const inputFile = useRef<HTMLInputElement>(null);
 
   const [userDetails, setUserDetails] = useState<UpdateUserData>({
@@ -34,30 +29,23 @@ const Settings: React.FC<Props> = () => {
     username: user.username,
   });
 
-  function diffMatcher<T extends Record<string, any>>(
-    newData: { [x in keyof T]: T[x] },
-    toMatch: T,
-  ): Partial<T> {
-    return Object.entries(newData).reduce<Partial<T>>((acc, [key, value]) => {
-      acc = { ...acc, [key]: value !== toMatch[key] && value.length > 0 && value };
-      return acc;
-    }, {});
-    // let diffedData: Partial<T> = {};
-    // Object.keys(newData).forEach((key) => {
-    //   newData[key] !== toMatch[key] && newData[key].length > 0 && (diffedData[key] = newData[key]);
-    // });
-    // return Object.entries(diffedData).length > 0 ? diffedData : null;
-  }
-
   const updateUserDetails = async (e: FormEvent) => {
     e.preventDefault();
+
+    const data = diffMatcher(user, userDetails);
+    if (!Object.keys(data).length) return;
+
+    setLoader(true);
     try {
-      const data = diffMatcher(userDetails, user);
       await updateUserById(user.id, data);
+
       setAlert({ type: 'success', message: 'Updated successfully' });
-      navigate('/');
     } catch (error) {
       setAlert({ type: 'danger', message: 'Unable to update user' });
+    } finally {
+      navigate('/');
+
+      setLoader(false);
     }
   };
   return (

app/src/User/services/users.ts

@@ -23,5 +23,5 @@ export function getUserPostsById(id: string, opts: PaginationParams) {
 }
 
 export function updateUserById(id: string, userData: UpdateUserData) {
-  return api.patch<ResponseSchema<User>>(`/users/${id}`, { ...userData })
-}
+  return api.patch(`/users/${id}`, { ...userData });
+}

app/src/utils/helpers.ts

@@ -130,3 +130,15 @@ export function randomId(len?: number) {
   window.crypto.getRandomValues(arr);
   return Array.from(arr, dec2hex).join('');
 }
+
+export function diffMatcher<T extends Record<string, any>, K>(
+  toMatch: T,
+  newData: { [x in keyof T]?: T[x] },
+): Partial<T> {
+  return Object.entries(newData).reduce<Partial<T>>((acc, [key, value]) => {
+    if (!(value !== toMatch[key] && value.length > 0)) return acc;
+    acc = { ...acc, [key]: value };
+
+    return acc;
+  }, {});
+}

app/src/utils/types.ts

@@ -46,15 +46,14 @@ export interface User extends TimeStamps {
   liked_comments?: Comment[];
 }
 
-export interface UpdateUserData{
-  name: string;
-  username: string;
-  email: string;
+export interface UpdateUserData {
+  name?: string;
+  username?: string;
+  email?: string;
   bio?: string;
   image?: string;
 }
 
-
 export type Reply = Omit<Comment, 'replies' | 'total_replies'>;
 
 export interface Comment extends TimeStamps {