feat: get the user avatar id with react query

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

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>

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) => {

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,
 |};

src/core_modules/capture-core/components/WidgetAssignee/hooks/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { useUserAvatar } from './useUserAvatar';

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,
+    };
+};