xcv58/Custom-JavaScript-for-Websites-2

View on GitHub
src/js/components/Reset.tsx

Summary

Maintainability
A
2 hrs
Test Coverage
import React, { useState } from 'react'
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from '@material-ui/core'
import { useStore } from './StoreContext'
import { observer } from 'mobx-react'

export default observer(({ closePopup }) => {
  const [open, setOpen] = useState(false)
  const { AppStore } = useStore()
  const { target } = AppStore
  const closeDialog = () => setOpen(false)

  return [
    <Button onClick={() => setOpen(true)} key='reset'>
      Reset
    </Button>,
    <Dialog open={open} onClose={closeDialog} key='dialog'>
      <DialogTitle>Remove all codes and external scripts?</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Reset will remove your codes and external scripts, and delete current
          domain/pattern: "{target}".
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={closeDialog}>Cancel</Button>
        <Button
          color='primary'
          onClick={() => {
            AppStore.removeHost({ reload: false })
            closeDialog()
            closePopup()
          }}
        >
          Reset
        </Button>
        <Button
          color='secondary'
          onClick={() => {
            AppStore.removeHost({ reload: true })
            closeDialog()
            closePopup()
          }}
        >
          Reset & Refresh
        </Button>
      </DialogActions>
    </Dialog>
  ]
})