Skip to content

Commit

Permalink
feat: replace outdated components with mui elements.
Browse files Browse the repository at this point in the history
  • Loading branch information
@svrnm
svrnm committed Sep 13, 2022
1 parent e0dec89 commit 9ad622d
Show file tree
Hide file tree
Showing 11 changed files with 260 additions and 168 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
"description": "Tamper your Web UI to demo almost anything",
"dependencies": {
"@eduardoac-skimlinks/webext-redux": "^3.0.1-release-candidate",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.3",
"@mui/lab": "^5.0.0-alpha.99",
"@mui/material": "^5.10.5",
"ace-builds": "^1.10.1",
"axios": "^0.27.2",
"chance": "^1.1.8",
Expand Down Expand Up @@ -49,11 +54,6 @@
"sharp": "^0.31.0",
"uuid": "^9.0.0"
},
"dependenciesToDrop": {
"react-popup": "^0.11.0",
"react-treebeard": "^3.2.4",
"react-toggle-button": "^2.2.0"
},
"devDependencies": {
"@babel/core": "^7.19.0",
"@babel/eslint-parser": "^7.18.9",
Expand Down
17 changes: 9 additions & 8 deletions src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import '../icons/monkey.png'
import '../icons/monkey-dev.png'

import React from 'react'
import ReactDOM from 'react-dom'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import { Store } from '@eduardoac-skimlinks/webext-redux'
import OptionsPageApp from './components/options/OptionsPageApp'
Expand All @@ -35,14 +35,13 @@ function updateCurrentView(v) {

function renderOptionsPageApp(root, store) {
window.chrome.permissions.getAll(function (permissions) {
ReactDOM.render(
<Provider store={store}>
root.render(<Provider store={store}>
<OptionsPageApp
initialView={window.location.hash.substring(1)}
onCurrentViewChange={(v) => updateCurrentView(v)}
permissions={permissions}
/>
</Provider>, root)
</Provider>)
})

window.chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
Expand All @@ -67,8 +66,8 @@ function renderPopupPageApp(root, store, manifest) {
window.chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
console.log(tabs)
const currentUrl = tabs.length > 0 ? tabs[0].url : ''
ReactDOM.render(
<Provider store={store}><PopupPageApp currentUrl={currentUrl} manifest={manifest} /></Provider>, root)
root.render(
<Provider store={store}><PopupPageApp currentUrl={currentUrl} manifest={manifest} /></Provider>)
// The following is required to fix https://bugs.chromium.org/p/chromium/issues/detail?id=428044
window.setTimeout(() => {
document.body.style.minHeight = (document.body.clientHeight + 1) + 'px'
Expand All @@ -91,11 +90,13 @@ fetch(window.chrome.runtime.getURL('COMMITHASH')).then((r) => {
}).finally(() => {
store.ready().then(() => {
document.getElementById('backup-message').remove()
const root = document.getElementById('app')
const rootElement = document.getElementById('app')

window.store = store

const app = root.getAttribute('data-app')
const app = rootElement.getAttribute('data-app')

const root = createRoot(rootElement)

if (store.getState().settings.optionalFeatures.writeLogs) {
connectLogger(store, { source: 'monkey.js' })
Expand Down
112 changes: 19 additions & 93 deletions src/components/options/OptionsPageApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
import React from 'react'
import Navigation from './navigation/Navigation'
import { connect } from 'react-redux'
import Popup from 'react-popup'
import Help from './Help'
import Settings from './settings/Settings'
import Logs from './Logs'
import Editor from './editor/Editor'
import Configuration from '../../models/Configuration'
import PropTypes from 'prop-types'
import Repository from '../../models/Repository'

import { Base64 } from 'js-base64'
import ErrorBox from '../shared/ErrorBox'
import WarningBox from '../shared/WarningBox'
Expand Down Expand Up @@ -100,32 +100,15 @@ class App extends React.Component {
})
}

deleteAll() {
Popup.create({
title: 'Please confirm',
content: <span>Do you really want to delete all configurations?</span>,
buttons: {
left: [{
text: 'Cancel',
action: () => Popup.close()
}],
right: [{
text: 'Delete',
className: 'danger',
action: () => {
Popup.close()
this.downloadAll(() => {
this.props.configurations.forEach(config => {
this.props.actions.deleteConfiguration(config.id)
})
})
}
}]
}
deleteAll(event) {
this.downloadAll(event, () => {
this.props.configurations.forEach(config => {
this.props.actions.deleteConfiguration(config.id)
})
})
}

saveConfigurationUnguarded(configuration) {
saveConfiguration(configuration) {
if (configuration.id === 'new') {
return this.addConfiguration(configuration)
} else {
Expand All @@ -151,30 +134,8 @@ class App extends React.Component {
}
}

saveConfiguration(configuration) {
const configWithSameName = this.props.configurations.find(c => !c.deleted_at && c.name === configuration.name && c.id !== configuration.id)
if (configWithSameName) {
Popup.create({
title: 'Please confirm',
content: <span>A configuration with <b>{configuration.name} already exists. Do you really want to use this name</b>?</span>,
buttons: {
left: [{
text: 'Cancel',
action: () => Popup.close()
}],
right: [{
text: 'Save',
className: 'danger',
action: () => {
Popup.close()
this.saveConfigurationUnguarded(configuration)
}
}]
}
})
} else {
this.saveConfigurationUnguarded(configuration)
}
hasConfigurationWithSameName(configuration) {
return this.props.configurations.some(c => !c.deleted_at && c.name === configuration.name && c.id !== configuration.id)
}

uploadConfiguration(upload) {
Expand Down Expand Up @@ -246,31 +207,13 @@ class App extends React.Component {
}

deleteConfiguration(configuration) {
Popup.create({
title: 'Please confirm',
content: <span>Do you really want to remove <b>{configuration.name}</b>?</span>,
buttons: {
left: [{
text: 'Cancel',
action: () => Popup.close()
}],
right: [{
text: 'Delete',
className: 'danger',
action: () => {
Popup.close()
this.navigateTo('help')
// Delete all configurations within it if a directory is given
logger('info', `Deleting ${configuration.name} (${configuration.nodeType})`).write()
if (configuration.nodeType === 'directory') {
this.props.actions.deleteConfigurationByPrefix(configuration.id.split('/').reverse().join('/'))
} else {
this.props.actions.deleteConfiguration(configuration.id)
}
}
}]
}
})
this.navigateTo('help')
logger('info', `Deleting ${configuration.name} (${configuration.nodeType})`).write()
if (configuration.nodeType === 'directory') {
this.props.actions.deleteConfigurationByPrefix(configuration.id.split('/').reverse().join('/'))
} else {
this.props.actions.deleteConfiguration(configuration.id)
}
}

getRepository() {
Expand Down Expand Up @@ -338,25 +281,8 @@ class App extends React.Component {

resetDemoMonkey(event) {
event.preventDefault()

Popup.create({
title: 'Reset DemoMonkey',
content: <span>Do you really want to reset <b>all configurations and all settings</b>?<br />(This window will close.)</span>,
buttons: {
left: [{
text: 'Cancel',
action: () => Popup.close()
}],
right: [{
text: 'Reset',
className: 'danger',
action: () => {
window.chrome.storage.local.clear(() => {
window.chrome.runtime.reload()
})
}
}]
}
window.chrome.storage.local.clear(() => {
window.chrome.runtime.reload()
})
}

Expand Down Expand Up @@ -404,6 +330,7 @@ class App extends React.Component {
keyboardHandler={this.props.settings.optionalFeatures.keyboardHandlerVim ? 'vim' : null}
onDownload={(configuration, _) => this.downloadConfiguration(configuration)}
onSave={(_, configuration) => this.saveConfiguration(configuration)}
hasConfigurationWithSameName={(configuration) => this.hasConfigurationWithSameName(configuration)}
onCopy={(configuration, _) => this.copyConfiguration(configuration)}
onDelete={(configuration, _) => this.deleteConfiguration(configuration)}
toggleConfiguration={() => this.props.actions.toggleConfiguration(configuration.id)}
Expand Down Expand Up @@ -479,7 +406,6 @@ class App extends React.Component {
})

return <Page className={`main-grid${withWarning}`} preferDarkMode={this.props.settings.optionalFeatures.preferDarkMode} syncDarkMode={this.props.settings.optionalFeatures.syncDarkMode}>
<Popup className="popup" btnClass="popup__btn" />
{ withWarning !== ''
? <WarningBox onDismiss={() => this.toggleOptionalFeature('noWarningForMissingPermissions')}
onRequestExtendedPermissions={() => this.requestExtendedPermissions()}
Expand Down
2 changes: 1 addition & 1 deletion src/components/options/editor/CodeEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ class CodeEditor extends React.Component {
}

autoSave() {
this.props.onAutoSave(event)
this.props.onAutoSave()
}

handleChange(content, event) {
Expand Down
51 changes: 45 additions & 6 deletions src/components/options/editor/Editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import React from 'react'
import Tabs from '../../shared/Tabs'
import Pane from '../../shared/Pane'
import Variable from '../../shared/Variable'
import Popup from '../../shared/Popup'
import CodeEditor from './CodeEditor'
import Configuration from '../../../models/Configuration'
import PropTypes from 'prop-types'
Expand All @@ -41,14 +42,17 @@ class Editor extends React.Component {
isDarkMode: PropTypes.bool.isRequired,
featureFlags: PropTypes.objectOf(PropTypes.bool).isRequired,
activeTab: PropTypes.string,
onNavigate: PropTypes.func.isRequired
onNavigate: PropTypes.func.isRequired,
hasConfigurationWithSameName: PropTypes.func.isRequired
}

constructor(props) {
super(props)
this.state = {
currentConfiguration: props.currentConfiguration,
unsavedChanges: false
unsavedChanges: false,
showDeletePopup: false,
showSavePopup: false
}
}

Expand Down Expand Up @@ -116,8 +120,11 @@ class Editor extends React.Component {

Mousetrap.bind('mod+s', (event) => {
event.preventDefault()
/*
this.props.onSave(this.props.currentConfiguration, this.state.currentConfiguration)
this.setState({ unsavedChanges: false })
*/
this.onBeforeSave()
return false
})
}
Expand Down Expand Up @@ -208,6 +215,36 @@ class Editor extends React.Component {
return this.renderConfiguration()
}

onBeforeDelete() {
this.setState({ showDeletePopup: true })
}

onBeforeSave() {
if (!this.props.hasConfigurationWithSameName(this.state.currentConfiguration)) {
this.handleClick(null, 'save')
} else {
this.setState({ showSavePopup: true })
}
}

onCancelDelete() {
this.setState({ showDeletePopup: false })
}

onCancelSave() {
this.setState({ showSavePopup: false })
}

onSave(event) {
this.setState({ showSavePopup: false })
this.handleClick(event, 'save')
}

onDelete(event) {
this.setState({ showDeletePopup: false })
this.handleClick(event, 'delete')
}

renderConfiguration() {
const current = this.state.currentConfiguration
const hiddenIfNew = current.id === 'new' ? { display: 'none' } : {}
Expand Down Expand Up @@ -244,10 +281,12 @@ class Editor extends React.Component {
options={hotkeyOptions}
/>
</div>
<button className={'save-button ' + (this.state.unsavedChanges ? '' : 'disabled')} onClick={(event) => this.handleClick(event, 'save')}>Save</button>
<button className={'save-button ' + (this.state.unsavedChanges ? '' : 'disabled')} onClick={() => this.onBeforeSave()}>Save</button>
<Popup open={this.state.showSavePopup} onCancel={(event) => this.onCancelSave(event)} onConfirm={(event) => this.onSave(event)} title="Please confirm" text={<span>A configuration with <b>{current.name} already exists. Do you really want to use this name</b>?</span>} />
<button className="copy-button" style={hiddenIfNew} onClick={(event) => this.handleClick(event, 'copy')}>Duplicate</button>
<button className="download-button" style={hiddenIfNew} onClick={(event) => this.handleClick(event, 'download')}>Download</button>
<button className="delete-button" style={hiddenIfNew} onClick={(event) => this.handleClick(event, 'delete')}>Delete</button>
<button className="delete-button" style={hiddenIfNew} onClick={(event) => this.onBeforeDelete()}>Delete</button>
<Popup open={this.state.showDeletePopup} onCancel={(event) => this.onCancelDelete(event)} onConfirm={(event) => this.onDelete(event)} title="Please confirm" text={<span>Do you really want to remove <b>{current.name}</b>?</span>} />
</div>
<div className={showTemplateWarning}>
<b>Warning:</b> Without <b>@include</b> or <b>@exclude</b> defined, your configuration can not be enabled.
Expand All @@ -260,8 +299,8 @@ class Editor extends React.Component {
onChange={(content) => this.handleUpdate('content', content)}
readOnly={current.readOnly === true}
annotations={(content) => this._buildAnnotations(content)}
onVimWrite={() => this.handleClick(null, 'save')}
onAutoSave={(event) => autosave ? this.handleClick(event, 'save') : event.preventDefault() }
onVimWrite={() => this.onBeforeSave()}
onAutoSave={() => { if (autosave) { this.onBeforeSave() } }}
keyboardHandler={this.props.keyboardHandler}
editorAutocomplete={this.props.editorAutocomplete}
isDarkMode={this.props.isDarkMode}
Expand Down
Loading

0 comments on commit 9ad622d

Please sign in to comment.