Merge pull request #67 from ikatson/react-zustand

Use react zustand to reduce re-renders

crates/librqbit/webui/dist/manifest.json

@@ -11,7 +11,7 @@
     "css": [
       "assets/index-d46108e9.css"
     ],
-    "file": "assets/index-c93d50ee.js",
+    "file": "assets/index-e6c23bc1.js",
     "isEntry": true,
     "src": "index.html"
   }

crates/librqbit/webui/package.json

@@ -12,7 +12,8 @@
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.12.0"
+    "react-icons": "^4.12.0",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@types/lodash.debounce": "^4.0.9",

crates/librqbit/webui/src/components/RootContent.tsx

@@ -1,24 +1,25 @@
-import { useContext } from "react";
-import { TorrentId, ErrorDetails as ApiErrorDetails } from "../api-types";
-import { AppContext } from "../context";
 import { TorrentsList } from "./TorrentsList";
 import { ErrorComponent } from "./ErrorComponent";
+import { useTorrentStore } from "../stores/torrentStore";
+import { useErrorStore } from "../stores/errorStore";
+
+export const RootContent = (props: {}) => {
+  let closeableError = useErrorStore((state) => state.closeableError);
+  let setCloseableError = useErrorStore((state) => state.setCloseableError);
+  let otherError = useErrorStore((state) => state.otherError);
+  let torrents = useTorrentStore((state) => state.torrents);
+  let torrentsInitiallyLoading = useTorrentStore(
+    (state) => state.torrentsInitiallyLoading
+  );
 
-export const RootContent = (props: {
-  closeableError: ApiErrorDetails | null;
-  otherError: ApiErrorDetails | null;
-  torrents: Array<TorrentId> | null;
-  torrentsLoading: boolean;
-}) => {
-  let ctx = useContext(AppContext);
   return (
     <div className="container mx-auto">
       <ErrorComponent
-        error={props.closeableError}
-        remove={() => ctx.setCloseableError(null)}
+        error={closeableError}
+        remove={() => setCloseableError(null)}
       />
-      <ErrorComponent error={props.otherError} />
-      <TorrentsList torrents={props.torrents} loading={props.torrentsLoading} />
+      <ErrorComponent error={otherError} />
+      <TorrentsList torrents={torrents} loading={torrentsInitiallyLoading} />
     </div>
   );
 };

crates/librqbit/webui/src/components/buttons/TorrentActions.tsx

@@ -1,13 +1,10 @@
 import { useContext, useState } from "react";
 import { TorrentStats } from "../../api-types";
-import {
-  AppContext,
-  APIContext,
-  RefreshTorrentStatsContext,
-} from "../../context";
+import { APIContext, RefreshTorrentStatsContext } from "../../context";
 import { IconButton } from "./IconButton";
 import { DeleteTorrentModal } from "../modal/DeleteTorrentModal";
 import { FaPause, FaPlay, FaTrash } from "react-icons/fa";
+import { useErrorStore } from "../../stores/errorStore";
 
 export const TorrentActions: React.FC<{
   id: number;
@@ -23,7 +20,8 @@ export const TorrentActions: React.FC<{
   const canPause = state == "live";
   const canUnpause = state == "paused" || state == "error";
 
-  const ctx = useContext(AppContext);
+  const setCloseableError = useErrorStore((state) => state.setCloseableError);
+
   const API = useContext(APIContext);
 
   const unpause = () => {
@@ -34,7 +32,7 @@ export const TorrentActions: React.FC<{
           refreshCtx.refresh();
         },
         (e) => {
-          ctx.setCloseableError({
+          setCloseableError({
             text: `Error starting torrent id=${id}`,
             details: e,
           });
@@ -51,7 +49,7 @@ export const TorrentActions: React.FC<{
           refreshCtx.refresh();
         },
         (e) => {
-          ctx.setCloseableError({
+          setCloseableError({
             text: `Error pausing torrent id=${id}`,
             details: e,
           });

crates/librqbit/webui/src/components/modal/DeleteTorrentModal.tsx

@@ -1,12 +1,13 @@
 import { useContext, useState } from "react";
-import { AppContext, APIContext } from "../../context";
+import { APIContext } from "../../context";
 import { ErrorWithLabel } from "../../rqbit-web";
 import { ErrorComponent } from "../ErrorComponent";
 import { Spinner } from "../Spinner";
 import { Modal } from "./Modal";
 import { ModalBody } from "./ModalBody";
 import { ModalFooter } from "./ModalFooter";
 import { Button } from "../buttons/Button";
+import { useTorrentStore } from "../../stores/torrentStore";
 
 export const DeleteTorrentModal: React.FC<{
   id: number;
@@ -20,8 +21,8 @@ export const DeleteTorrentModal: React.FC<{
   const [error, setError] = useState<ErrorWithLabel | null>(null);
   const [deleting, setDeleting] = useState(false);
 
-  const ctx = useContext(AppContext);
   const API = useContext(APIContext);
+  const refreshTorrents = useTorrentStore((state) => state.refreshTorrents);
 
   const close = () => {
     setDeleteFiles(false);
@@ -37,7 +38,7 @@ export const DeleteTorrentModal: React.FC<{
 
     call(id)
       .then(() => {
-        ctx.refreshTorrents();
+        refreshTorrents();
         close();
       })
       .catch((e) => {

crates/librqbit/webui/src/components/modal/FileSelectionModal.tsx

@@ -1,19 +1,18 @@
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { AddTorrentResponse, AddTorrentOptions } from "../../api-types";
-import { AppContext, APIContext } from "../../context";
+import { APIContext } from "../../context";
 import { ErrorComponent } from "../ErrorComponent";
-import { formatBytes } from "../../helper/formatBytes";
 import { ErrorWithLabel } from "../../rqbit-web";
 import { Spinner } from "../Spinner";
 import { Modal } from "./Modal";
 import { ModalBody } from "./ModalBody";
 import { ModalFooter } from "./ModalFooter";
 import { Button } from "../buttons/Button";
-import { FormCheckbox } from "../forms/FormCheckbox";
 import { Fieldset } from "../forms/Fieldset";
 import { FormInput } from "../forms/FormInput";
 import { Form } from "../forms/Form";
 import { FileListInput } from "../FileListInput";
+import { useTorrentStore } from "../../stores/torrentStore";
 
 export const FileSelectionModal = (props: {
   onHide: () => void;
@@ -35,11 +34,10 @@ export const FileSelectionModal = (props: {
   const [uploadError, setUploadError] = useState<ErrorWithLabel | null>(null);
   const [unpopularTorrent, setUnpopularTorrent] = useState(false);
   const [outputFolder, setOutputFolder] = useState<string>("");
-  const ctx = useContext(AppContext);
+  const refreshTorrents = useTorrentStore((state) => state.refreshTorrents);
   const API = useContext(APIContext);
 
   useEffect(() => {
-    console.log(listTorrentResponse);
     setSelectedFiles(
       new Set(listTorrentResponse?.details.files.map((_, i) => i))
     );
@@ -77,7 +75,7 @@ export const FileSelectionModal = (props: {
       .then(
         () => {
           onHide();
-          ctx.refreshTorrents();
+          refreshTorrents();
         },
         (e) => {
           setUploadError({ text: "Error starting torrent", details: e });

crates/librqbit/webui/src/context.tsx

@@ -31,8 +31,4 @@ export const APIContext = createContext<RqbitAPI>({
     return null;
   },
 });
-export const AppContext = createContext<ContextType>({
-  setCloseableError: (_) => {},
-  refreshTorrents: () => {},
-});
 export const RefreshTorrentStatsContext = createContext({ refresh: () => {} });

crates/librqbit/webui/src/main.tsx

@@ -25,14 +25,14 @@ const RootWithVersion = () => {
   }, []);
 
   return (
-    <StrictMode>
-      <APIContext.Provider value={API}>
-        <RqbitWebUI title={title} />
-      </APIContext.Provider>
-    </StrictMode>
+    <APIContext.Provider value={API}>
+      <RqbitWebUI title={title} />
+    </APIContext.Provider>
   );
 };
 
 ReactDOM.createRoot(document.getElementById("app") as HTMLInputElement).render(
-  <RootWithVersion />
+  <StrictMode>
+    <RootWithVersion />
+  </StrictMode>
 );