ui: file share support

Author: x1unix

web/src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import {Fabric} from 'office-ui-fabric-react/lib/Fabric';
 import { ConnectedRouter } from 'connected-react-router';
-import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
+import {Switch, Route} from "react-router-dom";
 
 import { configureStore } from './store';
 import { history } from './store/configure';
@@ -18,14 +18,12 @@ function App() {
     <Provider store={store}>
         <ConnectedRouter history={history}>
             <Fabric className="App">
-                <Router>
-                    <Switch>
-                        <Route
-                            path="/(snippet)?/:snippetID?"
-                            component={Playground}
-                        />
-                    </Switch>
-                </Router>
+                <Switch>
+                    <Route
+                        path="/(snippet)?/:snippetID?"
+                        component={Playground}
+                    />
+                </Switch>
             </Fabric>
         </ConnectedRouter>
     </Provider>

web/src/Header.tsx

@@ -8,7 +8,7 @@ import {
     formatFileDispatcher,
     runFileDispatcher,
     saveFileDispatcher,
-    dispatchToggleTheme
+    dispatchToggleTheme, shareSnippetDispatcher
 } from './store';
 
 @Connect(s => ({darkMode: s.settings.darkMode, loading: s.status?.loading}))
@@ -62,7 +62,9 @@ export class Header extends React.Component<any> {
                 text: 'Share',
                 iconProps: {iconName: 'Share'},
                 disabled: this.props.loading,
-                onClick: () => alert('Work in progress 🐨')
+                onClick: () => {
+                    this.props.dispatch(shareSnippetDispatcher);
+                }
             },
             {
                 key: 'download',

web/src/Playground.tsx

@@ -9,9 +9,8 @@ import { connect } from 'react-redux';
 
 const Playground = connect()(function (props) {
     const {snippetID} = useParams();
-    if (snippetID) {
-        props.dispatch(newSnippetLoadDispatcher(snippetID));
-    }
+    props.dispatch(newSnippetLoadDispatcher(snippetID));
+
     return <div className="playground">
         <Header />
         <CodeEditor />

web/src/editor/CodeEditor.tsx

@@ -8,9 +8,10 @@ import { DEFAULT_EDITOR_OPTIONS, LANGUAGE_GOLANG } from './props';
 
 interface CodeEditorState {
     code?: string
+    loading?:boolean
 }
 
-@Connect(s => ({code: s.editor.code, darkMode: s.settings.darkMode}))
+@Connect(s => ({code: s.editor.code, darkMode: s.settings.darkMode, loading: s.status?.loading}))
 export default class CodeEditor extends React.Component<any, CodeEditorState> {
     editorDidMount(editor: editor.IStandaloneCodeEditor, monaco: any) {
         editor.focus();

web/src/services/api.ts

@@ -6,6 +6,10 @@ const apiAddress = process.env['REACT_APP_LANG_SERVER'] ?? window.location.origi
 
 let axiosClient = axios.default.create({baseURL: `${apiAddress}/api`});
 
+export interface ShareResponse {
+    snippetID: string
+}
+
 export interface Snippet {
     fileName: string
     code: string
@@ -28,6 +32,7 @@ export interface IAPIClient {
     evaluateCode(code: string): Promise<CompilerResponse>
     formatCode(code: string): Promise<CompilerResponse>
     getSnippet(id: string): Promise<Snippet>
+    shareSnippet(code: string): Promise<ShareResponse>
 }
 
 class Client implements IAPIClient {
@@ -54,6 +59,10 @@ class Client implements IAPIClient {
         return this.get<Snippet>(`/snippet/${id}`);
     }
 
+    async shareSnippet(code: string): Promise<ShareResponse> {
+        return this.post<ShareResponse>('/share', code);
+    }
+
     private async get<T>(uri: string): Promise<T> {
         try {
             const resp = await this.client.get<T>(uri);

web/src/store/actions.ts

@@ -4,8 +4,8 @@ export enum ActionType {
     IMPORT_FILE     = 'IMPORT_FILE',
     FILE_CHANGE     = 'FILE_CHANGE',
     LOADING         = 'LOADING',
+    ERROR           = 'ERROR',
     COMPILE_RESULT  = 'COMPILE_RESULT',
-    COMPILE_FAIL    = 'COMPILE_FAIL',
     TOGGLE_THEME    = 'TOGGLE_THEME'
 }
 
@@ -37,9 +37,9 @@ export const newBuildResultAction = (resp: CompilerResponse) =>
         payload: resp,
     });
 
-export const newBuildErrorAction = (err: string) =>
+export const newErrorAction = (err: string) =>
     ({
-        type: ActionType.COMPILE_FAIL,
+        type: ActionType.ERROR,
         payload: err,
     });
 

web/src/store/dispatch.ts

@@ -1,6 +1,7 @@
 import { saveAs } from 'file-saver';
+import { push } from 'connected-react-router';
 import {
-    newBuildErrorAction,
+    newErrorAction,
     newBuildResultAction,
     newImportFileAction,
     newLoadingAction,
@@ -37,23 +38,35 @@ export function newImportFileDispatcher(f: File): Dispatcher {
 }
 
 export function newSnippetLoadDispatcher(snippetID: string): Dispatcher {
-    return async(dispatch: DispatchFn, getState: StateProvider) => {
-        console.log('load snippet %s', snippetID);
+    return async(dispatch: DispatchFn, _: StateProvider) => {
         if (!snippetID) {
             dispatch(newImportFileAction('prog.go', DEMO_CODE));
             return;
         }
 
         try {
+            console.log('loading snippet %s', snippetID);
             const resp = await client.getSnippet(snippetID);
             const { fileName, code } = resp;
             dispatch(newImportFileAction(fileName, code));
         } catch(err) {
-            dispatch(newBuildErrorAction(err.message));
+            dispatch(newErrorAction(err.message));
         }
     }
 }
 
+export const shareSnippetDispatcher: Dispatcher =
+    async (dispatch: DispatchFn, getState: StateProvider) => {
+        dispatch(newLoadingAction());
+        try {
+            const {code} = getState().editor;
+            const res = await client.shareSnippet(code);
+            dispatch(push(`/snippet/${res.snippetID}`));
+        } catch (err) {
+            dispatch(newErrorAction(err.message));
+        }
+    };
+
 export const saveFileDispatcher: Dispatcher =
     (_: DispatchFn, getState: StateProvider) => {
         try {
@@ -74,7 +87,7 @@ export const runFileDispatcher: Dispatcher =
             const res = await client.evaluateCode(code);
             dispatch(newBuildResultAction(res));
         } catch (err) {
-            dispatch(newBuildErrorAction(err.message));
+            dispatch(newErrorAction(err.message));
         }
     };
 
@@ -89,7 +102,7 @@ export const formatFileDispatcher: Dispatcher =
                 dispatch(newBuildResultAction(res));
             }
         } catch (err) {
-            dispatch(newBuildErrorAction(err.message));
+            dispatch(newErrorAction(err.message));
         }
     };
 

web/src/store/reducers.ts

@@ -38,9 +38,9 @@ const reducers = {
             }
         },
         [ActionType.IMPORT_FILE]: (s: StatusState, a: Action<string>) => {
-            return {...s, loading: false}
+            return {...s, loading: false, lastError: null}
         },
-        [ActionType.COMPILE_FAIL]: (s: StatusState, a: Action<string>) => {
+        [ActionType.ERROR]: (s: StatusState, a: Action<string>) => {
             return {...s, loading: false, lastError: a.payload}
         },
         [ActionType.LOADING]: (s: StatusState, a: Action<string>) => {