Persist repl history in browser local storage (#223)

monome · Aug 2, 2023 · 5587f24 · 5587f24
1 parent 905413d
commit 5587f24
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/web/src/model/repl-history-storage.js b/web/src/model/repl-history-storage.js
@@ -0,0 +1,22 @@
+const localStorageKeyPrefix = "maiden-repl-history-";
+const maxLocalStorageHistoryItems = 100;
+
+export const loadHistoryFromLocalStorage = (component) => {
+    try {
+        const history = JSON.parse(window.localStorage.getItem(`${localStorageKeyPrefix}${component}`));
+        return Array.isArray(history) ? history : [];
+    } catch (e) {
+        return [];
+    }
+};
+
+export const saveHistoryToLocalStorage = (component, history) => {
+    try {
+        window.localStorage.setItem(
+            `${localStorageKeyPrefix}${component}`, 
+            JSON.stringify(history.slice(0, maxLocalStorageHistoryItems))
+        );
+    } catch(e) {
+    }
+};
+
diff --git a/web/src/model/repl-reducers.js b/web/src/model/repl-reducers.js
@@ -12,6 +12,7 @@ import {
   REPL_CLEAR,
   REPL_UNIT_MAP_SUCCESS,
 } from './repl-actions';
+import { loadHistoryFromLocalStorage, saveHistoryToLocalStorage } from './repl-history-storage';
 
 /*
 -- shape of the repl connection and scrollback buffer state
@@ -42,6 +43,8 @@ export const outputAppend = (buffer, limit, line) => {
 const handleReplEcho = (action, state, input) => {
   // add command to history list
   const history = state.history.get(action.component).unshift(input);
+  saveHistoryToLocalStorage(action.component, history);
+
   // echo command to output buffer
   let buffer = state.buffers.get(action.component);
   buffer = outputAppend(buffer, state.scrollbackLimit, input);
@@ -139,7 +142,7 @@ const repl = (state = initialReplState, action) => {
         ...state,
         connections: state.connections.set(action.component, conn.merge(changes)),
         buffers: state.buffers.set(action.component, new List()),
-        history: state.history.set(action.component, new List()),
+        history: state.history.set(action.component, new List(loadHistoryFromLocalStorage(action.component))),
       };
 
     case REPL_RECEIVE:

diff --git a/web/src/repl.js b/web/src/repl.js
@@ -53,7 +53,7 @@ class ReplOutput extends Component {
 class ReplInput extends Component {
   constructor(props) {
     super(props);
-    this.histroyIdx = 0;
+    this.historyIdx = 0;
   }
 
   onKeyDown = event => {