ui: load snippet

Author: x1unix

web/src/App.tsx

@@ -20,7 +20,10 @@ function App() {
             <Fabric className="App">
                 <Router>
                     <Switch>
-                        <Route path="/" component={Playground} />
+                        <Route
+                            path="/(snippet)?/:snippetID?"
+                            component={Playground}
+                        />
                     </Switch>
                 </Router>
             </Fabric>

web/src/Playground.tsx

@@ -3,13 +3,20 @@ import { Header } from './Header';
 import CodeEditor from './editor/CodeEditor';
 import './Playground.css';
 import Preview from './Preview';
+import { useParams } from "react-router-dom";
+import {newSnippetLoadDispatcher} from "./store";
+import { connect } from 'react-redux';
 
-export default class Playground extends React.Component{
-    render() {
-        return <div className="playground">
-            <Header />
-            <CodeEditor />
-            <Preview />
-        </div>;
+const Playground = connect()(function (props) {
+    const {snippetID} = useParams();
+    if (snippetID) {
+        props.dispatch(newSnippetLoadDispatcher(snippetID));
     }
-}
+    return <div className="playground">
+        <Header />
+        <CodeEditor />
+        <Preview />
+    </div>;
+});
+
+export default Playground;

web/src/Preview.tsx

@@ -26,20 +26,15 @@ export default class Preview extends React.Component<PreviewProps> {
         }
     }
 
-    get progressStyles() {
+    get progressClass() {
         return this.props.loading ? 'app-preview__progress' : 'app-preview__progress--hidden';
-        // return {
-        //     display: this.props.loading ? 'block' : 'none',
-        //     position: 'relative',
-        //     bottom: '8px',
-        // }
     }
 
     render() {
         let content;
         if (this.props.lastError) {
             content = <MessageBar messageBarType={MessageBarType.error} isMultiline={true}>
-                <b className='app-preview__label'>Build failed</b>
+                <b className='app-preview__label'>Error</b>
                 <pre className='app-preview__errors'>
                     {this.props.lastError}
                 </pre>
@@ -58,7 +53,7 @@ export default class Preview extends React.Component<PreviewProps> {
         }
 
         return <div className="app-preview" style={this.styles}>
-            <ProgressIndicator className={this.progressStyles}/>
+            <ProgressIndicator className={this.progressClass}/>
             <div className='app-preview__content'>
                 {content}
             </div>

web/src/services/api.ts

@@ -6,6 +6,11 @@ const apiAddress = process.env['REACT_APP_LANG_SERVER'] ?? window.location.origi
 
 let axiosClient = axios.default.create({baseURL: `${apiAddress}/api`});
 
+export interface Snippet {
+    fileName: string
+    code: string
+}
+
 export interface EvalEvent {
     Message: string
     Kind: string
@@ -22,6 +27,7 @@ export interface IAPIClient {
     getSuggestions(query: {packageName?: string, value?:string}): Promise<monaco.languages.CompletionList>
     evaluateCode(code: string): Promise<CompilerResponse>
     formatCode(code: string): Promise<CompilerResponse>
+    getSnippet(id: string): Promise<Snippet>
 }
 
 class Client implements IAPIClient {
@@ -44,6 +50,10 @@ class Client implements IAPIClient {
         return this.post<CompilerResponse>('/format', code);
     }
 
+    async getSnippet(id: string): Promise<Snippet> {
+        return this.get<Snippet>(`/snippet/${id}`);
+    }
+
     private async get<T>(uri: string): Promise<T> {
         try {
             const resp = await this.client.get<T>(uri);

web/src/store/dispatch.ts

@@ -9,6 +9,7 @@ import {
 import {State} from "./state";
 import client from '../services/api';
 import config from '../services/config';
+import {DEMO_CODE} from '../editor/props';
 
 type StateProvider = () => State
 type DispatchFn = (Action) => any
@@ -35,6 +36,24 @@ export function newImportFileDispatcher(f: File): Dispatcher {
     };
 }
 
+export function newSnippetLoadDispatcher(snippetID: string): Dispatcher {
+    return async(dispatch: DispatchFn, getState: StateProvider) => {
+        console.log('load snippet %s', snippetID);
+        if (!snippetID) {
+            dispatch(newImportFileAction('prog.go', DEMO_CODE));
+            return;
+        }
+
+        try {
+            const resp = await client.getSnippet(snippetID);
+            const { fileName, code } = resp;
+            dispatch(newImportFileAction(fileName, code));
+        } catch(err) {
+            dispatch(newBuildErrorAction(err.message));
+        }
+    }
+}
+
 export const saveFileDispatcher: Dispatcher =
     (_: DispatchFn, getState: StateProvider) => {
         try {

web/src/store/reducers.ts

@@ -2,7 +2,6 @@ import { connectRouter } from 'connected-react-router';
 import { combineReducers } from 'redux';
 
 import {Action, ActionType, FileImportArgs} from './actions';
-import {DEMO_CODE} from '../editor/props';
 import {EditorState, SettingsState, State, StatusState} from './state';
 import { CompilerResponse } from '../services/api';
 import localConfig from '../services/config'
@@ -29,7 +28,7 @@ const reducers = {
 
             return s;
         },
-    }, {fileName: 'main.go', code: DEMO_CODE}),
+    }, {fileName: 'main.go', code: ''}),
     status: mapByAction<StatusState>({
         [ActionType.COMPILE_RESULT]: (s: StatusState, a: Action<CompilerResponse>) => {
             return {
@@ -38,6 +37,9 @@ const reducers = {
                 events: a.payload.events,
             }
         },
+        [ActionType.IMPORT_FILE]: (s: StatusState, a: Action<string>) => {
+            return {...s, loading: false}
+        },
         [ActionType.COMPILE_FAIL]: (s: StatusState, a: Action<string>) => {
             return {...s, loading: false, lastError: a.payload}
         },
@@ -56,11 +58,11 @@ const reducers = {
 
 export const getInitialState = (): State => ({
     status: {
-        loading: false
+        loading: true
     },
     editor: {
         fileName: 'prog.go',
-        code: DEMO_CODE
+        code: ''
     },
     settings: {
         darkMode: localConfig.darkThemeEnabled