1/n Use zustand to reduce re-renders

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

@@ -1,24 +1,23 @@
-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 torrentsLoading = useTorrentStore((state) => state.torrentsLoading);
 
-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={torrentsLoading} />
     </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,5 +1,5 @@
 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";
@@ -7,6 +7,7 @@ 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,6 +1,6 @@
 import { useCallback, 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";
@@ -14,6 +14,7 @@ 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,7 +36,7 @@ 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(() => {
@@ -77,7 +78,7 @@ export const FileSelectionModal = (props: {
       .then(
         () => {
           onHide();
-          ctx.refreshTorrents();
+          refreshTorrents();
         },
         (e) => {
           setUploadError({ text: "Error starting torrent", details: e });