Add local storage storage via saga

Author: gjdenhertog

photo-editor/src/App.tsx

@@ -1,10 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import './App.css';
 import PhotoUploader from './components/PhotoUploader';
 import PhotoControls from './components/PhotoControls';
 import ImageRenderer from './components/ImageRenderer';
+import { loadSavedPhoto } from './store/photo/actions';
+import { AppDispatch } from './store';
 
 function App() {
+  const dispatch = useDispatch<AppDispatch>();
+
+  useEffect(() => {
+    // When the app loads, try to load any saved photo state
+    dispatch(loadSavedPhoto());
+  }, [dispatch]);
+
   return (
     <div className="App">
       <header className="App-header">

photo-editor/src/components/PhotoUploader.tsx

@@ -20,23 +20,28 @@ const PhotoUploader: React.FC = () => {
     if (file) {
       console.log('File selected:', file.name);
 
-      const fileUrl = URL.createObjectURL(file);
-      
-      const img = new Image();
-      img.onload = () => {
-        const photo: Photo = {
-          dimensions: {
-            width: img.width,
-            height: img.height
-          },
-          source: fileUrl,
-          rotation: 0,
-          filters: []
-        };
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const base64String = e.target?.result as string;
 
-        dispatch(setPhoto(photo));
+        const img = new Image();
+        img.onload = () => {
+          const photo: Photo = {
+            dimensions: {
+              width: img.width,
+              height: img.height
+            },
+            source: base64String,
+            rotation: 0,
+            filters: []
+          };
+          
+          dispatch(setPhoto(photo));
+        };
+        img.src = base64String;
       };
-      img.src = fileUrl;
+      
+      reader.readAsDataURL(file);
     }
   };
 

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

@@ -5,14 +5,18 @@ import {
   SET_PHOTO,
   ADD_FILTER,
   REMOVE_FILTER,
+  LOAD_SAVED_PHOTO,
+  LOAD_SAVED_PHOTO_SUCCESS,
   Photo,
   PhotoFilter,
   ResetRotationAction,
   RotatePhotoAction,
   PanZoomPhotoAction,
   SetPhotoAction,
   AddFilterAction,
-  RemoveFilterAction
+  RemoveFilterAction,
+  LoadSavedPhotoAction,
+  LoadSavedPhotoSuccessAction
 } from './types';
 
 // Action creators
@@ -55,3 +59,12 @@ export const removeFilter = (filter: PhotoFilter): RemoveFilterAction => ({
     filter
   }
 });
+
+export const loadSavedPhoto = (): LoadSavedPhotoAction => ({
+  type: LOAD_SAVED_PHOTO
+});
+
+export const loadSavedPhotoSuccess = (photo: Photo): LoadSavedPhotoSuccessAction => ({
+  type: LOAD_SAVED_PHOTO_SUCCESS,
+  payload: photo
+});

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

@@ -6,7 +6,8 @@ import {
   PAN_ZOOM_PHOTO,
   SET_PHOTO,
   ADD_FILTER,
-  REMOVE_FILTER
+  REMOVE_FILTER,
+  LOAD_SAVED_PHOTO_SUCCESS
 } from './types';
 
 // Initial state
@@ -79,6 +80,12 @@ const photoReducer = (
         }
       };
 
+    case LOAD_SAVED_PHOTO_SUCCESS:
+      return {
+        ...state,
+        photo: action.payload
+      };
+      
     default:
       return state;
   }

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

@@ -0,0 +1,129 @@
+import { takeLatest, debounce, put, select, call } from 'redux-saga/effects';
+import {
+  SET_PHOTO,
+  RESET_ROTATION,
+  ROTATE_PHOTO,
+  PAN_ZOOM_PHOTO,
+  ADD_FILTER,
+  REMOVE_FILTER,
+  LOAD_SAVED_PHOTO,
+  Photo
+} from './types';
+import { selectPhoto } from './selectors';
+import { loadSavedPhotoSuccess } from './actions';
+
+const STORAGE_KEY = 'photo_editor_state';
+const IMAGE_STORAGE_KEY = 'photo_editor_image';
+const DEBOUNCE_TIME = 1000;
+const MAX_LOCAL_STORAGE_SIZE = 5 * 1024 * 1024;
+
+const getFromLocalStorage = (key: string): string | null => {
+  return localStorage.getItem(key);
+};
+
+const setInLocalStorage = (key: string, value: string): void => {
+  try {
+    localStorage.setItem(key, value);
+  } catch (e) {
+    console.error(`Error storing data in localStorage (key: ${key}):`, e);
+    throw e;
+  }
+};
+
+const removeFromLocalStorage = (key: string): void => {
+  localStorage.removeItem(key);
+};
+
+const willFitInLocalStorage = (str: string): boolean => {
+  const estimatedSize = str.length * 2;
+  return estimatedSize < MAX_LOCAL_STORAGE_SIZE;
+};
+
+function* savePhotoState() {
+  try {
+    const photo: Photo | null = yield select(selectPhoto);
+    
+    if (photo) {
+      if (photo.source) {
+        if (willFitInLocalStorage(photo.source)) {
+          yield call(setInLocalStorage, IMAGE_STORAGE_KEY, photo.source);
+        } else {
+          console.warn('Image is too large for localStorage. Only saving settings.');
+        }
+      }
+      
+      const storablePhoto = { 
+        ...photo,
+        source: 'has_stored_image'
+      };
+      
+      yield call(setInLocalStorage, STORAGE_KEY, JSON.stringify(storablePhoto));
+      console.log('Photo state and image saved to localStorage');
+    } else {
+      yield call(removeFromLocalStorage, STORAGE_KEY);
+      yield call(removeFromLocalStorage, IMAGE_STORAGE_KEY);
+      console.log('Photo state removed from localStorage');
+    }
+  } catch (error) {
+    console.error('Error saving photo state to localStorage:', error);
+  }
+}
+
+function* loadSavedPhotoState() {
+  try {
+    const savedPhotoJson: string | null = yield call(getFromLocalStorage, STORAGE_KEY);
+    
+    if (savedPhotoJson) {
+      const savedPhoto: Photo = JSON.parse(savedPhotoJson);
+      
+      const imageSource: string | null = yield call(getFromLocalStorage, IMAGE_STORAGE_KEY);
+      
+      if (imageSource) {
+        const img = new Image();
+        img.src = imageSource;
+        
+        const imageLoads = new Promise<boolean>((resolve, reject) => {
+          img.onload = () => resolve(true);
+          img.onerror = () => reject(new Error('Failed to load saved image'));
+        });
+        
+        try {
+          yield call(() => imageLoads);
+          
+          savedPhoto.source = imageSource;
+          
+          yield put(loadSavedPhotoSuccess(savedPhoto));
+          console.log('Successfully restored saved photo with image');
+        } catch (imgError) {
+          console.error('Error loading saved image:', imgError);
+          alert('Found saved photo settings, but the image could not be loaded. Please upload a new image.');
+        }
+      } else {
+        alert('Found saved photo settings! Please upload an image to apply them.');
+        console.log('Found saved photo settings in localStorage but no valid image source');
+      }
+    } else {
+      console.log('No saved photo found in localStorage');
+    }
+  } catch (error) {
+    console.error('Error loading photo state from localStorage:', error);
+  }
+}
+
+function* watchPhotoChanges() {
+  yield takeLatest(SET_PHOTO, savePhotoState);
+  
+  yield debounce(DEBOUNCE_TIME, [
+    RESET_ROTATION,
+    ROTATE_PHOTO,
+    PAN_ZOOM_PHOTO,
+    ADD_FILTER,
+    REMOVE_FILTER
+  ], savePhotoState);
+  
+  yield takeLatest(LOAD_SAVED_PHOTO, loadSavedPhotoState);
+}
+
+export default function* photoSagas() {
+  yield watchPhotoChanges();
+}

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

@@ -29,6 +29,8 @@ export const PAN_ZOOM_PHOTO = 'photo/PAN_ZOOM_PHOTO';
 export const SET_PHOTO = 'photo/SET_PHOTO';
 export const ADD_FILTER = 'photo/ADD_FILTER';
 export const REMOVE_FILTER = 'photo/REMOVE_FILTER';
+export const LOAD_SAVED_PHOTO = 'photo/LOAD_SAVED_PHOTO';
+export const LOAD_SAVED_PHOTO_SUCCESS = 'photo/LOAD_SAVED_PHOTO_SUCCESS';
 
 // Action interfaces
 export interface ResetRotationAction {
@@ -77,11 +79,24 @@ export interface RemoveFilterAction {
   [key: string]: any;
 }
 
+export interface LoadSavedPhotoAction {
+  type: typeof LOAD_SAVED_PHOTO;
+  [key: string]: any;
+}
+
+export interface LoadSavedPhotoSuccessAction {
+  type: typeof LOAD_SAVED_PHOTO_SUCCESS;
+  payload: Photo;
+  [key: string]: any;
+}
+
 // Union of all photo action types
 export type PhotoActionTypes = 
   | ResetRotationAction 
   | RotatePhotoAction 
   | PanZoomPhotoAction
   | SetPhotoAction
   | AddFilterAction
-  | RemoveFilterAction;
+  | RemoveFilterAction
+  | LoadSavedPhotoAction
+  | LoadSavedPhotoSuccessAction;

photo-editor/src/store/rootSaga.ts

@@ -1,10 +1,8 @@
 import { all } from 'redux-saga/effects';
-// We'll import our photo sagas here later
-// import photoSagas from './photo/sagas';
+import photoSagas from './photo/sagas';
 
 export default function* rootSaga() {
   yield all([
-    // We'll add our photo sagas here later
-    // ...photoSagas,
+    photoSagas(),
   ]);
 }