make avatar field sortable in the users list

justfile

@@ -25,11 +25,15 @@ run-dev:
 stop-dev:
     @docker-compose -f docker-compose-dev.yml stop
 
-
+# register a user in the dev stack
 register-user localpart password *admin:
 	docker-compose exec synapse register_new_matrix_user {{ if admin == "1" {"--admin"} else {"--no-admin"} }} -u {{ localpart }} -p {{ password }} -c /config/homeserver.yaml http://localhost:8008
 
-
+# run yarn {fix,lint,test} commands
+test:
+    @-yarn run fix
+    @-yarn run lint
+    @-yarn run test
 
 # run the app in a production mode
 run-prod: build

src/components/AvatarField.tsx

@@ -1,12 +1,11 @@
 import { get } from "lodash";
 import { Avatar, AvatarProps } from "@mui/material";
-import { useRecordContext } from "react-admin";
+import { FieldProps, useRecordContext } from "react-admin";
 import { useState, useEffect, useCallback } from "react";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
 
-const AvatarField = ({ source, ...rest }: AvatarProps & { source: string, label?: string }) => {
+const AvatarField = ({ source, ...rest }: AvatarProps & FieldProps) => {
   const { alt, classes, sizes, sx, variant } = rest;
-
   const record = useRecordContext(rest);
   const mxcURL = get(record, source)?.toString();
 

src/resources/users.tsx

@@ -51,6 +51,7 @@ import {
   NumberField,
   useListContext,
   useNotify,
+  Identifier,
   ToolbarClasses,
   RaRecord,
   ImageInput,
@@ -146,10 +147,6 @@ const UserBulkActionButtons = () => {
   );
 };
 
-const usersRowClick = (id: Identifier, resource: string, record: RaRecord): string => {
-  return `/users/${id}`;
-};
-
 export const UserList = (props: ListProps) => (
   <List
     {...props}
@@ -159,7 +156,10 @@ export const UserList = (props: ListProps) => (
     actions={<UserListActions />}
     pagination={<UserPagination />}
   >
-    <Datagrid rowClick={usersRowClick} bulkActionButtons={<UserBulkActionButtons />}>
+    <Datagrid
+      rowClick={(id: Identifier, resource: string) => `/${resource}/${id}`}
+      bulkActionButtons={<UserBulkActionButtons />}
+    >
       <AvatarField source="avatar_src" sx={{ height: "40px", width: "40px" }} sortBy="avatar_url" />
       <TextField source="id" sortBy="name" />
       <TextField source="displayname" />
@@ -211,9 +211,7 @@ const UserEditActions = () => {
 export const UserCreate = (props: CreateProps) => (
   <Create
     {...props}
-    redirect={(resource: string | undefined, id: Identifier | undefined) => {
+    redirect={(resource: string | undefined, id: Identifier | undefined) => `${resource}/${id}`}
-      return `users/${id}`;
-    }}
   >
     <SimpleForm>
       <TextInput source="id" autoComplete="off" validate={validateUser} />