Skip to content

B
baas-ide
Commit 6ef49df0 authored by ioedeveloper's avatar ioedeveloper Committed by yann300
Browse files
Options

Refactor modals

parent 0dddd453
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 173 deletions
apps/remix-ide/src/app/panels/file-panel.js
View file @ 6ef49df0
......@@ -4,6 +4,7 @@ import * as packageJson from '../../../../../package.json'
import React from 'react' // eslint-disable-line
import ReactDOM from 'react-dom'
import { Workspace } from '@remix-ui/workspace' // eslint-disable-line
import ethutil from 'ethereumjs-util'
var EventManager = require('../../lib/events')
var { RemixdHandle } = require('../files/remixd-handle.js')
var { GitHandle } = require('../files/git-handle.js')
......@@ -61,7 +62,7 @@ module.exports = class Filepanel extends ViewPlugin {
this.registeredMenuItems = []
this.request = {}
this.workspaces = []
this.renderComponent()
this.initWorkspace()
}
render () {
......@@ -70,7 +71,7 @@ module.exports = class Filepanel extends ViewPlugin {
renderComponent() {
ReactDOM.render(
<Workspace
<Workspace
setWorkspace={this.setWorkspace.bind(this)}
workspaceRenamed={this.workspaceRenamed.bind(this)}
workspaceDeleted={this.workspaceDeleted.bind(this)}
......@@ -79,16 +80,15 @@ module.exports = class Filepanel extends ViewPlugin {
browser={this._deps.fileProviders.browser}
localhost={this._deps.fileProviders.localhost}
fileManager={this._deps.fileManager}
examples={examples}
queryParams={new QueryParams()}
gistHandler={new GistHandler()}
registry={this._components.registry}
plugin={this}
request={this.request}
examples={examples}
workspaces={this.workspaces}
setWorkspaceName={this.setWorkspaceName}
registeredMenuItems={this.registeredMenuItems}
/>
, this.el)
, this.el)
}
/**
......@@ -126,6 +126,45 @@ module.exports = class Filepanel extends ViewPlugin {
return this.workspaces
}
async initWorkspace () {
const queryParams = new QueryParams()
const gistHandler = new GistHandler()
const workspacesPath = this._deps.fileProviders.workspace.workspacesPath
const params = queryParams.get()
// get the file from gist
const loadedFromGist = gistHandler.loadFromGist(params, this._deps.fileManager)
if (loadedFromGist) return
if (params.code) {
try {
await this._deps.fileManager.createWorkspace('code-sample')
var hash = ethutil.bufferToHex(ethutil.keccak(params.code))
const fileName = 'contract-' + hash.replace('0x', '').substring(0, 10) + '.sol'
const path = 'browser/' + workspacesPath + '/code-sample/' + fileName
await this._deps.fileManager.writeFile(path, atob(params.code))
this.setWorkspace({ name: 'code-sample', isLocalhost: false })
await this._deps.fileManager.openFile(path)
} catch (e) {
console.error(e)
}
return
}
// insert example contracts if there are no files to show
this._deps.fileProviders.browser.resolveDirectory('/', async (error, filesList) => {
if (error) console.error(error)
if (Object.keys(filesList).length === 0) {
for (const file in examples) {
try {
await this._deps.fileManager.writeFile('browser/' + workspacesPath + '/default_workspace/' + examples[file].name, examples[file].content)
} catch (error) {
console.error(error)
}
}
}
this.getWorkspaces()
})
}
async createNewFile () {
return await this.request.createNewFile()
}
......@@ -146,6 +185,7 @@ module.exports = class Filepanel extends ViewPlugin {
} else if (await this.call('manager', 'isActive', 'remixd')) {
this.call('manager', 'deactivatePlugin', 'remixd')
}
this.setWorkspaceName = workspace.name
this.emit('setWorkspace', workspace)
}
......
libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
View file @ 6ef49df0
import React, { useState, useEffect, useRef } from 'react';
import ethutil from 'ethereumjs-util'
import { FileExplorer } from '@remix-ui/file-explorer' // eslint-disable-line
import './remix-ui-workspace.css';
import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
......@@ -18,12 +17,11 @@ export interface WorkspaceProps {
localhost: any // localhost provider
fileManager : any
examples: CodeExamples,
queryParams: any // URL parameters
gistHandler: any // handle load gist
registry: any // registry
plugin: any // plugin call and resetFocus
request: any // api request,
workspaces: any,
setWorkspaceName: string,
registeredMenuItems: [] // menu items
}
......@@ -68,8 +66,6 @@ export const Workspace = (props: WorkspaceProps) => {
return state.currentWorkspace
}
useEffect(() => { initWorkspace() }, [])
useEffect(() => {
const getWorkspaces = async () => {
if (props.workspaces && Array.isArray(props.workspaces)) {
......@@ -90,6 +86,12 @@ export const Workspace = (props: WorkspaceProps) => {
getWorkspaces()
}, [props.workspaces])
useEffect(() => {
if (props.setWorkspaceName && (props.setWorkspaceName !== state.currentWorkspace)) {
setWorkspace(props.setWorkspaceName)
}
}, [props.setWorkspaceName])
const [state, setState] = useState({
workspaces: [],
reset: false,
......@@ -98,41 +100,10 @@ export const Workspace = (props: WorkspaceProps) => {
displayNewFile: false,
externalUploads: null,
uploadFileEvent: null,
renameModal: {
id: 'renameWorkspace',
hide: true,
title: 'Rename Workspace',
message: 'Please choose a name for the workspace',
ok: {
label: '',
fn: () => {}
},
cancel: {
label: '',
fn: () => {}
},
handleHide: null
},
deleteModal: {
id: 'deleteWorkspace',
hide: true,
title: 'Remove Workspace',
message: 'Please confirm workspace deletion',
ok: {
label: '',
fn: () => {}
},
cancel: {
label: '',
fn: () => {}
},
handleHide: null
},
createModal: {
id: 'createWorkspace',
modal: {
hide: true,
title: 'Create Workspace',
message: 'Please choose a name for the workspace',
title: '',
message: null,
ok: {
label: '',
fn: () => {}
......@@ -148,77 +119,32 @@ export const Workspace = (props: WorkspaceProps) => {
/* workspace creation, renaming and deletion */
const renameCurrentWorkspace = () => {
setState(prevState => {
return {
...prevState,
renameModal: {
...prevState.renameModal,
hide: false,
ok: {
label: '',
fn: () => onFinishRenameWorkspace()
},
cancel: {
label: '',
fn: () => {}
},
handleHide: () => {
setState(prevState => {
return { ...prevState, renameModal: {...prevState.renameModal, hide: true } }
})
}
},
}
modal('Rename Workspace', renameModalMessage(), {
label: 'OK',
fn: onFinishRenameWorkspace
}, {
label: '',
fn: () => {}
})
}
const createWorkspace = () => {
setState(prevState => {
return {
...prevState,
createModal: {
...prevState.createModal,
hide: false,
ok: {
label: '',
fn: () => onFinishCreateWorkspace()
},
cancel: {
label: '',
fn: () => {}
},
handleHide: () => {
setState(prevState => {
return { ...prevState, createModal: {...prevState.createModal, hide: true } }
})
}
}
}
modal('Create Workspace', createModalMessage(), {
label: 'OK',
fn: onFinishCreateWorkspace
}, {
label: '',
fn: () => {}
})
}
const deleteCurrentWorkspace = () => {
setState(prevState => {
return {
...prevState,
deleteModal: {
...prevState.deleteModal,
hide: false,
ok: {
label: '',
fn: () => onFinishDeleteWorkspace()
},
cancel: {
label: '',
fn: () => {}
},
handleHide: () => {
setState(prevState => {
return { ...prevState, deleteModal: {...prevState.deleteModal, hide: true } }
})
}
},
}
modal('Remove Workspace', 'Please choose a name for the workspace', {
label: 'OK',
fn: onFinishDeleteWorkspace
}, {
label: '',
fn: () => {}
})
}
......@@ -236,7 +162,7 @@ export const Workspace = (props: WorkspaceProps) => {
}
const onFinishCreateWorkspace = async () => {
if (workspaceCreateInput.current === undefined) return
if (!workspaceCreateInput.current) return
// @ts-ignore: Object is possibly 'null'.
const workspaceName = workspaceCreateInput.current.value
const workspacesPath = props.workspace.workspacesPath
......@@ -279,42 +205,6 @@ export const Workspace = (props: WorkspaceProps) => {
props.setWorkspace({ name, isLocalhost: name === LOCALHOST })
}
const initWorkspace = async () => {
const workspacesPath = props.workspace.workspacesPath
const params = props.queryParams.get()
// get the file from gist
const loadedFromGist = props.gistHandler.loadFromGist(params, props.fileManager)
if (loadedFromGist) return
if (params.code) {
try {
await props.fileManager.createWorkspace('code-sample')
var hash = ethutil.bufferToHex(ethutil.keccak(params.code))
const fileName = 'contract-' + hash.replace('0x', '').substring(0, 10) + '.sol'
const path = 'browser/' + workspacesPath + '/code-sample/' + fileName
await props.fileManager.writeFile(path, atob(params.code))
setWorkspace('code-sample')
await props.fileManager.openFile(path)
} catch (e) {
console.error(e)
}
return
}
// insert example contracts if there are no files to show
props.browser.resolveDirectory('/', async (error, filesList) => {
if (error) console.error(error)
if (Object.keys(filesList).length === 0) {
for (const file in props.examples) {
try {
await props.fileManager.writeFile('browser/' + workspacesPath + '/default_workspace/' + props.examples[file].name, props.examples[file].content)
} catch (error) {
console.error(error)
}
}
props.plugin.getWorkspaces()
}
})
}
const remixdExplorer = {
hide: () => {
if (state.currentWorkspace === LOCALHOST) setWorkspace(NO_WORKSPACE)
......@@ -344,37 +234,59 @@ export const Workspace = (props: WorkspaceProps) => {
props.localhost.event.register('closed', (event) => {
remixdExplorer.hide()
})
const handleHideModal = () => {
setState(prevState => {
return { ...prevState, modal: { ...state.modal, hide: true } }
})
}
const modal = async (title: string, message: string | JSX.Element, ok: { label: string, fn: () => void }, cancel: { label: string, fn: () => void }) => {
await setState(prevState => {
return {
...prevState,
modal: {
...prevState.modal,
hide: false,
message,
title,
ok,
cancel,
handleHide: handleHideModal
}
}
})
}
const createModalMessage = () => {
return (
<>
<span>{ state.modal.message }</span>
<input placeholder={`workspace_${Date.now()}`} ref={workspaceCreateInput} className="form-control" />
</>
)
}
const renameModalMessage = () => {
return (
<>
<span>{ state.modal.message }</span>
<input placeholder={ state.currentWorkspace } ref={workspaceRenameInput} className="form-control" />
</>
)
}
return (
<div className='remixui_container'>
<ModalDialog
id={ state.renameModal.id }
title={ state.renameModal.title }
hide={ state.renameModal.hide }
ok={ state.renameModal.ok }
cancel={ state.renameModal.cancel }
handleHide={ state.renameModal.handleHide }>
<span>{ state.renameModal.message }</span>
<input placeholder={ state.currentWorkspace } ref={workspaceRenameInput} className="form-control" />
</ModalDialog>
<ModalDialog
id={ state.createModal.id }
title={ state.createModal.title }
hide={ state.createModal.hide }
ok={ state.createModal.ok }
cancel={ state.createModal.cancel }
handleHide={ state.createModal.handleHide }>
<span>{ state.createModal.message }</span>
<input placeholder={ `workspace_${Date.now()}` } ref={workspaceCreateInput} className="form-control" />
</ModalDialog>
<ModalDialog
id={ state.deleteModal.id }
title={ state.deleteModal.title }
message={ state.deleteModal.message }
hide={ state.deleteModal.hide }
ok={ state.deleteModal.ok }
cancel={ state.deleteModal.cancel }
handleHide={ state.deleteModal.handleHide }>
<ModalDialog
id='workspacesModalDialog'
title={ state.modal.title }
message={ state.modal.message }
hide={ state.modal.hide }
ok={ state.modal.ok }
cancel={ state.modal.cancel }
handleHide={ handleHideModal }>
{ (typeof state.modal.message !== 'string') && state.modal.message }
</ModalDialog>
<div className='remixui_fileexplorer' onClick={() => resetFocus(true)}>
<div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment