From da212bcf6d74c2e22e8b8b66b269058819b4498e Mon Sep 17 00:00:00 2001
From: Simona Domnisoru <simona.domnisoru@gmail.com>
Date: Tue, 23 Jan 2024 11:26:41 +0100
Subject: [PATCH] feat: get the user avatar id with react query

---
 .../WidgetAssignee/DisplayMode.component.js   | 11 ++++++++---
 .../WidgetAssignee.component.js               |  9 +++++++--
 .../WidgetAssignee.container.js               |  4 +++-
 .../WidgetAssignee/WidgetAssignee.types.js    |  1 +
 .../components/WidgetAssignee/hooks/index.js  |  2 ++
 .../WidgetAssignee/hooks/useUserAvatar.js     | 19 +++++++++++++++++++
 6 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 src/core_modules/capture-core/components/WidgetAssignee/hooks/index.js
 create mode 100644 src/core_modules/capture-core/components/WidgetAssignee/hooks/useUserAvatar.js

diff --git a/src/core_modules/capture-core/components/WidgetAssignee/DisplayMode.component.js b/src/core_modules/capture-core/components/WidgetAssignee/DisplayMode.component.js
index 41216aa6ad..621a1d489d 100644
--- a/src/core_modules/capture-core/components/WidgetAssignee/DisplayMode.component.js
+++ b/src/core_modules/capture-core/components/WidgetAssignee/DisplayMode.component.js
@@ -17,6 +17,10 @@ const styles = () => ({
     assignButton: {
         margin: spacers.dp4,
     },
+    avatarWrapper: {
+        display: 'flex',
+        alignItems: 'center',
+    },
     avatar: {
         margin: spacers.dp4,
     },
@@ -26,15 +30,16 @@ type Props = {
     assignee: Assignee | null,
     onEdit: () => {},
     writeAccess: boolean,
+    avatarId?: string,
     ...CssClasses,
 };
 
-const DisplayModePlain = ({ assignee, onEdit, writeAccess, classes }: Props) => (
+const DisplayModePlain = ({ assignee, onEdit, writeAccess, avatarId, classes }: Props) => (
     assignee ? (
         <div className={classes.wrapper}>
-            <div>
+            <div className={classes.avatarWrapper}>
                 {i18n.t('Assigned to')}
-                <UserAvatar name={assignee.name} className={classes.avatar} />
+                <UserAvatar name={assignee.name} className={classes.avatar} avatarId={avatarId} />
                 {assignee.name}
             </div>
             <ConditionalTooltip
diff --git a/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.component.js b/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.component.js
index 1f3d785481..2b54a45fcd 100644
--- a/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.component.js
+++ b/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.component.js
@@ -18,7 +18,7 @@ const styles = () => ({
     },
 });
 
-const WidgetAssigneePlain = ({ assignee, writeAccess, onSet, classes }: PlainProps) => {
+const WidgetAssigneePlain = ({ assignee, writeAccess, onSet, avatarId, classes }: PlainProps) => {
     const [open, setOpenStatus] = useState(true);
     const [editMode, setEditMode] = useState(false);
 
@@ -46,7 +46,12 @@ const WidgetAssigneePlain = ({ assignee, writeAccess, onSet, classes }: PlainPro
                     {editMode ? (
                         <EditMode onCancel={() => setEditMode(false)} onSet={handleSet} assignee={assignee} />
                     ) : (
-                        <DisplayMode assignee={assignee} onEdit={() => setEditMode(true)} writeAccess={writeAccess} />
+                        <DisplayMode
+                            assignee={assignee}
+                            onEdit={() => setEditMode(true)}
+                            writeAccess={writeAccess}
+                            avatarId={avatarId}
+                        />
                     )}
                 </div>
             </Widget>
diff --git a/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.container.js b/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.container.js
index 99769c8656..e6ea6dfd0b 100644
--- a/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.container.js
+++ b/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.container.js
@@ -4,10 +4,12 @@ import { useDataMutation } from '@dhis2/app-runtime';
 import type { Props, Assignee } from './WidgetAssignee.types';
 import { WidgetAssigneeComponent } from './WidgetAssignee.component';
 import { convertClientToServer } from './converter';
+import { useUserAvatar } from './hooks';
 
 const WidgetAssigneeWithHooks = (props: Props) => {
     const { assignee, writeAccess, getSaveContext, onSave, onSaveError } = props;
     const prevAssignee = useRef(assignee);
+    const { avatarId } = useUserAvatar(assignee?.id);
 
     const [updateMutation] = useDataMutation(
         {
@@ -32,7 +34,7 @@ const WidgetAssigneeWithHooks = (props: Props) => {
         [updateMutation, getSaveContext, onSave, assignee],
     );
 
-    return <WidgetAssigneeComponent assignee={assignee} writeAccess={writeAccess} onSet={onSet} />;
+    return <WidgetAssigneeComponent assignee={assignee} writeAccess={writeAccess} avatarId={avatarId} onSet={onSet} />;
 };
 
 export const WidgetAssignee = (props: Props) => {
diff --git a/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.types.js b/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.types.js
index 03cffa05ad..33eb25a570 100644
--- a/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.types.js
+++ b/src/core_modules/capture-core/components/WidgetAssignee/WidgetAssignee.types.js
@@ -21,5 +21,6 @@ export type PlainProps = {|
     assignee: Assignee | null,
     writeAccess: boolean,
     onSet: (user: Assignee | null) => void,
+    avatarId?: string,
     ...CssClasses,
 |};
diff --git a/src/core_modules/capture-core/components/WidgetAssignee/hooks/index.js b/src/core_modules/capture-core/components/WidgetAssignee/hooks/index.js
new file mode 100644
index 0000000000..d6927c9a30
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetAssignee/hooks/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { useUserAvatar } from './useUserAvatar';
diff --git a/src/core_modules/capture-core/components/WidgetAssignee/hooks/useUserAvatar.js b/src/core_modules/capture-core/components/WidgetAssignee/hooks/useUserAvatar.js
new file mode 100644
index 0000000000..fd6d12d375
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetAssignee/hooks/useUserAvatar.js
@@ -0,0 +1,19 @@
+// @flow
+import { useApiMetadataQuery } from 'capture-core/utils/reactQueryHelpers';
+
+export const useUserAvatar = (userId?: string) => {
+    const queryKey = ['users', ...(userId ? [userId] : [])];
+    const queryFn = {
+        resource: 'users',
+        id: userId,
+        params: {
+            fields: 'avatar',
+        },
+    };
+    const queryOptions = { enabled: Boolean(userId) };
+    const { data } = useApiMetadataQuery<any>(queryKey, queryFn, queryOptions);
+
+    return {
+        avatarId: data?.avatar?.id,
+    };
+};