new-logic 1/X: Redux, immutable Logic (#156)

* Make Logic immutable

* Fix silent realms

* Refactor gratitude crystals

* Restructuring

* Actually use potentialBannedLocations

* Fix errors after rebase

* Triforce adjustments

* Review feedback

* I guess nullish coalescing exists

* Remove some code that is not needed until settings can be changed

* One small cleanup

.eslintrc

@@ -1,6 +1,7 @@
 {
     "parser": "@typescript-eslint/parser",
     "extends": [
+        "react-app",
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:react/jsx-runtime",
@@ -71,6 +72,8 @@
         "sonarjs/cognitive-complexity": "off",
         "sonarjs/no-nested-template-literals": "off",
         "@typescript-eslint/no-floating-promises": "off",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
         "no-unused-vars": "off"
     },
     "env": {

package.json

@@ -6,6 +6,7 @@
   "private": true,
   "dependencies": {
     "@react-hook/resize-observer": "^1.2.6",
+    "@reduxjs/toolkit": "^2.0.1",
     "@tippyjs/react": "^4.2.6",
     "bootstrap": "^5.2.3",
     "js-base64": "^3.7.4",
@@ -17,6 +18,7 @@
     "react-color": "^2.19.3",
     "react-contexify": "^6.0.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.0.4",
     "react-router-dom": "^6.6.2",
     "react-scripts": "^5.0.1",
     "react-select": "^5.7.0",

src/App.tsx

@@ -1,15 +1,15 @@
 import './App.css';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import Tracker from './Tracker';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Options from './Options';
 import FullAcknowledgement from './FullAcknowledgement';
+import TrackerContainer from './TrackerContainer';
 
 function App() {
     return (
         <Router>
             <Routes>
-                <Route path="/tracker" element={<Tracker />} />
+                <Route path="/tracker" element={<TrackerContainer />} />
                 <Route path="/acknowledgement" element={<FullAcknowledgement />} />
                 <Route path="/" element={<Options />} />
             </Routes>

src/BasicCounters.tsx

@@ -1,17 +1,13 @@
-export default function BasicCounters({
-    locationsChecked,
-    totalAccessible,
-    checksRemaining,
-}: {
-    locationsChecked: number;
-    totalAccessible: number;
-    checksRemaining: number;
-}) {
+import { useSelector } from 'react-redux';
+import { totalCountersSelector } from './selectors/LogicOutput';
+
+export default function BasicCounters() {
+    const totalCounters = useSelector(totalCountersSelector);
     return (
         <div className="Counters">
-            <p>{`Locations Checked: ${locationsChecked}`}</p>
-            <p>{`Locations Accessible: ${totalAccessible}`}</p>
-            <p>{`Locations Remaining: ${checksRemaining}`}</p>
+            <p>{`Locations Checked: ${totalCounters.numChecked}`}</p>
+            <p>{`Locations Accessible: ${totalCounters.numAccessible}`}</p>
+            <p>{`Locations Remaining: ${totalCounters.numRemaining}`}</p>
         </div>
     );
 }