src/components/Users/UserAvatar.tsx (1)

89-94: Consider enhancing error handling.

The catch block could be more informative by including the error details in the callback.

Consider this improvement:

  try {
    await mutateAvatarDelete();
    onSuccess();
-  } catch {
-    onError();
+  } catch (error) {
+    onError(error);
  }

src/components/Common/AvatarEditModal.tsx (1)

57-64: Consider using useReducer for complex state management.

The component manages multiple related state variables (isProcessing, selectedFile, preview, isCameraOpen, previewImage, isCaptureImgBeingUploaded). Consider using useReducer to centralize state management and make state transitions more predictable.

Here's a suggested implementation:

type State = {
  isProcessing: boolean;
  selectedFile?: File;
  preview?: string;
  isCameraOpen: boolean;
  previewImage: string | null;
  isCaptureImgBeingUploaded: boolean;
};

type Action =
  | { type: 'START_PROCESSING' }
  | { type: 'STOP_PROCESSING' }
  | { type: 'SET_FILE'; file?: File }
  | { type: 'SET_PREVIEW'; url?: string }
  | { type: 'TOGGLE_CAMERA'; isOpen: boolean }
  | { type: 'SET_PREVIEW_IMAGE'; image: string | null }
  | { type: 'START_UPLOAD' }
  | { type: 'STOP_UPLOAD' }
  | { type: 'RESET' };

const initialState: State = {
  isProcessing: false,
  selectedFile: undefined,
  preview: undefined,
  isCameraOpen: false,
  previewImage: null,
  isCaptureImgBeingUploaded: false,
};

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'START_PROCESSING':
      return { ...state, isProcessing: true };
    case 'STOP_PROCESSING':
      return { ...state, isProcessing: false };
    case 'SET_FILE':
      return { ...state, selectedFile: action.file };
    case 'SET_PREVIEW':
      return { ...state, preview: action.url };
    case 'TOGGLE_CAMERA':
      return { ...state, isCameraOpen: action.isOpen };
    case 'SET_PREVIEW_IMAGE':
      return { ...state, previewImage: action.image };
    case 'START_UPLOAD':
      return { ...state, isCaptureImgBeingUploaded: true };
    case 'STOP_UPLOAD':
      return { ...state, isCaptureImgBeingUploaded: false };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
}

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/components/Common/AvatarEditModal.tsx (1)

140-150: Consider enhancing error feedback.

While the implementation correctly handles the avatar deletion flow, consider providing user feedback in the error case.

 const deleteAvatar = async () => {
   setIsProcessing(true);
   await handleDelete(
     () => {
       setIsProcessing(false);
       setPreview(undefined);
       setPreviewImage(null);
     },
-    () => setIsProcessing(false),
+    () => {
+      setIsProcessing(false);
+      toast.error(t("failed_to_delete_avatar"));
+    },
   );
 };

src/components/Users/UserAvatar.tsx (2)

85-95: Well-structured error handling with proper async/await!

The updated implementation properly handles both success and error cases, ensuring UI state is updated only after the operation completes.

Consider adding TypeScript type annotations for the callback parameters:

  const handleAvatarDelete = async (
-   onSuccess: () => void,
-   onError: () => void,
+   onSuccess: VoidFunction,
+   onError: VoidFunction,
  ) => {

---

85-95: Consider adding loading state during avatar deletion.

While the async handling is improved, the UI doesn't indicate when deletion is in progress. Consider adding a loading state to prevent multiple deletion attempts and provide better user feedback.

Here's a suggested implementation:

+ const [isDeleting, setIsDeleting] = useState(false);

  const handleAvatarDelete = async (
    onSuccess: () => void,
    onError: () => void,
  ) => {
    try {
+     setIsDeleting(true);
      await mutateAvatarDelete();
      onSuccess();
    } catch {
      onError();
+   } finally {
+     setIsDeleting(false);
    }
  };

  return (
    <>
      <AvatarEditModal
        title={t("edit_avatar")}
        open={editAvatar}
        imageUrl={userData?.profile_picture_url}
        handleUpload={handleAvatarUpload}
        handleDelete={handleAvatarDelete}
+       isDeleting={isDeleting}
        onClose={() => setEditAvatar(false)}
      />

Also applies to: 99-106

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

src/components/Common/AvatarEditModal.tsx (1)

75-81: 🛠️ Refactor suggestion

Fix the missing dependency in useCallback hook.

The useCallback hook is missing the constraint.facingMode dependency.

Apply this diff to fix the dependency array:

  const handleSwitchCamera = useCallback(() => {
    setConstraint(
      constraint.facingMode === "user"
        ? VideoConstraints.environment
        : VideoConstraints.user,
    );
-  }, []);
+  }, [constraint.facingMode]);

🧰 Tools

🪛 GitHub Actions: Cypress Tests

[warning] 81-6: React Hook useCallback has a missing dependency: 'constraint.facingMode'. Either include it or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setConstraint' needs the current value of 'constraint.facingMode'

---

[error] 134-11: Expected an assignment or function call and instead saw an expression

src/components/Common/AvatarEditModal.tsx (2)

196-196: Remove debug console.log statement.

Debug console.log statement should be removed before merging.

Apply this diff to remove the debug statement:

-  console.log(preview, imageUrl);

---

65-65: Fix the any type on webRef.

The any type should be replaced with a more specific type.

Consider using the proper type from the react-webcam library:

-  const webRef = useRef<any>(null);
+  const webRef = useRef<Webcam>(null);

Don't forget to import the Webcam type:

import Webcam, { type WebcamProps } from 'react-webcam';

🧰 Tools

🪛 GitHub Actions: Cypress Tests

[warning] 65-25: Unexpected any. Specify a different type @typescript-eslint/no-explicit-any

---

[warning] 81-6: React Hook useCallback has a missing dependency: 'constraint.facingMode'. Either include it or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setConstraint' needs the current value of 'constraint.facingMode'

---

[error] 134-11: Expected an assignment or function call and instead saw an expression

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro