Add Redux

jest.config.js

@@ -175,6 +175,9 @@ export default {
   // A map from regular expressions to paths to transformers
   // transform: {},
   extensionsToTreatAsEsm: [".ts", ".tsx"],
+  setupFiles: [
+    "./setupJestMock.ts",
+  ],
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [

library.tsx

@@ -2,11 +2,15 @@ import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./src/App";
+import { Provider } from 'react-redux';
+import { store } from './src/store';
 
 const domNode = document.getElementById("root");
 const root = ReactDOM.createRoot(domNode);
 root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>,
 );

package.json

@@ -44,6 +44,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.16",
+    "@reduxjs/toolkit": "^1.9.5",
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "^18.15.9",
     "cookie-parser": "^1.4.6",
@@ -66,6 +67,7 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-quill": "^2.0.0",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "syllable": "^5.0.1"
   },

setupJestMock.ts

@@ -0,0 +1,17 @@
+const localStorageMock = {
+  store: {},
+  getItem(key) {
+    return this.store[key];
+  },
+  setItem(key, value) {
+    this.store[key] = value.toString();
+  },
+  clear() {
+    this.store = {};
+  },
+  removeItem(key) {
+    delete this.store[key];
+  },
+};
+
+Object.defineProperty(global, 'localStorage', { value: localStorageMock });

src/BookList.tsx

@@ -9,6 +9,8 @@ import ListItem from "./ListItem";
 import Popup from "./Popup";
 import { getCsrfToken } from "./utils";
 import * as fd from "./fetchData";
+import { useDispatch } from "react-redux";
+import { librarySlice } from "./reducers/librarySlice";
 
 async function deleteBook(bookid: string, onDelete) {
   const res = await fd.deleteBook(bookid);
@@ -36,7 +38,7 @@ async function newBook(dispatch) {
   } else {
     const book = res.payload;
     console.log("new book", book);
-    dispatch({ type: "ADD_BOOK", payload: book });
+    dispatch(librarySlice.actions.addBook(book));
   }
 }
 
@@ -49,17 +51,16 @@ export default function BookList({
   onChange,
   onDelete,
   saveBook,
-  dispatch,
   canCloseSidebar = true,
 }: {
   books: t.Book[];
   selectedBookId: string;
   onChange: () => void;
   onDelete: (bookid: string) => void;
   saveBook: (book: t.Book) => void;
-  dispatch: React.Dispatch<any>;
   canCloseSidebar?: boolean;
 }) {
+  const dispatch = useDispatch();
   const [showPopup, setShowPopup] = React.useState(false);
   const [currentBook, setCurrentBook] = React.useState(books[0]);
 
@@ -92,7 +93,7 @@ export default function BookList({
   const rightMenuItem = canCloseSidebar && {
     label: "Close",
     icon: <XMarkIcon className="w-4 h-4 xl:w-5 xl:h-5" />,
-    onClick: () => dispatch({ type: "CLOSE_BOOK_LIST" }),
+    onClick: () => dispatch(librarySlice.actions.closeBookList()),
     className: buttonStyles,
   };
 

src/ChapterList.test.tsx

@@ -10,6 +10,8 @@ import { BrowserRouter } from "react-router-dom";
 import { render, fireEvent, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { act } from "react-dom/test-utils";
+import { store } from "./store";
+import { Provider } from 'react-redux';
 
 const props = {
   chapters: [chapter1, chapter2],
@@ -36,9 +38,12 @@ describe("ChapterList", () => {
   let container;
   beforeEach(() => {
     const res = render(
-      <BrowserRouter>
-        <ChapterList {...props} />
-      </BrowserRouter>,
+
+      <Provider store={store}>
+        <BrowserRouter>
+          <ChapterList {...props} />
+        </BrowserRouter>
+      </Provider>,
     );
     container = res.container;
   });

src/ChapterList.tsx

@@ -17,6 +17,8 @@ import ListMenu from "./ListMenu";
 import ListItem from "./ListItem";
 import Popup from "./Popup";
 import { getCsrfToken } from "./utils";
+import { useDispatch } from "react-redux";
+import { librarySlice } from "./reducers/librarySlice";
 // import Draggable from "react-draggable";
 
 export default function ChapterList({
@@ -27,7 +29,6 @@ export default function ChapterList({
   onDelete,
   saveChapter,
   closeSidebar,
-  dispatch,
   canCloseSidebar = true,
 }: {
   chapters: t.Chapter[];
@@ -37,24 +38,24 @@ export default function ChapterList({
   onDelete: any;
   saveChapter: any;
   closeSidebar: () => void;
-  dispatch: React.Dispatch<t.ReducerAction>;
   canCloseSidebar?: boolean;
 }) {
+  const dispatch = useDispatch();
   const [editing, setEditing] = React.useState(false);
   const [showPopup, setShowPopup] = React.useState(false);
   const [currentChapter, setCurrentChapter] = React.useState(chapters[0]);
 
   async function deleteChapter(chapterid: string) {
     console.log("delete chapter", chapterid);
-    dispatch({ type: "LOADING" });
+    dispatch(librarySlice.actions.loading);
     const res = await fetch(`/api/deleteChapter`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({ bookid, chapterid, csrfToken: getCsrfToken() }),
     });
-    dispatch({ type: "LOADED" });
+    dispatch(librarySlice.actions.loaded);
     if (!res.ok) {
       console.log(res.statusText);
       return;
@@ -64,15 +65,15 @@ export default function ChapterList({
 
   async function favoriteChapter(chapterid: string) {
     console.log("favorite chapter", chapterid);
-    dispatch({ type: "LOADING" });
+    dispatch(librarySlice.actions.loading());
     const res = await fetch(`/api/favoriteChapter`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({ bookid, chapterid, csrfToken: getCsrfToken() }),
     });
-    dispatch({ type: "LOADED" });
+    dispatch(librarySlice.actions.loaded());
     if (!res.ok) {
       console.log(res.statusText);
       return;
@@ -81,11 +82,11 @@ export default function ChapterList({
   }
 
   const newChapter = async (title = "New Chapter", text = "") => {
-    dispatch({ type: "LOADING" });
+    dispatch(librarySlice.actions.loading());
     const result = await fd.newChapter(bookid, title, text);
-    dispatch({ type: "LOADED" });
+    dispatch(librarySlice.actions.loaded());
     if (result.tag === "error") {
-      dispatch({ type: "SET_ERROR", payload: result.message });
+      dispatch(librarySlice.actions.setError(result.message));
       return;
     }
     await onChange();
@@ -120,7 +121,7 @@ export default function ChapterList({
     const [removed] = ids.splice(result.source.index, 1);
     ids.splice(result.destination.index, 0, removed);
 
-    dispatch({ type: "SET_CHAPTER_ORDER", payload: { bookid, ids } });
+    dispatch(librarySlice.actions.setChapterOrder({ bookid, ids }));
   };
 
   const sublist = () => chapters.map((chapter, index) => (

src/Editor.tsx

@@ -3,16 +3,17 @@ import "./globals.css";
 import TextEditor from "./TextEditor";
 import * as t from "./Types";
 import { getCsrfToken } from "./utils";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "./store";
+import { librarySlice } from "./reducers/librarySlice";
 
 export default function Editor({
-  state,
-  dispatch,
   onSave,
 }: {
-  state: t.State;
-  dispatch: React.Dispatch<t.ReducerAction>;
   onSave: (state: t.State) => void;
 }) {
+  const state = useSelector((state: RootState) => state.library);
+  const dispatch = useDispatch();
   async function saveChapter(state: t.State) {
     if (state.saved) return;
     if (!state.chapter) {
@@ -33,10 +34,10 @@ export default function Editor({
     });
 
     if (!result.ok) {
-      dispatch({ type: "SET_ERROR", payload: result.statusText });
+      dispatch(librarySlice.actions.setError(result.statusText));
     } else {
-      dispatch({ type: "CLEAR_ERROR" });
-      dispatch({ type: "SET_SAVED", payload: true });
+      dispatch(librarySlice.actions.clearError());
+      dispatch(librarySlice.actions.setSaved(true));
     }
   }
 
@@ -57,8 +58,6 @@ export default function Editor({
         </div>
         <div className="h-full w-full">
           <TextEditor
-            dispatch={dispatch as any}
-            state={state.editor}
             chapterid={state.chapter.chapterid}
             saved={state.saved}
             onSave={() => onSave(state)}