Add undo/redo feature

Author: gjdenhertog

README.md

@@ -8,6 +8,21 @@ This repo contains an example project of a image manipulation web application. T
 
 This application makes use of TypeScript, ReactJS, Redux and Redux Saga.
 
+## Features
+
+### Image Manipulation
+- Upload and display images
+- Rotate images
+- Apply filters like sepia and black-and-white
+
+### Undo/Redo Functionality
+- Track editing history with Redux state
+- Undo/Redo buttons in the UI
+- Keyboard shortcuts:
+  - Undo: Ctrl+Z (Windows/Linux) or Cmd+Z (Mac)
+  - Redo: Ctrl+Shift+Z or Ctrl+Y (Windows/Linux) or Cmd+Shift+Z or Cmd+Y (Mac)
+- History state is cleared when a new image is uploaded
+
 ## Running this project
 
 // TODO: add the run instructions

photo-editor/src/App.tsx

@@ -4,11 +4,14 @@ import './App.css';
 import PhotoUploader from './components/PhotoUploader';
 import PhotoControls from './components/PhotoControls';
 import ImageRenderer from './components/ImageRenderer';
+import UndoRedoControls from './components/UndoRedoControls';
 import { loadSavedPhoto } from './store/photo/actions';
 import { AppDispatch } from './store';
+import { useUndoRedoKeyboardShortcuts } from './hooks/useUndoRedoKeyboardShortcuts';
 
 function App() {
   const dispatch = useDispatch<AppDispatch>();
+  useUndoRedoKeyboardShortcuts();
 
   useEffect(() => {
     // When the app loads, try to load any saved photo state
@@ -21,6 +24,7 @@ function App() {
         <h1>Photo Editor</h1>
         <p>Upload a photo to get started</p>
         <PhotoUploader />
+        <UndoRedoControls />
         <ImageRenderer />
         <PhotoControls />
       </header>

photo-editor/src/components/UndoRedoControls.css

@@ -0,0 +1,34 @@
+.undo-redo-controls {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0;
+  gap: 10px;
+}
+
+.undo-button, .redo-button {
+  padding: 8px 16px;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  min-width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.undo-button:hover, .redo-button:hover {
+  background-color: #e0e0e0;
+}
+
+.undo-button:disabled, .redo-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.undo-button:active, .redo-button:active {
+  background-color: #d0d0d0;
+  transform: scale(0.98);
+}

photo-editor/src/components/UndoRedoControls.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { undo, redo } from '../store/history/actions';
+import { selectCanUndo, selectCanRedo, selectPast, selectFuture } from '../store/history/selectors';
+import './UndoRedoControls.css';
+
+const UndoRedoControls: React.FC = () => {
+  const dispatch = useDispatch();
+  const canUndo = useSelector(selectCanUndo);
+  const canRedo = useSelector(selectCanRedo);
+  const past = useSelector(selectPast);
+  const future = useSelector(selectFuture);
+
+  const handleUndo = () => {
+    dispatch(undo());
+  };
+
+  const handleRedo = () => {
+    dispatch(redo());
+  };
+
+  return (
+    <div className="undo-redo-controls">
+      <button 
+        className="undo-button"
+        onClick={handleUndo}
+        disabled={!canUndo}
+        title={`Undo (${past.length} ${past.length === 1 ? 'step' : 'steps'} available)`}
+      >
+        ↩ Undo {canUndo ? `(${past.length})` : ''}
+      </button>
+      <button 
+        className="redo-button"
+        onClick={handleRedo}
+        disabled={!canRedo}
+        title={`Redo (${future.length} ${future.length === 1 ? 'step' : 'steps'} available)`}
+      >
+        Redo {canRedo ? `(${future.length})` : ''} ↪
+      </button>
+    </div>
+  );
+};
+
+export default UndoRedoControls;

photo-editor/src/hooks/useUndoRedoKeyboardShortcuts.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { undo, redo } from '../store/history/actions';
+import { selectCanUndo, selectCanRedo } from '../store/history/selectors';
+
+export const useUndoRedoKeyboardShortcuts = () => {
+  const dispatch = useDispatch();
+  const canUndo = useSelector(selectCanUndo);
+  const canRedo = useSelector(selectCanRedo);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Detect Ctrl+Z or Cmd+Z (for Mac) for Undo
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey && canUndo) {
+        e.preventDefault();
+        dispatch(undo());
+      }
+      
+      // Detect Ctrl+Shift+Z or Cmd+Shift+Z (for Mac) for Redo
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey && canRedo) {
+        e.preventDefault();
+        dispatch(redo());
+      }
+      
+      // Alternative Redo shortcut: Ctrl+Y or Cmd+Y
+      if ((e.ctrlKey || e.metaKey) && e.key === 'y' && canRedo) {
+        e.preventDefault();
+        dispatch(redo());
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dispatch, canUndo, canRedo]);
+};

photo-editor/src/store/history/actions.ts

@@ -0,0 +1,28 @@
+import {
+  UNDO,
+  REDO,
+  CLEAR_HISTORY,
+  RECORD_HISTORY,
+  UndoAction,
+  RedoAction,
+  ClearHistoryAction,
+  RecordHistoryAction
+} from './types';
+import { PhotoState } from '../photo/types';
+
+export const undo = (): UndoAction => ({
+  type: UNDO
+});
+
+export const redo = (): RedoAction => ({
+  type: REDO
+});
+
+export const clearHistory = (): ClearHistoryAction => ({
+  type: CLEAR_HISTORY
+});
+
+export const recordHistory = (state: PhotoState): RecordHistoryAction => ({
+  type: RECORD_HISTORY,
+  payload: state
+});

photo-editor/src/store/history/reducer.ts

@@ -0,0 +1,68 @@
+import {
+  HistoryState,
+  HistoryActionTypes,
+  UNDO,
+  REDO,
+  CLEAR_HISTORY,
+  RECORD_HISTORY
+} from './types';
+
+const HISTORY_LIMIT = 20;
+
+const initialState: HistoryState = {
+  past: [],
+  future: [],
+  limit: HISTORY_LIMIT
+};
+
+const historyReducer = (
+  state = initialState,
+  action: HistoryActionTypes
+): HistoryState => {
+  switch (action.type) {
+    case RECORD_HISTORY:
+      console.log('Recording history:', action.payload, state);
+      return {
+        ...state,
+        past: [
+          ...state.past.slice(-state.limit + 1),
+          action.payload
+        ],
+        future: []
+      };
+
+    case UNDO: {
+      if (state.past.length === 0) return state;
+      
+      const newPast = state.past.slice(0, state.past.length - 1);
+      const lastState = state.past[state.past.length - 1];
+      
+      return {
+        ...state,
+        past: newPast,
+        future: [lastState, ...state.future]
+      };
+    }
+
+    case REDO: {
+      if (state.future.length === 0) return state;
+      
+      const nextState = state.future[0];
+      const newFuture = state.future.slice(1);
+      
+      return {
+        ...state,
+        past: [...state.past, nextState],
+        future: newFuture
+      };
+    }
+
+    case CLEAR_HISTORY:
+      return initialState;
+
+    default:
+      return state;
+  }
+};
+
+export default historyReducer;

photo-editor/src/store/history/sagas.ts

@@ -0,0 +1,86 @@
+import { takeLatest, takeEvery, select, put, all, call } from 'redux-saga/effects';
+import {
+  UNDO,
+  REDO
+} from './types';
+import { selectPast, selectFuture } from './selectors';
+import { setPhoto } from '../photo/actions';
+import { PhotoState } from '../photo/types';
+import { recordHistory } from './actions';
+import {
+  SET_PHOTO,
+  RESET_ROTATION,
+  ROTATE_PHOTO,
+  PAN_ZOOM_PHOTO,
+  ADD_FILTER,
+  REMOVE_FILTER,
+  PhotoActionTypes
+} from '../photo/types';
+
+function* undoSaga() {
+  const past: PhotoState[] = yield select(selectPast);
+  
+  console.log(past);
+  if (past.length > 0) {
+    const previousState = past[past.length - 1];
+    
+    if (previousState.photo) {
+      // Set recordInHistory to false to prevent creating a new history entry
+      yield put(setPhoto(previousState.photo, false));
+    }
+  }
+}
+
+function* redoSaga() {
+  const future: PhotoState[] = yield select(selectFuture);
+  
+  if (future.length > 0) {
+    const nextState = future[0];
+    
+    if (nextState.photo) {
+      // Set recordInHistory to false to prevent creating a new history entry
+      yield put(setPhoto(nextState.photo, false));
+    }
+  }
+}
+
+function* recordHistorySaga(action: PhotoActionTypes) {
+  // Skip recording if this action is from undo/redo operations
+  if (action.type === SET_PHOTO && action.meta && action.meta.recordInHistory === false) {
+    return;
+  }
+  
+  const currentPhotoState: PhotoState = yield select(state => ({
+    photo: state.photo.photo
+  }));
+  
+  if (currentPhotoState.photo) {
+    yield put(recordHistory(currentPhotoState));
+  }
+}
+
+function* watchHistoryActions() {
+  yield takeLatest(UNDO, undoSaga);
+  yield takeLatest(REDO, redoSaga);
+}
+
+function* watchPhotoActionsForHistory() {
+  yield takeEvery(
+    [
+      SET_PHOTO,
+      RESET_ROTATION,
+      ROTATE_PHOTO,
+      PAN_ZOOM_PHOTO,
+      ADD_FILTER,
+      REMOVE_FILTER
+    ],
+    recordHistorySaga
+  );
+}
+
+export default function* historySagas() {
+  yield all([
+    watchHistoryActions(),
+    watchPhotoActionsForHistory()
+  ]);
+}

photo-editor/src/store/history/selectors.ts

@@ -0,0 +1,7 @@
+import { RootState } from '../index';
+
+export const selectHistory = (state: RootState) => state.history;
+export const selectPast = (state: RootState) => state.history.past;
+export const selectFuture = (state: RootState) => state.history.future;
+export const selectCanUndo = (state: RootState) => state.history.past.length > 0;
+export const selectCanRedo = (state: RootState) => state.history.future.length > 0;

photo-editor/src/store/history/types.ts

@@ -0,0 +1,39 @@
+import { PhotoState } from '../photo/types';
+
+export interface HistoryState {
+  past: PhotoState[];
+  future: PhotoState[];
+  limit: number;
+}
+
+export const UNDO = 'history/UNDO';
+export const REDO = 'history/REDO';
+export const CLEAR_HISTORY = 'history/CLEAR_HISTORY';
+export const RECORD_HISTORY = 'history/RECORD_HISTORY';
+
+export interface UndoAction {
+  type: typeof UNDO;
+  [key: string]: any;
+}
+
+export interface RedoAction {
+  type: typeof REDO;
+  [key: string]: any;
+}
+
+export interface ClearHistoryAction {
+  type: typeof CLEAR_HISTORY;
+  [key: string]: any;
+}
+
+export interface RecordHistoryAction {
+  type: typeof RECORD_HISTORY;
+  payload: PhotoState;
+  [key: string]: any;
+}
+
+export type HistoryActionTypes =
+  | UndoAction
+  | RedoAction
+  | ClearHistoryAction
+  | RecordHistoryAction;