Merge branch 'main' into npinsker/notes-column

cardinalitypuzzles · Dec 10, 2024 · 1d3dd1a · 1d3dd1a
2 parents bb5b378 + 5fad689
commit 1d3dd1a
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 182 deletions.
diff --git a/hunts/src/App.js b/hunts/src/App.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
 import { HuntViewMain } from "./HuntViewMain";
@@ -11,9 +11,9 @@ const App = () => {
 export default App;
 
 const container = document.getElementById("app");
-render(
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  container
+  </Provider>
 );
diff --git a/hunts/src/HuntViewHeader.js b/hunts/src/HuntViewHeader.js
@@ -44,30 +44,34 @@ function HuntViewHeader({ hunt }) {
         <Container fluid>
           <Row className="text-center font-weight-bold small">
             <Col xs={1} className="text-nowrap px-0 mx-0">
-              Metas Solved
+              Metas
             </Col>
-            <Col xs={1}>Solved</Col>
-            <Col xs={1}>Unlocked</Col>
-            <Col xs={1}>Unsolved</Col>
             <Col xs={1} className="text-nowrap px-0 mx-0">
-              Metas Unsolved
+              Puzzles
             </Col>
           </Row>
-          <Row className="text-center font-weight-bold">
-            <Col xs={1} className="text-primary">
-              {numMetasSolved}
+          <Row className="text-center">
+            <Col xs={1}>
+              <span
+                className="text-primary font-weight-bold"
+                style={{ fontSize: "1.25rem" }}
+              >
+                {numMetasSolved}
+              </span>{" "}
+              /{" "}
+              <span class="text-secondary font-weight-bold">
+                {numMetasSolved + numMetasUnsolved}
+              </span>
             </Col>
-            <Col xs={1} className="text-success">
-              {numSolved}
-            </Col>
-            <Col xs={1} className="text-secondary">
-              {numUnlocked}
-            </Col>
-            <Col xs={1} className="text-danger">
-              {numUnsolved}
-            </Col>
-            <Col xs={1} className="text-warning">
-              {numMetasUnsolved}
+            <Col xs={1}>
+              <span
+                className="text-success font-weight-bold"
+                style={{ fontSize: "1.25rem" }}
+              >
+                {numSolved}
+              </span>{" "}
+              /{" "}
+              <span class="text-secondary font-weight-bold">{numUnlocked}</span>
             </Col>
             <Col xs={1} className="text-nowrap">
               <a href="stats">Stats 📈</a>

diff --git a/hunts/src/huntSlice.js b/hunts/src/huntSlice.js
@@ -20,15 +20,15 @@ export const huntSlice = createSlice({
     create_channel_by_default: true,
   },
   reducers: {},
-  extraReducers: {
-    [fetchHunt.fulfilled]: (state, action) => {
+  extraReducers: (builder) => {
+    builder.addCase(fetchHunt.fulfilled, (state, action) => {
       state.id = action.payload.id;
       state.name = action.payload.name;
       state.has_drive = action.payload.has_drive;
       state.puzzle_tags = action.payload.puzzle_tags;
       state.create_channel_by_default =
         action.payload.create_channel_by_default;
-    },
+    });
   },
 });
 

diff --git a/hunts/src/puzzlesSlice.js b/hunts/src/puzzlesSlice.js
@@ -131,75 +131,76 @@ export const puzzlesSlice = createSlice({
     timestamp: 0, // A logical timestamp for detecting stale fetchPuzzle actions
   }),
   reducers: {},
-  extraReducers: {
-    [addPuzzle.fulfilled]: (state, action) => {
-      puzzlesAdapter.addOne(state, action.payload);
-      ++state.timestamp;
-    },
-    [deletePuzzle.fulfilled]: (state, action) => {
-      puzzlesAdapter.removeOne(state, action.payload);
-      ++state.timestamp;
-    },
-    [fetchPuzzles.fulfilled]: (state, action) => {
-      const { timestamp, result } = action.payload;
-      if (timestamp == state.timestamp) {
-        // Only apply the update if no other action has completed
-        // in between dispatching the fetch and it completing
-        puzzlesAdapter.setAll(state, result);
-      }
-      ++state.timestamp;
-    },
-    [updatePuzzle.fulfilled]: (state, action) => {
-      puzzlesAdapter.updateOne(state, {
-        id: action.payload.id,
-        changes: { ...action.payload },
-      });
-      ++state.timestamp;
-    },
-    [editNotes.fulfilled]: (state, action) => {
-      puzzlesAdapter.updateOne(state, {
-        id: action.payload.id,
-        changes: { ...action.payload },
-      });
-      ++state.timestamp;
-    },
-    [addAnswer.fulfilled]: (state, action) => {
-      puzzlesAdapter.updateOne(state, {
-        id: action.payload.id,
-        changes: { ...action.payload },
-      });
-      ++state.timestamp;
-    },
-    [deleteAnswer.fulfilled]: (state, action) => {
-      puzzlesAdapter.updateOne(state, {
-        id: action.payload.id,
-        changes: { ...action.payload },
-      });
-      ++state.timestamp;
-    },
-    [editAnswer.fulfilled]: (state, action) => {
-      puzzlesAdapter.updateOne(state, {
-        id: action.payload.id,
-        changes: { ...action.payload },
+  extraReducers: (builder) => {
+    builder
+      .addCase(addPuzzle.fulfilled, (state, action) => {
+        puzzlesAdapter.addOne(state, action.payload);
+        ++state.timestamp;
+      })
+      .addCase(deletePuzzle.fulfilled, (state, action) => {
+        puzzlesAdapter.removeOne(state, action.payload);
+        ++state.timestamp;
+      })
+      .addCase(fetchPuzzles.fulfilled, (state, action) => {
+        const { timestamp, result } = action.payload;
+        if (timestamp == state.timestamp) {
+          // Only apply the update if no other action has completed
+          // in between dispatching the fetch and it completing
+          puzzlesAdapter.setAll(state, result);
+        }
+        ++state.timestamp;
+      })
+      .addCase(updatePuzzle.fulfilled, (state, action) => {
+        puzzlesAdapter.updateOne(state, {
+          id: action.payload.id,
+          changes: { ...action.payload },
+        });
+        ++state.timestamp;
+      })
+      .addCase(addAnswer.fulfilled, (state, action) => {
+        puzzlesAdapter.updateOne(state, {
+          id: action.payload.id,
+          changes: { ...action.payload },
+        });
+        ++state.timestamp;
+      })
+      .addCase(deleteAnswer.fulfilled, (state, action) => {
+        puzzlesAdapter.updateOne(state, {
+          id: action.payload.id,
+          changes: { ...action.payload },
+        });
+        ++state.timestamp;
+      })
+      .addCase(editAnswer.fulfilled, (state, action) => {
+        puzzlesAdapter.updateOne(state, {
+          id: action.payload.id,
+          changes: { ...action.payload },
+        });
+        ++state.timestamp;
+      })
+      .addCase(editNotes.fulfilled, (state, action) => {
+        puzzlesAdapter.updateOne(state, {
+          id: action.payload.id,
+          changes: { ...action.payload },
+        });
+        ++state.timestamp;
+      })
+      .addCase(deletePuzzleTag.fulfilled, (state, action) => {
+        const updates = action.payload.map((updatedRecord) => ({
+          id: updatedRecord.id,
+          changes: updatedRecord,
+        }));
+        puzzlesAdapter.updateMany(state, updates);
+        ++state.timestamp;
+      })
+      .addCase(addPuzzleTag.fulfilled, (state, action) => {
+        const updates = action.payload.map((updatedRecord) => ({
+          id: updatedRecord.id,
+          changes: updatedRecord,
+        }));
+        puzzlesAdapter.updateMany(state, updates);
+        ++state.timestamp;
       });
-      ++state.timestamp;
-    },
-    [deletePuzzleTag.fulfilled]: (state, action) => {
-      const updates = action.payload.map((updatedRecord) => ({
-        id: updatedRecord.id,
-        changes: updatedRecord,
-      }));
-      puzzlesAdapter.updateMany(state, updates);
-      ++state.timestamp;
-    },
-    [addPuzzleTag.fulfilled]: (state, action) => {
-      const updates = action.payload.map((updatedRecord) => ({
-        id: updatedRecord.id,
-        changes: updatedRecord,
-      }));
-      puzzlesAdapter.updateMany(state, updates);
-      ++state.timestamp;
-    },
   },
 });
 

diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.13",
-    "@reduxjs/toolkit": "^1.5.0",
+    "@reduxjs/toolkit": "^2.4.0",
     "@tabler/icons": "^1.118.0",
     "@use-it/interval": "^1.0.0",
     "babel-loader": "^8.2.2",
@@ -43,11 +43,11 @@
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
+    "react": "^18.0.0",
     "react-bootstrap": "^1.4.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.0.0",
     "react-modern-drawer": "^1.1.2",
-    "react-redux": "^7.2.2",
+    "react-redux": "^9.1.2",
     "react-table": "^7.6.2",
     "react-time-ago": "^7.1.7",
     "redux-localstorage-simple": "^2.4.1",