Upgrade react-admin to version 5 (#40)

* wip on ra upgrade

* Finish upgrade

* fix package.json

* pr fixes

* more pr fixes

* update readme

src/components/DeleteRoomButton.tsx

@@ -74,7 +74,6 @@ const DeleteRoomButton: React.FC<DeleteRoomButtonProps> = (props) => {
           <DialogContentText>{translate(props.confirmContent)}</DialogContentText>
           <SimpleForm toolbar={false}>
             <BooleanInput
-              fullWidth
               source="block"
               value={block}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => setBlock(event.target.checked)}

src/components/ServerNotices.tsx

@@ -20,7 +20,7 @@ import {
   useTranslate,
   useUnselectAll,
 } from "react-admin";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 
 const ServerNoticeDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -43,7 +43,6 @@ const ServerNoticeDialog = ({ open, onClose, onSubmit }) => {
           <TextInput
             source="body"
             label="resources.servernotices.fields.body"
-            fullWidth
             multiline
             rows="4"
             resettable
@@ -64,6 +63,10 @@ export const ServerNoticeButton = () => {
   const handleDialogOpen = () => setOpen(true);
   const handleDialogClose = () => setOpen(false);
 
+  if (!record) {
+    return null;
+  }
+
   const handleSend = (values: Partial<RaRecord>) => {
     create(
       "servernotices",
@@ -100,28 +103,26 @@ export const ServerNoticeBulkButton = () => {
   const unselectAllUsers = useUnselectAll("users");
   const dataProvider = useDataProvider();
 
-  const { mutate: sendNotices, isLoading } = useMutation(
-    data =>
+  const { mutate: sendNotices, isPending } = useMutation({
+    mutationFn: (data) =>
       dataProvider.createMany("servernotices", {
         ids: selectedIds,
         data: data,
       }),
-    {
-      onSuccess: () => {
-        notify("resources.servernotices.action.send_success");
-        unselectAllUsers();
-        closeDialog();
-      },
-      onError: () =>
-        notify("resources.servernotices.action.send_failure", {
-          type: "error",
-        }),
-    }
-  );
+    onSuccess: () => {
+      notify("resources.servernotices.action.send_success");
+      unselectAllUsers();
+      closeDialog();
+    },
+    onError: () =>
+      notify("resources.servernotices.action.send_failure", {
+        type: "error",
+      }),
+  });
 
   return (
     <>
-      <Button label="resources.servernotices.send" onClick={openDialog} disabled={isLoading}>
+      <Button label="resources.servernotices.send" onClick={openDialog} disabled={isPending}>
         <MessageIcon />
       </Button>
       <ServerNoticeDialog open={open} onClose={closeDialog} onSubmit={sendNotices} />

src/components/media.tsx

@@ -28,7 +28,7 @@ import {
   useRefresh,
   useTranslate,
 } from "react-admin";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
 
 import { dateParser } from "./date";
@@ -55,14 +55,12 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
         <DialogContentText>{translate("delete_media.helper.send")}</DialogContentText>
         <SimpleForm toolbar={<DeleteMediaToolbar />} onSubmit={onSubmit}>
           <DateTimeInput
-            fullWidth
             source="before_ts"
             label="delete_media.fields.before_ts"
             defaultValue={0}
             parse={dateParser}
           />
           <NumberInput
-            fullWidth
             source="size_gt"
             label="delete_media.fields.size_gt"
             defaultValue={0}
@@ -70,7 +68,6 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
             step={1024}
           />
           <BooleanInput
-            fullWidth
             source="keep_profiles"
             label="delete_media.fields.keep_profiles"
             defaultValue={true}
@@ -86,20 +83,18 @@ export const DeleteMediaButton = (props: ButtonProps) => {
   const [open, setOpen] = useState(false);
   const notify = useNotify();
   const dataProvider = useDataProvider<SynapseDataProvider>();
-  const { mutate: deleteMedia, isLoading } = useMutation(
-    (values: DeleteMediaParams) => dataProvider.deleteMedia(values),
-    {
-      onSuccess: () => {
-        notify("delete_media.action.send_success");
-        closeDialog();
-      },
-      onError: () => {
-        notify("delete_media.action.send_failure", {
-          type: "error",
-        });
-      },
-    }
-  );
+  const { mutate: deleteMedia, isPending } = useMutation({
+    mutationFn: (values: DeleteMediaParams) => dataProvider.deleteMedia(values),
+    onSuccess: () => {
+      notify("delete_media.action.send_success");
+      closeDialog();
+    },
+    onError: () => {
+      notify("delete_media.action.send_failure", {
+        type: "error",
+      });
+    },
+  });
 
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
@@ -110,7 +105,7 @@ export const DeleteMediaButton = (props: ButtonProps) => {
         {...props}
         label="delete_media.action.send"
         onClick={openDialog}
-        disabled={isLoading}
+        disabled={isPending}
         sx={{
           color: theme.palette.error.main,
           "&:hover": {