Skip to content

Commit

Permalink
fix icon and custom path prefix and add local storage for ide
Browse files Browse the repository at this point in the history
  • Loading branch information
@rodrigopivi
rodrigopivi committed Aug 22, 2018
1 parent 731ded6 commit 7e282e6
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 47 deletions.
30 changes: 15 additions & 15 deletions gatsby-node.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
const jsLoader = loaders.js();
// if (stage === `build-javascript`) {
actions.setWebpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: jsLoader.loader,
const jsLoader = loaders.js();
if (stage === 'build-javascript') {
actions.setWebpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: jsLoader.loader
}
]
}
]
}
]
}
]
});
}
});
// }
};
128 changes: 102 additions & 26 deletions web/components/Editor/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,6 @@ const adapters = {
snips: snipsAdapter
};

declare var CodeFlask;
let ReactJson: any = null;

interface IEditorState {
error: null | string;
warning: null | string;
Expand All @@ -28,6 +25,17 @@ interface IEditorState {
currentAdapter: 'default' | 'rasa' | 'snips';
useCustomOptions: boolean;
}

// NOTE: for SSR, wrap the require in check for window
let CodeFlask = null;
let ReactJson = null;
if (typeof window !== `undefined`) {
// tslint:disable-next-line:no-var-requires
CodeFlask = require('codeflask').default;
// tslint:disable-next-line:no-var-requires
ReactJson = require('react-json-view').default;
}

export default class Editor extends React.Component<{}, IEditorState> {
public state: IEditorState = {
error: null,
Expand All @@ -53,33 +61,40 @@ export default class Editor extends React.Component<{}, IEditorState> {
return;
}
const validation = this.getDSLValidation(this.codeInputValue);
let newState = {};
if (validation && validation.error) {
this.setState({ error: validation.error, warning: null });
newState = { error: validation.error, warning: null };
} else if (validation && validation.warning) {
this.setState({ error: null, warning: validation.warning });
newState = { error: null, warning: validation.warning };
} else {
this.setState({ error: null, warning: null });
newState = { error: null, warning: null };
}
this.setState(newState, () => {
this.saveToLocalStorage(true, false, false);
});
}, 300);

public componentDidMount() {
ReactJson = require('react-json-view').default;
const flask = new CodeFlask('#my-code-editor', {
language: 'chatito',
lineNumbers: true
});
flask.addLanguage('chatito', chatitoPrism);
flask.onUpdate(code => {
this.codeInputValue = code;
this.tabs[this.state.activeTabIndex].value = code;
// NOTE: ugly hack to know when codeflask is mounted (it makes 2 calls to update on mount)
this.editorUpdatesSetupCount < 2 ? this.editorUpdatesSetupCount++ : this.setState({ dataset: null });
this.debouncedTabDSLValidation();
if (!CodeFlask) {
return;
}
this.loadFromLocalStorage(() => {
const flask = new CodeFlask('#my-code-editor', {
language: 'chatito',
lineNumbers: true
});
flask.addLanguage('chatito', chatitoPrism);
flask.onUpdate(code => {
this.codeInputValue = code;
this.tabs[this.state.activeTabIndex].value = code;
// NOTE: ugly hack to know when codeflask is mounted (it makes 2 calls to update on mount)
this.editorUpdatesSetupCount < 2 ? this.editorUpdatesSetupCount++ : this.setState({ dataset: null });
this.debouncedTabDSLValidation();
});
flask.updateCode(this.tabs[this.state.activeTabIndex].value);
flask.setLineNumber();
this.codeflask = flask;
});
flask.highlight();
flask.updateCode(this.tabs[this.state.activeTabIndex].value);
flask.setLineNumber();
this.codeflask = flask;
}

public render() {
Expand Down Expand Up @@ -212,9 +227,9 @@ export default class Editor extends React.Component<{}, IEditorState> {
</es.TabButton>
);
};
/* ================== Event Handlers ================== */

private onCloseDrawer = () => this.setState({ showDrawer: false });
/* ================== Event Handlers ================== */
private onCloseDrawer = () => this.setState({ showDrawer: false, dataset: null });

private onCustomOptionsCheckboxChange = e => {
this.setState({ useCustomOptions: e.target.checked });
Expand All @@ -227,12 +242,16 @@ export default class Editor extends React.Component<{}, IEditorState> {
} else if (e.target.value === 'snips') {
adapterOptions = Object.assign({}, snipsDefaultOptions);
}
this.setState({ currentAdapter: e.target.value, adapterOptions, dataset: null });
this.setState({ currentAdapter: e.target.value, adapterOptions, dataset: null }, () => {
this.saveToLocalStorage(false, true, true);
});
};

private onEditAdapterOptions = changes => {
if (changes && changes.updated_src) {
this.setState({ adapterOptions: changes.updated_src });
this.setState({ adapterOptions: changes.updated_src }, () => {
this.saveToLocalStorage(false, true, false);
});
return null;
}
return false;
Expand Down Expand Up @@ -272,6 +291,63 @@ export default class Editor extends React.Component<{}, IEditorState> {

/* ================== Utils ================== */

private saveToLocalStorage = (saveTabs, saveAdapterOptions, saveCurrentAdapter) => {
if (window && localStorage) {
if (saveTabs) {
localStorage.setItem('tabs', JSON.stringify(this.tabs));
}
if (saveAdapterOptions) {
localStorage.setItem('adapterOptions', this.state.useCustomOptions ? JSON.stringify(this.state.adapterOptions) : '');
}
if (saveCurrentAdapter) {
localStorage.setItem('currentAdapter', this.state.currentAdapter);
}
}
};

private loadFromLocalIfPresent = (key: string, parseAsJSON: boolean) => {
if (window && localStorage) {
try {
const item = localStorage.getItem(key);
if (!parseAsJSON) {
return item;
}
if (item) {
try {
return JSON.parse(item);
} catch (e) {
// just catch the error
}
}
} catch (e) {
// tslint:disable-next-line:no-console
console.error(e);
}
}
};

private loadFromLocalStorage = (cb: () => void) => {
if (window && localStorage) {
const newState: any = {};
const localTabs = this.loadFromLocalIfPresent('tabs', true);
const localAdapterOptions = this.loadFromLocalIfPresent('adapterOptions', true);
const localCurrentAdapter = this.loadFromLocalIfPresent('currentAdapter', false);
if (localTabs) {
this.tabs = localTabs;
}
if (localAdapterOptions) {
newState.adapterOptions = localAdapterOptions;
newState.useCustomOptions = true;
}
if (localCurrentAdapter) {
newState.currentAdapter = localCurrentAdapter;
}
this.setState(newState, cb);
} else {
cb();
}
};

private changeTab = (i: number, cb?: () => void) => {
this.setState({ activeTabIndex: i }, () => {
this.codeflask.updateCode(this.tabs[this.state.activeTabIndex].value);
Expand Down
23 changes: 17 additions & 6 deletions web/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,30 @@ import Editor from '../components/Editor/Editor';
import { Header } from '../components/globalStyles';
import Logo from '../components/Logo';

// NOTE: gatsby global for prefix
declare var __PATH_PREFIX__;

export default class Index extends React.Component<{}, {}> {
public render() {
return (
<div>
<Helmet>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="apple-touch-icon" sizes="180x180" href={`${__PATH_PREFIX__}/apple-touch-icon.png`} />
<link rel="icon" type="image/png" sizes="32x32" href={`${__PATH_PREFIX__}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${__PATH_PREFIX__}/favicon-16x16.png`} />
<link rel="manifest" href={`${__PATH_PREFIX__}/site.webmanifest`} />
<link rel="mask-icon" href={`${__PATH_PREFIX__}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<script src="https://cdn.rawgit.com/kazzkiq/CodeFlask/v1.1.0/build/codeflask.min.js" />
<title>Chatito DSL - Generate dataset for chatbots</title>
<meta
name="keywords"
content="chatbot, dataset generation, dataset generator, generate datasets, rasa nlu, snips nlu, chatbot dataset, datasets for chatbots"
/>
<meta
name="description"
content="Chatito helps you helps you generate datasets for natural language understanding models using a simple DSL"
/>
</Helmet>
<Header>
<div style={{ display: 'inline-block', width: 50, minWidth: 50, height: 43 }}>
Expand Down

0 comments on commit 7e282e6

Please sign in to comment.