hack in a multieditor

Author: shepmaster

ui/frontend/MultiEditor.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { noop } from 'lodash';
+
+import * as selectors from './selectors';
+import { Entries } from './types';
+import * as actions from './actions';
+import { createSelector } from 'reselect';
+
+import SimpleEditor from './editor/SimpleEditor';
+import { useAppDispatch } from './configureStore';
+
+const entriesToSaveSelector = createSelector(
+  selectors.entriesSelector,
+  (entries) => {
+    const names = Object.keys(entries);
+    const toBeSaved: Entries = {};
+    for (const name of names) {
+      const entry = entries[name];
+      if (!entry.lastSaved || entry.lastEdited > entry.lastSaved) {
+        toBeSaved[name] = entry;
+      }
+    }
+    return toBeSaved;
+  }
+);
+
+const entryNamesSelector = createSelector(selectors.entriesSelector, Object.keys);
+
+const doSave = (): actions.ThunkAction => (dispatch, getState) => {
+  const state = getState();
+  const toSave = entriesToSaveSelector(state);
+  dispatch(actions.saveFiles(toSave));
+};
+
+const MultiEditor: React.FC = () => {
+  const entryNames = useSelector(entryNamesSelector);
+  const entry = useSelector(selectors.currentEntrySelector);
+
+  const toSave = useSelector(entriesToSaveSelector);
+  const toSaveNames = Object.keys(toSave);
+
+  const dispatch = useAppDispatch()
+
+  const clickSave = useCallback(() => dispatch(doSave()), [dispatch]);
+
+  return (
+    <>
+      <div>I am the multieditor</div>
+      { toSaveNames.map(n => <b key={n}>{n}</b>) }
+      <button onClick={clickSave}>Go Save Now</button>
+
+      { entryNames.map((name) => (
+        <button key={name} onClick={() => dispatch(actions.selectFile(name))}>{name}</button>
+      )) }
+      <SimpleEditor
+        code={entry.code}
+        execute={noop}
+        onEditCode={newCode => dispatch(actions.editFile(entry.name, newCode))}
+        position={entry.position}
+        selection={entry.selection}
+        crates={[]} />
+    </>
+  );
+};
+
+export default MultiEditor;

ui/frontend/Playground.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import Split from 'split-grid';
 
 import Editor from './editor/Editor';
+import MultiEditor from './MultiEditor';
 import Header from './Header';
 import Notifications from './Notifications';
 import Output from './Output';
@@ -76,7 +77,7 @@ const ResizableArea: React.FC = () => {
 
   return (
     <div ref={grid} className={gridStyle}>
-      <div className={styles.editor}><Editor /></div>
+      <div className={styles.editor}><MultiEditor /></div>
       { isFocused &&
         <div ref={dragHandle} className={handleOuterStyle}>
           <span className={handleInnerStyle}>⣿</span>

ui/frontend/actions.ts

@@ -19,6 +19,7 @@ import {
   DemangleAssembly,
   Edition,
   Editor,
+  Entries,
   Focus,
   Mode,
   Notification,
@@ -105,6 +106,9 @@ export enum ActionType {
   EnableFeatureGate = 'ENABLE_FEATURE_GATE',
   GotoPosition = 'GOTO_POSITION',
   SelectText = 'SELECT_TEXT',
+  EditFile = 'EDIT_FILE',
+  SelectFile = 'SELECT_FILE',
+  SaveFiles = 'SAVE_FILES',
   RequestFormat = 'REQUEST_FORMAT',
   FormatSucceeded = 'FORMAT_SUCCEEDED',
   FormatFailed = 'FORMAT_FAILED',
@@ -573,6 +577,13 @@ export const gotoPosition = (line: string | number, column: string | number) =>
 export const selectText = (start: Position, end: Position) =>
   createAction(ActionType.SelectText, { start, end });
 
+export const editFile = (name: string, code: string) =>
+  createAction(ActionType.EditFile, { name, code });
+
+export const selectFile = (name: string) => createAction(ActionType.SelectFile, { name });
+
+export const saveFiles = (entries: Entries) => createAction(ActionType.SaveFiles, { entries });
+
 const requestFormat = () =>
   createAction(ActionType.RequestFormat);
 
@@ -1002,6 +1013,9 @@ export type Action =
   | ReturnType<typeof enableFeatureGate>
   | ReturnType<typeof gotoPosition>
   | ReturnType<typeof selectText>
+  | ReturnType<typeof editFile>
+  | ReturnType<typeof selectFile>
+  | ReturnType<typeof saveFiles>
   | ReturnType<typeof requestFormat>
   | ReturnType<typeof receiveFormatSuccess>
   | ReturnType<typeof receiveFormatFailure>

ui/frontend/reducers/files.ts

@@ -5,6 +5,32 @@ const DEFAULT_MAIN_RS = `fn main() {
     println!("Hello, world!");
 }`;
 
+const DEFAULT_CARGO_TOML = `[package]
+name = "playground"
+version = "0.0.1"
+authors = ["The Rust Playground"]
+resolver = "2"
+
+[profile.dev]
+codegen-units = 1
+incremental = false
+
+[profile.dev.build-override]
+codegen-units = 1
+
+[profile.release]
+codegen-units = 1
+incremental = false
+
+[profile.release.build-override]
+codegen-units = 1
+
+[dependencies.itertools]
+package = "itertools"
+version = "=0.10.5"
+features = ["use_alloc", "use_std"]
+`
+
 const makeFile = (code: string): File => ({
   code,
   position: makePosition(0, 0),
@@ -19,6 +45,14 @@ export const makeState = (code: string): State => ({
   entries: { [SINGLE_FILE_FILENAME]: makeFile(code) },
 });
 
+// const DEFAULT: State = {
+//   current: 'main.rs',
+//   entries: {
+//     'main.rs': makeFile(DEFAULT_MAIN_RS),
+//     'Cargo.toml': makeFile(DEFAULT_CARGO_TOML),
+//   },
+// };
+
 const DEFAULT: State = makeState(DEFAULT_MAIN_RS);
 
 export type State = {
@@ -79,6 +113,33 @@ export default function files(state = DEFAULT, action: Action): State {
       });
     }
 
+    // These are actions for the multi-file mode
+
+    case ActionType.EditFile: {
+      const { name, code } = action;
+      let entries = state.entries;
+      let entry = entries[name];
+      entry = { ...entry, code, lastEdited: new Date() };
+      entries = { ...entries, [name]: entry };
+      return { ...state, entries };
+    }
+
+    case ActionType.SelectFile: {
+      return { ...state, current: action.name };
+    }
+
+    case ActionType.SaveFiles: {
+      const { entries: toSave } = action;
+      let entries = state.entries;
+      const lastSaved = new Date();
+      for (const name of Object.keys(toSave)) {
+        let entry = entries[name];
+        entry = { ...entry, lastSaved };
+        entries = { ...entries, [name]: entry };
+      }
+      return { ...state, entries };
+    }
+
     default:
       return state;
   }

ui/frontend/selectors/index.ts

@@ -14,10 +14,10 @@ import {
   Version,
 } from '../types';
 
-const currentEntryNameSelector = (state: State) => state.files.current;
-const entriesSelector = (state: State) => state.files.entries;
+export const currentEntryNameSelector = (state: State) => state.files.current;
+export const entriesSelector = (state: State) => state.files.entries;
 
-const currentEntrySelector = createSelector(
+export const currentEntrySelector = createSelector(
   currentEntryNameSelector,
   entriesSelector,
   (name, entries) => ({ ...entries[name], name }));

ui/frontend/websocketMiddleware.ts

@@ -113,4 +113,5 @@ export const websocketMiddleware = (window: Window): Middleware => store => {
 }
 
 const sendActionOnWebsocket = (action: any): boolean =>
-  action.type === ActionType.WSExecuteRequest;
+  action.type === ActionType.WSExecuteRequest
+|| action.type === ActionType.SaveFiles;

ui/src/server_axum/websocket.rs

@@ -8,6 +8,7 @@ use crate::{
 use axum::extract::ws::{Message, WebSocket};
 use snafu::prelude::*;
 use std::{
+    collections::BTreeMap,
     convert::{TryFrom, TryInto},
     time::Instant,
 };
@@ -18,6 +19,14 @@ use tokio::{sync::mpsc, task::JoinSet};
 enum WSMessageRequest {
     #[serde(rename = "WS_EXECUTE_REQUEST")]
     WSExecuteRequest(WSExecuteRequest),
+
+    #[serde(rename = "SAVE_FILES")]
+    SaveFiles { entries: BTreeMap<String, File> },
+}
+
+#[derive(Debug, serde::Deserialize)]
+struct File {
+    code: String,
 }
 
 #[derive(serde::Deserialize)]
@@ -203,6 +212,9 @@ async fn handle_msg(
                 Ok(())
             });
         }
+        Ok(SaveFiles { entries }) => {
+            dbg!(entries);
+        }
         Err(e) => {
             let resp = Err(e);
             tx.send(resp).await.ok(/* We don't care if the channel is closed */);