persistence

Author: mlc

package.json

@@ -47,6 +47,8 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-redux": "9.2.0",
+    "redux": "5.0.1",
+    "redux-persist": "6.0.0",
     "tslib": "2.8.1"
   },
   "browserslist": [

src/Providers.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
-import { store } from './store';
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistor, store } from './store';
 
 const Providers: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <ReduxProvider store={store}>{children}</ReduxProvider>
+  <ReduxProvider store={store}>
+    <PersistGate persistor={persistor}>{children}</PersistGate>
+  </ReduxProvider>
 );
 
 export default Providers;

src/Results.tsx

@@ -80,7 +80,7 @@ const Results: React.FC = () => {
       return null;
     }
   }, [game?.mode, game?.target, photos]);
-  if (results) {
+  if (results && results.features.length > 0) {
     return (
       <>
         <h2>Results</h2>

src/computation.ts

@@ -1,10 +1,15 @@
 import { Coord, featureCollection, point } from '@turf/helpers';
 import nearestPointOnLine from '@turf/nearest-point-on-line';
-import type { FeatureCollection, Point } from 'geojson';
+import type { Feature, FeatureCollection, LineString, Point } from 'geojson';
 import { GameConfig, GameMode } from './game-modes';
 import { useAppSelector } from './store';
 import { distance } from './util';
 
+const isDegenerate = (line: Feature<LineString>) =>
+  line.geometry.coordinates.length !== 2 ||
+  line.geometry.coordinates[0].join(',') ===
+    line.geometry.coordinates[1].join(',');
+
 export const useGameConfig = (): GameConfig | null => {
   const { mode, lineTarget, basicTarget, multiTarget, error } = useAppSelector(
     ({ game }) => game
@@ -13,7 +18,7 @@ export const useGameConfig = (): GameConfig | null => {
     return null;
   } else if (mode === GameMode.BASIC) {
     return { mode, target: basicTarget };
-  } else if (mode === GameMode.LINE) {
+  } else if (mode === GameMode.LINE && !isDegenerate(lineTarget)) {
     return { mode, target: lineTarget };
   } else if (mode === GameMode.MULTI && multiTarget.features.length > 0) {
     return { mode, target: multiTarget };
@@ -39,12 +44,17 @@ export const decorate = <P extends {}>(
   photos: FeatureCollection<Point, P>
 ): FeatureCollection<Point, P & { distance: number }> => {
   const calculator = distanceCalc(game);
-  return featureCollection(
-    photos.features
-      .map((photo) => ({
-        ...photo,
-        properties: { ...photo.properties, distance: calculator(photo) },
-      }))
-      .sort((a, b) => a.properties.distance - b.properties.distance)
-  );
+  try {
+    return featureCollection(
+      photos.features
+        .map((photo) => ({
+          ...photo,
+          properties: { ...photo.properties, distance: calculator(photo) },
+        }))
+        .sort((a, b) => a.properties.distance - b.properties.distance)
+    );
+  } catch (error) {
+    console.error(error);
+    return featureCollection([]);
+  }
 };

src/store.ts

@@ -1,16 +1,44 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import {
+  FLUSH,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+  REHYDRATE,
+  persistReducer,
+  persistStore,
+} from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
 import dataReducer from './dataSlice';
 import gameReducer from './gameSlice';
 
+const rootReducer = combineReducers({
+  game: gameReducer,
+  data: dataReducer,
+});
+
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
 export const store = configureStore({
-  reducer: {
-    game: gameReducer,
-    data: dataReducer,
-  },
+  reducer: persistedReducer,
   devTools: DEBUG,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
 });
 
+export const persistor = persistStore(store);
+
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 

yarn.lock

@@ -4774,6 +4774,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"redux-persist@npm:6.0.0":
+  version: 6.0.0
+  resolution: "redux-persist@npm:6.0.0"
+  peerDependencies:
+    redux: ">4.0.0"
+  checksum: 10c0/8242d265ab8d28bbc95cf2dc2a05b869eb67aa309b1ed08163c926f3af56dd8eb1ea62118286083461b8ef2024d3b349fd264e5a62a70eb2e74d068c832d5bf2
+  languageName: node
+  linkType: hard
+
 "redux-thunk@npm:^3.1.0":
   version: 3.1.0
   resolution: "redux-thunk@npm:3.1.0"
@@ -4783,7 +4792,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redux@npm:^5.0.1":
+"redux@npm:5.0.1, redux@npm:^5.0.1":
   version: 5.0.1
   resolution: "redux@npm:5.0.1"
   checksum: 10c0/b10c28357194f38e7d53b760ed5e64faa317cc63de1fb95bc5d9e127fab956392344368c357b8e7a9bedb0c35b111e7efa522210cfdc3b3c75e5074718e9069c
@@ -5155,6 +5164,8 @@ __metadata:
     react: "npm:19.1.0"
     react-dom: "npm:19.1.0"
     react-redux: "npm:9.2.0"
+    redux: "npm:5.0.1"
+    redux-persist: "npm:6.0.0"
     svgo: "npm:3.3.2"
     ts-node: "npm:10.9.2"
     tslib: "npm:2.8.1"