Upgrade to React-Admin 4 (#332)

Change-Id: Ia03486edfd934438580e614af754a0966f6fd6e3

package.json

@@ -18,12 +18,9 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "jest-fetch-mock": "^3.0.3",
-    "prettier": "^2.2.0",
-    "ra-test": "^3.19.12"
+    "prettier": "^2.2.0"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.8",
     "@mui/styles": "5.14.10",
@@ -34,7 +31,7 @@
     "ra-language-german": "^3.13.4",
     "ra-language-italian": "^3.13.1",
     "react": "^17.0.0",
-    "react-admin": "^3.19.12",
+    "react-admin": "^4.16.9",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1"
   },

src/App.js

@@ -1,5 +1,10 @@
 import React from "react";
-import { Admin, Resource, resolveBrowserLocale } from "react-admin";
+import {
+  Admin,
+  CustomRoutes,
+  Resource,
+  resolveBrowserLocale,
+} from "react-admin";
 import polyglotI18nProvider from "ra-i18n-polyglot";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
@@ -50,10 +55,10 @@ const App = () => (
     authProvider={authProvider}
     dataProvider={dataProvider}
     i18nProvider={i18nProvider}
-    customRoutes={[
-      <Route key="userImport" path="/import_users" component={ImportFeature} />,
-    ]}
   >
+    <CustomRoutes>
+      <Route path="/import_users" element={<ImportFeature />} />
+    </CustomRoutes>
     <Resource
       name="users"
       list={UserList}

src/components/AvatarField.js

@@ -0,0 +1,12 @@
+import React from "react";
+import get from "lodash/get";
+import { Avatar } from "@mui/material";
+import { useRecordContext } from "react-admin";
+
+const AvatarField = ({ source, ...rest }) => {
+  const record = useRecordContext(rest);
+  const src = get(record, source)?.toString();
+  return <Avatar src={src} {...rest} />;
+};
+
+export default AvatarField;