embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add editor tabs

This commit is contained in:
Anthony Laibe 2018-10-24 13:45:12 +01:00 committed by Iuri Matias
parent 21d1e1e423
commit f0eb03bf05
12 changed files with 169 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
embark-ui/src/actions/index.js
View File

@ -282,7 +282,7 @@ export const files = {
export const FILE = createRequestTypes('FILE');
export const file = {
request: (file) => action(FILE[REQUEST], file),
success: (file) => action(FILE[SUCCESS], file),
success: (file) => action(FILE[SUCCESS], {file}),
failure: (error) => action(FILE[FAILURE], {error})
};
@ -300,20 +300,6 @@ export const removeFile = {
failure: (error) => action(REMOVE_FILE[FAILURE], {error})
};
export const CURRENT_FILE = createRequestTypes('CURRENT_FILE');
export const currentFile = {
request: () => action(CURRENT_FILE[REQUEST]),
success: (file) => action(CURRENT_FILE[SUCCESS], {currentFiles: [file]}),
failure: () => action(CURRENT_FILE[FAILURE])
};
export const SAVE_CURRENT_FILE = createRequestTypes('SAVE_CURRENT_FILE');
export const saveCurrentFile = {
request: (file) => action(SAVE_CURRENT_FILE[REQUEST], file),
success: (file) => action(SAVE_CURRENT_FILE[SUCCESS], {currentFiles: [file]}),
failure: () => action(SAVE_CURRENT_FILE[FAILURE])
};
export const GAS_ORACLE = createRequestTypes('GAS_ORACLE');
export const gasOracle = {
request: () => action(GAS_ORACLE[REQUEST]),
@ -410,6 +396,27 @@ export const debuggerInfo = {
success: (data) => action(DEBUGGER_INFO[SUCCESS], {data})
};
export const FETCH_EDITOR_TABS = createRequestTypes('FETCH_EDITOR_TABS');
export const fetchEditorTabs = {
request: () => action(FETCH_EDITOR_TABS[REQUEST]),
success: (editorTabs) => action(FETCH_EDITOR_TABS[SUCCESS], {editorTabs}),
failure: () => action(FETCH_EDITOR_TABS[FAILURE])
};
export const ADD_EDITOR_TABS = createRequestTypes('ADD_EDITOR_TABS');
export const addEditorTabs = {
request: (file) => action(ADD_EDITOR_TABS[REQUEST], {file}),
success: () => action(ADD_EDITOR_TABS[SUCCESS]),
failure: () => action(ADD_EDITOR_TABS[FAILURE])
};
export const REMOVE_EDITOR_TABS = createRequestTypes('REMOVE_EDITOR_TABS');
export const removeEditorTabs = {
request: (file) => action(REMOVE_EDITOR_TABS[REQUEST], {file}),
success: () => action(REMOVE_EDITOR_TABS[SUCCESS]),
failure: () => action(REMOVE_EDITOR_TABS[FAILURE])
};
// Web Socket
export const WATCH_NEW_PROCESS_LOGS = 'WATCH_NEW_PROCESS_LOGS';
export const STOP_NEW_PROCESS_LOGS = 'STOP_NEW_PROCESS_LOGS';

4
embark-ui/src/components/ContractDetail.js
View File

@ -1,12 +1,10 @@
import PropTypes from "prop-types";
import React from 'react';
import ReactJson from "react-json-view";
import {Row, Col, Table} from "reactstrap";
import {formatContractForDisplay} from '../utils/presentation';
import {Row, Col} from "reactstrap";
import CopyButton from './CopyButton';
const ContractDetail = ({contract}) => {
const contractDisplay = formatContractForDisplay(contract);
return (
<Row>
<Col>

34
embark-ui/src/components/TextEditor.js
View File

@ -1,6 +1,8 @@
import React from 'react';
import * as monaco from 'monaco-editor';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-fontawesome';
import classNames from 'classnames';
import './TextEditor.css';
@ -40,7 +42,7 @@ class TextEditor extends React.Component {
editor.onMouseDown((e) => {
if (e.target.type === GUTTER_GLYPH_MARGIN){
this.props.toggleBreakpoint(this.props.file.name, e.target.position.lineNumber);
this.props.toggleBreakpoint(this.props.currentFile.name, e.target.position.lineNumber);
}
});
}
@ -49,7 +51,10 @@ class TextEditor extends React.Component {
getLanguage() {
const extension = this.props.file.name.split('.').pop();
if (!this.props.currentFile.name) {
return DEFAULT_LANGUAGE;
}
const extension = this.props.currentFile.name.split('.').pop();
return SUPPORTED_LANGUAGES[SUPPORTED_LANGUAGES.indexOf(extension)] || DEFAULT_LANGUAGE;
}
@ -112,8 +117,8 @@ class TextEditor extends React.Component {
}
componentDidUpdate(prevProps) {
if (this.props.file.content !== prevProps.file.content) {
editor.setValue(this.props.file.content);
if (this.props.currentFile.content && this.props.currentFile.content !== prevProps.currentFile.content) {
editor.setValue(this.props.currentFile.content);
}
this.updateMarkers();
@ -125,9 +130,23 @@ class TextEditor extends React.Component {
this.handleResize();
}
renderTabs() {
return (
<ul className="list-inline m-0 p-2">
{this.props.editorTabs.map(file => (
<li key={file.name} className={classNames("list-inline-item", "border-right", "p-2", { 'bg-dark': file.name === this.props.currentFile.name })}>
<a className="text-white no-underline" href='#switch-tab' onClick={() => this.props.addEditorTabs(file)}>{file.name}</a>
<FontAwesomeIcon onClick={() => this.props.removeEditorTabs(file)} className="mx-1" name="close" />
</li>
))}
</ul>
)
}
render() {
return (
<div className="h-100 d-flex flex-column">
{this.renderTabs()}
<div style={{height: '100%'}} id={EDITOR_ID} />
</div>
)
@ -136,10 +155,13 @@ class TextEditor extends React.Component {
TextEditor.propTypes = {
onFileContentChange: PropTypes.func,
file: PropTypes.object,
currentFile: PropTypes.object,
toggleBreakpoint: PropTypes.func,
breakpoints: PropTypes.array,
debuggerLine: PropTypes.number
debuggerLine: PropTypes.number,
editorTabs: PropTypes.array,
removeEditorTabs: PropTypes.func,
addEditorTabs: PropTypes.func
};
export default TextEditor;

3
embark-ui/src/components/TextEditorToolbar.js
View File

@ -13,8 +13,6 @@ const TextEditorToolbar = (props) => (
</Label>
</Col>
<Col sm={4} md={6}>
<strong>{props.currentFile.name}</strong>
<span className="mx-2">|</span>
<Button color="success" size="sm" onClick={props.save}>
<FontAwesomeIcon className="mr-2" name="save"/>
Save
@ -55,7 +53,6 @@ const TextEditorToolbar = (props) => (
);
TextEditorToolbar.propTypes = {
currentFile: PropTypes.object,
isContract: PropTypes.bool,
save: PropTypes.func,
remove: PropTypes.func,

1
embark-ui/src/containers/EditorContainer.css
View File

@ -1,4 +1,5 @@
.editor--grid {
margin-left: -30px !important;
margin-right: -30px !important;
background-color: #1C1C1C;
}

16
embark-ui/src/containers/EditorContainer.js
View File

@ -6,13 +6,11 @@ import TextEditorAsideContainer from './TextEditorAsideContainer';
import TextEditorContainer from './TextEditorContainer';
import FileExplorerContainer from './FileExplorerContainer';
import TextEditorToolbarContainer from './TextEditorToolbarContainer';
import {currentFile as currentFileAction} from '../actions';
import {fetchEditorTabs as fetchEditorTabsAction} from '../actions';
import {getCurrentFile} from '../reducers/selectors';
import './EditorContainer.css';
const DEFAULT_FILE = {name: 'newContract.sol', content: ''};
class EditorContainer extends React.Component {
constructor(props) {
super(props)
@ -20,9 +18,7 @@ class EditorContainer extends React.Component {
}
componentDidMount() {
if(this.props.currentFile.content === '') {
this.props.fetchCurrentFile();
}
this.props.fetchEditorTabs();
}
componentDidUpdate(prevProps) {
@ -32,7 +28,7 @@ class EditorContainer extends React.Component {
}
isContract() {
return this.state.currentFile.name.endsWith('.sol');
return this.state.currentFile.name && this.state.currentFile.name.endsWith('.sol');
}
onFileContentChange(newContent) {
@ -84,7 +80,7 @@ class EditorContainer extends React.Component {
}
function mapStateToProps(state, props) {
const currentFile = getCurrentFile(state) || DEFAULT_FILE;
const currentFile = getCurrentFile(state);
return {
currentFile
@ -93,11 +89,11 @@ function mapStateToProps(state, props) {
EditorContainer.propTypes = {
currentFile: PropTypes.object,
fetchCurrentFile: PropTypes.func
fetchEditorTabs: PropTypes.func
};
export default connect(
mapStateToProps,
{fetchCurrentFile: currentFileAction.request},
{fetchEditorTabs: fetchEditorTabsAction.request},
)(EditorContainer);

46
embark-ui/src/containers/TextEditorContainer.js
View File

@ -3,23 +3,39 @@ import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import TextEditor from '../components/TextEditor';
import {
addEditorTabs as addEditorTabsAction,
fetchEditorTabs as fetchEditorTabsAction,
removeEditorTabs as removeEditorTabsAction,
toggleBreakpoint,
} from '../actions';
import {getCurrentFile, getContractCompile, getContractDeploys, getBreakpointsByFilename, getDebuggerLine} from '../reducers/selectors';
import {getCurrentFile, getContractCompile, getContractDeploys, getBreakpointsByFilename, getDebuggerLine, getEditorTabs} from '../reducers/selectors';
const TextEditorContainer = (props) => (
<TextEditor file={props.currentFile}
breakpoints={props.breakpoints}
toggleBreakpoint={props.toggleBreakpoint}
debuggerLine={props.debuggerLine}
onFileContentChange={props.onFileContentChange} />
)
class TextEditorContainer extends React.Component {
componentDidMount() {
this.props.fetchEditorTabs();
}
render() {
return (
<TextEditor file={props.currentFile}
currentFile={this.props.currentFile}
breakpoints={this.props.breakpoints}
toggleBreakpoint={this.props.toggleBreakpoint}
editorTabs={this.props.editorTabs}
removeEditorTabs={this.props.removeEditorTabs}
addEditorTabs={this.props.addEditorTabs}
debuggerLine={props.debuggerLine}
onFileContentChange={this.props.onFileContentChange} />
)
}
}
function mapStateToProps(state, props) {
const breakpoints = getBreakpointsByFilename(state, props.currentFile.name);
const editorTabs = getEditorTabs(state);
const debuggerLine = getDebuggerLine(state);
return {breakpoints, debuggerLine};
return {breakpoints, editorTabs, debuggerLine};
}
TextEditorContainer.propTypes = {
@ -27,10 +43,18 @@ TextEditorContainer.propTypes = {
onFileContentChange: PropTypes.func,
toggleBreakpoints: PropTypes.func,
breakpoints: PropTypes.array,
toggleBreakpoint: PropTypes.object
toggleBreakpoint: PropTypes.object,
fetchEditorTabs: PropTypes.func,
removeEditorTabs: PropTypes.func,
addEditorTabs: PropTypes.func
};
export default connect(
mapStateToProps,
{toggleBreakpoint},
{
toggleBreakpoint,
fetchEditorTabs: fetchEditorTabsAction.request,
removeEditorTabs: removeEditorTabsAction.request,
addEditorTabs: addEditorTabsAction.request
},
)(TextEditorContainer);

4
embark-ui/src/index.css
View File

@ -73,3 +73,7 @@
background-image: url(images/icons.png);
}
.no-underline {
text-decoration: none;
}

15
embark-ui/src/reducers/index.js
View File

@ -2,7 +2,7 @@ import {combineReducers} from 'redux';
import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE,
FETCH_CREDENTIALS, UPDATE_BASE_ETHER, CHANGE_THEME, FETCH_THEME, EXPLORER_SEARCH, DEBUGGER_INFO,
SIGN_MESSAGE, VERIFY_MESSAGE, TOGGLE_BREAKPOINT,
UPDATE_DEPLOYMENT_PIPELINE, WEB3_CONNECT, WEB3_DEPLOY, WEB3_ESTIMAGE_GAS} from "../actions";
UPDATE_DEPLOYMENT_PIPELINE, WEB3_CONNECT, WEB3_DEPLOY, WEB3_ESTIMAGE_GAS, FETCH_EDITOR_TABS} from "../actions";
import {EMBARK_PROCESS_NAME, DARK_THEME, DEPLOYMENT_PIPELINES, DEFAULT_HOST} from '../constants';
const BN_FACTOR = 10000;
@ -31,7 +31,6 @@ const entitiesDefaultState = {
ensRecords: [],
files: [],
gasOracleStats: [],
currentFiles: []
};
const sorter = {
@ -80,7 +79,7 @@ const sorter = {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
}
},
};
const filtrer = {
@ -351,6 +350,12 @@ function debuggerInfo(state={}, action) {
if (action.type === DEBUGGER_INFO[SUCCESS]) {
return action.data;
}
}
function editorTabs(state = [], action) {
if (action.type === FETCH_EDITOR_TABS[SUCCESS] && action.editorTabs) {
return action.editorTabs;
}
return state;
}
@ -368,9 +373,9 @@ const rootReducer = combineReducers({
breakpoints,
deploymentPipeline,
web3,
searchResult,
debuggerInfo,
theme
theme,
editorTabs
});
export default rootReducer;

5
embark-ui/src/reducers/selectors.js
View File

@ -170,7 +170,7 @@ export function getFiles(state) {
}
export function getCurrentFile(state) {
return last(state.entities.currentFiles);
return state.editorTabs.find(file => file.active) || {};
}
export function getBaseEther(state) {
@ -234,3 +234,6 @@ export function getDebuggerLine(state) {
return state.debuggerInfo.sources.lineColumnPos[0].start.line + 1;
}
export function getEditorTabs(state) {
return state.editorTabs
}

47
embark-ui/src/sagas/index.js
View File

@ -79,9 +79,6 @@ export const debugStepIntoBackward = doRequest.bind(null, actions.debugStepIntoB
export const toggleBreakpoint = doRequest.bind(null, actions.toggleBreakpoint, api.toggleBreakpoint);
export const authenticate = doRequest.bind(null, actions.authenticate, api.authenticate);
export const fetchCurrentFile = doRequest.bind(null, actions.currentFile, storage.fetchCurrentFile);
export const postCurrentFile = doRequest.bind(null, actions.saveCurrentFile, storage.postCurrentFile);
export const deleteCurrentFile = doRequest.bind(null, null, storage.deleteCurrentFile);
export const fetchCredentials = doRequest.bind(null, actions.fetchCredentials, storage.fetchCredentials);
export const saveCredentials = doRequest.bind(null, actions.saveCredentials, storage.saveCredentials);
export const logout = doRequest.bind(null, actions.logout, storage.logout);
@ -89,6 +86,9 @@ export const changeTheme = doRequest.bind(null, actions.changeTheme, storage.cha
export const fetchTheme = doRequest.bind(null, actions.fetchTheme, storage.fetchTheme);
export const signMessage = doRequest.bind(null, actions.signMessage, api.signMessage);
export const verifyMessage = doRequest.bind(null, actions.verifyMessage, api.verifyMessage);
export const fetchEditorTabs = doRequest.bind(null, actions.fetchEditorTabs, storage.fetchEditorTabs);
export const addEditorTabs = doRequest.bind(null, actions.addEditorTabs, storage.addEditorTabs);
export const removeEditorTabs = doRequest.bind(null, actions.removeEditorTabs, storage.removeEditorTabs);
export const explorerSearch = searchExplorer.bind(null, actions.explorerSearch);
@ -208,25 +208,17 @@ export function *watchPostFile() {
yield takeEvery(actions.SAVE_FILE[actions.REQUEST], postFile);
}
export function *watchPostFileSuccess() {
yield takeEvery(actions.SAVE_FILE[actions.SUCCESS], postCurrentFile);
}
export function *watchDeleteFile() {
yield takeEvery(actions.REMOVE_FILE[actions.REQUEST], deleteFile);
}
export function *watchDeleteFileSuccess() {
yield takeEvery(actions.REMOVE_FILE[actions.SUCCESS], fetchFiles);
yield takeEvery(actions.REMOVE_FILE[actions.SUCCESS], deleteCurrentFile);
yield takeEvery(actions.REMOVE_FILE[actions.SUCCESS], removeEditorTabs);
}
export function *watchFetchFileSuccess() {
yield takeEvery(actions.FILE[actions.SUCCESS], postCurrentFile);
}
export function *watchFetchCurrentFile() {
yield takeEvery(actions.CURRENT_FILE[actions.REQUEST], fetchCurrentFile);
yield takeEvery(actions.FILE[actions.SUCCESS], addEditorTabs);
}
export function *watchFetchEthGas() {
@ -313,6 +305,26 @@ export function *watchUpdateDeploymentPipeline() {
yield takeEvery(actions.UPDATE_DEPLOYMENT_PIPELINE, web3Connect);
}
export function *watchFetchEditorTabs() {
yield takeEvery(actions.FETCH_EDITOR_TABS[actions.REQUEST], fetchEditorTabs);
}
export function *watchAddEditorTabs() {
yield takeEvery(actions.ADD_EDITOR_TABS[actions.REQUEST], addEditorTabs);
}
export function *watchRemoveEditorTabs() {
yield takeEvery(actions.REMOVE_EDITOR_TABS[actions.REQUEST], removeEditorTabs);
}
export function *watchAddEditorTabsSuccess() {
yield takeEvery(actions.ADD_EDITOR_TABS[actions.SUCCESS], fetchEditorTabs);
}
export function *watchRemoveEditorTabsSuccess() {
yield takeEvery(actions.REMOVE_EDITOR_TABS[actions.SUCCESS], fetchEditorTabs);
}
function createChannel(socket) {
return eventChannel(emit => {
socket.onmessage = ((message) => {
@ -494,8 +506,6 @@ export default function *root() {
fork(watchDeleteFile),
fork(watchDeleteFileSuccess),
fork(watchFetchFileSuccess),
fork(watchFetchCurrentFile),
fork(watchPostFileSuccess),
fork(watchFetchCredentials),
fork(watchFetchEthGas),
fork(watchStartDebug),
@ -518,6 +528,11 @@ export default function *root() {
fork(watchWeb3EstimateGas),
fork(watchWeb3Deploy),
fork(watchUpdateDeploymentPipeline),
fork(watchListenDebugger)
fork(watchListenDebugger),
fork(watchFetchEditorTabs),
fork(watchAddEditorTabs),
fork(watchRemoveEditorTabs),
fork(watchAddEditorTabsSuccess),
fork(watchRemoveEditorTabsSuccess),
]);
}

35
embark-ui/src/services/storage.js
View File

@ -1,20 +1,34 @@
export function postCurrentFile(file) {
export function addEditorTabs({file}) {
return new Promise(resolve => {
localStorage.setItem('currentFile', JSON.stringify(file));
resolve({response: {data: file}});
const editorTabs = findOrCreateEditorTabs();
editorTabs.forEach(f => f.active = false);
const alreadyAddedFile = editorTabs.find(f => f.name === file.name)
if (alreadyAddedFile) {
alreadyAddedFile.active = true
} else {
file.active = true
editorTabs.push(file);
}
localStorage.setItem('editorTabs', JSON.stringify(editorTabs));
resolve({response: {data: editorTabs}});
});
}
export function fetchCurrentFile() {
export function fetchEditorTabs() {
return new Promise(resolve => {
resolve({response: {data: JSON.parse(localStorage.getItem('currentFile'))}});
resolve({response: {data: JSON.parse(localStorage.getItem('editorTabs'))}});
});
}
export function deleteCurrentFile() {
export function removeEditorTabs({file}) {
return new Promise(resolve => {
localStorage.removeItem('currentFile');
resolve({});
const editorTabs = findOrCreateEditorTabs();
const filtered = editorTabs.filter(value => value.name !== file.name);
if (file.active && filtered.length) {
filtered[0].active = true;
}
localStorage.setItem('editorTabs', JSON.stringify(filtered));
resolve({response: {data: filtered}});
});
}
@ -50,3 +64,8 @@ export function changeTheme({theme}) {
export function fetchTheme() {
return new Promise(resolve => resolve({response: {data: localStorage.getItem('theme')}}));
}
function findOrCreateEditorTabs() {
return JSON.parse(localStorage.getItem('editorTabs')) || [];
}