delete confirm

Author: GrishaDev

src/App.css

@@ -63,6 +63,9 @@
   padding: 5px;
 }
 
+.raw-data-area{
+  overflow-y: auto;
+}
 .add-div{
   bottom: 0;
   position: absolute;

src/components/Content/Add/Add.js

@@ -3,7 +3,6 @@ import '../../../App.css';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import AddDialog from './AddDialog/AddDialog';
-import { getThemeProps } from '@material-ui/styles';
 
 export default function Add(props){
 

src/components/Content/Add/AddDialog/AddDialog.js

@@ -2,7 +2,6 @@ import React from 'react';
 import '../../../../App.css';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
-import Autocomplete from '@material-ui/lab/Autocomplete';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -12,7 +11,6 @@ import 'date-fns';
 import DateFnsUtils from '@date-io/date-fns';
 import {
     MuiPickersUtilsProvider,
-    KeyboardTimePicker,
     KeyboardDatePicker,
 } from '@material-ui/pickers';
 

src/components/Content/Content.js

@@ -3,7 +3,6 @@ import '../../App.css';
 import Graph from './Graph/Graph';
 import Stats from './Stats/Stats';
 import Add from './Add/Add'
-import Divider from '@material-ui/core/Divider';
 import Options from './Options/Options'
 
 class Content extends React.Component {
@@ -25,7 +24,7 @@ class Content extends React.Component {
             <>
             <div className='content'>
                 <Graph data={this.props.data} valueType={this.props.valueType} gym={ this.isGym() }/>
-                <Options delete={this.props.delete}/>
+                <Options delete={this.props.delete} title={this.props.title}/>
                 {stats}
             </div>
             <Add title={this.props.title} newValue={this.props.newValue} category={this.props.category}

src/components/Content/Options/Options.js

@@ -1,12 +1,29 @@
 import React from 'react';
 import '../../../App.css';
 import DeleteIcon from '@material-ui/icons/Delete';
+import Wtf from './Wtf/Wtf';
 
 export default function Options(props) {
 
+    const [open, setOpen] = React.useState(false);
+
+    const dialogClick = () => {
+       setOpen(true);
+    }; 
+
+    const dialogClose = () => {
+        setOpen(false);
+    };
+
+    const dialogDone = () => {
+        props.delete();
+        setOpen(false);
+    };
+
     return (
         <div className="options" dir="rtl">
-            <DeleteIcon onClick={props.delete}/>
+            <DeleteIcon onClick={dialogClick}/>
+            <Wtf open={open} dialogClose={dialogClose} dialogDone={dialogDone} title={props.title}/>
         </div>
     )
 }

src/components/Content/Options/Wtf/Wtf.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import '../../../../App.css';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@material-ui/core/Button';
+
+export default function Wtf(props) {
+
+    return (
+        <Dialog open={props.open} onClose={props.dialogClose} aria-labelledby="form-dialog-title">
+            <DialogTitle>Delete {props.title}?</DialogTitle>
+            <DialogActions>
+                    <Button onClick={props.dialogClose} color="primary" className="raw">No</Button>
+                    <Button onClick={props.dialogDone}
+                    color="primary">
+                        Delete
+                </Button> 
+            </DialogActions>
+        </Dialog>
+    )
+}
+

src/components/Content/Stats/DataDialog/DataDialog.js

@@ -17,7 +17,7 @@ export default function DataDialog(props) {
     return (
         <Dialog open={props.open} onClose={props.dialogClose} aria-labelledby="form-dialog-title">
             <DialogTitle>Raw data:</DialogTitle>
-            <DialogContent>
+            <DialogContent className="raw-data-area">
                 {fields}
             </DialogContent>
             <DialogActions>

src/components/Header/Header.js

@@ -1,12 +1,9 @@
 import React from 'react';
 import '../../App.css';
-import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormDialog from './Dialog/Dialog';