fixing the fucking format made by fucking rubbish visual studio code

fucking rubbish shit

photo/src/modal 2.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+import Fade from '@material-ui/core/Fade';
+
+
+function rand() {
+    return Math.round(Math.random() * 20) - 10;
+}
+
+function getModalStyle() {
+    const top = 50 + rand();
+    const left = 50 + rand();
+
+    return {
+        top: `${top}%`,
+        left: `${left}%`,
+        transform: `translate(-${top}%, -${left}%)`,
+    };
+}
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        position: 'absolute',
+        width: 400,
+        backgroundColor: theme.palette.background.paper,
+        border: '2px solid #000',
+        boxShadow: theme.shadows[5],
+        padding: theme.spacing(2, 4, 3),
+    },
+}));
+
+export default function SimpleModal() {
+    const classes = useStyles();
+    // getModalStyle is not a pure function, we roll the style only on the first render
+    const [modalStyle] = React.useState(getModalStyle);
+    const [open, setOpen] = React.useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    /*
+    return ( <
+        div >
+        <
+        button type = "button"
+        onClick = { handleOpen } >
+        Open Modal <
+        /button> <
+        Modal open = { open }
+        onClose = { handleClose } >
+        <
+        div style = { modalStyle }
+        className = { classes.paper } > 123 < /div>< /
+        Modal > < /
+        div >
+    );
+    */
+    return ( <
+        div >
+        <
+        button type = "button"
+        onClick = { handleOpen } >
+        Open Modal <
+        /button> <
+        Modal open = { open }
+        onClose = { handleClose } >
+        <
+        div >
+        <
+        Fade in = { open } >
+        <
+        div > 123 < SimpleModal / > < /div>
+
+        <
+        /Fade> < /
+        div > < /
+        Modal > < /
+        div >
+    );
+}

photo/src/modal.js

@@ -1,28 +1,16 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
 
-
-function rand() {
-    return Math.round(Math.random() * 20) - 10;
-}
-
-function getModalStyle() {
-    const top = 50 + rand();
-    const left = 50 + rand();
-
-    return {
-        top: `${top}%`,
-        left: `${left}%`,
-        transform: `translate(-${top}%, -${left}%)`,
-    };
-}
-
 const useStyles = makeStyles((theme) => ({
+    modal: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     paper: {
-        position: 'absolute',
-        width: 400,
         backgroundColor: theme.palette.background.paper,
         border: '2px solid #000',
         boxShadow: theme.shadows[5],
@@ -30,10 +18,8 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
-export default function SimpleModal() {
+export default function TransitionsModal() {
     const classes = useStyles();
-    // getModalStyle is not a pure function, we roll the style only on the first render
-    const [modalStyle] = React.useState(getModalStyle);
     const [open, setOpen] = React.useState(false);
 
     const handleOpen = () => {
@@ -44,44 +30,30 @@ export default function SimpleModal() {
         setOpen(false);
     };
 
-    /*
-    return ( <
-        div >
-        <
-        button type = "button"
-        onClick = { handleOpen } >
-        Open Modal <
-        /button> <
-        Modal open = { open }
-        onClose = { handleClose } >
-        <
-        div style = { modalStyle }
-        className = { classes.paper } > 123 < /div>< /
-        Modal > < /
-        div >
-    );
-    */
-    return ( <
-        div >
-        <
-        button type = "button"
-        onClick = { handleOpen } >
-        Open Modal <
-        /button> <
-        Modal open = { open }
-        onClose = { handleClose } >
-        <
-        div >
-        <
-        Fade in = { open } >
-        <
-        div > 123 < SimpleModal / > < /div>
-
-
-        <
-        /Fade> <
-        /div>< /
-        Modal > < /
-        div >
+    return (
+        <div>
+            <button type="button" onClick={handleOpen}>
+                react-transition-group
+      </button>
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                className={classes.modal}
+                open={open}
+                onClose={handleClose}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+            >
+                <Fade in={open}>
+                    <div className={classes.paper}>
+                        <h2 id="transition-modal-title">Transition modal</h2>
+                        <p id="transition-modal-description">react-transition-group animates me.</p>
+                    </div>
+                </Fade>
+            </Modal>
+        </div>
     );
 }