Move DeleteRoomButton and DeleteRoomDialog to separate file

src/components/DeleteRoom.js

@@ -0,0 +1,128 @@
+import React, { Fragment, useState } from "react";
+import classnames from "classnames";
+import { fade } from "@material-ui/core/styles/colorManipulator";
+import {
+  useTranslate,
+  useRedirect,
+  Toolbar,
+  SaveButton,
+  Button,
+  SimpleForm,
+  BooleanInput,
+  useRecordContext,
+  useDelete,
+  useNotify,
+} from "react-admin";
+import { makeStyles } from "@material-ui/core/styles";
+import IconCancel from "@material-ui/icons/Cancel";
+import DeleteIcon from "@material-ui/icons/Delete";
+import Dialog from "@material-ui/core/Dialog";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+
+const useStyles = makeStyles(theme => ({
+  helper_forward_extremities: {
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    margin: "0.5em",
+  },
+  deleteButton: {
+    color: theme.palette.error.main,
+    "&:hover": {
+      backgroundColor: fade(theme.palette.error.main, 0.12),
+      // Reset on mouse devices
+      "@media (hover: none)": {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+}));
+
+export const DeleteRoomDialog = ({ open, loading, onClose, onSend }) => {
+  const translate = useTranslate();
+
+  const DeleteRoomToolbar = props => {
+    return (
+      <Toolbar {...props}>
+        <SaveButton
+          label="resources.rooms.action.erase.title"
+          icon={<DeleteIcon />}
+        />
+        <Button label="ra.action.cancel" onClick={onClose}>
+          <IconCancel />
+        </Button>
+      </Toolbar>
+    );
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} loading={loading}>
+      <DialogTitle>
+        {translate("resources.rooms.action.erase.title")}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          {translate("resources.rooms.action.erase.content")}
+        </DialogContentText>
+        <SimpleForm
+          toolbar={<DeleteRoomToolbar />}
+          submitOnEnter={false}
+          redirect={false}
+          save={onSend}
+        >
+          <BooleanInput
+            fullWidth
+            source="block"
+            label="resources.rooms.action.erase.fields.block"
+            defaultValue={true}
+          />
+        </SimpleForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const DeleteRoomButton = props => {
+  const classes = useStyles(props);
+  const [open, setOpen] = useState(false);
+  const notify = useNotify();
+  const redirect = useRedirect();
+  const [deleteOne, { loading }] = useDelete("rooms");
+  const record = useRecordContext(props);
+
+  const handleDialogOpen = () => setOpen(true);
+  const handleDialogClose = () => setOpen(false);
+
+  const handleSend = values => {
+    deleteOne(
+      { payload: { id: record.id, ...values } },
+      {
+        onSuccess: () => {
+          notify("resources.rooms.action.erase.send_success");
+          handleDialogClose();
+          redirect("/rooms");
+        },
+        onFailure: () =>
+          notify("resources.rooms.action.erase.send_failure", "error"),
+      }
+    );
+  };
+
+  return (
+    <Fragment>
+      <Button
+        label="resources.rooms.action.erase.title"
+        onClick={handleDialogOpen}
+        disabled={loading}
+        className={classnames("ra-delete-button", classes.deleteButton)}
+      >
+        <DeleteIcon />
+      </Button>
+      <DeleteRoomDialog
+        open={open}
+        onClose={handleDialogClose}
+        onSend={handleSend}
+      />
+    </Fragment>
+  );
+};

src/components/rooms.js

@@ -1,5 +1,4 @@
-import React, { Fragment, useState } from "react";
-import classnames from "classnames";
+import React, { Fragment } from "react";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import { connect } from "react-redux";
 import {
@@ -22,14 +21,6 @@ import {
   TopToolbar,
   useRecordContext,
   useTranslate,
-  useRedirect,
-  Toolbar,
-  SaveButton,
-  Button,
-  SimpleForm,
-  BooleanInput,
-  useDelete,
-  useNotify,
 } from "react-admin";
 import get from "lodash/get";
 import PropTypes from "prop-types";
@@ -42,19 +33,14 @@ import PageviewIcon from "@material-ui/icons/Pageview";
 import UserIcon from "@material-ui/icons/Group";
 import ViewListIcon from "@material-ui/icons/ViewList";
 import VisibilityIcon from "@material-ui/icons/Visibility";
-import IconCancel from "@material-ui/icons/Cancel";
 import EventIcon from "@material-ui/icons/Event";
-import Dialog from "@material-ui/core/Dialog";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import DeleteIcon from "@material-ui/icons/Delete";
 import {
   RoomDirectoryBulkDeleteButton,
   RoomDirectoryBulkSaveButton,
   RoomDirectoryDeleteButton,
   RoomDirectorySaveButton,
 } from "./RoomDirectory";
+import { DeleteRoomButton } from "./DeleteRoom";
 
 const useStyles = makeStyles(theme => ({
   helper_forward_extremities: {
@@ -426,92 +412,3 @@ function mapStateToProps(state) {
 }
 
 export const RoomList = connect(mapStateToProps)(FilterableRoomList);
-
-const DeleteRoomDialog = ({ open, loading, onClose, onSend }) => {
-  const translate = useTranslate();
-
-  const DeleteRoomToolbar = props => {
-    return (
-      <Toolbar {...props}>
-        <SaveButton
-          label="resources.rooms.action.erase.title"
-          icon={<DeleteIcon />}
-        />
-        <Button label="ra.action.cancel" onClick={onClose}>
-          <IconCancel />
-        </Button>
-      </Toolbar>
-    );
-  };
-
-  return (
-    <Dialog open={open} onClose={onClose} loading={loading}>
-      <DialogTitle>
-        {translate("resources.rooms.action.erase.title")}
-      </DialogTitle>
-      <DialogContent>
-        <DialogContentText>
-          {translate("resources.rooms.action.erase.content")}
-        </DialogContentText>
-        <SimpleForm
-          toolbar={<DeleteRoomToolbar />}
-          submitOnEnter={false}
-          redirect={false}
-          save={onSend}
-        >
-          <BooleanInput
-            fullWidth
-            source="block"
-            label="resources.rooms.action.erase.fields.block"
-            defaultValue={true}
-          />
-        </SimpleForm>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export const DeleteRoomButton = props => {
-  const classes = useStyles(props);
-  const [open, setOpen] = useState(false);
-  const notify = useNotify();
-  const redirect = useRedirect();
-  const [deleteOne, { loading }] = useDelete("rooms");
-  const record = useRecordContext(props);
-
-  const handleDialogOpen = () => setOpen(true);
-  const handleDialogClose = () => setOpen(false);
-
-  const handleSend = values => {
-    deleteOne(
-      { payload: { id: record.id, ...values } },
-      {
-        onSuccess: () => {
-          notify("resources.rooms.action.erase.send_success");
-          handleDialogClose();
-          redirect("/rooms");
-        },
-        onFailure: () =>
-          notify("resources.rooms.action.erase.send_failure", "error"),
-      }
-    );
-  };
-
-  return (
-    <Fragment>
-      <Button
-        label="resources.rooms.action.erase.title"
-        onClick={handleDialogOpen}
-        disabled={loading}
-        className={classnames("ra-delete-button", classes.deleteButton)}
-      >
-        <DeleteIcon />
-      </Button>
-      <DeleteRoomDialog
-        open={open}
-        onClose={handleDialogClose}
-        onSend={handleSend}
-      />
-    </Fragment>
-  );
-};