Implement max history

src/Components/Editor/Editor.tsx

@@ -10,6 +10,7 @@ import { onKeyDown } from './Shortcuts';
 import { OnPropertyChange, OnPropertiesSubmit } from './PropertiesOperations';
 import EditorEvents from '../../Events/EditorEvents';
 import { IEditorState } from '../../Interfaces/IEditorState';
+import { MAX_HISTORY } from '../../utils/default';
 
 interface IEditorProps {
   configuration: IConfiguration
@@ -17,7 +18,13 @@ interface IEditorProps {
   historyCurrentStep: number
 }
 
-export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] => history.slice(0, historyCurrentStep + 1);
+export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] => {
+  return history.slice(
+    Math.max(0, history.length - MAX_HISTORY),
+    historyCurrentStep + 1
+  );
+};
+
 export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => history[historyCurrentStep];
 
 const Editor: React.FunctionComponent<IEditorProps> = (props) => {

src/Components/History/History.tsx

@@ -14,9 +14,7 @@ export const History: React.FC<IHistoryProps> = (props: IHistoryProps) => {
   const Row = ({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element => {
     const reversedIndex = (props.history.length - 1) - index;
     const step = props.history[reversedIndex];
-    const desc = reversedIndex > 0
+    const desc = step.LastAction;
-      ? `${reversedIndex}: ${step.LastAction}`
-      : 'Go to the beginning';
 
     const selectedClass = reversedIndex === props.historyCurrentStep
       ? 'bg-blue-500 hover:bg-blue-600'

src/utils/default.ts

@@ -39,3 +39,5 @@ export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
 };
 
 export const NOTCHES_LENGTH = 4;
+
+export const MAX_HISTORY = 200;