Use react-query for queue UI

New: Season packs and multi-episode releases will show as a single item in the queue
Closes #6537

.devcontainer/devcontainer.json

@@ -2,7 +2,7 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
 {
   "name": "Sonarr",
-  "image": "mcr.microsoft.com/devcontainers/dotnet:1-10.0",
+  "image": "mcr.microsoft.com/devcontainers/dotnet:1-8.0",
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       "nodeGypDependencies": true,

.github/actions/build/action.yml

@@ -21,13 +21,7 @@ runs:
   using: "composite"
   steps:
     - name: Setup .NET
-      uses: actions/setup-dotnet@v5
-
-    - name: Setup NuGet registry source
-      shell: bash
-      if: ${{ startsWith(inputs.runtime, 'freebsd') }}
-      run:
-        dotnet nuget add source --configfile src/NuGet.Config --name gh-openur https://nuget.pkg.github.com/openur/index.json --username ${{ github.repository_owner }} --password ${{ github.token }} --store-password-in-clear-text
+      uses: actions/setup-dotnet@v4
 
     - name: Setup Environment Variables
       id: variables
@@ -92,7 +86,7 @@ runs:
 
         echo "Building Sonarr for $runtime, Platform: $platform"
 
-        dotnet msbuild -restore $slnFile -p:SelfContained=true -p:Configuration=Release -p:Platform=$platform -p:RuntimeIdentifiers=$runtime -p:EnableWindowsTargeting=true -t:PublishAllRids
+        dotnet msbuild -restore $slnFile -p:SelfContained=True -p:Configuration=Release -p:Platform=$platform -p:RuntimeIdentifiers=$runtime -p:EnableWindowsTargeting=true -t:PublishAllRids
 
     - name: Package
       shell: bash

.github/actions/package/package.sh

@@ -3,7 +3,7 @@
 outputFolder=_output
 artifactsFolder=_artifacts
 uiFolder="$outputFolder/UI"
-framework="${FRAMEWORK:=net10.0}"
+framework="${FRAMEWORK:=net8.0}"
 
 rm -rf $artifactsFolder
 mkdir $artifactsFolder

.github/actions/test/action.yml

@@ -4,8 +4,6 @@ description: Runs unit/integration tests
 inputs:
   use_postgres:
     description: 'Whether postgres should be used for the database'
-  postgres-version:
-    description: 'Which postgres version should be used for the database'
   os:
     description: 'OS that the tests are running on'
     required: true
@@ -29,18 +27,16 @@ runs:
   using: 'composite'
   steps:
     - name: Setup .NET
-      uses: actions/setup-dotnet@v5
+      uses: actions/setup-dotnet@v4
 
     - name: Setup Postgres
       if: ${{ inputs.use_postgres }}
-      uses: ikalnytskyi/action-setup-postgres@v8
-      with:
-        postgres-version: ${{ inputs.postgres-version }}
+      uses: ikalnytskyi/action-setup-postgres@v4
 
     - name: Setup Test Variables
       shell: bash
       run: |
-        echo "RESULTS_NAME=${{ inputs.integration_tests && 'integation-' || 'unit-' }}${{ inputs.artifact }}${{ inputs.use_postgres && '-postgres' }}${{ inputs.use_postgres && inputs.postgres-version && inputs.postgres-version }}" >> "$GITHUB_ENV"
+        echo "RESULTS_NAME=${{ inputs.integration_tests && 'integation-' || 'unit-' }}${{ inputs.artifact }}${{ inputs.use_postgres && '-postgres' }}" >> "$GITHUB_ENV"
 
     - name: Setup Postgres Environment Variables
       if: ${{ inputs.use_postgres }}
@@ -52,14 +48,14 @@ runs:
         echo "Sonarr__Postgres__Password=postgres" >> "$GITHUB_ENV"
 
     - name: Download Artifact
-      uses: actions/download-artifact@v5
+      uses: actions/download-artifact@v4
       with:
         name: ${{ inputs.artifact }}
         path: _tests
 
     - name: Download Binary Artifact
       if: ${{ inputs.integration_tests }}
-      uses: actions/download-artifact@v5
+      uses: actions/download-artifact@v4
       with:
         name: ${{ inputs.binary_artifact }}
         path: _output

.github/workflows/build_v5.yml

@@ -19,7 +19,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  FRAMEWORK: net10.0
+  FRAMEWORK: net8.0
   RAW_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   SONARR_MAJOR_VERSION: 5
   VERSION: 5.0.0
@@ -82,7 +82,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Build
         uses: ./.github/actions/build
@@ -97,7 +97,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Volta
         uses: volta-cli/action@v4
@@ -139,7 +139,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test
@@ -152,13 +152,9 @@ jobs:
   unit_test_postgres:
     needs: backend
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        postgres-version: [16, 17, 18]
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test
@@ -168,7 +164,6 @@ jobs:
           pattern: Sonarr.*.Test.dll
           filter: TestCategory!=ManualTest&TestCategory!=WINDOWS&TestCategory!=IntegrationTest&TestCategory!=AutomationTest
           use_postgres: true
-          postgres-version: ${{ matrix.postgres-version }}
 
   integration_test:
     needs: [prepare, backend]
@@ -195,7 +190,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Check out
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: Test
         uses: ./.github/actions/test

.github/workflows/close_invalid_issues.yml

@@ -1,26 +0,0 @@
-name: Close issues without labels
-
-on:
-  issues:
-    types:
-      - opened
-      - reopened
-
-jobs:
-  close-issue:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-        with:
-          sparse-checkout: |
-            .github
-      - name: Close issue if no labels found
-        if: join(github.event.issue.labels) == ''
-        run: |
-          gh issue comment ${{ github.event.issue.number }} --body ":wave: @${{ github.event.issue.user.login }}, this issue was closed automatically because it was created without following an issue template. Please update the issue following the correct template for this issue. Once updated please reply to this issue so we can review and re-open. In the future, use the [issue templates](https://github.com/${{ github.repository }}/issues/new/choose) instead of creating your own."
-          gh issue close ${{ github.event.issue.number }} --reason "not planned"
-        env:
-          GH_TOKEN: ${{ github.token }}

.vscode/launch.json

@@ -10,7 +10,7 @@
       "request": "launch",
       "preLaunchTask": "build dotnet",
       // If you have changed target frameworks, make sure to update the program path.
-      "program": "${workspaceFolder}/_output/net10.0/Sonarr",
+      "program": "${workspaceFolder}/_output/net8.0/Sonarr",
       "args": [],
       "cwd": "${workspaceFolder}",
       // For more information about the 'console' field, see https://aka.ms/VSCode-CS-LaunchJson-Console

frontend/src/Activity/Blocklist/Blocklist.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { setQueueOptions } from 'Activity/Queue/queueOptionsStore';
-import { SelectProvider, useSelect } from 'App/Select/SelectContext';
-import CommandNames from 'Commands/CommandNames';
-import { useCommandExecuting, useExecuteCommand } from 'Commands/useCommands';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SelectProvider } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
+import * as commandNames from 'Commands/commandNames';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
@@ -16,77 +16,94 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { useCustomFiltersList } from 'Filters/useCustomFilters';
+import usePaging from 'Components/Table/usePaging';
+import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import useSelectState from 'Helpers/Hooks/useSelectState';
 import { align, icons, kinds } from 'Helpers/Props';
-import { SortDirection } from 'Helpers/Props/sortDirections';
-import BlockListModel from 'typings/Blocklist';
+import {
+  clearBlocklist,
+  fetchBlocklist,
+  gotoBlocklistPage,
+  removeBlocklistItems,
+  setBlocklistFilter,
+  setBlocklistSort,
+  setBlocklistTableOption,
+} from 'Store/Actions/blocklistActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { CheckInputChanged } from 'typings/inputs';
+import { SelectStateInputProps } from 'typings/props';
 import { TableOptionsChangePayload } from 'typings/Table';
 import {
   registerPagePopulator,
   unregisterPagePopulator,
 } from 'Utilities/pagePopulator';
 import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import BlocklistFilterModal from './BlocklistFilterModal';
-import {
-  setBlocklistOption,
-  setBlocklistSort,
-  useBlocklistOptions,
-} from './blocklistOptionsStore';
 import BlocklistRow from './BlocklistRow';
-import useBlocklist, {
-  useFilters,
-  useRemoveBlocklistItems,
-} from './useBlocklist';
 
-function BlocklistContent() {
+function Blocklist() {
+  const requestCurrentPage = useCurrentPage();
+
   const {
-    records,
+    isFetching,
+    isPopulated,
+    error,
+    items,
+    columns,
+    selectedFilterKey,
+    filters,
+    sortKey,
+    sortDirection,
+    page,
+    pageSize,
     totalPages,
     totalRecords,
-    isFetching,
-    isFetched,
-    isLoading,
-    error,
-    page,
-    goToPage,
-    refetch,
-  } = useBlocklist();
+    isRemoving,
+  } = useSelector((state: AppState) => state.blocklist);
 
-  const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
-    useBlocklistOptions();
-
-  const filters = useFilters();
-  const { isRemoving, removeBlocklistItems } = useRemoveBlocklistItems();
-
-  const customFilters = useCustomFiltersList('blocklist');
-  const executeCommand = useExecuteCommand();
-  const isClearingBlocklistExecuting = useCommandExecuting(
-    CommandNames.ClearBlocklist
+  const customFilters = useSelector(createCustomFiltersSelector('blocklist'));
+  const isClearingBlocklistExecuting = useSelector(
+    createCommandExecutingSelector(commandNames.CLEAR_BLOCKLIST)
   );
+  const dispatch = useDispatch();
 
   const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
     useState(false);
   const [isConfirmClearModalOpen, setIsConfirmClearModalOpen] = useState(false);
 
-  const {
-    allSelected,
-    allUnselected,
-    anySelected,
-    getSelectedIds,
-    selectAll,
-    unselectAll,
-  } = useSelect<BlockListModel>();
+  const [selectState, setSelectState] = useSelectState();
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const wasClearingBlocklistExecuting = usePrevious(
+    isClearingBlocklistExecuting
+  );
 
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      if (value) {
-        selectAll();
-      } else {
-        unselectAll();
-      }
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
     },
-    [selectAll, unselectAll]
+    [items, setSelectState]
+  );
+
+  const handleSelectedChange = useCallback(
+    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
   );
 
   const handleRemoveSelectedPress = useCallback(() => {
@@ -94,9 +111,9 @@ function BlocklistContent() {
   }, [setIsConfirmRemoveModalOpen]);
 
   const handleRemoveSelectedConfirmed = useCallback(() => {
-    removeBlocklistItems({ ids: getSelectedIds() });
+    dispatch(removeBlocklistItems({ ids: selectedIds }));
     setIsConfirmRemoveModalOpen(false);
-  }, [getSelectedIds, setIsConfirmRemoveModalOpen, removeBlocklistItems]);
+  }, [selectedIds, setIsConfirmRemoveModalOpen, dispatch]);
 
   const handleConfirmRemoveModalClose = useCallback(() => {
     setIsConfirmRemoveModalOpen(false);
@@ -107,47 +124,66 @@ function BlocklistContent() {
   }, [setIsConfirmClearModalOpen]);
 
   const handleClearBlocklistConfirmed = useCallback(() => {
-    executeCommand({ name: CommandNames.ClearBlocklist }, () => {
-      goToPage(1);
-    });
+    dispatch(executeCommand({ name: commandNames.CLEAR_BLOCKLIST }));
     setIsConfirmClearModalOpen(false);
-  }, [setIsConfirmClearModalOpen, goToPage, executeCommand]);
+  }, [setIsConfirmClearModalOpen, dispatch]);
 
   const handleConfirmClearModalClose = useCallback(() => {
     setIsConfirmClearModalOpen(false);
   }, [setIsConfirmClearModalOpen]);
 
+  const {
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  } = usePaging({
+    page,
+    totalPages,
+    gotoPage: gotoBlocklistPage,
+  });
+
   const handleFilterSelect = useCallback(
     (selectedFilterKey: string | number) => {
-      setBlocklistOption('selectedFilterKey', selectedFilterKey);
+      dispatch(setBlocklistFilter({ selectedFilterKey }));
     },
-    []
+    [dispatch]
   );
 
   const handleSortPress = useCallback(
-    (sortKey: string, sortDirection?: SortDirection) => {
-      setBlocklistSort({
-        sortKey,
-        sortDirection,
-      });
+    (sortKey: string) => {
+      dispatch(setBlocklistSort({ sortKey }));
     },
-    []
+    [dispatch]
   );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
-      setQueueOptions(payload);
+      dispatch(setBlocklistTableOption(payload));
 
       if (payload.pageSize) {
-        goToPage(1);
+        dispatch(gotoBlocklistPage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
+  useEffect(() => {
+    if (requestCurrentPage) {
+      dispatch(fetchBlocklist());
+    } else {
+      dispatch(gotoBlocklistPage({ page: 1 }));
+    }
+
+    return () => {
+      dispatch(clearBlocklist());
+    };
+  }, [requestCurrentPage, dispatch]);
+
   useEffect(() => {
     const repopulate = () => {
-      refetch();
+      dispatch(fetchBlocklist());
     };
 
     registerPagePopulator(repopulate);
@@ -155,129 +191,137 @@ function BlocklistContent() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [refetch]);
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (wasClearingBlocklistExecuting && !isClearingBlocklistExecuting) {
+      dispatch(gotoBlocklistPage({ page: 1 }));
+    }
+  }, [isClearingBlocklistExecuting, wasClearingBlocklistExecuting, dispatch]);
 
   return (
-    <PageContent title={translate('Blocklist')}>
-      <PageToolbar>
-        <PageToolbarSection>
-          <PageToolbarButton
-            label={translate('RemoveSelected')}
-            iconName={icons.REMOVE}
-            isDisabled={!anySelected}
-            isSpinning={isRemoving}
-            onPress={handleRemoveSelectedPress}
-          />
-
-          <PageToolbarButton
-            label={translate('Clear')}
-            iconName={icons.CLEAR}
-            isDisabled={!records.length}
-            isSpinning={isClearingBlocklistExecuting}
-            onPress={handleClearBlocklistPress}
-          />
-        </PageToolbarSection>
-
-        <PageToolbarSection alignContent={align.RIGHT}>
-          <TableOptionsModalWrapper
-            columns={columns}
-            pageSize={pageSize}
-            onTableOptionChange={handleTableOptionChange}
-          >
+    <SelectProvider items={items}>
+      <PageContent title={translate('Blocklist')}>
+        <PageToolbar>
+          <PageToolbarSection>
             <PageToolbarButton
-              label={translate('Options')}
-              iconName={icons.TABLE}
+              label={translate('RemoveSelected')}
+              iconName={icons.REMOVE}
+              isDisabled={!selectedIds.length}
+              isSpinning={isRemoving}
+              onPress={handleRemoveSelectedPress}
             />
-          </TableOptionsModalWrapper>
 
-          <FilterMenu
-            alignMenu={align.RIGHT}
-            selectedFilterKey={selectedFilterKey}
-            filters={filters}
-            customFilters={customFilters}
-            filterModalConnectorComponent={BlocklistFilterModal}
-            onFilterSelect={handleFilterSelect}
-          />
-        </PageToolbarSection>
-      </PageToolbar>
+            <PageToolbarButton
+              label={translate('Clear')}
+              iconName={icons.CLEAR}
+              isDisabled={!items.length}
+              isSpinning={isClearingBlocklistExecuting}
+              onPress={handleClearBlocklistPress}
+            />
+          </PageToolbarSection>
 
-      <PageContentBody>
-        {isLoading && !isFetched ? <LoadingIndicator /> : null}
-
-        {!isLoading && !!error ? (
-          <Alert kind={kinds.DANGER}>{translate('BlocklistLoadError')}</Alert>
-        ) : null}
-
-        {isFetched && !error && !records.length ? (
-          <Alert kind={kinds.INFO}>
-            {selectedFilterKey === 'all'
-              ? translate('NoBlocklistItems')
-              : translate('BlocklistFilterHasNoItems')}
-          </Alert>
-        ) : null}
-
-        {isFetched && !error && !!records.length ? (
-          <div>
-            <Table
-              selectAll={true}
-              allSelected={allSelected}
-              allUnselected={allUnselected}
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
               columns={columns}
               pageSize={pageSize}
-              sortKey={sortKey}
-              sortDirection={sortDirection}
               onTableOptionChange={handleTableOptionChange}
-              onSelectAllChange={handleSelectAllChange}
-              onSortPress={handleSortPress}
             >
-              <TableBody>
-                {records.map((item) => {
-                  return (
-                    <BlocklistRow key={item.id} columns={columns} {...item} />
-                  );
-                })}
-              </TableBody>
-            </Table>
-            <TablePager
-              page={page}
-              totalPages={totalPages}
-              totalRecords={totalRecords}
-              isFetching={isFetching}
-              onPageSelect={goToPage}
+              <PageToolbarButton
+                label={translate('Options')}
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              filterModalConnectorComponent={BlocklistFilterModal}
+              onFilterSelect={handleFilterSelect}
             />
-          </div>
-        ) : null}
-      </PageContentBody>
+          </PageToolbarSection>
+        </PageToolbar>
 
-      <ConfirmModal
-        isOpen={isConfirmRemoveModalOpen}
-        kind={kinds.DANGER}
-        title={translate('RemoveSelected')}
-        message={translate('RemoveSelectedBlocklistMessageText')}
-        confirmLabel={translate('RemoveSelected')}
-        onConfirm={handleRemoveSelectedConfirmed}
-        onCancel={handleConfirmRemoveModalClose}
-      />
+        <PageContentBody>
+          {isFetching && !isPopulated ? <LoadingIndicator /> : null}
 
-      <ConfirmModal
-        isOpen={isConfirmClearModalOpen}
-        kind={kinds.DANGER}
-        title={translate('ClearBlocklist')}
-        message={translate('ClearBlocklistMessageText')}
-        confirmLabel={translate('Clear')}
-        onConfirm={handleClearBlocklistConfirmed}
-        onCancel={handleConfirmClearModalClose}
-      />
-    </PageContent>
-  );
-}
+          {!isFetching && !!error ? (
+            <Alert kind={kinds.DANGER}>{translate('BlocklistLoadError')}</Alert>
+          ) : null}
 
-function Blocklist() {
-  const { records } = useBlocklist();
+          {isPopulated && !error && !items.length ? (
+            <Alert kind={kinds.INFO}>
+              {selectedFilterKey === 'all'
+                ? translate('NoBlocklistItems')
+                : translate('BlocklistFilterHasNoItems')}
+            </Alert>
+          ) : null}
 
-  return (
-    <SelectProvider<BlockListModel> items={records}>
-      <BlocklistContent />
+          {isPopulated && !error && !!items.length ? (
+            <div>
+              <Table
+                selectAll={true}
+                allSelected={allSelected}
+                allUnselected={allUnselected}
+                columns={columns}
+                pageSize={pageSize}
+                sortKey={sortKey}
+                sortDirection={sortDirection}
+                onTableOptionChange={handleTableOptionChange}
+                onSelectAllChange={handleSelectAllChange}
+                onSortPress={handleSortPress}
+              >
+                <TableBody>
+                  {items.map((item) => {
+                    return (
+                      <BlocklistRow
+                        key={item.id}
+                        isSelected={selectedState[item.id] || false}
+                        columns={columns}
+                        {...item}
+                        onSelectedChange={handleSelectedChange}
+                      />
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              <TablePager
+                page={page}
+                totalPages={totalPages}
+                totalRecords={totalRecords}
+                isFetching={isFetching}
+                onFirstPagePress={handleFirstPagePress}
+                onPreviousPagePress={handlePreviousPagePress}
+                onNextPagePress={handleNextPagePress}
+                onLastPagePress={handleLastPagePress}
+                onPageSelect={handlePageSelect}
+              />
+            </div>
+          ) : null}
+        </PageContentBody>
+
+        <ConfirmModal
+          isOpen={isConfirmRemoveModalOpen}
+          kind={kinds.DANGER}
+          title={translate('RemoveSelected')}
+          message={translate('RemoveSelectedBlocklistMessageText')}
+          confirmLabel={translate('RemoveSelected')}
+          onConfirm={handleRemoveSelectedConfirmed}
+          onCancel={handleConfirmRemoveModalClose}
+        />
+
+        <ConfirmModal
+          isOpen={isConfirmClearModalOpen}
+          kind={kinds.DANGER}
+          title={translate('ClearBlocklist')}
+          message={translate('ClearBlocklistMessageText')}
+          confirmLabel={translate('Clear')}
+          onConfirm={handleClearBlocklistConfirmed}
+          onCancel={handleConfirmClearModalClose}
+        />
+      </PageContent>
     </SelectProvider>
   );
 }

frontend/src/Activity/Blocklist/BlocklistDetailsModal.tsx

@@ -16,19 +16,13 @@ interface BlocklistDetailsModalProps {
   protocol: DownloadProtocol;
   indexer?: string;
   message?: string;
-  source?: string;
   onModalClose: () => void;
 }
 
-function BlocklistDetailsModal({
-  isOpen,
-  sourceTitle,
-  protocol,
-  indexer,
-  message,
-  source,
-  onModalClose,
-}: BlocklistDetailsModalProps) {
+function BlocklistDetailsModal(props: BlocklistDetailsModalProps) {
+  const { isOpen, sourceTitle, protocol, indexer, message, onModalClose } =
+    props;
+
   return (
     <Modal isOpen={isOpen} onModalClose={onModalClose}>
       <ModalContent onModalClose={onModalClose}>
@@ -56,9 +50,6 @@ function BlocklistDetailsModal({
                 data={message}
               />
             ) : null}
-            {source ? (
-              <DescriptionListItem title={translate('Source')} data={source} />
-            ) : null}
           </DescriptionList>
         </ModalBody>
 

frontend/src/Activity/Blocklist/BlocklistFilterModal.tsx

@@ -1,26 +1,50 @@
 import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
-import { setBlocklistOption } from './blocklistOptionsStore';
-import useBlocklist, { FILTER_BUILDER } from './useBlocklist';
+import { setBlocklistFilter } from 'Store/Actions/blocklistActions';
+
+function createBlocklistSelector() {
+  return createSelector(
+    (state: AppState) => state.blocklist.items,
+    (blocklistItems) => {
+      return blocklistItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.blocklist.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
 
 type BlocklistFilterModalProps = FilterModalProps<History>;
 
 export default function BlocklistFilterModal(props: BlocklistFilterModalProps) {
-  const { records } = useBlocklist();
+  const sectionItems = useSelector(createBlocklistSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+  const customFilterType = 'blocklist';
+
+  const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
-      setBlocklistOption('selectedFilterKey', selectedFilterKey);
+    (payload: unknown) => {
+      dispatch(setBlocklistFilter(payload));
     },
-    []
+    [dispatch]
   );
 
   return (
     <FilterModal
       {...props}
-      sectionItems={records}
-      filterBuilderProps={FILTER_BUILDER}
-      customFilterType="blocklist"
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
+      customFilterType={customFilterType}
       dispatchSetFilter={dispatchSetFilter}
     />
   );

frontend/src/Activity/Blocklist/BlocklistRow.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { useSelect } from 'App/Select/SelectContext';
+import { useDispatch } from 'react-redux';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -11,44 +11,40 @@ import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds } from 'Helpers/Props';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
-import { useSingleSeries } from 'Series/useSeries';
+import useSeries from 'Series/useSeries';
+import { removeBlocklistItem } from 'Store/Actions/blocklistActions';
 import Blocklist from 'typings/Blocklist';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
 import BlocklistDetailsModal from './BlocklistDetailsModal';
-import { useRemoveBlocklistItem } from './useBlocklist';
 import styles from './BlocklistRow.css';
 
 interface BlocklistRowProps extends Blocklist {
+  isSelected: boolean;
   columns: Column[];
+  onSelectedChange: (options: SelectStateInputProps) => void;
 }
 
-function BlocklistRow({
-  id,
-  seriesId,
-  sourceTitle,
-  languages,
-  quality,
-  customFormats,
-  date,
-  protocol,
-  indexer,
-  message,
-  source,
-  columns,
-}: BlocklistRowProps) {
-  const series = useSingleSeries(seriesId);
-  const { isRemoving, removeBlocklistItem } = useRemoveBlocklistItem(id);
-  const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
-  const { toggleSelected, useIsSelected } = useSelect<Blocklist>();
-  const isSelected = useIsSelected(id);
+function BlocklistRow(props: BlocklistRowProps) {
+  const {
+    id,
+    seriesId,
+    sourceTitle,
+    languages,
+    quality,
+    customFormats,
+    date,
+    protocol,
+    indexer,
+    message,
+    isSelected,
+    columns,
+    onSelectedChange,
+  } = props;
 
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
-      toggleSelected({ id, isSelected: value, shiftKey });
-    },
-    [toggleSelected]
-  );
+  const series = useSeries(seriesId);
+  const dispatch = useDispatch();
+  const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
 
   const handleDetailsPress = useCallback(() => {
     setIsDetailsModalOpen(true);
@@ -59,8 +55,8 @@ function BlocklistRow({
   }, [setIsDetailsModalOpen]);
 
   const handleRemovePress = useCallback(() => {
-    removeBlocklistItem();
-  }, [removeBlocklistItem]);
+    dispatch(removeBlocklistItem({ id }));
+  }, [id, dispatch]);
 
   if (!series) {
     return null;
@@ -71,7 +67,7 @@ function BlocklistRow({
       <TableSelectCell
         id={id}
         isSelected={isSelected}
-        onSelectedChange={handleSelectedChange}
+        onSelectedChange={onSelectedChange}
       />
 
       {columns.map((column) => {
@@ -143,7 +139,6 @@ function BlocklistRow({
                 title={translate('RemoveFromBlocklist')}
                 name={icons.REMOVE}
                 kind={kinds.DANGER}
-                isSpinning={isRemoving}
                 onPress={handleRemovePress}
               />
             </TableRowCell>
@@ -159,7 +154,6 @@ function BlocklistRow({
         protocol={protocol}
         indexer={indexer}
         message={message}
-        source={source}
         onModalClose={handleDetailsModalClose}
       />
     </TableRow>

frontend/src/Activity/Blocklist/blocklistOptionsStore.ts

@@ -1,72 +0,0 @@
-import {
-  createOptionsStore,
-  PageableOptions,
-} from 'Helpers/Hooks/useOptionsStore';
-import translate from 'Utilities/String/translate';
-
-export type BlocklistOptions = PageableOptions;
-
-const { useOptions, useOption, setOptions, setOption, setSort } =
-  createOptionsStore<BlocklistOptions>('blocklist_options', () => {
-    return {
-      pageSize: 20,
-      selectedFilterKey: 'all',
-      sortKey: 'time',
-      sortDirection: 'descending',
-      columns: [
-        {
-          name: 'series.sortTitle',
-          label: () => translate('SeriesTitle'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'sourceTitle',
-          label: () => translate('SourceTitle'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'languages',
-          label: () => translate('Languages'),
-          isVisible: false,
-        },
-        {
-          name: 'quality',
-          label: () => translate('Quality'),
-          isVisible: true,
-        },
-        {
-          name: 'customFormats',
-          label: () => translate('Formats'),
-          isSortable: false,
-          isVisible: true,
-        },
-        {
-          name: 'date',
-          label: () => translate('Date'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'indexer',
-          label: () => translate('Indexer'),
-          isSortable: true,
-          isVisible: false,
-        },
-        {
-          name: 'actions',
-          label: '',
-          columnLabel: () => translate('Actions'),
-          isVisible: true,
-          isModifiable: false,
-        },
-      ],
-    };
-  });
-
-export const useBlocklistOptions = useOptions;
-export const setBlocklistOptions = setOptions;
-export const useBlocklistOption = useOption;
-export const setBlocklistOption = setOption;
-export const setBlocklistSort = setSort;

frontend/src/Activity/Blocklist/useBlocklist.ts

@@ -1,113 +0,0 @@
-import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useMemo } from 'react';
-import { Filter, FilterBuilderProp } from 'Filters/Filter';
-import { useCustomFiltersList } from 'Filters/useCustomFilters';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import usePage from 'Helpers/Hooks/usePage';
-import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
-import { filterBuilderValueTypes } from 'Helpers/Props';
-import Blocklist from 'typings/Blocklist';
-import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
-import translate from 'Utilities/String/translate';
-import { useBlocklistOptions } from './blocklistOptionsStore';
-
-interface BulkBlocklistData {
-  ids: number[];
-}
-
-export const FILTERS: Filter[] = [
-  {
-    key: 'all',
-    label: () => translate('All'),
-    filters: [],
-  },
-];
-
-export const FILTER_BUILDER: FilterBuilderProp<Blocklist>[] = [
-  {
-    name: 'seriesIds',
-    label: () => translate('Series'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.SERIES,
-  },
-  {
-    name: 'protocols',
-    label: () => translate('Protocol'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.PROTOCOL,
-  },
-];
-
-const useBlocklist = () => {
-  const { page, goToPage } = usePage('blocklist');
-  const { pageSize, selectedFilterKey, sortKey, sortDirection } =
-    useBlocklistOptions();
-  const customFilters = useCustomFiltersList('blocklist');
-
-  const filters = useMemo(() => {
-    return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
-  }, [selectedFilterKey, customFilters]);
-
-  const { refetch, ...query } = usePagedApiQuery<Blocklist>({
-    path: '/blocklist',
-    page,
-    pageSize,
-    filters,
-    sortKey,
-    sortDirection,
-    queryOptions: {
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  return {
-    ...query,
-    goToPage,
-    page,
-    refetch,
-  };
-};
-
-export default useBlocklist;
-
-export const useFilters = () => {
-  return FILTERS;
-};
-
-export const useRemoveBlocklistItem = (id: number) => {
-  const queryClient = useQueryClient();
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/blocklist/${id}`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/blocklist'] });
-      },
-    },
-  });
-
-  return {
-    removeBlocklistItem: mutate,
-    isRemoving: isPending,
-  };
-};
-
-export const useRemoveBlocklistItems = () => {
-  const queryClient = useQueryClient();
-
-  const { mutate, isPending } = useApiMutation<unknown, BulkBlocklistData>({
-    path: `/blocklist/bulk`,
-    method: 'DELETE',
-    mutationOptions: {
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/blocklist'] });
-      },
-    },
-  });
-
-  return {
-    removeBlocklistItems: mutate,
-    isRemoving: isPending,
-  };
-};

frontend/src/Activity/History/Details/HistoryDetails.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
 import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
 import Link from 'Components/Link/Link';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import {
   DownloadFailedHistory,
   DownloadFolderImportedHistory,
@@ -32,7 +33,9 @@ interface HistoryDetailsProps {
 function HistoryDetails(props: HistoryDetailsProps) {
   const { eventType, sourceTitle, data, downloadId } = props;
 
-  const { shortDateFormat, timeFormat } = useUiSettingsValues();
+  const { shortDateFormat, timeFormat } = useSelector(
+    createUISettingsSelector()
+  );
 
   if (eventType === 'grabbed') {
     const {
@@ -171,7 +174,7 @@ function HistoryDetails(props: HistoryDetailsProps) {
   }
 
   if (eventType === 'downloadFailed') {
-    const { indexer, message, source } = data as DownloadFailedHistory;
+    const { message, indexer } = data as DownloadFailedHistory;
 
     return (
       <DescriptionList>
@@ -192,10 +195,6 @@ function HistoryDetails(props: HistoryDetailsProps) {
         {message ? (
           <DescriptionListItem title={translate('Message')} data={message} />
         ) : null}
-
-        {source ? (
-          <DescriptionListItem title={translate('Source')} data={source} />
-        ) : null}
       </DescriptionList>
     );
   }

frontend/src/Activity/History/Details/HistoryDetailsModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React from 'react';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import Modal from 'Components/Modal/Modal';
@@ -9,7 +9,6 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
 import { HistoryData, HistoryEventType } from 'typings/History';
 import translate from 'Utilities/String/translate';
-import { useMarkAsFailed } from '../useHistory';
 import HistoryDetails from './HistoryDetails';
 import styles from './HistoryDetailsModal.css';
 
@@ -34,32 +33,26 @@ function getHeaderTitle(eventType: HistoryEventType) {
 
 interface HistoryDetailsModalProps {
   isOpen: boolean;
-  id: number;
   eventType: HistoryEventType;
   sourceTitle: string;
   data: HistoryData;
   downloadId?: string;
+  isMarkingAsFailed: boolean;
+  onMarkAsFailedPress: () => void;
   onModalClose: () => void;
 }
 
 function HistoryDetailsModal(props: HistoryDetailsModalProps) {
-  const { isOpen, id, eventType, sourceTitle, data, downloadId, onModalClose } =
-    props;
-
-  const { markAsFailed, isMarkingAsFailed, markAsFailedError } =
-    useMarkAsFailed(id);
-
-  const wasMarkingAsFailed = useRef(isMarkingAsFailed);
-
-  const handleMarkAsFailedPress = useCallback(() => {
-    markAsFailed();
-  }, [markAsFailed]);
-
-  useEffect(() => {
-    if (wasMarkingAsFailed && !isMarkingAsFailed && !markAsFailedError) {
-      onModalClose();
-    }
-  }, [wasMarkingAsFailed, isMarkingAsFailed, markAsFailedError, onModalClose]);
+  const {
+    isOpen,
+    eventType,
+    sourceTitle,
+    data,
+    downloadId,
+    isMarkingAsFailed = false,
+    onMarkAsFailedPress,
+    onModalClose,
+  } = props;
 
   return (
     <Modal isOpen={isOpen} onModalClose={onModalClose}>
@@ -81,7 +74,7 @@ function HistoryDetailsModal(props: HistoryDetailsModalProps) {
               className={styles.markAsFailedButton}
               kind={kinds.DANGER}
               isSpinning={isMarkingAsFailed}
-              onPress={handleMarkAsFailedPress}
+              onPress={onMarkAsFailedPress}
             >
               {translate('MarkAsFailed')}
             </SpinnerButton>

frontend/src/Activity/History/History.tsx

@@ -1,4 +1,6 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
@@ -11,10 +13,21 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import useEpisodes from 'Episode/useEpisodes';
-import { useCustomFiltersList } from 'Filters/useCustomFilters';
+import usePaging from 'Components/Table/usePaging';
+import createEpisodesFetchingSelector from 'Episode/createEpisodesFetchingSelector';
+import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
 import { align, icons, kinds } from 'Helpers/Props';
-import { SortDirection } from 'Helpers/Props/sortDirections';
+import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
+import { clearEpisodeFiles } from 'Store/Actions/episodeFileActions';
+import {
+  clearHistory,
+  fetchHistory,
+  gotoHistoryPage,
+  setHistoryFilter,
+  setHistorySort,
+  setHistoryTableOption,
+} from 'Store/Actions/historyActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import HistoryItem from 'typings/History';
 import { TableOptionsChangePayload } from 'typings/Table';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
@@ -24,86 +37,100 @@ import {
 } from 'Utilities/pagePopulator';
 import translate from 'Utilities/String/translate';
 import HistoryFilterModal from './HistoryFilterModal';
-import {
-  setHistoryOption,
-  setHistoryOptions,
-  setHistorySort,
-  useHistoryOptions,
-} from './historyOptionsStore';
 import HistoryRow from './HistoryRow';
-import useHistory, { useFilters } from './useHistory';
 
 function History() {
+  const requestCurrentPage = useCurrentPage();
+
   const {
-    records,
+    isFetching,
+    isPopulated,
+    error,
+    items,
+    columns,
+    selectedFilterKey,
+    filters,
+    sortKey,
+    sortDirection,
+    page,
+    pageSize,
     totalPages,
     totalRecords,
-    error,
-    isFetching,
-    isFetched,
-    isLoading,
-    page,
-    goToPage,
-    refetch,
-  } = useHistory();
+  } = useSelector((state: AppState) => state.history);
 
-  const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
-    useHistoryOptions();
+  const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
+    useSelector(createEpisodesFetchingSelector());
+  const customFilters = useSelector(createCustomFiltersSelector('history'));
+  const dispatch = useDispatch();
 
-  const episodeIds = useMemo(() => {
-    return selectUniqueIds<HistoryItem, number>(records, 'episodeId');
-  }, [records]);
+  const isFetchingAny = isFetching || isEpisodesFetching;
+  const isAllPopulated = isPopulated && (isEpisodesPopulated || !items.length);
+  const hasError = error || episodesError;
 
   const {
-    isFetching: isEpisodesFetching,
-    isFetched: isEpisodesFetched,
-    error: episodesError,
-  } = useEpisodes({ episodeIds });
-
-  const filters = useFilters();
-
-  const customFilters = useCustomFiltersList('history');
-
-  const isFetchingAny = isLoading || isEpisodesFetching;
-  const isAllPopulated = isFetched && (isEpisodesFetched || !records.length);
-  const hasError = error || episodesError;
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  } = usePaging({
+    page,
+    totalPages,
+    gotoPage: gotoHistoryPage,
+  });
 
   const handleFilterSelect = useCallback(
     (selectedFilterKey: string | number) => {
-      setHistoryOption('selectedFilterKey', selectedFilterKey);
+      dispatch(setHistoryFilter({ selectedFilterKey }));
     },
-    []
+    [dispatch]
   );
 
   const handleSortPress = useCallback(
-    (sortKey: string, sortDirection?: SortDirection) => {
-      setHistorySort({
-        sortKey,
-        sortDirection,
-      });
+    (sortKey: string) => {
+      dispatch(setHistorySort({ sortKey }));
     },
-    []
+    [dispatch]
   );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
-      setHistoryOptions(payload);
+      dispatch(setHistoryTableOption(payload));
 
       if (payload.pageSize) {
-        goToPage(1);
+        dispatch(gotoHistoryPage({ page: 1 }));
       }
     },
-    [goToPage]
+    [dispatch]
   );
 
-  const handleRefreshPress = useCallback(() => {
-    goToPage(1);
-    refetch();
-  }, [goToPage, refetch]);
+  useEffect(() => {
+    if (requestCurrentPage) {
+      dispatch(fetchHistory());
+    } else {
+      dispatch(gotoHistoryPage({ page: 1 }));
+    }
+
+    return () => {
+      dispatch(clearHistory());
+      dispatch(clearEpisodes());
+      dispatch(clearEpisodeFiles());
+    };
+  }, [requestCurrentPage, dispatch]);
+
+  useEffect(() => {
+    const episodeIds = selectUniqueIds<HistoryItem, number>(items, 'episodeId');
+
+    if (episodeIds.length) {
+      dispatch(fetchEpisodes({ episodeIds }));
+    } else {
+      dispatch(clearEpisodes());
+    }
+  }, [items, dispatch]);
 
   useEffect(() => {
     const repopulate = () => {
-      refetch();
+      dispatch(fetchHistory());
     };
 
     registerPagePopulator(repopulate);
@@ -111,7 +138,7 @@ function History() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [refetch]);
+  }, [dispatch]);
 
   return (
     <PageContent title={translate('History')}>
@@ -121,7 +148,7 @@ function History() {
             label={translate('Refresh')}
             iconName={icons.REFRESH}
             isSpinning={isFetching}
-            onPress={handleRefreshPress}
+            onPress={handleFirstPagePress}
           />
         </PageToolbarSection>
 
@@ -159,12 +186,12 @@ function History() {
           // If history isPopulated and it's empty show no history found and don't
           // wait for the episodes to populate because they are never coming.
 
-          isFetched && !hasError && !records.length ? (
+          isPopulated && !hasError && !items.length ? (
             <Alert kind={kinds.INFO}>{translate('NoHistoryFound')}</Alert>
           ) : null
         }
 
-        {isAllPopulated && !hasError && records.length ? (
+        {isAllPopulated && !hasError && items.length ? (
           <div>
             <Table
               columns={columns}
@@ -175,7 +202,7 @@ function History() {
               onSortPress={handleSortPress}
             >
               <TableBody>
-                {records.map((item) => {
+                {items.map((item) => {
                   return (
                     <HistoryRow key={item.id} columns={columns} {...item} />
                   );
@@ -188,7 +215,11 @@ function History() {
               totalPages={totalPages}
               totalRecords={totalRecords}
               isFetching={isFetching}
-              onPageSelect={goToPage}
+              onFirstPagePress={handleFirstPagePress}
+              onPreviousPagePress={handlePreviousPagePress}
+              onNextPagePress={handleNextPagePress}
+              onLastPagePress={handleLastPagePress}
+              onPageSelect={handlePageSelect}
             />
           </div>
         ) : null}

frontend/src/Activity/History/HistoryFilterModal.tsx

@@ -1,25 +1,48 @@
 import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
-import { setHistoryOption } from './historyOptionsStore';
-import useHistory, { FILTER_BUILDER } from './useHistory';
+import { setHistoryFilter } from 'Store/Actions/historyActions';
+
+function createHistorySelector() {
+  return createSelector(
+    (state: AppState) => state.history.items,
+    (queueItems) => {
+      return queueItems;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.history.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
 
 type HistoryFilterModalProps = FilterModalProps<History>;
 
 export default function HistoryFilterModal(props: HistoryFilterModalProps) {
-  const { records } = useHistory();
+  const sectionItems = useSelector(createHistorySelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
+
+  const dispatch = useDispatch();
 
   const dispatchSetFilter = useCallback(
-    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
-      setHistoryOption('selectedFilterKey', selectedFilterKey);
+    (payload: { selectedFilterKey: string | number }) => {
+      dispatch(setHistoryFilter(payload));
     },
-    []
+    [dispatch]
   );
 
   return (
     <FilterModal
       {...props}
-      sectionItems={records}
-      filterBuilderProps={FILTER_BUILDER}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
       customFilterType="history"
       dispatchSetFilter={dispatchSetFilter}
     />

frontend/src/Activity/History/HistoryRow.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -12,11 +13,13 @@ import EpisodeQuality from 'Episode/EpisodeQuality';
 import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
 import SeasonEpisodeNumber from 'Episode/SeasonEpisodeNumber';
 import useEpisode from 'Episode/useEpisode';
+import usePrevious from 'Helpers/Hooks/usePrevious';
 import { icons, tooltipPositions } from 'Helpers/Props';
 import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
-import { useSingleSeries } from 'Series/useSeries';
+import useSeries from 'Series/useSeries';
+import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
 import CustomFormat from 'typings/CustomFormat';
 import { HistoryData, HistoryEventType } from 'typings/History';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
@@ -58,10 +61,14 @@ function HistoryRow(props: HistoryRowProps) {
     date,
     data,
     downloadId,
+    isMarkingAsFailed = false,
+    markAsFailedError,
     columns,
   } = props;
 
-  const series = useSingleSeries(seriesId);
+  const wasMarkingAsFailed = usePrevious(isMarkingAsFailed);
+  const dispatch = useDispatch();
+  const series = useSeries(seriesId);
   const episode = useEpisode(episodeId, 'episodes');
 
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
@@ -74,6 +81,23 @@ function HistoryRow(props: HistoryRowProps) {
     setIsDetailsModalOpen(false);
   }, [setIsDetailsModalOpen]);
 
+  const handleMarkAsFailedPress = useCallback(() => {
+    dispatch(markAsFailed({ id }));
+  }, [id, dispatch]);
+
+  useEffect(() => {
+    if (wasMarkingAsFailed && !isMarkingAsFailed && !markAsFailedError) {
+      setIsDetailsModalOpen(false);
+      dispatch(fetchHistory());
+    }
+  }, [
+    wasMarkingAsFailed,
+    isMarkingAsFailed,
+    markAsFailedError,
+    setIsDetailsModalOpen,
+    dispatch,
+  ]);
+
   if (!series || !episode) {
     return null;
   }
@@ -230,12 +254,13 @@ function HistoryRow(props: HistoryRowProps) {
       })}
 
       <HistoryDetailsModal
-        id={id}
         isOpen={isDetailsModalOpen}
         eventType={eventType}
         sourceTitle={sourceTitle}
         data={data}
         downloadId={downloadId}
+        isMarkingAsFailed={isMarkingAsFailed}
+        onMarkAsFailedPress={handleMarkAsFailedPress}
         onModalClose={handleDetailsModalClose}
       />
     </TableRow>

frontend/src/Activity/History/historyOptionsStore.ts

@@ -1,109 +0,0 @@
-import React from 'react';
-import Icon from 'Components/Icon';
-import {
-  createOptionsStore,
-  PageableOptions,
-} from 'Helpers/Hooks/useOptionsStore';
-import { icons } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-
-export type HistoryOptions = PageableOptions;
-
-const { useOptions, useOption, setOptions, setOption, setSort } =
-  createOptionsStore<HistoryOptions>('history_options', () => {
-    return {
-      pageSize: 20,
-      selectedFilterKey: 'all',
-      sortKey: 'time',
-      sortDirection: 'descending',
-      columns: [
-        {
-          name: 'eventType',
-          label: '',
-          columnLabel: () => translate('EventType'),
-          isVisible: true,
-          isModifiable: false,
-        },
-        {
-          name: 'series.sortTitle',
-          label: () => translate('Series'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'episode',
-          label: () => translate('Episode'),
-          isVisible: true,
-        },
-        {
-          name: 'episodes.title',
-          label: () => translate('EpisodeTitle'),
-          isVisible: true,
-        },
-        {
-          name: 'languages',
-          label: () => translate('Languages'),
-          isVisible: false,
-        },
-        {
-          name: 'quality',
-          label: () => translate('Quality'),
-          isVisible: true,
-        },
-        {
-          name: 'customFormats',
-          label: () => translate('Formats'),
-          isSortable: false,
-          isVisible: true,
-        },
-        {
-          name: 'date',
-          label: () => translate('Date'),
-          isSortable: true,
-          isVisible: true,
-        },
-        {
-          name: 'downloadClient',
-          label: () => translate('DownloadClient'),
-          isVisible: false,
-        },
-        {
-          name: 'indexer',
-          label: () => translate('Indexer'),
-          isVisible: false,
-        },
-        {
-          name: 'releaseGroup',
-          label: () => translate('ReleaseGroup'),
-          isVisible: false,
-        },
-        {
-          name: 'sourceTitle',
-          label: () => translate('SourceTitle'),
-          isVisible: false,
-        },
-        {
-          name: 'customFormatScore',
-          columnLabel: () => translate('CustomFormatScore'),
-          label: React.createElement(Icon, {
-            name: icons.SCORE,
-            title: () => translate('CustomFormatScore'),
-          }),
-          isVisible: false,
-        },
-        {
-          name: 'details',
-          label: '',
-          columnLabel: () => translate('Details'),
-          isVisible: true,
-          isModifiable: false,
-        },
-      ],
-    };
-  });
-
-export const useHistoryOptions = useOptions;
-export const setHistoryOptions = setOptions;
-export const useHistoryOption = useOption;
-export const setHistoryOption = setOption;
-export const setHistorySort = setSort;

frontend/src/Activity/History/useEpisodeHistory.ts

@@ -1,20 +0,0 @@
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import History from 'typings/History';
-
-const DEFAULT_HISTORY: History[] = [];
-
-const useEpisodeHistory = (episodeId: number) => {
-  const { data, ...result } = useApiQuery<History[]>({
-    path: '/history/episode',
-    queryParams: {
-      episodeId,
-    },
-  });
-
-  return {
-    data: data ?? DEFAULT_HISTORY,
-    ...result,
-  };
-};
-
-export default useEpisodeHistory;

frontend/src/Activity/History/useHistory.ts

@@ -1,192 +0,0 @@
-import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useMemo, useState } from 'react';
-import { Filter, FilterBuilderProp } from 'Filters/Filter';
-import { useCustomFiltersList } from 'Filters/useCustomFilters';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import usePage from 'Helpers/Hooks/usePage';
-import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
-import { filterBuilderValueTypes } from 'Helpers/Props';
-import History from 'typings/History';
-import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
-import translate from 'Utilities/String/translate';
-import { useHistoryOptions } from './historyOptionsStore';
-
-export const FILTERS: Filter[] = [
-  {
-    key: 'all',
-    label: () => translate('All'),
-    filters: [],
-  },
-  {
-    key: 'grabbed',
-    label: () => translate('Grabbed'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '1',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'imported',
-    label: () => translate('Imported'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '3',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'failed',
-    label: () => translate('Failed'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '4',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'deleted',
-    label: () => translate('Deleted'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '5',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'renamed',
-    label: () => translate('Renamed'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '6',
-        type: 'equal',
-      },
-    ],
-  },
-  {
-    key: 'ignored',
-    label: () => translate('Ignored'),
-    filters: [
-      {
-        key: 'eventType',
-        value: '7',
-        type: 'equal',
-      },
-    ],
-  },
-];
-
-export const FILTER_BUILDER: FilterBuilderProp<History>[] = [
-  {
-    name: 'eventType',
-    label: () => translate('EventType'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.HISTORY_EVENT_TYPE,
-  },
-  {
-    name: 'seriesIds',
-    label: () => translate('Series'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.SERIES,
-  },
-  {
-    name: 'quality',
-    label: () => translate('Quality'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.QUALITY,
-  },
-  {
-    name: 'languages',
-    label: () => translate('Languages'),
-    type: 'contains',
-    valueType: filterBuilderValueTypes.LANGUAGE,
-  },
-];
-
-type HistoryType = 'episode' | 'series';
-
-const MARK_AS_FAILED_QUERY_KEYS: Record<HistoryType, string> = {
-  episode: '/history/episode',
-  series: '/history/series',
-} as const;
-
-const useHistory = () => {
-  const { page, goToPage } = usePage('history');
-  const { pageSize, selectedFilterKey, sortKey, sortDirection } =
-    useHistoryOptions();
-  const customFilters = useCustomFiltersList('history');
-
-  const filters = useMemo(() => {
-    return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
-  }, [selectedFilterKey, customFilters]);
-
-  const { refetch, ...query } = usePagedApiQuery<History>({
-    path: '/history',
-    page,
-    pageSize,
-    filters,
-    sortKey,
-    sortDirection,
-    queryOptions: {
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  const handleGoToPage = useCallback(
-    (page: number) => {
-      goToPage(page);
-    },
-    [goToPage]
-  );
-
-  return {
-    ...query,
-    goToPage: handleGoToPage,
-    page,
-    refetch,
-  };
-};
-
-export default useHistory;
-
-export const useFilters = () => {
-  return FILTERS;
-};
-
-export const useMarkAsFailed = (id: number, type?: HistoryType) => {
-  const queryClient = useQueryClient();
-  const [error, setError] = useState<string | null>(null);
-
-  const { mutate, isPending } = useApiMutation<unknown, void>({
-    path: `/history/failed/${id}`,
-    method: 'POST',
-    mutationOptions: {
-      onMutate: () => {
-        setError(null);
-      },
-      onSuccess: () => {
-        const queryKey = type ? MARK_AS_FAILED_QUERY_KEYS[type] : '/history';
-
-        queryClient.invalidateQueries({ queryKey: [queryKey] });
-      },
-      onError: () => {
-        setError('Error marking history item as failed');
-      },
-    },
-  });
-
-  return {
-    markAsFailed: mutate,
-    isMarkingAsFailed: isPending,
-    markAsFailedError: error,
-  };
-};

frontend/src/Activity/History/useSeriesHistory.ts

@@ -1,24 +0,0 @@
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import History from 'typings/History';
-
-const DEFAULT_HISTORY: History[] = [];
-
-const useSeriesHistory = (
-  seriesId: number,
-  seasonNumber: number | undefined
-) => {
-  const { data, ...result } = useApiQuery<History[]>({
-    path: '/history/series',
-    queryParams: {
-      seriesId,
-      seasonNumber,
-    },
-  });
-
-  return {
-    data: data ?? DEFAULT_HISTORY,
-    ...result,
-  };
-};
-
-export default useSeriesHistory;

frontend/src/Activity/Queue/Details/QueueDetailsProvider.tsx

@@ -1,9 +1,4 @@
-import React, {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useMemo,
-} from 'react';
+import React, { createContext, ReactNode, useContext, useMemo } from 'react';
 import useApiQuery from 'Helpers/Hooks/useApiQuery';
 import Queue from 'typings/Queue';
 
@@ -21,12 +16,16 @@ interface AllDetails {
 
 type QueueDetailsFilter = AllDetails | EpisodeDetails | SeriesDetails;
 
+interface QueueDetailsProps {
+  children: ReactNode;
+}
+
 const QueueDetailsContext = createContext<Queue[] | undefined>(undefined);
 
 export default function QueueDetailsProvider({
   children,
   ...filter
-}: PropsWithChildren<QueueDetailsFilter>) {
+}: QueueDetailsProps & QueueDetailsFilter) {
   const { data } = useApiQuery<Queue[]>({
     path: '/queue/details',
     queryParams: { ...filter },

frontend/src/Activity/Queue/Queue.tsx

@@ -6,9 +6,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { SelectProvider, useSelect } from 'App/Select/SelectContext';
-import CommandNames from 'Commands/CommandNames';
-import { useCommandExecuting, useExecuteCommand } from 'Commands/useCommands';
+import { useDispatch, useSelector } from 'react-redux';
+import * as commandNames from 'Commands/commandNames';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
@@ -22,13 +21,15 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import useEpisodes from 'Episode/useEpisodes';
-import { useCustomFiltersList } from 'Filters/useCustomFilters';
+import createEpisodesFetchingSelector from 'Episode/createEpisodesFetchingSelector';
+import useSelectState from 'Helpers/Hooks/useSelectState';
 import { align, icons, kinds } from 'Helpers/Props';
-import { SortDirection } from 'Helpers/Props/sortDirections';
-import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { CheckInputChanged } from 'typings/inputs';
-import QueueModel from 'typings/Queue';
+import { SelectStateInputProps } from 'typings/props';
 import { TableOptionsChangePayload } from 'typings/Table';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import {
@@ -36,11 +37,12 @@ import {
   unregisterPagePopulator,
 } from 'Utilities/pagePopulator';
 import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import QueueFilterModal from './QueueFilterModal';
+import QueueOptions from './QueueOptions';
 import {
   setQueueOption,
   setQueueOptions,
-  setQueueSort,
   useQueueOptions,
 } from './queueOptionsStore';
 import QueueRow from './QueueRow';
@@ -52,21 +54,28 @@ import useQueue, {
   useRemoveQueueItems,
 } from './useQueue';
 
-function QueueContent() {
-  const executeCommand = useExecuteCommand();
+const DEFAULT_DATA = {
+  records: [],
+  totalPages: 0,
+  totalRecords: 0,
+};
+
+function Queue() {
+  const dispatch = useDispatch();
 
   const {
-    records,
-    totalPages,
-    totalRecords,
+    data,
     error,
     isFetching,
+    isFetched,
     isLoading,
     page,
     goToPage,
     refetch,
   } = useQueue();
 
+  const { records, totalPages = 0, totalRecords } = data ?? DEFAULT_DATA;
+
   const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
     useQueueOptions();
 
@@ -76,30 +85,24 @@ function QueueContent() {
   const { isGrabbing, grabQueueItems } = useGrabQueueItems();
 
   const { count } = useQueueStatus();
+  const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
+    useSelector(createEpisodesFetchingSelector());
+  const customFilters = useSelector(createCustomFiltersSelector('queue'));
 
-  const episodeIds = useMemo(() => {
-    return selectUniqueIds<QueueModel, number>(records, 'episodeIds');
-  }, [records]);
-
-  const {
-    isFetching: isEpisodesFetching,
-    isFetched: isEpisodesFetched,
-    error: episodesError,
-  } = useEpisodes({ episodeIds });
-
-  const customFilters = useCustomFiltersList('queue');
-
-  const isRefreshMonitoredDownloadsExecuting = useCommandExecuting(
-    CommandNames.RefreshMonitoredDownloads
+  const isRefreshMonitoredDownloadsExecuting = useSelector(
+    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS)
   );
 
   const shouldBlockRefresh = useRef(false);
   const currentQueue = useRef<ReactElement | null>(null);
 
-  const { allSelected, allUnselected, selectAll, unselectAll, useSelectedIds } =
-    useSelect<QueueModel>();
+  const [selectState, setSelectState] = useSelectState();
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
 
-  const selectedIds = useSelectedIds();
   const isPendingSelected = useMemo(() => {
     return records.some((item) => {
       return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
@@ -109,16 +112,11 @@ function QueueContent() {
   const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
     useState(false);
 
-  const [isInteractiveImportDownloadIds, setIsInteractiveImportDownloadIds] =
-    useState<string[]>(() => []);
-
   const isRefreshing =
     isLoading || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting;
-
-  // Use isLoading over isFetched to avoid losing the table UI when switching pages
   const isAllPopulated =
-    !isLoading &&
-    (isEpisodesFetched ||
+    isFetched &&
+    (isEpisodesPopulated ||
       !records.length ||
       records.every((e) => !e.episodeIds?.length));
   const hasError = error || episodesError;
@@ -127,20 +125,34 @@ function QueueContent() {
 
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      if (value) {
-        selectAll();
-      } else {
-        unselectAll();
-      }
+      setSelectState({
+        type: value ? 'selectAll' : 'unselectAll',
+        items: records,
+      });
     },
-    [selectAll, unselectAll]
+    [records, setSelectState]
+  );
+
+  const handleSelectedChange = useCallback(
+    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items: records,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [records, setSelectState]
   );
 
   const handleRefreshPress = useCallback(() => {
-    executeCommand({
-      name: CommandNames.RefreshMonitoredDownloads,
-    });
-  }, [executeCommand]);
+    dispatch(
+      executeCommand({
+        name: commandNames.REFRESH_MONITORED_DOWNLOADS,
+      })
+    );
+  }, [dispatch]);
 
   const handleQueueRowModalOpenOrClose = useCallback((isOpen: boolean) => {
     shouldBlockRefresh.current = isOpen;
@@ -159,30 +171,12 @@ function QueueContent() {
     shouldBlockRefresh.current = false;
     removeQueueItems({ ids: selectedIds });
     setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, removeQueueItems]);
+  }, [selectedIds, setIsConfirmRemoveModalOpen, removeQueueItems]);
 
   const handleConfirmRemoveModalClose = useCallback(() => {
     shouldBlockRefresh.current = false;
     setIsConfirmRemoveModalOpen(false);
-  }, []);
-
-  const handleImportSelectedPress = useCallback(() => {
-    shouldBlockRefresh.current = true;
-    setIsInteractiveImportDownloadIds(
-      selectedIds
-        .map((id) => {
-          const item = records.find((i) => i.id === id);
-
-          return item?.downloadId;
-        })
-        .filter((id): id is string => !!id)
-    );
-  }, [records, selectedIds]);
-
-  const handleImportSelectedModalClose = useCallback(() => {
-    shouldBlockRefresh.current = false;
-    setIsInteractiveImportDownloadIds([]);
-  }, []);
+  }, [setIsConfirmRemoveModalOpen]);
 
   const handleFilterSelect = useCallback(
     (selectedFilterKey: string | number) => {
@@ -191,15 +185,9 @@ function QueueContent() {
     []
   );
 
-  const handleSortPress = useCallback(
-    (sortKey: string, sortDirection?: SortDirection) => {
-      setQueueSort({
-        sortKey,
-        sortDirection,
-      });
-    },
-    []
-  );
+  const handleSortPress = useCallback((sortKey: string) => {
+    setQueueOption('sortKey', sortKey);
+  }, []);
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
@@ -212,6 +200,16 @@ function QueueContent() {
     [goToPage]
   );
 
+  useEffect(() => {
+    const episodeIds = selectUniqueIds(records, 'episodeIds');
+
+    if (episodeIds.length) {
+      dispatch(fetchEpisodes({ episodeIds }));
+    } else {
+      dispatch(clearEpisodes());
+    }
+  }, [records, dispatch]);
+
   useEffect(() => {
     const repopulate = () => {
       refetch();
@@ -251,6 +249,7 @@ function QueueContent() {
               pageSize={pageSize}
               sortKey={sortKey}
               sortDirection={sortDirection}
+              optionsComponent={QueueOptions}
               onTableOptionChange={handleTableOptionChange}
               onSelectAllChange={handleSelectAllChange}
               onSortPress={handleSortPress}
@@ -260,8 +259,10 @@ function QueueContent() {
                   return (
                     <QueueRow
                       key={item.id}
+                      isSelected={selectedState[item.id]}
                       columns={columns}
                       {...item}
+                      onSelectedChange={handleSelectedChange}
                       onQueueRowModalOpenOrClose={
                         handleQueueRowModalOpenOrClose
                       }
@@ -312,15 +313,6 @@ function QueueContent() {
             isSpinning={isRemoving}
             onPress={handleRemoveSelectedPress}
           />
-
-          <PageToolbarSeparator />
-
-          <PageToolbarButton
-            label={translate('ImportSelected')}
-            iconName={icons.INTERACTIVE}
-            isDisabled={disableSelectedActions}
-            onPress={handleImportSelectedPress}
-          />
         </PageToolbarSection>
 
         <PageToolbarSection alignContent={align.RIGHT}>
@@ -328,6 +320,7 @@ function QueueContent() {
             columns={columns}
             pageSize={pageSize}
             maxPageSize={200}
+            optionsComponent={QueueOptions}
             onTableOptionChange={handleTableOptionChange}
           >
             <PageToolbarButton
@@ -354,7 +347,7 @@ function QueueContent() {
         selectedCount={selectedCount}
         canChangeCategory={
           isConfirmRemoveModalOpen &&
-          selectedIds.every((id: number) => {
+          selectedIds.every((id) => {
             const item = records.find((i) => i.id === id);
 
             return !!(item && item.downloadClientHasPostImportCategory);
@@ -362,7 +355,7 @@ function QueueContent() {
         }
         canIgnore={
           isConfirmRemoveModalOpen &&
-          selectedIds.every((id: number) => {
+          selectedIds.every((id) => {
             const item = records.find((i) => i.id === id);
 
             return !!(item && item.seriesId && item.episodeId);
@@ -370,7 +363,7 @@ function QueueContent() {
         }
         isPending={
           isConfirmRemoveModalOpen &&
-          selectedIds.every((id: number) => {
+          selectedIds.every((id) => {
             const item = records.find((i) => i.id === id);
 
             if (!item) {
@@ -386,25 +379,8 @@ function QueueContent() {
         onRemovePress={handleRemoveSelectedConfirmed}
         onModalClose={handleConfirmRemoveModalClose}
       />
-
-      <InteractiveImportModal
-        isOpen={isInteractiveImportDownloadIds.length > 0}
-        downloadIds={isInteractiveImportDownloadIds}
-        title={translate('InteractiveImportMultipleQueueItems')}
-        onModalClose={handleImportSelectedModalClose}
-      />
     </PageContent>
   );
 }
 
-function Queue() {
-  const { records } = useQueue();
-
-  return (
-    <SelectProvider<QueueModel> items={records}>
-      <QueueContent />
-    </SelectProvider>
-  );
-}
-
 export default Queue;

frontend/src/Activity/Queue/QueueFilterModal.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-import { SetFilter } from 'Components/Filter/Filter';
 import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
 import { setQueueOption } from './queueOptionsStore';
 import useQueue, { FILTER_BUILDER } from './useQueue';
@@ -7,18 +6,22 @@ import useQueue, { FILTER_BUILDER } from './useQueue';
 type QueueFilterModalProps = FilterModalProps<History>;
 
 export default function QueueFilterModal(props: QueueFilterModalProps) {
-  const { records } = useQueue();
+  const { data } = useQueue();
+  const customFilterType = 'queue';
 
-  const dispatchSetFilter = useCallback(({ selectedFilterKey }: SetFilter) => {
-    setQueueOption('selectedFilterKey', selectedFilterKey);
-  }, []);
+  const dispatchSetFilter = useCallback(
+    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
+      setQueueOption('selectedFilterKey', selectedFilterKey);
+    },
+    []
+  );
 
   return (
     <FilterModal
       {...props}
-      sectionItems={records}
+      sectionItems={data?.records ?? []}
       filterBuilderProps={FILTER_BUILDER}
-      customFilterType="queue"
+      customFilterType={customFilterType}
       dispatchSetFilter={dispatchSetFilter}
     />
   );

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import { OptionChanged } from 'Helpers/Hooks/useOptionsStore';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import {
+  QueueOptions as QueueOptionsType,
+  setQueueOption,
+  useQueueOption,
+} from './queueOptionsStore';
+import useQueue from './useQueue';
+
+function QueueOptions() {
+  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
+  const { goToPage } = useQueue();
+
+  const handleOptionChange = useCallback(
+    ({ name, value }: OptionChanged<QueueOptionsType>) => {
+      setQueueOption(name, value);
+
+      if (name === 'includeUnknownSeriesItems') {
+        goToPage(1);
+      }
+    },
+    [goToPage]
+  );
+
+  return (
+    <FormGroup>
+      <FormLabel>{translate('ShowUnknownSeriesItems')}</FormLabel>
+
+      <FormInputGroup
+        type={inputTypes.CHECK}
+        name="includeUnknownSeriesItems"
+        value={includeUnknownSeriesItems}
+        helpText={translate('ShowUnknownSeriesItemsHelpText')}
+        // @ts-expect-error - The typing for inputs needs more work
+        onChange={handleOptionChange}
+      />
+    </FormGroup>
+  );
+}
+
+export default QueueOptions;

frontend/src/Activity/Queue/QueueRow.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
 import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
-import { useSelect } from 'App/Select/SelectContext';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ProgressBar from 'Components/ProgressBar';
@@ -14,17 +14,17 @@ import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
-import { useEpisodesWithIds } from 'Episode/useEpisode';
+import useEpisodes from 'Episode/useEpisodes';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
-import { useSingleSeries } from 'Series/useSeries';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
+import useSeries from 'Series/useSeries';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import CustomFormat from 'typings/CustomFormat';
 import { SelectStateInputProps } from 'typings/props';
-import Queue, {
+import {
   QueueTrackedDownloadState,
   QueueTrackedDownloadStatus,
   StatusMessage,
@@ -44,7 +44,7 @@ interface QueueRowProps {
   id: number;
   seriesId?: number;
   episodeIds: number[];
-  downloadId: string;
+  downloadId?: string;
   title: string;
   status: string;
   trackedDownloadStatus?: QueueTrackedDownloadStatus;
@@ -68,7 +68,9 @@ interface QueueRowProps {
   size: number;
   sizeLeft: number;
   isRemoving?: boolean;
+  isSelected?: boolean;
   columns: Column[];
+  onSelectedChange: (options: SelectStateInputProps) => void;
   onQueueRowModalOpenOrClose: (isOpen: boolean) => void;
 }
 
@@ -100,18 +102,19 @@ function QueueRow(props: QueueRowProps) {
     timeLeft,
     size,
     sizeLeft,
+    isSelected,
     columns,
+    onSelectedChange,
     onQueueRowModalOpenOrClose,
   } = props;
 
-  const series = useSingleSeries(seriesId);
-  const episodes = useEpisodesWithIds(episodeIds);
-  const { showRelativeDates, shortDateFormat, timeFormat } =
-    useUiSettingsValues();
+  const series = useSeries(seriesId);
+  const episodes = useEpisodes(episodeIds, 'episodes');
+  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
+    createUISettingsSelector()
+  );
   const { removeQueueItem, isRemoving } = useRemoveQueueItem(id);
   const { grabQueueItem, isGrabbing, grabError } = useGrabQueueItem(id);
-  const { toggleSelected, useIsSelected } = useSelect<Queue>();
-  const isSelected = useIsSelected(id);
 
   const [isRemoveQueueItemModalOpen, setIsRemoveQueueItemModalOpen] =
     useState(false);
@@ -153,17 +156,6 @@ function QueueRow(props: QueueRowProps) {
     setIsRemoveQueueItemModalOpen(false);
   }, [setIsRemoveQueueItemModalOpen, onQueueRowModalOpenOrClose]);
 
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
-      toggleSelected({
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [toggleSelected]
-  );
-
   const progress = 100 - (sizeLeft / size) * 100;
   const showInteractiveImport =
     status === 'completed' && trackedDownloadStatus === 'warning';
@@ -175,7 +167,7 @@ function QueueRow(props: QueueRowProps) {
       <TableSelectCell
         id={id}
         isSelected={isSelected}
-        onSelectedChange={handleSelectedChange}
+        onSelectedChange={onSelectedChange}
       />
 
       {columns.map((column) => {
@@ -397,8 +389,8 @@ function QueueRow(props: QueueRowProps) {
 
       <InteractiveImportModal
         isOpen={isInteractiveImportModalOpen}
-        downloadIds={[downloadId]}
-        title={title}
+        downloadId={downloadId}
+        modalTitle={title}
         onModalClose={handleInteractiveImportModalClose}
       />
 

frontend/src/Activity/Queue/QueueStatus.tsx

@@ -90,7 +90,7 @@ function QueueStatus(props: QueueStatusProps) {
 
     if (trackedDownloadState === 'importing') {
       title += ` - ${translate('Importing')}`;
-      iconKind = kinds.PRIMARY;
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {

frontend/src/Activity/Queue/Status/QueueStatus.tsx

@@ -1,22 +1,12 @@
 import React from 'react';
 import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
-import translate from 'Utilities/String/translate';
 import useQueueStatus from './useQueueStatus';
 
 function QueueStatus() {
   const { errors, warnings, count } = useQueueStatus();
 
   return (
-    <PageSidebarStatus
-      aria-label={
-        count === 1
-          ? translate('QueueItem')
-          : translate('QueueItems', { count })
-      }
-      count={count}
-      errors={errors}
-      warnings={warnings}
-    />
+    <PageSidebarStatus count={count} errors={errors} warnings={warnings} />
   );
 }
 

frontend/src/Activity/Queue/Status/useQueueStatus.ts

@@ -1,4 +1,5 @@
 import useApiQuery from 'Helpers/Hooks/useApiQuery';
+import { useQueueOption } from '../queueOptionsStore';
 
 export interface QueueStatus {
   totalCount: number;
@@ -11,8 +12,13 @@ export interface QueueStatus {
 }
 
 export default function useQueueStatus() {
+  const includeUnknownSeriesItems = useQueueOption('includeUnknownSeriesItems');
+
   const { data } = useApiQuery<QueueStatus>({
     path: '/queue/status',
+    queryParams: {
+      includeUnknownSeriesItems,
+    },
   });
 
   if (!data) {
@@ -23,11 +29,26 @@ export default function useQueueStatus() {
     };
   }
 
-  const { errors, warnings, unknownErrors, unknownWarnings, totalCount } = data;
+  const {
+    errors,
+    warnings,
+    unknownErrors,
+    unknownWarnings,
+    count,
+    totalCount,
+  } = data;
+
+  if (includeUnknownSeriesItems) {
+    return {
+      count: totalCount,
+      errors: errors || unknownErrors,
+      warnings: warnings || unknownWarnings,
+    };
+  }
 
   return {
-    count: totalCount,
-    errors: errors || unknownErrors,
-    warnings: warnings || unknownWarnings,
+    count,
+    errors,
+    warnings,
   };
 }

frontend/src/Activity/Queue/queueOptionsStore.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import Icon from 'Components/Icon';
-import {
-  createOptionsStore,
-  PageableOptions,
-} from 'Helpers/Hooks/useOptionsStore';
+import Column from 'Components/Table/Column';
+import { createOptionsStore } from 'Helpers/Hooks/useOptionsStore';
 import { icons } from 'Helpers/Props';
+import { SortDirection } from 'Helpers/Props/sortDirections';
 import translate from 'Utilities/String/translate';
 
 interface QueueRemovalOptions {
@@ -12,13 +11,20 @@ interface QueueRemovalOptions {
   blocklistMethod: 'blocklistAndSearch' | 'blocklistOnly' | 'doNotBlocklist';
 }
 
-export interface QueueOptions extends PageableOptions {
+export interface QueueOptions {
+  includeUnknownSeriesItems: boolean;
+  pageSize: number;
+  selectedFilterKey: string | number;
+  sortKey: string;
+  sortDirection: SortDirection;
+  columns: Column[];
   removalOptions: QueueRemovalOptions;
 }
 
-const { useOptions, useOption, setOptions, setOption, setSort } =
+const { useOptions, useOption, setOptions, setOption } =
   createOptionsStore<QueueOptions>('queue_options', () => {
     return {
+      includeUnknownSeriesItems: true,
       pageSize: 20,
       selectedFilterKey: 'all',
       sortKey: 'time',
@@ -156,4 +162,3 @@ export const useQueueOptions = useOptions;
 export const setQueueOptions = setOptions;
 export const useQueueOption = useOption;
 export const setQueueOption = setOption;
-export const setQueueSort = setSort;

frontend/src/Activity/Queue/useQueue.ts

@@ -1,11 +1,12 @@
 import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
-import { Filter, FilterBuilderProp } from 'Filters/Filter';
-import { useCustomFiltersList } from 'Filters/useCustomFilters';
+import { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
 import useApiMutation from 'Helpers/Hooks/useApiMutation';
 import usePage from 'Helpers/Hooks/usePage';
 import usePagedApiQuery from 'Helpers/Hooks/usePagedApiQuery';
 import { filterBuilderValueTypes } from 'Helpers/Props';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import Queue from 'typings/Queue';
 import getQueryString from 'Utilities/Fetch/getQueryString';
 import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
@@ -22,17 +23,6 @@ export const FILTERS: Filter[] = [
     label: () => translate('All'),
     filters: [],
   },
-  {
-    key: 'excludeUnknownSeriesItems',
-    label: () => translate('ExcludeUnknownSeriesItems'),
-    filters: [
-      {
-        key: 'includeUnknownSeriesItems',
-        value: [false],
-        type: 'equal',
-      },
-    ],
-  },
 ];
 
 export const FILTER_BUILDER: FilterBuilderProp<Queue>[] = [
@@ -66,19 +56,20 @@ export const FILTER_BUILDER: FilterBuilderProp<Queue>[] = [
     type: 'equal',
     valueType: filterBuilderValueTypes.QUEUE_STATUS,
   },
-  {
-    name: 'includeUnknownSeriesItems',
-    label: () => translate('UnknownSeriesItems'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.BOOL,
-  },
 ];
 
 const useQueue = () => {
   const { page, goToPage } = usePage('queue');
-  const { pageSize, selectedFilterKey, sortKey, sortDirection } =
-    useQueueOptions();
-  const customFilters = useCustomFiltersList('queue');
+  const {
+    includeUnknownSeriesItems,
+    pageSize,
+    selectedFilterKey,
+    sortKey,
+    sortDirection,
+  } = useQueueOptions();
+  const customFilters = useSelector(
+    createCustomFiltersSelector('queue')
+  ) as CustomFilter[];
 
   const filters = useMemo(() => {
     return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
@@ -89,6 +80,9 @@ const useQueue = () => {
     page,
     pageSize,
     filters,
+    queryParams: {
+      includeUnknownSeriesItems,
+    },
     sortKey,
     sortDirection,
     queryOptions: {
@@ -96,9 +90,16 @@ const useQueue = () => {
     },
   });
 
+  const handleGoToPage = useCallback(
+    (page: number) => {
+      goToPage(page);
+    },
+    [goToPage]
+  );
+
   return {
     ...query,
-    goToPage,
+    goToPage: handleGoToPage,
     page,
     refetch,
   };

frontend/src/AddSeries/AddNewSeries/AddNewSeries.tsx

@@ -1,4 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
 import TextInput from 'Components/Form/TextInput';
 import Icon from 'Components/Icon';
@@ -10,7 +12,6 @@ import PageContentBody from 'Components/Page/PageContentBody';
 import useDebounce from 'Helpers/Hooks/useDebounce';
 import useQueryParams from 'Helpers/Hooks/useQueryParams';
 import { icons, kinds } from 'Helpers/Props';
-import { useHasSeries } from 'Series/useSeries';
 import { InputChanged } from 'typings/inputs';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
@@ -20,7 +21,11 @@ import styles from './AddNewSeries.css';
 
 function AddNewSeries() {
   const { term: initialTerm = '' } = useQueryParams<{ term: string }>();
-  const hasSeries = useHasSeries();
+
+  const seriesCount = useSelector(
+    (state: AppState) => state.series.items.length
+  );
+
   const [term, setTerm] = useState(initialTerm);
   const [isFetching, setIsFetching] = useState(false);
   const query = useDebounce(term, term ? 300 : 0);
@@ -38,7 +43,11 @@ function AddNewSeries() {
     setIsFetching(false);
   }, []);
 
-  const { isFetching: isFetchingApi, error, data } = useLookupSeries(query);
+  const {
+    isFetching: isFetchingApi,
+    error,
+    data = [],
+  } = useLookupSeries(query);
 
   useEffect(() => {
     setIsFetching(isFetchingApi);
@@ -118,7 +127,7 @@ function AddNewSeries() {
           </div>
         )}
 
-        {!term && !hasSeries ? (
+        {!term && !seriesCount ? (
           <div className={styles.message}>
             <div className={styles.noSeriesText}>
               {translate('NoSeriesHaveBeenAdded')}

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
 import AddSeries from 'AddSeries/AddSeries';
 import {
   AddSeriesOptions,
@@ -7,7 +8,6 @@ import {
 } from 'AddSeries/addSeriesOptionsStore';
 import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
 import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
-import { useAppDimension } from 'App/appStore';
 import CheckInput from 'Components/Form/CheckInput';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -20,12 +20,12 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
-import { getValidationFailures } from 'Helpers/Hooks/useApiMutation';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
 import { SeriesType } from 'Series/Series';
 import SeriesPoster from 'Series/SeriesPoster';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import selectSettings from 'Store/Selectors/selectSettings';
-import { useIsWindows } from 'System/Status/useSystemStatus';
+import useIsWindows from 'System/useIsWindows';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
 import { useAddSeries } from './useAddSeries';
@@ -44,16 +44,13 @@ function AddNewSeriesModalContent({
 }: AddNewSeriesModalContentProps) {
   const { title, year, overview, images, folder } = series;
   const options = useAddSeriesOptions();
-  const isSmallScreen = useAppDimension('isSmallScreen');
+  const { isSmallScreen } = useSelector(createDimensionsSelector());
   const isWindows = useIsWindows();
 
   const { isAdding, addError, addSeries } = useAddSeries();
 
   const { settings, validationErrors, validationWarnings } = useMemo(() => {
-    return {
-      ...selectSettings(options, {}),
-      ...getValidationFailures(addError),
-    };
+    return selectSettings(options, {}, addError);
   }, [options, addError]);
 
   const [seriesType, setSeriesType] = useState<SeriesType>(
@@ -91,14 +88,12 @@ function AddNewSeriesModalContent({
     addSeries({
       ...series,
       rootFolderPath: rootFolderPath.value,
-      addOptions: {
-        monitor: monitor.value,
-        searchForMissingEpisodes: searchForMissingEpisodes.value,
-        searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
-      },
+      monitor: monitor.value,
       qualityProfileId: qualityProfileId.value,
       seriesType,
       seasonFolder: seasonFolder.value,
+      searchForMissingEpisodes: searchForMissingEpisodes.value,
+      searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
       tags: tags.value,
     });
   }, [
@@ -136,7 +131,6 @@ function AddNewSeriesModalContent({
                 className={styles.poster}
                 images={images}
                 size={250}
-                title={title}
               />
             </div>
           )}

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css

@@ -97,12 +97,6 @@
   pointer-events: all;
 }
 
-.excludedIcon {
-  margin-left: 10px;
-  color: var(--dangerColor);
-  pointer-events: all;
-}
-
 .overview {
   margin-top: 20px;
 }

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css.d.ts

@@ -3,7 +3,6 @@
 interface CssExports {
   'alreadyExistsIcon': string;
   'content': string;
-  'excludedIcon': string;
   'genres': string;
   'icons': string;
   'network': string;

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
 import AddSeries from 'AddSeries/AddSeries';
-import { useAppDimension } from 'App/appStore';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
@@ -10,7 +10,8 @@ import { icons, kinds, sizes } from 'Helpers/Props';
 import { Statistics } from 'Series/Series';
 import SeriesGenres from 'Series/SeriesGenres';
 import SeriesPoster from 'Series/SeriesPoster';
-import useExistingSeries from 'Series/useExistingSeries';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
 import translate from 'Utilities/String/translate';
 import AddNewSeriesModal from './AddNewSeriesModal';
 import styles from './AddNewSeriesSearchResult.css';
@@ -34,11 +35,10 @@ function AddNewSeriesSearchResult({ series }: AddNewSeriesSearchResultProps) {
     overview,
     seriesType,
     images,
-    isExcluded,
   } = series;
 
-  const isExistingSeries = useExistingSeries(tvdbId);
-  const isSmallScreen = useAppDimension('isSmallScreen');
+  const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
+  const { isSmallScreen } = useSelector(createDimensionsSelector());
   const [isNewAddSeriesModalOpen, setIsNewAddSeriesModalOpen] = useState(false);
 
   const seasonCount = statistics.seasonCount;
@@ -75,7 +75,6 @@ function AddNewSeriesSearchResult({ series }: AddNewSeriesSearchResultProps) {
             size={250}
             overflow={true}
             lazy={false}
-            title={title}
           />
         )}
 
@@ -101,15 +100,6 @@ function AddNewSeriesSearchResult({ series }: AddNewSeriesSearchResultProps) {
                 />
               ) : null}
 
-              {isExcluded ? (
-                <Icon
-                  className={styles.excludedIcon}
-                  name={icons.DANGER}
-                  size={36}
-                  title={translate('SeriesInImportListExclusions')}
-                />
-              ) : null}
-
               <Link
                 className={styles.tvdbLink}
                 to={`https://www.thetvdb.com/?tab=series&id=${tvdbId}`}

frontend/src/AddSeries/AddNewSeries/useAddSeries.ts

@@ -1,55 +1,44 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 import AddSeries from 'AddSeries/AddSeries';
 import { AddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
 import useApiMutation from 'Helpers/Hooks/useApiMutation';
 import useApiQuery from 'Helpers/Hooks/useApiQuery';
 import Series from 'Series/Series';
+import { updateItem } from 'Store/Actions/baseActions';
 
-interface AddSeriesPayload
-  extends AddSeries,
-    Omit<
-      AddSeriesOptions,
-      'monitor' | 'searchForMissingEpisodes' | 'searchForCutoffUnmetEpisodes'
-    > {}
+type AddSeriesPayload = AddSeries & AddSeriesOptions;
 
-const DEFAULT_SERIES: AddSeries[] = [];
-
-export const useLookupSeries = (query: string, isEnabled = true) => {
-  const result = useApiQuery<AddSeries[]>({
+export const useLookupSeries = (query: string) => {
+  return useApiQuery<AddSeries[]>({
     path: '/series/lookup',
     queryParams: {
       term: query,
     },
     queryOptions: {
-      enabled: isEnabled && !!query,
+      enabled: !!query,
       // Disable refetch on window focus to prevent refetching when the user switch tabs
       refetchOnWindowFocus: false,
     },
   });
-
-  return {
-    ...result,
-    data: result.data ?? DEFAULT_SERIES,
-  };
 };
 
 export const useAddSeries = () => {
-  const queryClient = useQueryClient();
+  const dispatch = useDispatch();
+
+  const onAddSuccess = useCallback(
+    (data: Series) => {
+      dispatch(updateItem({ section: 'series', ...data }));
+    },
+    [dispatch]
+  );
 
   const { isPending, error, mutate } = useApiMutation<Series, AddSeriesPayload>(
     {
       path: '/series',
       method: 'POST',
       mutationOptions: {
-        onSuccess: (newSeries) => {
-          queryClient.setQueryData<Series[]>(['/series'], (oldSeries) => {
-            if (!oldSeries) {
-              return [newSeries];
-            }
-
-            return [...oldSeries, newSeries];
-          });
-        },
+        onSuccess: onAddSuccess,
       },
     }
   );

frontend/src/AddSeries/AddSeries.ts

@@ -2,7 +2,6 @@ import Series from 'Series/Series';
 
 interface AddSeries extends Series {
   folder: string;
-  isExcluded: boolean;
 }
 
 export default AddSeries;

frontend/src/AddSeries/ImportSeries/Import/ImportSeries.tsx

@@ -1,23 +1,25 @@
 import React, { useEffect, useMemo, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
 import {
   setAddSeriesOption,
   useAddSeriesOption,
 } from 'AddSeries/addSeriesOptionsStore';
-import { SelectProvider } from 'App/Select/SelectContext';
+import { SelectProvider } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import { kinds } from 'Helpers/Props';
-import useRootFolders, { useRootFolder } from 'RootFolder/useRootFolders';
-import { useQualityProfilesData } from 'Settings/Profiles/Quality/useQualityProfiles';
+import { clearImportSeries } from 'Store/Actions/importSeriesActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import translate from 'Utilities/String/translate';
 import ImportSeriesFooter from './ImportSeriesFooter';
-import { clearImportSeries } from './importSeriesStore';
 import ImportSeriesTable from './ImportSeriesTable';
 
 function ImportSeries() {
+  const dispatch = useDispatch();
   const { rootFolderId: rootFolderIdString } = useParams<{
     rootFolderId: string;
   }>();
@@ -25,12 +27,10 @@ function ImportSeries() {
 
   const {
     isFetching: rootFoldersFetching,
-    isFetched: rootFoldersFetched,
+    isPopulated: rootFoldersPopulated,
     error: rootFoldersError,
-    data: rootFolders,
-  } = useRootFolders();
-
-  useRootFolder(rootFolderId, false);
+    items: rootFolders,
+  } = useSelector((state: AppState) => state.rootFolders);
 
   const { path, unmappedFolders } = useMemo(() => {
     const rootFolder = rootFolders.find((r) => r.id === rootFolderId);
@@ -47,7 +47,9 @@ function ImportSeries() {
     };
   }, [rootFolders, rootFolderId]);
 
-  const qualityProfiles = useQualityProfilesData();
+  const qualityProfiles = useSelector(
+    (state: AppState) => state.settings.qualityProfiles.items
+  );
 
   const defaultQualityProfileId = useAddSeriesOption('qualityProfileId');
 
@@ -63,10 +65,12 @@ function ImportSeries() {
   }, [unmappedFolders]);
 
   useEffect(() => {
+    dispatch(fetchRootFolders({ id: rootFolderId, timeout: false }));
+
     return () => {
-      clearImportSeries();
+      dispatch(clearImportSeries());
     };
-  }, [rootFolderId]);
+  }, [rootFolderId, dispatch]);
 
   useEffect(() => {
     if (
@@ -75,15 +79,13 @@ function ImportSeries() {
     ) {
       setAddSeriesOption('qualityProfileId', qualityProfiles[0].id);
     }
-  }, [defaultQualityProfileId, qualityProfiles]);
+  }, [defaultQualityProfileId, qualityProfiles, dispatch]);
 
   return (
     <SelectProvider items={items}>
       <PageContent title={translate('ImportSeries')}>
         <PageContentBody ref={scrollerRef}>
-          {rootFoldersFetching && !rootFoldersFetched ? (
-            <LoadingIndicator />
-          ) : null}
+          {rootFoldersFetching ? <LoadingIndicator /> : null}
 
           {!rootFoldersFetching && !!rootFoldersError ? (
             <Alert kind={kinds.DANGER}>
@@ -93,7 +95,7 @@ function ImportSeries() {
 
           {!rootFoldersError &&
           !rootFoldersFetching &&
-          rootFoldersFetched &&
+          rootFoldersPopulated &&
           !unmappedFolders.length ? (
             <Alert kind={kinds.INFO}>
               {translate('AllSeriesInRootFolderHaveBeenImported', { path })}
@@ -101,14 +103,20 @@ function ImportSeries() {
           ) : null}
 
           {!rootFoldersError &&
-          rootFoldersFetched &&
+          !rootFoldersFetching &&
+          rootFoldersPopulated &&
           !!unmappedFolders.length &&
           scrollerRef.current ? (
-            <ImportSeriesTable items={items} scrollerRef={scrollerRef} />
+            <ImportSeriesTable
+              unmappedFolders={unmappedFolders}
+              scrollerRef={scrollerRef}
+            />
           ) : null}
         </PageContentBody>
 
-        {!rootFoldersError && rootFoldersFetched && !!unmappedFolders.length ? (
+        {!rootFoldersError &&
+        !rootFoldersFetching &&
+        !!unmappedFolders.length ? (
           <ImportSeriesFooter />
         ) : null}
       </PageContent>

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesFooter.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   AddSeriesOptions,
   setAddSeriesOption,
   useAddSeriesOptions,
 } from 'AddSeries/addSeriesOptionsStore';
-import { useSelect } from 'App/Select/SelectContext';
+import { useSelect } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
 import CheckInput from 'Components/Form/CheckInput';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import Icon from 'Components/Icon';
@@ -15,22 +17,21 @@ import PageContentFooter from 'Components/Page/PageContentFooter';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
 import { SeriesMonitor, SeriesType } from 'Series/Series';
+import {
+  cancelLookupSeries,
+  importSeries,
+  lookupUnsearchedSeries,
+  setImportSeriesValue,
+} from 'Store/Actions/importSeriesActions';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
-import {
-  ImportSeriesItem,
-  startProcessing,
-  stopProcessing,
-  updateImportSeriesItem,
-  useImportSeriesItems,
-  useLookupQueueHasItems,
-} from './importSeriesStore';
-import { useImportSeries } from './useImportSeries';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import styles from './ImportSeriesFooter.css';
 
 type MixedType = 'mixed';
 
 function ImportSeriesFooter() {
+  const dispatch = useDispatch();
   const {
     monitor: defaultMonitor,
     qualityProfileId: defaultQualityProfileId,
@@ -38,8 +39,9 @@ function ImportSeriesFooter() {
     seasonFolder: defaultSeasonFolder,
   } = useAddSeriesOptions();
 
-  const items = useImportSeriesItems();
-  const isLookingUpSeries = useLookupQueueHasItems();
+  const { isLookingUpSeries, isImporting, items, importError } = useSelector(
+    (state: AppState) => state.importSeries
+  );
 
   const [monitor, setMonitor] = useState<SeriesMonitor | MixedType>(
     defaultMonitor
@@ -54,9 +56,11 @@ function ImportSeriesFooter() {
     defaultSeasonFolder
   );
 
-  const { selectedCount, getSelectedIds } = useSelect<ImportSeriesItem>();
+  const [selectState] = useSelect();
 
-  const { importSeries, isImporting, importError } = useImportSeries();
+  const selectedIds = useMemo(() => {
+    return getSelectedIds(selectState.selectedState, (id) => id);
+  }, [selectState.selectedState]);
 
   const {
     hasUnsearchedItems,
@@ -88,7 +92,7 @@ function ImportSeriesFooter() {
         isSeasonFolderMixed = true;
       }
 
-      if (!item.hasSearched) {
+      if (!item.isPopulated) {
         hasUnsearchedItems = true;
       }
     });
@@ -123,27 +127,30 @@ function ImportSeriesFooter() {
 
       setAddSeriesOption(name as keyof AddSeriesOptions, value);
 
-      getSelectedIds().forEach((id) => {
-        updateImportSeriesItem({
-          id,
-          [name]: value,
-        });
+      selectedIds.forEach((id) => {
+        dispatch(
+          // @ts-expect-error - actions are not typed
+          setImportSeriesValue({
+            id,
+            [name]: value,
+          })
+        );
       });
     },
-    [getSelectedIds]
+    [selectedIds, dispatch]
   );
 
   const handleLookupPress = useCallback(() => {
-    startProcessing();
-  }, []);
+    dispatch(lookupUnsearchedSeries());
+  }, [dispatch]);
 
   const handleCancelLookupPress = useCallback(() => {
-    stopProcessing();
-  }, []);
+    dispatch(cancelLookupSeries());
+  }, [dispatch]);
 
   const handleImportPress = useCallback(() => {
-    importSeries(getSelectedIds());
-  }, [importSeries, getSelectedIds]);
+    dispatch(importSeries({ ids: selectedIds }));
+  }, [selectedIds, dispatch]);
 
   useEffect(() => {
     if (isMonitorMixed && monitor !== 'mixed') {
@@ -180,6 +187,8 @@ function ImportSeriesFooter() {
     }
   }, [defaultSeasonFolder, isSeasonFolderMixed, seasonFolder]);
 
+  const selectedCount = selectedIds.length;
+
   return (
     <PageContentFooter>
       <div className={styles.inputContainer}>
@@ -284,12 +293,12 @@ function ImportSeriesFooter() {
               title={translate('ImportErrors')}
               body={
                 <ul>
-                  {Array.isArray(importError.statusBody) ? (
-                    importError.statusBody.map((error, index) => {
+                  {Array.isArray(importError.responseJSON) ? (
+                    importError.responseJSON.map((error, index) => {
                       return <li key={index}>{error.errorMessage}</li>;
                     })
                   ) : (
-                    <li>{JSON.stringify(importError.statusBody)}</li>
+                    <li>{JSON.stringify(importError.responseJSON)}</li>
                   )}
                 </ul>
               }

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesRow.tsx

@@ -1,29 +1,39 @@
-import React, { useCallback, useEffect } from 'react';
-import { useSelect } from 'App/Select/SelectContext';
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { useSelect } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
+import { ImportSeries } from 'App/State/ImportSeriesAppState';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import { inputTypes } from 'Helpers/Props';
-import useExistingSeries from 'Series/useExistingSeries';
+import { setImportSeriesValue } from 'Store/Actions/importSeriesActions';
+import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
 import { InputChanged } from 'typings/inputs';
 import { SelectStateInputProps } from 'typings/props';
-import {
-  ImportSeriesItem,
-  UnamppedFolderItem,
-  updateImportSeriesItem,
-  useImportSeriesItem,
-} from './importSeriesStore';
 import ImportSeriesSelectSeries from './SelectSeries/ImportSeriesSelectSeries';
 import styles from './ImportSeriesRow.css';
 
-interface ImportSeriesRowProps {
-  unmappedFolder: UnamppedFolderItem;
+function createItemSelector(id: string) {
+  return createSelector(
+    (state: AppState) => state.importSeries.items,
+    (items) => {
+      return (
+        items.find((item) => {
+          return item.id === id;
+        }) || ({} as ImportSeries)
+      );
+    }
+  );
 }
 
-function ImportSeriesRow({ unmappedFolder }: ImportSeriesRowProps) {
-  const id = unmappedFolder.id;
+interface ImportSeriesRowProps {
+  id: string;
+}
 
-  const item = useImportSeriesItem(unmappedFolder.id);
+function ImportSeriesRow({ id }: ImportSeriesRowProps) {
+  const dispatch = useDispatch();
 
   const {
     relativePath,
@@ -32,45 +42,45 @@ function ImportSeriesRow({ unmappedFolder }: ImportSeriesRowProps) {
     seasonFolder,
     seriesType,
     selectedSeries,
-  } = item ?? {};
+  } = useSelector(createItemSelector(id));
 
-  const isExistingSeries = useExistingSeries(selectedSeries?.tvdbId);
+  const isExistingSeries = useSelector(
+    createExistingSeriesSelector(selectedSeries?.tvdbId)
+  );
 
-  const { getIsSelected, toggleSelected, toggleDisabled } =
-    useSelect<ImportSeriesItem>();
+  const [selectState, selectDispatch] = useSelect();
 
   const handleInputChange = useCallback(
     ({ name, value }: InputChanged) => {
-      updateImportSeriesItem({ id, [name]: value });
+      dispatch(
+        // @ts-expect-error - actions are not typed
+        setImportSeriesValue({
+          id,
+          [name]: value,
+        })
+      );
     },
-    [id]
+    [id, dispatch]
   );
 
   const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey }: SelectStateInputProps<string>) => {
-      toggleSelected({
+    ({ id, value, shiftKey }: SelectStateInputProps) => {
+      selectDispatch({
+        type: 'toggleSelected',
         id,
         isSelected: value,
         shiftKey,
       });
     },
-    [toggleSelected]
+    [selectDispatch]
   );
 
-  useEffect(() => {
-    toggleDisabled(id, !selectedSeries || isExistingSeries);
-  }, [id, selectedSeries, isExistingSeries, toggleDisabled]);
-
-  useEffect(() => {
-    toggleSelected({ id, isSelected: !!selectedSeries, shiftKey: false });
-  }, [id, selectedSeries, toggleSelected]);
-
   return (
     <>
-      <VirtualTableSelectCell<string>
+      <VirtualTableSelectCell
         inputClassName={styles.selectInput}
         id={id}
-        isSelected={getIsSelected(id)}
+        isSelected={selectState.selectedState[id]}
         isDisabled={!selectedSeries || isExistingSeries}
         onSelectedChange={handleSelectedChange}
       />

frontend/src/AddSeries/ImportSeries/Import/ImportSeriesTable.tsx

@@ -1,25 +1,33 @@
-import React, { RefObject, useCallback, useRef } from 'react';
+import React, { RefObject, useCallback, useEffect, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
-import { useAppDimension } from 'App/appStore';
-import { useSelect } from 'App/Select/SelectContext';
+import { useAddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
+import { useSelect } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
+import { ImportSeries } from 'App/State/ImportSeriesAppState';
 import VirtualTable from 'Components/Table/VirtualTable';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import {
+  queueLookupSeries,
+  setImportSeriesValue,
+} from 'Store/Actions/importSeriesActions';
+import createAllSeriesSelector from 'Store/Selectors/createAllSeriesSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import { CheckInputChanged } from 'typings/inputs';
+import { SelectStateInputProps } from 'typings/props';
+import { UnmappedFolder } from 'typings/RootFolder';
 import ImportSeriesHeader from './ImportSeriesHeader';
 import ImportSeriesRow from './ImportSeriesRow';
-import {
-  UnamppedFolderItem,
-  useEnsureImportSeriesItems,
-} from './importSeriesStore';
 import styles from './ImportSeriesTable.css';
 
 const ROW_HEIGHT = 52;
 
 interface RowItemData {
-  items: UnamppedFolderItem[];
+  items: ImportSeries[];
 }
 
 interface ImportSeriesTableProps {
-  items: UnamppedFolderItem[];
+  unmappedFolders: UnmappedFolder[];
   scrollerRef: RefObject<HTMLElement>;
 }
 
@@ -41,34 +49,138 @@ function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
       }}
       className={styles.row}
     >
-      <ImportSeriesRow key={item.id} unmappedFolder={item} />
+      <ImportSeriesRow key={item.id} id={item.id} />
     </div>
   );
 }
 
-function ImportSeriesTable({ items, scrollerRef }: ImportSeriesTableProps) {
-  const isSmallScreen = useAppDimension('isSmallScreen');
-  const { allSelected, allUnselected, selectAll, unselectAll, useHasItems } =
-    useSelect();
+function ImportSeriesTable({
+  unmappedFolders,
+  scrollerRef,
+}: ImportSeriesTableProps) {
+  const dispatch = useDispatch();
+
+  const { monitor, qualityProfileId, seriesType, seasonFolder } =
+    useAddSeriesOptions();
+
+  const items = useSelector((state: AppState) => state.importSeries.items);
+  const { isSmallScreen } = useSelector(createDimensionsSelector());
+  const allSeries = useSelector(createAllSeriesSelector());
+  const [selectState, selectDispatch] = useSelect();
+
+  const defaultValues = useRef({
+    monitor,
+    qualityProfileId,
+    seriesType,
+    seasonFolder,
+  });
 
   const listRef = useRef<FixedSizeList<RowItemData>>(null);
+  const initialUnmappedFolders = useRef(unmappedFolders);
+  const previousItems = usePrevious(items);
+  const { allSelected, allUnselected, selectedState } = selectState;
 
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      if (value) {
-        selectAll();
-      } else {
-        unselectAll();
-      }
+      selectDispatch({
+        type: value ? 'selectAll' : 'unselectAll',
+      });
     },
-    [selectAll, unselectAll]
+    [selectDispatch]
   );
 
-  const hasSelectItems = useHasItems();
+  const handleSelectedChange = useCallback(
+    ({ id, value, shiftKey }: SelectStateInputProps) => {
+      selectDispatch({
+        type: 'toggleSelected',
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [selectDispatch]
+  );
 
-  useEnsureImportSeriesItems(items);
+  const handleRemoveSelectedStateItem = useCallback(
+    (id: string) => {
+      selectDispatch({
+        type: 'removeItem',
+        id,
+      });
+    },
+    [selectDispatch]
+  );
 
-  if (!items.length || !hasSelectItems) {
+  useEffect(() => {
+    initialUnmappedFolders.current.forEach(({ name, path, relativePath }) => {
+      dispatch(
+        queueLookupSeries({
+          name,
+          path,
+          relativePath,
+          term: name,
+        })
+      );
+
+      dispatch(
+        // @ts-expect-error - actions are not typed
+        setImportSeriesValue({
+          id: name,
+          ...defaultValues.current,
+        })
+      );
+    });
+  }, [dispatch]);
+
+  useEffect(() => {
+    previousItems?.forEach((prevItem) => {
+      const { id } = prevItem;
+
+      const item = items.find((i) => i.id === id);
+
+      if (!item) {
+        handleRemoveSelectedStateItem(id);
+        return;
+      }
+
+      const selectedSeries = item.selectedSeries;
+      const isSelected = selectedState[id];
+
+      const isExistingSeries =
+        !!selectedSeries &&
+        allSeries.some((s) => s.tvdbId === selectedSeries.tvdbId);
+
+      if (
+        (!selectedSeries && prevItem.selectedSeries) ||
+        (isExistingSeries && !prevItem.selectedSeries)
+      ) {
+        handleSelectedChange({ id, value: false, shiftKey: false });
+
+        return;
+      }
+
+      if (isSelected && (!selectedSeries || isExistingSeries)) {
+        handleSelectedChange({ id, value: false, shiftKey: false });
+
+        return;
+      }
+
+      if (selectedSeries && selectedSeries !== prevItem.selectedSeries) {
+        handleSelectedChange({ id, value: true, shiftKey: false });
+
+        return;
+      }
+    });
+  }, [
+    allSeries,
+    items,
+    previousItems,
+    selectedState,
+    handleRemoveSelectedStateItem,
+    handleSelectedChange,
+  ]);
+
+  if (!items.length) {
     return null;
   }
 

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
-import useExistingSeries from 'Series/useExistingSeries';
+import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
 import ImportSeriesTitle from './ImportSeriesTitle';
 import styles from './ImportSeriesSearchResult.css';
 
@@ -21,7 +22,7 @@ function ImportSeriesSearchResult({
   network,
   onPress,
 }: ImportSeriesSearchResultProps) {
-  const isExistingSeries = useExistingSeries(tvdbId);
+  const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
 
   const handlePress = useCallback(() => {
     onPress(tvdbId);

frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.tsx

@@ -7,27 +7,23 @@ import {
   useFloating,
   useInteractions,
 } from '@floating-ui/react';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useLookupSeries } from 'AddSeries/AddNewSeries/useAddSeries';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import FormInputButton from 'Components/Form/FormInputButton';
 import TextInput from 'Components/Form/TextInput';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import useDebounce from 'Helpers/Hooks/useDebounce';
 import { icons, kinds } from 'Helpers/Props';
-import useExistingSeries from 'Series/useExistingSeries';
+import {
+  queueLookupSeries,
+  setImportSeriesValue,
+} from 'Store/Actions/importSeriesActions';
+import createImportSeriesItemSelector from 'Store/Selectors/createImportSeriesItemSelector';
 import { InputChanged } from 'typings/inputs';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
-import {
-  addToLookupQueue,
-  removeFromLookupQueue,
-  updateImportSeriesItem,
-  useImportSeriesItem,
-  useIsCurrentedItemQueued,
-  useIsCurrentLookupQueueItem,
-} from '../importSeriesStore';
 import ImportSeriesSearchResult from './ImportSeriesSearchResult';
 import ImportSeriesTitle from './ImportSeriesTitle';
 import styles from './ImportSeriesSelectSeries.css';
@@ -41,23 +37,29 @@ function ImportSeriesSelectSeries({
   id,
   onInputChange,
 }: ImportSeriesSelectSeriesProps) {
-  const importSeriesItem = useImportSeriesItem(id);
-  const { selectedSeries, name } = importSeriesItem ?? {};
-  const isExistingSeries = useExistingSeries(selectedSeries?.tvdbId);
-
-  const [term, setTerm] = useState(name);
-  const [isOpen, setIsOpen] = useState(false);
-  const query = useDebounce(term, term ? 300 : 0);
-  const isCurrentLookupQueueItem = useIsCurrentLookupQueueItem(id);
-  const isQueued = useIsCurrentedItemQueued(id);
-
-  const { isFetching, isFetched, error, data, refetch } = useLookupSeries(
-    query,
-    isCurrentLookupQueueItem
+  const dispatch = useDispatch();
+  const isLookingUpSeries = useSelector(
+    (state: AppState) => state.importSeries.isLookingUpSeries
   );
 
+  const {
+    error,
+    isFetching = true,
+    isPopulated = false,
+    items = [],
+    isQueued = true,
+    selectedSeries,
+    isExistingSeries,
+    term: itemTerm,
+    // @ts-expect-error - ignoring this for now
+  } = useSelector(createImportSeriesItemSelector(id, { id }));
+
+  const seriesLookupTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+  const [term, setTerm] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
   const errorMessage = getErrorMessage(error);
-  const isLookingUpSeries = isFetching || isQueued;
 
   const handlePress = useCallback(() => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
@@ -65,26 +67,48 @@ function ImportSeriesSelectSeries({
 
   const handleSearchInputChange = useCallback(
     ({ value }: InputChanged<string>) => {
+      if (seriesLookupTimeout.current) {
+        clearTimeout(seriesLookupTimeout.current);
+      }
+
       setTerm(value);
-      addToLookupQueue(id);
+
+      seriesLookupTimeout.current = setTimeout(() => {
+        dispatch(
+          queueLookupSeries({
+            name: id,
+            term: value,
+            topOfQueue: true,
+          })
+        );
+      }, 200);
     },
-    [id]
+    [id, dispatch]
   );
 
   const handleRefreshPress = useCallback(() => {
-    refetch();
-  }, [refetch]);
+    dispatch(
+      queueLookupSeries({
+        name: id,
+        term,
+        topOfQueue: true,
+      })
+    );
+  }, [id, term, dispatch]);
 
   const handleSeriesSelect = useCallback(
     (tvdbId: number) => {
       setIsOpen(false);
 
-      const selectedSeries = data.find((item) => item.tvdbId === tvdbId)!;
+      const selectedSeries = items.find((item) => item.tvdbId === tvdbId)!;
 
-      updateImportSeriesItem({
-        id,
-        selectedSeries,
-      });
+      dispatch(
+        // @ts-expect-error - actions are not typed
+        setImportSeriesValue({
+          id,
+          selectedSeries,
+        })
+      );
 
       if (selectedSeries.seriesType !== 'standard') {
         onInputChange({
@@ -93,24 +117,12 @@ function ImportSeriesSelectSeries({
         });
       }
     },
-    [id, data, onInputChange]
+    [id, items, dispatch, onInputChange]
   );
 
   useEffect(() => {
-    if (isFetched) {
-      updateImportSeriesItem({
-        id,
-        hasSearched: isFetched,
-        selectedSeries: data[0],
-      });
-
-      removeFromLookupQueue(id);
-    }
-  }, [id, isFetched, data]);
-
-  useEffect(() => {
-    setTerm(name);
-  }, [name]);
+    setTerm(itemTerm);
+  }, [itemTerm]);
 
   const { refs, context, floatingStyles } = useFloating({
     middleware: [
@@ -137,11 +149,11 @@ function ImportSeriesSelectSeries({
     <>
       <div ref={refs.setReference} {...getReferenceProps()}>
         <Link className={styles.button} component="div" onPress={handlePress}>
-          {isLookingUpSeries && isQueued && !isFetched ? (
+          {isLookingUpSeries && isQueued && !isPopulated ? (
             <LoadingIndicator className={styles.loading} size={20} />
           ) : null}
 
-          {isFetched && selectedSeries && isExistingSeries ? (
+          {isPopulated && selectedSeries && isExistingSeries ? (
             <Icon
               className={styles.warningIcon}
               name={icons.WARNING}
@@ -149,7 +161,7 @@ function ImportSeriesSelectSeries({
             />
           ) : null}
 
-          {isFetched && selectedSeries ? (
+          {isPopulated && selectedSeries ? (
             <ImportSeriesTitle
               title={selectedSeries.title}
               year={selectedSeries.year}
@@ -158,7 +170,7 @@ function ImportSeriesSelectSeries({
             />
           ) : null}
 
-          {isFetched && !selectedSeries ? (
+          {isPopulated && !selectedSeries ? (
             <div>
               <Icon
                 className={styles.warningIcon}
@@ -188,7 +200,6 @@ function ImportSeriesSelectSeries({
           </div>
         </Link>
       </div>
-
       {isOpen ? (
         <FloatingPortal id="portal-root">
           <div
@@ -223,7 +234,7 @@ function ImportSeriesSelectSeries({
                 </div>
 
                 <div className={styles.results}>
-                  {data.map((item) => {
+                  {items.map((item) => {
                     return (
                       <ImportSeriesSearchResult
                         key={item.tvdbId}

frontend/src/AddSeries/ImportSeries/Import/importSeriesStore.ts

@@ -1,175 +0,0 @@
-import { useEffect } from 'react';
-import { create } from 'zustand';
-import { useShallow } from 'zustand/react/shallow';
-import { useAddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
-import { UnmappedFolder } from 'RootFolder/useRootFolders';
-import Series, { SeriesMonitor, SeriesType } from 'Series/Series';
-
-export interface UnamppedFolderItem extends UnmappedFolder {
-  id: string;
-}
-
-export interface ImportSeriesItem {
-  id: string;
-  monitor: SeriesMonitor;
-  path: string;
-  qualityProfileId: number;
-  relativePath: string;
-  seasonFolder: boolean;
-  selectedSeries?: Series;
-  seriesType: SeriesType;
-  name: string;
-  hasSearched: boolean;
-}
-
-interface ImportSeriesState {
-  items: Record<string, ImportSeriesItem>;
-  lookupQueue: string[];
-  isProcessing: boolean;
-}
-
-const defaultState: ImportSeriesState = {
-  items: {},
-  lookupQueue: [],
-  isProcessing: false,
-};
-
-const importSeriesStore = create<ImportSeriesState>()(() => defaultState);
-
-export const useEnsureImportSeriesItems = (
-  unmappedFolders: UnamppedFolderItem[]
-) => {
-  const { monitor, qualityProfileId, seriesType, seasonFolder } =
-    useAddSeriesOptions();
-
-  useEffect(() => {
-    unmappedFolders.forEach((unmappedFolder) => {
-      const existingItem =
-        importSeriesStore.getState().items[unmappedFolder.id];
-
-      if (existingItem) {
-        return;
-      }
-
-      const newItem: ImportSeriesItem = {
-        ...unmappedFolder,
-        monitor,
-        qualityProfileId,
-        seriesType,
-        seasonFolder,
-        hasSearched: false,
-      };
-
-      importSeriesStore.setState((state) => ({
-        items: {
-          ...state.items,
-          [unmappedFolder.id]: newItem,
-        },
-      }));
-    });
-  }, [unmappedFolders, monitor, qualityProfileId, seriesType, seasonFolder]);
-};
-
-export const updateImportSeriesItem = (
-  itemData: Partial<ImportSeriesItem> & Pick<ImportSeriesItem, 'id'>
-) => {
-  importSeriesStore.setState((state) => {
-    const existingItem = state.items[itemData.id];
-
-    if (existingItem) {
-      return {
-        items: {
-          ...state.items,
-          [itemData.id]: {
-            ...existingItem,
-            ...itemData,
-          },
-        },
-      };
-    }
-
-    return state;
-  });
-};
-
-export const removeImportSeriesItemByPath = (path: string) => {
-  importSeriesStore.setState((state) => {
-    const item = Object.values(state.items).find((i) => i.path === path);
-
-    if (!item) {
-      return state;
-    }
-
-    const { [item.id]: removed, ...items } = state.items;
-
-    return { items };
-  });
-};
-
-export const clearImportSeries = () => {
-  importSeriesStore.setState(defaultState);
-};
-
-export const startProcessing = () => {
-  importSeriesStore.setState((state) => {
-    const items = Object.values(state.items).reduce<string[]>((acc, item) => {
-      if (!item.hasSearched) {
-        acc.push(item.id);
-      }
-
-      return acc;
-    }, []);
-
-    return { isProcessing: true, lookupQueue: items };
-  });
-};
-
-export const stopProcessing = () => {
-  importSeriesStore.setState({ isProcessing: false, lookupQueue: [] });
-};
-
-export const addToLookupQueue = (id: string) => {
-  importSeriesStore.setState((state) => ({
-    lookupQueue: [...state.lookupQueue, id],
-  }));
-};
-
-export const removeFromLookupQueue = (id: string) => {
-  importSeriesStore.setState((state) => ({
-    lookupQueue: state.lookupQueue.filter((queuedId) => queuedId !== id),
-  }));
-};
-
-export const useIsCurrentLookupQueueItem = (id: string) => {
-  return importSeriesStore((state) => state.lookupQueue[0] === id);
-};
-
-export const useIsCurrentedItemQueued = (id: string) => {
-  return importSeriesStore((state) => state.lookupQueue.includes(id));
-};
-
-export const useLookupQueueHasItems = () => {
-  return importSeriesStore((state) => state.lookupQueue.length > 0);
-};
-
-export const useImportSeriesItem = (id: string) => {
-  return importSeriesStore((state) => state.items[id]);
-};
-
-export const useImportSeriesItems = () => {
-  return importSeriesStore(useShallow((state) => Object.values(state.items)));
-};
-
-export const getImportSeriesItems = (ids: string[]) => {
-  const state = importSeriesStore.getState();
-
-  return ids.reduce<ImportSeriesItem[]>((acc, id) => {
-    const item = state.items[id];
-
-    if (item != null) {
-      acc.push(item);
-    }
-
-    return acc;
-  }, []);
-};

frontend/src/AddSeries/ImportSeries/Import/useImportSeries.ts

@@ -1,85 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { useCallback } from 'react';
-import useApiMutation from 'Helpers/Hooks/useApiMutation';
-import Series from 'Series/Series';
-import {
-  getImportSeriesItems,
-  removeImportSeriesItemByPath,
-} from './importSeriesStore';
-
-export const useImportSeries = () => {
-  const queryClient = useQueryClient();
-
-  const { isPending, error, mutate } = useApiMutation<Series[], Series[]>({
-    path: '/series/import',
-    method: 'POST',
-    mutationOptions: {
-      onSuccess: (data, newSeries) => {
-        queryClient.invalidateQueries({ queryKey: ['/rootFolder'] });
-        queryClient.setQueryData<Series[]>(['/series'], (oldSeries) => {
-          if (!oldSeries) {
-            return data;
-          }
-
-          return [...oldSeries, ...data];
-        });
-
-        newSeries.forEach((series) => {
-          removeImportSeriesItemByPath(series.path);
-        });
-      },
-    },
-  });
-
-  const importSeries = useCallback(
-    (ids: string[]) => {
-      const items = getImportSeriesItems(ids);
-      const addedIds: string[] = [];
-
-      const allNewSeries = ids.reduce<Series[]>((acc, id) => {
-        const item = items.find((i) => i.id === id);
-        const selectedSeries = item?.selectedSeries;
-
-        // Make sure we have a selected series and the same series hasn't been added yet.
-        if (
-          selectedSeries &&
-          !acc.some((a) => a.tvdbId === selectedSeries.tvdbId)
-        ) {
-          const newSeries: Series = {
-            ...selectedSeries,
-            monitored: true,
-            monitorNewItems: 'all',
-            qualityProfileId: item.qualityProfileId,
-            path: item.path,
-            seriesType: item.seriesType,
-            seasonFolder: item.seasonFolder,
-            addOptions: {
-              monitor: item.monitor,
-              searchForMissingEpisodes: false,
-              searchForCutoffUnmetEpisodes: false,
-            },
-            tags: [],
-          };
-
-          newSeries.path = item.path;
-
-          addedIds.push(id);
-          acc.push(newSeries);
-        }
-
-        return acc;
-      }, []);
-
-      if (allNewSeries.length > 0) {
-        mutate(allNewSeries);
-      }
-    },
-    [mutate]
-  );
-
-  return {
-    isImporting: isPending,
-    importError: error,
-    importSeries,
-  };
-};

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.tsx

@@ -1,4 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import Alert from 'Components/Alert';
 import FieldSet from 'Components/FieldSet';
 import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
@@ -11,24 +13,28 @@ import PageContentBody from 'Components/Page/PageContentBody';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import RootFolders from 'RootFolder/RootFolders';
-import useRootFolders, { useAddRootFolder } from 'RootFolder/useRootFolders';
-import { useIsWindows } from 'System/Status/useSystemStatus';
+import {
+  addRootFolder,
+  fetchRootFolders,
+} from 'Store/Actions/rootFolderActions';
+import useIsWindows from 'System/useIsWindows';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
 import styles from './ImportSeriesSelectFolder.css';
 
 function ImportSeriesSelectFolder() {
-  const { isFetching, isFetched, error, data } = useRootFolders();
-  const { addRootFolder, isAdding, addError } = useAddRootFolder();
+  const dispatch = useDispatch();
+  const { isFetching, isPopulated, isSaving, error, saveError, items } =
+    useSelector((state: AppState) => state.rootFolders);
 
   const isWindows = useIsWindows();
 
   const [isAddNewRootFolderModalOpen, setIsAddNewRootFolderModalOpen] =
     useState(false);
 
-  const wasAdding = usePrevious(isAdding);
+  const wasSaving = usePrevious(isSaving);
 
-  const hasRootFolders = data.length > 0;
+  const hasRootFolders = items.length > 0;
   const goodFolderExample = isWindows ? 'C:\\tv shows' : '/tv shows';
   const badFolderExample = isWindows
     ? 'C:\\tv shows\\the simpsons'
@@ -44,14 +50,18 @@ function ImportSeriesSelectFolder() {
 
   const handleNewRootFolderSelect = useCallback(
     ({ value }: InputChanged<string>) => {
-      addRootFolder({ path: value });
+      dispatch(addRootFolder({ path: value }));
     },
-    [addRootFolder]
+    [dispatch]
   );
 
   useEffect(() => {
-    if (!isAdding && wasAdding && !addError) {
-      data.reduce((acc, item) => {
+    dispatch(fetchRootFolders());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!isSaving && wasSaving && !saveError) {
+      items.reduce((acc, item) => {
         if (item.id > acc) {
           return item.id;
         }
@@ -59,18 +69,18 @@ function ImportSeriesSelectFolder() {
         return acc;
       }, 0);
     }
-  }, [isAdding, wasAdding, addError, data]);
+  }, [isSaving, wasSaving, saveError, items]);
 
   return (
     <PageContent title={translate('ImportSeries')}>
       <PageContentBody>
-        {isFetching && !isFetched ? <LoadingIndicator /> : null}
+        {isFetching && !isPopulated ? <LoadingIndicator /> : null}
 
         {!isFetching && error ? (
           <Alert kind={kinds.DANGER}>{translate('RootFoldersLoadError')}</Alert>
         ) : null}
 
-        {!error && isFetched && (
+        {!error && isPopulated && (
           <div>
             <div className={styles.header}>
               {translate('LibraryImportSeriesHeader')}
@@ -108,17 +118,17 @@ function ImportSeriesSelectFolder() {
               </div>
             ) : null}
 
-            {!isAdding && addError ? (
+            {!isSaving && saveError ? (
               <Alert className={styles.addErrorAlert} kind={kinds.DANGER}>
                 {translate('AddRootFolderError')}
 
                 <ul>
-                  {Array.isArray(addError.statusBody) ? (
-                    addError.statusBody.map((e, index) => {
+                  {Array.isArray(saveError.responseJSON) ? (
+                    saveError.responseJSON.map((e, index) => {
                       return <li key={index}>{e.errorMessage}</li>;
                     })
                   ) : (
-                    <li>{JSON.stringify(addError.statusBody)}</li>
+                    <li>{JSON.stringify(saveError.responseJSON)}</li>
                   )}
                 </ul>
               </Alert>

frontend/src/App/App.tsx

@@ -1,4 +1,4 @@
-import { QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
@@ -7,13 +7,14 @@ import { Store } from 'redux';
 import Page from 'Components/Page/Page';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
-import { queryClient } from './queryClient';
 
 interface AppProps {
   store: Store;
   history: ConnectedRouterProps['history'];
 }
 
+const queryClient = new QueryClient();
+
 function App({ store, history }: AppProps) {
   return (
     <DocumentTitle title={window.Sonarr.instanceName}>

frontend/src/App/AppUpdatedModalContent.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
@@ -8,11 +9,12 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import { kinds } from 'Helpers/Props';
+import { fetchUpdates } from 'Store/Actions/systemActions';
 import UpdateChanges from 'System/Updates/UpdateChanges';
 import useUpdates from 'System/Updates/useUpdates';
 import Update from 'typings/Update';
 import translate from 'Utilities/String/translate';
-import { useAppValues } from './appStore';
+import AppState from './State/AppState';
 import styles from './AppUpdatedModalContent.css';
 
 function mergeUpdates(items: Update[], version: string, prevVersion?: string) {
@@ -62,8 +64,9 @@ interface AppUpdatedModalContentProps {
 }
 
 function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
-  const { version, prevVersion } = useAppValues('version', 'prevVersion');
-  const { isFetched, error, data, refetch } = useUpdates();
+  const dispatch = useDispatch();
+  const { version, prevVersion } = useSelector((state: AppState) => state.app);
+  const { isFetched, error, data } = useUpdates();
   const previousVersion = usePrevious(version);
 
   const { onModalClose } = props;
@@ -74,11 +77,15 @@ function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
     window.location.href = `${window.Sonarr.urlBase}/system/updates`;
   }, []);
 
+  useEffect(() => {
+    dispatch(fetchUpdates());
+  }, [dispatch]);
+
   useEffect(() => {
     if (version !== previousVersion) {
-      refetch();
+      dispatch(fetchUpdates());
     }
-  }, [version, previousVersion, refetch]);
+  }, [version, previousVersion, dispatch]);
 
   return (
     <ModalContent onModalClose={onModalClose}>

frontend/src/App/Select/SelectContext.tsx

@@ -1,35 +0,0 @@
-import React, { createContext, PropsWithChildren } from 'react';
-import useSelectStore, {
-  Id,
-  SelectStoreModel,
-} from 'App/Select/useSelectStore';
-
-interface SelectProviderProps<T extends SelectStoreModel<Id>>
-  extends PropsWithChildren {
-  items: Array<T>;
-}
-
-const SelectContext = createContext<
-  ReturnType<typeof useSelectStore> | undefined
->(undefined);
-
-export function SelectProvider<T extends SelectStoreModel<Id>>({
-  items,
-  children,
-}: SelectProviderProps<T>) {
-  const value = useSelectStore<T>(items);
-
-  return (
-    <SelectContext.Provider value={value}>{children}</SelectContext.Provider>
-  );
-}
-
-export function useSelect<T extends SelectStoreModel<Id>>() {
-  const context = React.useContext(SelectContext);
-
-  if (context === undefined) {
-    throw new Error('useSelect must be used within a SelectProvider');
-  }
-
-  return context as ReturnType<typeof useSelectStore<T>>;
-}

frontend/src/App/Select/useSelectStore.ts

@@ -1,314 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { create, useStore } from 'zustand';
-import { useShallow } from 'zustand/react/shallow';
-import getToggledRange from 'Utilities/Table/getToggledRange';
-
-export type Id = string | number;
-export type SelectStoreReturnType<T extends SelectStoreModel<Id>> = ReturnType<
-  typeof useSelectStore<T>
->;
-
-type ItemState<T extends SelectStoreModel<Id>> = Map<T['id'], ItemStateValue>;
-
-interface ItemStateValue {
-  isSelected: boolean;
-  isDisabled?: boolean;
-}
-
-export interface SelectStoreModel<TId extends Id> {
-  id: TId;
-}
-
-export interface SelectStore<T extends SelectStoreModel<Id>> {
-  itemState: Map<T['id'], ItemStateValue>;
-  lastToggled: T['id'] | null;
-  items: T[];
-}
-
-interface ItemSelectState {
-  allSelected: boolean;
-  allUnselected: boolean;
-  anySelected: boolean;
-  selectedCount: number;
-}
-
-const initialState = <T extends SelectStoreModel<Id>>(
-  items: T[] = []
-): SelectStore<T> => ({
-  itemState: new Map<T['id'], ItemStateValue>(),
-  lastToggled: null,
-  items,
-});
-
-function toggleAll<T extends SelectStoreModel<Id>>(
-  itemState: ItemState<T>,
-  isSelected: boolean
-) {
-  const newItemState = new Map(itemState);
-
-  newItemState.forEach((value, key) => {
-    newItemState.set(key, {
-      isSelected: value.isDisabled ? value.isSelected : isSelected,
-      isDisabled: value.isDisabled,
-    });
-  });
-
-  return newItemState;
-}
-
-export default function useSelectStore<T extends SelectStoreModel<Id>>(
-  items: SelectStoreModel<T['id']>[]
-) {
-  const store = useRef(
-    create<SelectStore<T>>(() => initialState(items as T[]))
-  );
-
-  const [itemSelectState, setItemSelectState] = useState<ItemSelectState>({
-    allSelected: false,
-    allUnselected: true,
-    anySelected: false,
-    selectedCount: 0,
-  });
-
-  const reset = useCallback(() => {
-    store.current.setState(initialState(items as T[]), true);
-  }, [items]);
-
-  const selectAll = useCallback(() => {
-    store.current.setState((state) => {
-      const newItemState = toggleAll(state.itemState, true);
-
-      return {
-        lastToggled: null,
-        itemState: newItemState,
-      };
-    });
-  }, []);
-
-  const unselectAll = useCallback(() => {
-    store.current.setState((state) => {
-      const newItemState = toggleAll(state.itemState, false);
-
-      return {
-        lastToggled: null,
-        itemState: newItemState,
-      };
-    });
-  }, []);
-
-  const toggleSelected = useCallback(
-    ({
-      id,
-      isSelected,
-      shiftKey,
-    }: {
-      id: T['id'];
-      isSelected: boolean | null;
-      shiftKey: boolean;
-    }) => {
-      store.current.setState((state) => {
-        const lastToggled = state.lastToggled;
-        const nextSelectedState = new Map(state.itemState);
-        const currentItemState = nextSelectedState.get(id);
-
-        if (isSelected == null) {
-          nextSelectedState.delete(id);
-        } else if (!currentItemState?.isDisabled) {
-          nextSelectedState.set(id, {
-            isSelected,
-            isDisabled: currentItemState?.isDisabled,
-          });
-
-          if (shiftKey && lastToggled) {
-            const { lower, upper } = getToggledRange(
-              state.items,
-              id,
-              lastToggled
-            );
-
-            for (let i = lower; i < upper; i++) {
-              if (!nextSelectedState.get(state.items[i].id)?.isDisabled) {
-                nextSelectedState.set(state.items[i].id, {
-                  isSelected,
-                  isDisabled: currentItemState?.isDisabled,
-                });
-              }
-            }
-          }
-        }
-
-        return {
-          ...state,
-          lastToggled: id,
-          itemState: nextSelectedState,
-        };
-      });
-    },
-    []
-  );
-
-  const toggleDisabled = useCallback((id: T['id'], isDisabled: boolean) => {
-    store.current.setState((state) => {
-      const currentItemState = state.itemState.get(id);
-
-      if (currentItemState) {
-        const newItemState = new Map(state.itemState);
-        newItemState.set(id, {
-          ...currentItemState,
-          isDisabled,
-        });
-
-        return {
-          itemState: newItemState,
-        };
-      }
-
-      return state;
-    });
-  }, []);
-
-  const getSelectedIds = useCallback((): Array<T['id']> => {
-    const iState = store.current.getState().itemState;
-
-    return Array.from(iState.entries()).reduce<T['id'][]>(
-      (acc, [id, value]) => {
-        if (value.isSelected) {
-          acc.push(id);
-        }
-        return acc;
-      },
-      []
-    );
-  }, []);
-
-  const getIsSelected = useCallback((id: T['id']): boolean => {
-    const item = store.current.getState().itemState.get(id);
-
-    return item?.isSelected ?? false;
-  }, []);
-
-  const useIsSelected = (id: T['id']) => {
-    return useStore(
-      store.current,
-      useShallow((state) => {
-        const item = state.itemState.get(id);
-
-        return item?.isSelected ?? false;
-      })
-    );
-  };
-
-  const useSelectedIds = () => {
-    return useStore(
-      store.current,
-      useShallow((state) => {
-        return state.itemState
-          .entries()
-          .reduce<T['id'][]>((acc, [id, value]) => {
-            if (value.isSelected) {
-              acc.push(id);
-            }
-            return acc;
-          }, []);
-      })
-    );
-  };
-
-  const useHasItems = () => {
-    return useStore(
-      store.current,
-      useShallow((state) => {
-        return state.itemState.size > 0;
-      })
-    );
-  };
-
-  useEffect(() => {
-    const unsubscribe = store.current.subscribe((state) => {
-      const itemState = state.itemState;
-
-      const { allSelected, allUnselected, anySelected, selectedCount } =
-        itemState.values().reduce(
-          (acc, item) => {
-            acc.allSelected =
-              acc.allSelected && !!(item.isSelected || item.isDisabled);
-            acc.allUnselected =
-              acc.allUnselected && (!item.isSelected || !!item.isDisabled);
-            acc.anySelected = acc.anySelected || item.isSelected;
-            acc.selectedCount += item.isSelected ? 1 : 0;
-
-            return acc;
-          },
-          {
-            allSelected:
-              itemState.size > 0 &&
-              itemState.values().some((i) => i.isSelected),
-            allUnselected: true,
-            anySelected: false,
-            selectedCount: 0,
-          }
-        );
-
-      setItemSelectState((s) => {
-        if (
-          s.allSelected === allSelected &&
-          s.allUnselected === allUnselected &&
-          s.anySelected === anySelected &&
-          s.selectedCount === selectedCount
-        ) {
-          return s;
-        }
-
-        return {
-          allSelected,
-          allUnselected,
-          anySelected,
-          selectedCount,
-        };
-      });
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
-  useEffect(() => {
-    store.current.setState((state) => {
-      const nextItemState = items.reduce((acc: ItemState<T>, item) => {
-        const id = item.id;
-        const existingItem = state.itemState.get(id);
-
-        acc.set(
-          id,
-          existingItem ?? {
-            isSelected: false,
-            isDisabled: false,
-          }
-        );
-
-        return acc;
-      }, new Map<T['id'], ItemStateValue>());
-
-      return {
-        itemState: nextItemState,
-        lastToggled: null,
-        items: items as T[],
-      };
-    });
-  }, [items]);
-
-  return {
-    ...itemSelectState,
-    getIsSelected,
-    getSelectedIds,
-    reset,
-    selectAll,
-    toggleDisabled,
-    toggleSelected,
-    unselectAll,
-    useHasItems,
-    useIsSelected,
-    useSelectedIds,
-  };
-}

frontend/src/App/SelectContext.tsx

@@ -0,0 +1,86 @@
+import { cloneDeep } from 'lodash';
+import React, { useCallback, useEffect } from 'react';
+import useSelectState, {
+  SelectState,
+  SelectStateModel,
+} from 'Helpers/Hooks/useSelectState';
+import ModelBase from './ModelBase';
+
+export type SelectContextAction =
+  | { type: 'reset' }
+  | { type: 'selectAll' }
+  | { type: 'unselectAll' }
+  | {
+      type: 'toggleSelected';
+      id: number | string;
+      isSelected: boolean | null;
+      shiftKey: boolean;
+    }
+  | {
+      type: 'removeItem';
+      id: number | string;
+    }
+  | {
+      type: 'updateItems';
+      items: ModelBase[];
+    };
+
+export type SelectDispatch = (action: SelectContextAction) => void;
+
+interface SelectProviderOptions<T extends SelectStateModel> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children: any;
+  items: Array<T>;
+}
+
+const SelectContext = React.createContext<
+  [SelectState, SelectDispatch] | undefined
+>(cloneDeep(undefined));
+
+export function SelectProvider<T extends SelectStateModel>(
+  props: SelectProviderOptions<T>
+) {
+  const { items } = props;
+  const [state, dispatch] = useSelectState();
+
+  const dispatchWrapper = useCallback(
+    (action: SelectContextAction) => {
+      switch (action.type) {
+        case 'reset':
+        case 'removeItem':
+          dispatch(action);
+          break;
+
+        default:
+          dispatch({
+            ...action,
+            items,
+          });
+          break;
+      }
+    },
+    [items, dispatch]
+  );
+
+  const value: [SelectState, SelectDispatch] = [state, dispatchWrapper];
+
+  useEffect(() => {
+    dispatch({ type: 'updateItems', items });
+  }, [items, dispatch]);
+
+  return (
+    <SelectContext.Provider value={value}>
+      {props.children}
+    </SelectContext.Provider>
+  );
+}
+
+export function useSelect() {
+  const context = React.useContext(SelectContext);
+
+  if (context === undefined) {
+    throw new Error('useSelect must be used within a SelectProvider');
+  }
+
+  return context;
+}

frontend/src/App/State/AppSectionState.ts

@@ -1,7 +1,7 @@
 import Column from 'Components/Table/Column';
-import { Filter, FilterBuilderProp } from 'Filters/Filter';
 import { SortDirection } from 'Helpers/Props/sortDirections';
 import { ValidationFailure } from 'typings/pending';
+import { Filter, FilterBuilderProp } from './AppState';
 
 export interface Error {
   status?: number;

frontend/src/App/State/AppState.ts

@@ -1,9 +1,112 @@
+import ModelBase from 'App/ModelBase';
+import { FilterBuilderTypes } from 'Helpers/Props/filterBuilderTypes';
+import { DateFilterValue, FilterType } from 'Helpers/Props/filterTypes';
+import { Error } from './AppSectionState';
+import BlocklistAppState from './BlocklistAppState';
+import CalendarAppState from './CalendarAppState';
 import CaptchaAppState from './CaptchaAppState';
+import CommandAppState from './CommandAppState';
+import CustomFiltersAppState from './CustomFiltersAppState';
+import EpisodeFilesAppState from './EpisodeFilesAppState';
+import EpisodesAppState from './EpisodesAppState';
+import HistoryAppState, { SeriesHistoryAppState } from './HistoryAppState';
+import ImportSeriesAppState from './ImportSeriesAppState';
+import InteractiveImportAppState from './InteractiveImportAppState';
+import MessagesAppState from './MessagesAppState';
+import OAuthAppState from './OAuthAppState';
+import OrganizePreviewAppState from './OrganizePreviewAppState';
+import ParseAppState from './ParseAppState';
+import PathsAppState from './PathsAppState';
+import ProviderOptionsAppState from './ProviderOptionsAppState';
+import ReleasesAppState from './ReleasesAppState';
+import RootFolderAppState from './RootFolderAppState';
+import SeriesAppState, { SeriesIndexAppState } from './SeriesAppState';
 import SettingsAppState from './SettingsAppState';
+import SystemAppState from './SystemAppState';
+import TagsAppState from './TagsAppState';
+import WantedAppState from './WantedAppState';
+
+export interface FilterBuilderPropOption {
+  id: string;
+  name: string;
+}
+
+export interface FilterBuilderProp<T> {
+  name: string;
+  label: string | (() => string);
+  type: FilterBuilderTypes;
+  valueType?: string;
+  optionsSelector?: (items: T[]) => FilterBuilderPropOption[];
+}
+
+export interface PropertyFilter {
+  key: string;
+  value: string | string[] | number[] | boolean[] | DateFilterValue;
+  type: FilterType;
+}
+
+export interface Filter {
+  key: string;
+  label: string | (() => string);
+  filters: PropertyFilter[];
+}
+
+export interface CustomFilter extends ModelBase {
+  type: string;
+  label: string;
+  filters: PropertyFilter[];
+}
+
+export interface AppSectionState {
+  isUpdated: boolean;
+  isConnected: boolean;
+  isDisconnected: boolean;
+  isReconnecting: boolean;
+  isRestarting: boolean;
+  isSidebarVisible: boolean;
+  version: string;
+  prevVersion?: string;
+  dimensions: {
+    isSmallScreen: boolean;
+    isLargeScreen: boolean;
+    width: number;
+    height: number;
+  };
+  translations: {
+    error?: Error;
+    isPopulated: boolean;
+  };
+  messages: MessagesAppState;
+}
 
 interface AppState {
+  app: AppSectionState;
+  blocklist: BlocklistAppState;
+  calendar: CalendarAppState;
   captcha: CaptchaAppState;
+  commands: CommandAppState;
+  customFilters: CustomFiltersAppState;
+  episodeFiles: EpisodeFilesAppState;
+  episodeHistory: HistoryAppState;
+  episodes: EpisodesAppState;
+  episodesSelection: EpisodesAppState;
+  history: HistoryAppState;
+  importSeries: ImportSeriesAppState;
+  interactiveImport: InteractiveImportAppState;
+  oAuth: OAuthAppState;
+  organizePreview: OrganizePreviewAppState;
+  parse: ParseAppState;
+  paths: PathsAppState;
+  providerOptions: ProviderOptionsAppState;
+  releases: ReleasesAppState;
+  rootFolders: RootFolderAppState;
+  series: SeriesAppState;
+  seriesHistory: SeriesHistoryAppState;
+  seriesIndex: SeriesIndexAppState;
   settings: SettingsAppState;
+  system: SystemAppState;
+  tags: TagsAppState;
+  wanted: WantedAppState;
 }
 
 export default AppState;

frontend/src/App/State/BackupAppState.ts

@@ -0,0 +1,9 @@
+import Backup from 'typings/Backup';
+import AppSectionState, { Error } from './AppSectionState';
+
+interface BackupAppState extends AppSectionState<Backup> {
+  isRestoring: boolean;
+  restoreError?: Error;
+}
+
+export default BackupAppState;

frontend/src/App/State/BlocklistAppState.ts

@@ -0,0 +1,16 @@
+import Blocklist from 'typings/Blocklist';
+import AppSectionState, {
+  AppSectionFilterState,
+  PagedAppSectionState,
+  TableAppSectionState,
+} from './AppSectionState';
+
+interface BlocklistAppState
+  extends AppSectionState<Blocklist>,
+    AppSectionFilterState<Blocklist>,
+    PagedAppSectionState,
+    TableAppSectionState {
+  isRemoving: boolean;
+}
+
+export default BlocklistAppState;

frontend/src/App/State/CalendarAppState.ts

@@ -0,0 +1,29 @@
+import moment from 'moment';
+import AppSectionState, {
+  AppSectionFilterState,
+} from 'App/State/AppSectionState';
+import { CalendarView } from 'Calendar/calendarViews';
+import { CalendarItem } from 'typings/Calendar';
+
+interface CalendarOptions {
+  showEpisodeInformation: boolean;
+  showFinaleIcon: boolean;
+  showSpecialIcon: boolean;
+  showCutoffUnmetIcon: boolean;
+  collapseMultipleEpisodes: boolean;
+  fullColorEvents: boolean;
+}
+
+interface CalendarAppState
+  extends AppSectionState<CalendarItem>,
+    AppSectionFilterState<CalendarItem> {
+  searchMissingCommandId: number | null;
+  start: moment.Moment;
+  end: moment.Moment;
+  dates: string[];
+  time: string;
+  view: CalendarView;
+  options: CalendarOptions;
+}
+
+export default CalendarAppState;

frontend/src/App/State/ClientSideCollectionAppState.ts

@@ -1,5 +1,8 @@
+import { CustomFilter } from './AppState';
+
 interface ClientSideCollectionAppState {
   totalItems: number;
+  customFilters: CustomFilter[];
 }
 
 export default ClientSideCollectionAppState;

frontend/src/App/State/CommandAppState.ts

@@ -0,0 +1,6 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Command from 'Commands/Command';
+
+export type CommandAppState = AppSectionState<Command>;
+
+export default CommandAppState;

frontend/src/App/State/CustomFiltersAppState.ts

@@ -0,0 +1,12 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import { CustomFilter } from './AppState';
+
+interface CustomFiltersAppState
+  extends AppSectionState<CustomFilter>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export default CustomFiltersAppState;

frontend/src/App/State/EpisodeFilesAppState.ts

@@ -0,0 +1,10 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+} from 'App/State/AppSectionState';
+import { EpisodeFile } from 'EpisodeFile/EpisodeFile';
+
+interface EpisodeFilesAppState
+  extends AppSectionState<EpisodeFile>,
+    AppSectionDeleteState {}
+
+export default EpisodeFilesAppState;

frontend/src/App/State/EpisodesAppState.ts

@@ -0,0 +1,9 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Column from 'Components/Table/Column';
+import Episode from 'Episode/Episode';
+
+interface EpisodesAppState extends AppSectionState<Episode> {
+  columns: Column[];
+}
+
+export default EpisodesAppState;

frontend/src/App/State/HistoryAppState.ts

@@ -0,0 +1,16 @@
+import AppSectionState, {
+  AppSectionFilterState,
+  PagedAppSectionState,
+  TableAppSectionState,
+} from 'App/State/AppSectionState';
+import History from 'typings/History';
+
+export type SeriesHistoryAppState = AppSectionState<History>;
+
+interface HistoryAppState
+  extends AppSectionState<History>,
+    AppSectionFilterState<History>,
+    PagedAppSectionState,
+    TableAppSectionState {}
+
+export default HistoryAppState;

frontend/src/App/State/ImportSeriesAppState.ts

@@ -0,0 +1,29 @@
+import Series, { SeriesMonitor, SeriesType } from 'Series/Series';
+import { Error } from './AppSectionState';
+
+export interface ImportSeries {
+  id: string;
+  error?: Error;
+  isFetching: boolean;
+  isPopulated: boolean;
+  isQueued: boolean;
+  items: Series[];
+  monitor: SeriesMonitor;
+  path: string;
+  qualityProfileId: number;
+  relativePath: string;
+  seasonFolder: boolean;
+  selectedSeries?: Series;
+  seriesType: SeriesType;
+  term: string;
+}
+
+interface ImportSeriesAppState {
+  isLookingUpSeries: false;
+  isImporting: false;
+  isImported: false;
+  importError: Error | null;
+  items: ImportSeries[];
+}
+
+export default ImportSeriesAppState;

frontend/src/App/State/InteractiveImportAppState.ts

@@ -0,0 +1,21 @@
+import AppSectionState from 'App/State/AppSectionState';
+import ImportMode from 'InteractiveImport/ImportMode';
+import InteractiveImport from 'InteractiveImport/InteractiveImport';
+
+interface FavoriteFolder {
+  folder: string;
+}
+
+interface RecentFolder {
+  folder: string;
+  lastUsed: string;
+}
+
+interface InteractiveImportAppState extends AppSectionState<InteractiveImport> {
+  originalItems: InteractiveImport[];
+  importMode: ImportMode;
+  favoriteFolders: FavoriteFolder[];
+  recentFolders: RecentFolder[];
+}
+
+export default InteractiveImportAppState;

frontend/src/App/State/MessagesAppState.ts

@@ -0,0 +1,15 @@
+import ModelBase from 'App/ModelBase';
+import AppSectionState from 'App/State/AppSectionState';
+
+export type MessageType = 'error' | 'info' | 'success' | 'warning';
+
+export interface Message extends ModelBase {
+  hideAfter: number;
+  message: string;
+  name: string;
+  type: MessageType;
+}
+
+type MessagesAppState = AppSectionState<Message>;
+
+export default MessagesAppState;

frontend/src/App/State/MetadataAppState.ts

@@ -0,0 +1,6 @@
+import { AppSectionProviderState } from 'App/State/AppSectionState';
+import Metadata from 'typings/Metadata';
+
+type MetadataAppState = AppSectionProviderState<Metadata>;
+
+export default MetadataAppState;

frontend/src/App/State/OAuthAppState.ts

@@ -0,0 +1,9 @@
+import { Error } from './AppSectionState';
+
+interface OAuthAppState {
+  authorizing: boolean;
+  result: Record<string, unknown> | null;
+  error: Error;
+}
+
+export default OAuthAppState;

frontend/src/App/State/OrganizePreviewAppState.ts

@@ -0,0 +1,15 @@
+import ModelBase from 'App/ModelBase';
+import AppSectionState from 'App/State/AppSectionState';
+
+export interface OrganizePreviewModel extends ModelBase {
+  seriesId: number;
+  seasonNumber: number;
+  episodeNumbers: number[];
+  episodeFileId: number;
+  existingPath: string;
+  newPath: string;
+}
+
+type OrganizePreviewAppState = AppSectionState<OrganizePreviewModel>;
+
+export default OrganizePreviewAppState;

frontend/src/App/State/ParseAppState.ts

@@ -1,4 +1,5 @@
 import ModelBase from 'App/ModelBase';
+import { AppSectionItemState } from 'App/State/AppSectionState';
 import Episode from 'Episode/Episode';
 import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
@@ -47,3 +48,7 @@ export interface ParseModel extends ModelBase {
   customFormats?: CustomFormat[];
   customFormatScore?: number;
 }
+
+type ParseAppState = AppSectionItemState<ParseModel>;
+
+export default ParseAppState;

frontend/src/App/State/PathsAppState.ts

@@ -0,0 +1,29 @@
+interface BasePath {
+  name: string;
+  path: string;
+  size: number;
+  lastModified: string;
+}
+
+interface File extends BasePath {
+  type: 'file';
+}
+
+interface Folder extends BasePath {
+  type: 'folder';
+}
+
+export type PathType = 'file' | 'folder' | 'drive' | 'computer' | 'parent';
+export type Path = File | Folder;
+
+interface PathsAppState {
+  currentPath: string;
+  isFetching: boolean;
+  isPopulated: boolean;
+  error: Error;
+  directories: Folder[];
+  files: File[];
+  parent: string | null;
+}
+
+export default PathsAppState;

frontend/src/App/State/ProviderOptionsAppState.ts

@@ -0,0 +1,22 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Field, { FieldSelectOption } from 'typings/Field';
+
+export interface ProviderOptions {
+  fields?: Field[];
+}
+
+interface ProviderOptionsDevice {
+  id: string;
+  name: string;
+}
+
+interface ProviderOptionsAppState {
+  devices: AppSectionState<ProviderOptionsDevice>;
+  servers: AppSectionState<FieldSelectOption<unknown>>;
+  newznabCategories: AppSectionState<FieldSelectOption<unknown>>;
+  getProfiles: AppSectionState<FieldSelectOption<unknown>>;
+  getTags: AppSectionState<FieldSelectOption<unknown>>;
+  getRootFolders: AppSectionState<FieldSelectOption<unknown>>;
+}
+
+export default ProviderOptionsAppState;

frontend/src/App/State/ReleasesAppState.ts

@@ -0,0 +1,10 @@
+import AppSectionState, {
+  AppSectionFilterState,
+} from 'App/State/AppSectionState';
+import Release from 'typings/Release';
+
+interface ReleasesAppState
+  extends AppSectionState<Release>,
+    AppSectionFilterState<Release> {}
+
+export default ReleasesAppState;

frontend/src/App/State/RootFolderAppState.ts

@@ -0,0 +1,12 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import RootFolder from 'typings/RootFolder';
+
+interface RootFolderAppState
+  extends AppSectionState<RootFolder>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export default RootFolderAppState;

frontend/src/App/State/SeriesAppState.ts

@@ -0,0 +1,66 @@
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import Column from 'Components/Table/Column';
+import { SortDirection } from 'Helpers/Props/sortDirections';
+import Series from 'Series/Series';
+import { Filter, FilterBuilderProp } from './AppState';
+
+export interface SeriesIndexAppState {
+  sortKey: string;
+  sortDirection: SortDirection;
+  secondarySortKey: string;
+  secondarySortDirection: SortDirection;
+  view: string;
+
+  posterOptions: {
+    detailedProgressBar: boolean;
+    size: string;
+    showTitle: boolean;
+    showMonitored: boolean;
+    showQualityProfile: boolean;
+    showTags: boolean;
+    showSearchAction: boolean;
+  };
+
+  overviewOptions: {
+    detailedProgressBar: boolean;
+    size: string;
+    showMonitored: boolean;
+    showNetwork: boolean;
+    showQualityProfile: boolean;
+    showPreviousAiring: boolean;
+    showAdded: boolean;
+    showSeasonCount: boolean;
+    showPath: boolean;
+    showSizeOnDisk: boolean;
+    showTags: boolean;
+    showSearchAction: boolean;
+  };
+
+  tableOptions: {
+    showBanners: boolean;
+    showSearchAction: boolean;
+  };
+
+  selectedFilterKey: string;
+  filterBuilderProps: FilterBuilderProp<Series>[];
+  filters: Filter[];
+  columns: Column[];
+}
+
+interface SeriesAppState
+  extends AppSectionState<Series>,
+    AppSectionDeleteState,
+    AppSectionSaveState {
+  itemMap: Record<number, number>;
+
+  deleteOptions: {
+    addImportListExclusion: boolean;
+  };
+
+  pendingChanges: Partial<Series>;
+}
+
+export default SeriesAppState;

frontend/src/App/State/SettingsAppState.ts

@@ -1,11 +1,13 @@
 import AppSectionState, {
   AppSectionDeleteState,
+  AppSectionItemSchemaState,
   AppSectionItemState,
   AppSectionListState,
   AppSectionSaveState,
   AppSectionSchemaState,
   PagedAppSectionState,
 } from 'App/State/AppSectionState';
+import Language from 'Language/Language';
 import AutoTagging, { AutoTaggingSpecification } from 'typings/AutoTagging';
 import CustomFormat from 'typings/CustomFormat';
 import CustomFormatSpecification from 'typings/CustomFormatSpecification';
@@ -14,9 +16,21 @@ import DownloadClient from 'typings/DownloadClient';
 import ImportList from 'typings/ImportList';
 import ImportListExclusion from 'typings/ImportListExclusion';
 import ImportListOptionsSettings from 'typings/ImportListOptionsSettings';
+import Indexer from 'typings/Indexer';
 import IndexerFlag from 'typings/IndexerFlag';
+import Notification from 'typings/Notification';
+import QualityDefinition from 'typings/QualityDefinition';
+import QualityProfile from 'typings/QualityProfile';
 import DownloadClientOptions from 'typings/Settings/DownloadClientOptions';
+import General from 'typings/Settings/General';
 import IndexerOptions from 'typings/Settings/IndexerOptions';
+import MediaManagement from 'typings/Settings/MediaManagement';
+import NamingConfig from 'typings/Settings/NamingConfig';
+import NamingExample from 'typings/Settings/NamingExample';
+import ReleaseProfile from 'typings/Settings/ReleaseProfile';
+import RemotePathMapping from 'typings/Settings/RemotePathMapping';
+import UiSettings from 'typings/Settings/UiSettings';
+import MetadataAppState from './MetadataAppState';
 
 type Presets<T> = T & {
   presets: T[];
@@ -50,6 +64,20 @@ export interface DownloadClientOptionsAppState
   extends AppSectionItemState<DownloadClientOptions>,
     AppSectionSaveState {}
 
+export interface GeneralAppState
+  extends AppSectionItemState<General>,
+    AppSectionSaveState {}
+
+export interface MediaManagementAppState
+  extends AppSectionItemState<MediaManagement>,
+    AppSectionSaveState {}
+
+export interface NamingAppState
+  extends AppSectionItemState<NamingConfig>,
+    AppSectionSaveState {}
+
+export type NamingExamplesAppState = AppSectionItemState<NamingExample>;
+
 export interface ImportListAppState
   extends AppSectionState<ImportList>,
     AppSectionDeleteState,
@@ -62,6 +90,40 @@ export interface IndexerOptionsAppState
   extends AppSectionItemState<IndexerOptions>,
     AppSectionSaveState {}
 
+export interface IndexerAppState
+  extends AppSectionState<Indexer>,
+    AppSectionDeleteState,
+    AppSectionSaveState,
+    AppSectionSchemaState<Presets<Indexer>> {
+  isTestingAll: boolean;
+}
+
+export interface NotificationAppState
+  extends AppSectionState<Notification>,
+    AppSectionDeleteState,
+    AppSectionSaveState,
+    AppSectionSchemaState<Presets<Notification>> {}
+
+export interface QualityDefinitionsAppState
+  extends AppSectionState<QualityDefinition>,
+    AppSectionSaveState {
+  pendingChanges: {
+    [key: number]: Partial<QualityProfile>;
+  };
+}
+
+export interface QualityProfilesAppState
+  extends AppSectionState<QualityProfile>,
+    AppSectionItemSchemaState<QualityProfile>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+export interface ReleaseProfilesAppState
+  extends AppSectionState<ReleaseProfile>,
+    AppSectionSaveState {
+  pendingChanges: Partial<ReleaseProfile>;
+}
+
 export interface CustomFormatAppState
   extends AppSectionState<CustomFormat>,
     AppSectionDeleteState,
@@ -85,9 +147,19 @@ export interface ImportListExclusionsSettingsAppState
   pendingChanges: Partial<ImportListExclusion>;
 }
 
+export interface RemotePathMappingsAppState
+  extends AppSectionState<RemotePathMapping>,
+    AppSectionDeleteState,
+    AppSectionSaveState {
+  pendingChanges: Partial<RemotePathMapping>;
+}
+
 export type IndexerFlagSettingsAppState = AppSectionState<IndexerFlag>;
+export type LanguageSettingsAppState = AppSectionState<Language>;
+export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 
 interface SettingsAppState {
+  advancedSettings: boolean;
   autoTaggings: AutoTaggingAppState;
   autoTaggingSpecifications: AutoTaggingSpecificationAppState;
   customFormats: CustomFormatAppState;
@@ -95,11 +167,24 @@ interface SettingsAppState {
   delayProfiles: DelayProfileAppState;
   downloadClients: DownloadClientAppState;
   downloadClientOptions: DownloadClientOptionsAppState;
+  general: GeneralAppState;
   importListExclusions: ImportListExclusionsSettingsAppState;
   importListOptions: ImportListOptionsSettingsAppState;
   importLists: ImportListAppState;
   indexerFlags: IndexerFlagSettingsAppState;
   indexerOptions: IndexerOptionsAppState;
+  indexers: IndexerAppState;
+  languages: LanguageSettingsAppState;
+  mediaManagement: MediaManagementAppState;
+  metadata: MetadataAppState;
+  naming: NamingAppState;
+  namingExamples: NamingExamplesAppState;
+  notifications: NotificationAppState;
+  qualityDefinitions: QualityDefinitionsAppState;
+  qualityProfiles: QualityProfilesAppState;
+  releaseProfiles: ReleaseProfilesAppState;
+  remotePathMappings: RemotePathMappingsAppState;
+  ui: UiSettingsAppState;
 }
 
 export default SettingsAppState;

frontend/src/App/State/SystemAppState.ts

@@ -0,0 +1,25 @@
+import DiskSpace from 'typings/DiskSpace';
+import Health from 'typings/Health';
+import LogFile from 'typings/LogFile';
+import SystemStatus from 'typings/SystemStatus';
+import Task from 'typings/Task';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
+import BackupAppState from './BackupAppState';
+
+export type DiskSpaceAppState = AppSectionState<DiskSpace>;
+export type HealthAppState = AppSectionState<Health>;
+export type SystemStatusAppState = AppSectionItemState<SystemStatus>;
+export type TaskAppState = AppSectionState<Task>;
+export type LogFilesAppState = AppSectionState<LogFile>;
+
+interface SystemAppState {
+  backups: BackupAppState;
+  diskSpace: DiskSpaceAppState;
+  health: HealthAppState;
+  logFiles: LogFilesAppState;
+  status: SystemStatusAppState;
+  tasks: TaskAppState;
+  updateLogFiles: LogFilesAppState;
+}
+
+export default SystemAppState;

frontend/src/App/State/TagsAppState.ts

@@ -0,0 +1,32 @@
+import ModelBase from 'App/ModelBase';
+import AppSectionState, {
+  AppSectionDeleteState,
+  AppSectionSaveState,
+} from 'App/State/AppSectionState';
+
+export interface Tag extends ModelBase {
+  label: string;
+}
+
+export interface TagDetail extends ModelBase {
+  label: string;
+  autoTagIds: number[];
+  delayProfileIds: number[];
+  downloadClientIds: [];
+  importListIds: number[];
+  indexerIds: number[];
+  notificationIds: number[];
+  restrictionIds: number[];
+  seriesIds: number[];
+}
+
+export interface TagDetailAppState
+  extends AppSectionState<TagDetail>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
+interface TagsAppState extends AppSectionState<Tag>, AppSectionDeleteState {
+  details: TagDetailAppState;
+}
+
+export default TagsAppState;

frontend/src/App/State/WantedAppState.ts

@@ -0,0 +1,29 @@
+import AppSectionState, {
+  AppSectionFilterState,
+  PagedAppSectionState,
+  TableAppSectionState,
+} from 'App/State/AppSectionState';
+import Episode from 'Episode/Episode';
+
+interface WantedEpisode extends Episode {
+  isSaving?: boolean;
+}
+
+interface WantedCutoffUnmetAppState
+  extends AppSectionState<WantedEpisode>,
+    AppSectionFilterState<WantedEpisode>,
+    PagedAppSectionState,
+    TableAppSectionState {}
+
+interface WantedMissingAppState
+  extends AppSectionState<WantedEpisode>,
+    AppSectionFilterState<WantedEpisode>,
+    PagedAppSectionState,
+    TableAppSectionState {}
+
+interface WantedAppState {
+  cutoffUnmet: WantedCutoffUnmetAppState;
+  missing: WantedMissingAppState;
+}
+
+export default WantedAppState;

frontend/src/App/appStore.ts

@@ -1,202 +0,0 @@
-import { create } from 'zustand';
-import { useShallow } from 'zustand/react/shallow';
-import getQueryPath from 'Utilities/Fetch/getQueryPath';
-import fetchJson from 'Utilities/requestAction';
-
-function getDimensions(width: number, height: number) {
-  const dimensions = {
-    width,
-    height,
-    isExtraSmallScreen: width <= 480,
-    isSmallScreen: width <= 768,
-    isMediumScreen: width <= 992,
-    isLargeScreen: width <= 1200,
-  };
-
-  return dimensions;
-}
-
-interface Dimensions {
-  width: number;
-  height: number;
-  isExtraSmallScreen: boolean;
-  isSmallScreen: boolean;
-  isMediumScreen: boolean;
-  isLargeScreen: boolean;
-}
-
-interface AppState {
-  dimensions: Dimensions;
-  version: string;
-  prevVersion?: string;
-  isUpdated: boolean;
-  isConnected: boolean;
-  isReconnecting: boolean;
-  isDisconnected: boolean;
-  isRestarting: boolean;
-  isSidebarVisible: boolean;
-}
-
-// Variables for ping functionality
-let abortPingServer: (() => void) | null = null;
-let pingTimeout: ReturnType<typeof setTimeout> | null = null;
-
-const useAppStore = create<AppState>()(() => {
-  const dimensions = getDimensions(window.innerWidth, window.innerHeight);
-
-  return {
-    dimensions,
-    version: window.Sonarr.version,
-    isUpdated: false,
-    isConnected: true,
-    isReconnecting: false,
-    isDisconnected: false,
-    isRestarting: false,
-    isSidebarVisible: !dimensions.isSmallScreen,
-  };
-});
-
-export const useAppValues = <K extends keyof AppState>(...keys: K[]) => {
-  return useAppStore(
-    useShallow((state) => {
-      return keys.reduce((acc, key) => {
-        acc[key] = state[key];
-        return acc;
-      }, {} as Pick<AppState, K>);
-    })
-  );
-};
-
-export const useAppValue = <K extends keyof AppState>(key: K) => {
-  return useAppStore(useShallow((state) => state[key]));
-};
-
-export const useAppDimensions = () => {
-  return useAppStore(useShallow((state) => state.dimensions));
-};
-
-export const useAppDimension = <K extends keyof Dimensions>(key: K) => {
-  return useAppStore(useShallow((state) => state.dimensions[key]));
-};
-
-export const getAppDimensions = () => {
-  return useAppStore.getState().dimensions;
-};
-
-export const getAppValues = <K extends keyof AppState>(...keys: K[]) => {
-  const state = useAppStore.getState();
-  return keys.reduce((acc, key) => {
-    acc[key] = state[key];
-    return acc;
-  }, {} as Pick<AppState, K>);
-};
-
-export const getAppValue = <K extends keyof AppState>(key: K) => {
-  return useAppStore.getState()[key];
-};
-
-function pingServerAfterTimeout() {
-  if (abortPingServer) {
-    abortPingServer();
-    abortPingServer = null;
-  }
-
-  if (pingTimeout) {
-    clearTimeout(pingTimeout);
-    pingTimeout = null;
-  }
-
-  pingTimeout = setTimeout(async () => {
-    const { isRestarting, isConnected } = getAppValues(
-      'isRestarting',
-      'isConnected'
-    );
-
-    if (!isRestarting && isConnected) {
-      return;
-    }
-
-    const abortController = new AbortController();
-    abortPingServer = () => abortController.abort();
-
-    try {
-      await fetchJson({
-        url: getQueryPath('/system/status'),
-        method: 'GET',
-        signal: abortController.signal,
-        headers: {
-          'X-Api-Key': window.Sonarr.apiKey,
-          'X-Sonarr-Client': 'Sonarr',
-        },
-      });
-
-      abortPingServer = null;
-      pingTimeout = null;
-
-      setAppValue({
-        isRestarting: false,
-      });
-    } catch (error: unknown) {
-      abortPingServer = null;
-      pingTimeout = null;
-
-      if ((error as { status?: number }).status === 401) {
-        setAppValue({
-          isRestarting: false,
-        });
-      } else if (!abortController.signal.aborted) {
-        pingServerAfterTimeout();
-      }
-    }
-  }, 5000);
-}
-
-export const saveDimensions = ({
-  width,
-  height,
-}: {
-  width: number;
-  height: number;
-}) => {
-  const dimensions = getDimensions(width, height);
-  useAppStore.setState({ dimensions });
-};
-
-export const setVersion = ({ version }: { version: string }) => {
-  useAppStore.setState((state) => {
-    const newState: Partial<AppState> = {
-      version,
-    };
-
-    if (state.version !== version) {
-      if (!state.prevVersion) {
-        newState.prevVersion = state.version;
-      }
-      newState.isUpdated = true;
-    }
-
-    return newState;
-  });
-};
-
-export const setIsSidebarVisible = ({
-  isSidebarVisible,
-}: {
-  isSidebarVisible: boolean;
-}) => {
-  useAppStore.setState({ isSidebarVisible });
-};
-
-export const toggleIsSidebarVisible = () => {
-  useAppStore.setState((state) => ({
-    isSidebarVisible: !state.isSidebarVisible,
-  }));
-};
-
-export const setAppValue = (payload: Partial<AppState>) => {
-  useAppStore.setState(payload);
-};
-
-export const pingServer = () => {
-  pingServerAfterTimeout();
-};

frontend/src/App/messagesStore.ts

@@ -1,56 +0,0 @@
-import { create } from 'zustand';
-import { useShallow } from 'zustand/react/shallow';
-import ModelBase from './ModelBase';
-
-export type MessageType = 'error' | 'info' | 'success' | 'warning';
-
-export interface Message extends ModelBase {
-  hideAfter: number;
-  message: string;
-  name: string;
-  type: MessageType;
-}
-
-interface MessagesState {
-  messages: Message[];
-}
-
-const useMessagesStore = create<MessagesState>()(() => ({
-  messages: [],
-}));
-
-export const useMessages = () => {
-  return useMessagesStore(useShallow((state) => state.messages));
-};
-
-export const getMessages = () => {
-  return useMessagesStore.getState().messages;
-};
-
-export const showMessage = (payload: Message) => {
-  useMessagesStore.setState((state) => {
-    const messages = [...state.messages];
-    const index = messages.findIndex((item) => item.id === payload.id);
-
-    if (index >= 0) {
-      const item = messages[index];
-      messages.splice(index, 1, { ...item, ...payload });
-    } else {
-      messages.push({ ...payload });
-    }
-
-    return {
-      messages,
-    };
-  });
-};
-
-export const hideMessage = ({ id }: { id: string | number }) => {
-  useMessagesStore.setState((state) => {
-    const messages = state.messages.filter((item) => item.id !== id);
-
-    return {
-      messages,
-    };
-  });
-};

frontend/src/App/queryClient.ts

@@ -1,3 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-
-export const queryClient = new QueryClient();

frontend/src/App/useTranslations.ts

@@ -1,28 +0,0 @@
-import { useEffect } from 'react';
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import { setTranslations } from 'Utilities/String/translate';
-
-interface TranslationsResponse {
-  strings: Record<string, string>;
-}
-
-export function useTranslations() {
-  const { data, ...result } = useApiQuery<TranslationsResponse>({
-    path: '/localization',
-    queryOptions: {
-      staleTime: Infinity,
-      gcTime: Infinity,
-    },
-  });
-
-  useEffect(() => {
-    if (data) {
-      setTranslations(data.strings);
-    }
-  }, [data]);
-
-  return {
-    ...result,
-    data,
-  };
-}

frontend/src/Calendar/Agenda/Agenda.tsx

@@ -1,19 +1,20 @@
 import moment from 'moment';
 import React from 'react';
-import useCalendar from 'Calendar/useCalendar';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import AgendaEvent from './AgendaEvent';
 import styles from './Agenda.css';
 
 function Agenda() {
-  const { data } = useCalendar();
+  const { items } = useSelector((state: AppState) => state.calendar);
 
   return (
     <div className={styles.agenda}>
-      {data.map((item, index) => {
+      {items.map((item, index) => {
         const momentDate = moment(item.airDateUtc);
         const showDate =
           index === 0 ||
-          !moment(data[index - 1].airDateUtc).isSame(momentDate, 'day');
+          !moment(items[index - 1].airDateUtc).isSame(momentDate, 'day');
 
         return <AgendaEvent key={item.id} showDate={showDate} {...item} />;
       })}

frontend/src/Calendar/Agenda/AgendaEvent.tsx

@@ -1,7 +1,9 @@
 import classNames from 'classnames';
+import moment from 'moment';
 import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useQueueItemForEpisode } from 'Activity/Queue/Details/QueueDetailsProvider';
-import { useCalendarOptions } from 'Calendar/calendarOptionsStore';
+import AppState from 'App/State/AppState';
 import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
@@ -9,11 +11,10 @@ import Link from 'Components/Link/Link';
 import EpisodeDetailsModal from 'Episode/EpisodeDetailsModal';
 import episodeEntities from 'Episode/episodeEntities';
 import getFinaleTypeName from 'Episode/getFinaleTypeName';
-import { useEpisodeFile } from 'EpisodeFile/EpisodeFileProvider';
+import useEpisodeFile from 'EpisodeFile/useEpisodeFile';
 import { icons, kinds } from 'Helpers/Props';
-import { useSingleSeries } from 'Series/useSeries';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
-import { convertToTimezone } from 'Utilities/Date/convertToTimezone';
+import useSeries from 'Series/useSeries';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import formatTime from 'Utilities/Date/formatTime';
 import padNumber from 'Utilities/Number/padNumber';
 import translate from 'Utilities/String/translate';
@@ -54,26 +55,24 @@ function AgendaEvent(props: AgendaEventProps) {
     showDate,
   } = props;
 
-  const series = useSingleSeries(seriesId)!;
+  const series = useSeries(seriesId)!;
   const episodeFile = useEpisodeFile(episodeFileId);
   const queueItem = useQueueItemForEpisode(id);
-  const { timeFormat, longDateFormat, enableColorImpairedMode, timeZone } =
-    useUiSettingsValues();
+  const { timeFormat, longDateFormat, enableColorImpairedMode } = useSelector(
+    createUISettingsSelector()
+  );
 
   const {
     showEpisodeInformation,
     showFinaleIcon,
     showSpecialIcon,
     showCutoffUnmetIcon,
-  } = useCalendarOptions();
+  } = useSelector((state: AppState) => state.calendar.options);
 
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
 
-  const startTime = convertToTimezone(airDateUtc, timeZone);
-  const endTime = convertToTimezone(airDateUtc, timeZone).add(
-    series.runtime,
-    'minutes'
-  );
+  const startTime = moment(airDateUtc);
+  const endTime = moment(airDateUtc).add(series.runtime, 'minutes');
   const downloading = !!(queueItem || grabbed);
   const isMonitored = series.monitored && monitored;
   const statusStyle = getStatusStyle(
@@ -111,10 +110,9 @@ function AgendaEvent(props: AgendaEventProps) {
           )}
         >
           <div className={styles.time}>
-            {formatTime(airDateUtc, timeFormat, { timeZone })} -{' '}
+            {formatTime(airDateUtc, timeFormat)} -{' '}
             {formatTime(endTime.toISOString(), timeFormat, {
               includeMinuteZero: true,
-              timeZone,
             })}
           </div>
 

frontend/src/Calendar/Calendar.tsx

@@ -1,65 +1,91 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import CommandNames from 'Commands/CommandNames';
-import { useCommandExecuting } from 'Commands/useCommands';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import * as commandNames from 'Commands/commandNames';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Episode from 'Episode/Episode';
 import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import { kinds } from 'Helpers/Props';
+import {
+  clearCalendar,
+  fetchCalendar,
+  gotoCalendarToday,
+} from 'Store/Actions/calendarActions';
+import {
+  clearEpisodeFiles,
+  fetchEpisodeFiles,
+} from 'Store/Actions/episodeFileActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import {
   registerPagePopulator,
   unregisterPagePopulator,
 } from 'Utilities/pagePopulator';
 import translate from 'Utilities/String/translate';
 import Agenda from './Agenda/Agenda';
-import { useCalendarOption } from './calendarOptionsStore';
 import CalendarDays from './Day/CalendarDays';
 import DaysOfWeek from './Day/DaysOfWeek';
 import CalendarHeader from './Header/CalendarHeader';
-import useCalendar, { goToToday } from './useCalendar';
 import styles from './Calendar.css';
 
 const UPDATE_DELAY = 3600000; // 1 hour
 
 function Calendar() {
+  const dispatch = useDispatch();
   const requestCurrentPage = useCurrentPage();
   const updateTimeout = useRef<ReturnType<typeof setTimeout>>();
 
-  const { isFetching, isLoading, error, refetch } = useCalendar();
-  const view = useCalendarOption('view');
+  const { isFetching, isPopulated, error, items, time, view } = useSelector(
+    (state: AppState) => state.calendar
+  );
 
-  const isRefreshingSeries = useCommandExecuting(CommandNames.RefreshSeries);
+  const isRefreshingSeries = useSelector(
+    createCommandExecutingSelector(commandNames.REFRESH_SERIES)
+  );
+
+  const firstDayOfWeek = useSelector(
+    (state: AppState) => state.settings.ui.item.firstDayOfWeek
+  );
 
   const wasRefreshingSeries = usePrevious(isRefreshingSeries);
+  const previousFirstDayOfWeek = usePrevious(firstDayOfWeek);
+  const previousItems = usePrevious(items);
 
   const handleScheduleUpdate = useCallback(() => {
     clearTimeout(updateTimeout.current);
 
     function updateCalendar() {
-      goToToday();
+      dispatch(gotoCalendarToday());
       updateTimeout.current = setTimeout(updateCalendar, UPDATE_DELAY);
     }
 
     updateTimeout.current = setTimeout(updateCalendar, UPDATE_DELAY);
-  }, []);
+  }, [dispatch]);
 
   useEffect(() => {
     handleScheduleUpdate();
 
     return () => {
+      dispatch(clearCalendar());
+      dispatch(clearEpisodeFiles());
       clearTimeout(updateTimeout.current);
     };
-  }, [handleScheduleUpdate]);
+  }, [dispatch, handleScheduleUpdate]);
 
   useEffect(() => {
-    if (!requestCurrentPage) {
-      goToToday();
+    if (requestCurrentPage) {
+      dispatch(fetchCalendar());
+    } else {
+      dispatch(gotoCalendarToday());
     }
-  }, [requestCurrentPage]);
+  }, [requestCurrentPage, dispatch]);
 
   useEffect(() => {
     const repopulate = () => {
-      refetch();
+      dispatch(fetchCalendar({ time, view }));
     };
 
     registerPagePopulator(repopulate, [
@@ -70,31 +96,53 @@ function Calendar() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [refetch]);
+  }, [time, view, dispatch]);
 
   useEffect(() => {
     handleScheduleUpdate();
-  }, [handleScheduleUpdate]);
+  }, [time, handleScheduleUpdate]);
+
+  useEffect(() => {
+    if (
+      previousFirstDayOfWeek != null &&
+      firstDayOfWeek !== previousFirstDayOfWeek
+    ) {
+      dispatch(fetchCalendar({ time, view }));
+    }
+  }, [time, view, firstDayOfWeek, previousFirstDayOfWeek, dispatch]);
 
   useEffect(() => {
     if (wasRefreshingSeries && !isRefreshingSeries) {
-      refetch();
+      dispatch(fetchCalendar({ time, view }));
     }
-  }, [isRefreshingSeries, wasRefreshingSeries, refetch]);
+  }, [time, view, isRefreshingSeries, wasRefreshingSeries, dispatch]);
+
+  useEffect(() => {
+    if (!previousItems || hasDifferentItems(items, previousItems)) {
+      const episodeFileIds = selectUniqueIds<Episode, number>(
+        items,
+        'episodeFileId'
+      );
+
+      if (episodeFileIds.length) {
+        dispatch(fetchEpisodeFiles({ episodeFileIds }));
+      }
+    }
+  }, [items, previousItems, dispatch]);
 
   return (
     <div className={styles.calendar}>
-      {isLoading ? <LoadingIndicator /> : null}
+      {isFetching && !isPopulated ? <LoadingIndicator /> : null}
       {!isFetching && error ? (
         <Alert kind={kinds.DANGER}>{translate('CalendarLoadError')}</Alert>
       ) : null}
-      {!error && !isLoading && view === 'agenda' ? (
+      {!error && isPopulated && view === 'agenda' ? (
         <div className={styles.calendarContent}>
           <CalendarHeader />
           <Agenda />
         </div>
       ) : null}
-      {!error && !isLoading && view !== 'agenda' ? (
+      {!error && isPopulated && view !== 'agenda' ? (
         <div className={styles.calendarContent}>
           <CalendarHeader />
           <DaysOfWeek />

frontend/src/Calendar/CalendarFilterModal.tsx

@@ -1,24 +1,49 @@
 import React, { useCallback } from 'react';
-import { SetFilter } from 'Components/Filter/Filter';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import FilterModal, { FilterModalProps } from 'Components/Filter/FilterModal';
-import { setCalendarOption } from './calendarOptionsStore';
-import useCalendar, { FILTER_BUILDER } from './useCalendar';
+import { setCalendarFilter } from 'Store/Actions/calendarActions';
+
+function createCalendarSelector() {
+  return createSelector(
+    (state: AppState) => state.calendar.items,
+    (calendar) => {
+      return calendar;
+    }
+  );
+}
+
+function createFilterBuilderPropsSelector() {
+  return createSelector(
+    (state: AppState) => state.calendar.filterBuilderProps,
+    (filterBuilderProps) => {
+      return filterBuilderProps;
+    }
+  );
+}
 
 type CalendarFilterModalProps = FilterModalProps<History>;
 
 export default function CalendarFilterModal(props: CalendarFilterModalProps) {
-  const { data } = useCalendar();
+  const sectionItems = useSelector(createCalendarSelector());
+  const filterBuilderProps = useSelector(createFilterBuilderPropsSelector());
   const customFilterType = 'calendar';
 
-  const dispatchSetFilter = useCallback(({ selectedFilterKey }: SetFilter) => {
-    setCalendarOption('selectedFilterKey', selectedFilterKey);
-  }, []);
+  const dispatch = useDispatch();
+
+  const dispatchSetFilter = useCallback(
+    (payload: unknown) => {
+      dispatch(setCalendarFilter(payload));
+    },
+    [dispatch]
+  );
 
   return (
     <FilterModal
       {...props}
-      sectionItems={data}
-      filterBuilderProps={FILTER_BUILDER}
+      sectionItems={sectionItems}
+      filterBuilderProps={filterBuilderProps}
       customFilterType={customFilterType}
       dispatchSetFilter={dispatchSetFilter}
     />

frontend/src/Calendar/CalendarMissingEpisodeSearchButton.tsx

@@ -1,59 +1,68 @@
 import moment from 'moment';
 import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
 import { useQueueDetails } from 'Activity/Queue/Details/QueueDetailsProvider';
-import { useCommands } from 'Commands/useCommands';
+import AppState from 'App/State/AppState';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import { icons } from 'Helpers/Props';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import Queue from 'typings/Queue';
 import { isCommandExecuting } from 'Utilities/Command';
 import isBefore from 'Utilities/Date/isBefore';
 import translate from 'Utilities/String/translate';
-import useCalendar, {
-  useCalendarRange,
-  useCalendarSearchMissingCommandId,
-} from './useCalendar';
 
-function useIsSearching(searchMissingCommandId: number | undefined) {
-  const { data: commands } = useCommands();
+function createIsSearchingSelector() {
+  return createSelector(
+    (state: AppState) => state.calendar.searchMissingCommandId,
+    createCommandsSelector(),
+    (searchMissingCommandId, commands) => {
+      if (searchMissingCommandId == null) {
+        return false;
+      }
 
-  if (searchMissingCommandId == null) {
-    return false;
-  }
-
-  return isCommandExecuting(
-    commands.find((command) => {
-      return command.id === searchMissingCommandId;
-    })
+      return isCommandExecuting(
+        commands.find((command) => {
+          return command.id === searchMissingCommandId;
+        })
+      );
+    }
   );
 }
 
-const useMissingEpisodeIdsSelector = () => {
-  const { start, end } = useCalendarRange();
-  const { data } = useCalendar();
-  const queueDetails = useQueueDetails();
+function createMissingEpisodeIdsSelector(queueDetails: Queue[]) {
+  return createSelector(
+    (state: AppState) => state.calendar.start,
+    (state: AppState) => state.calendar.end,
+    (state: AppState) => state.calendar.items,
+    (start, end, episodes) => {
+      return episodes.reduce<number[]>((acc, episode) => {
+        const airDateUtc = episode.airDateUtc;
 
-  return data.reduce<number[]>((acc, episode) => {
-    const airDateUtc = episode.airDateUtc;
+        if (
+          !episode.episodeFileId &&
+          moment(airDateUtc).isAfter(start) &&
+          moment(airDateUtc).isBefore(end) &&
+          isBefore(episode.airDateUtc) &&
+          !queueDetails.some(
+            (details) => !!details.episode && details.episode.id === episode.id
+          )
+        ) {
+          acc.push(episode.id);
+        }
 
-    if (
-      !episode.episodeFileId &&
-      moment(airDateUtc).isAfter(start) &&
-      moment(airDateUtc).isBefore(end) &&
-      isBefore(episode.airDateUtc) &&
-      !queueDetails.some(
-        (details) => !!details.episode && details.episode.id === episode.id
-      )
-    ) {
-      acc.push(episode.id);
+        return acc;
+      }, []);
     }
-
-    return acc;
-  }, []);
-};
+  );
+}
 
 export default function CalendarMissingEpisodeSearchButton() {
-  const searchMissingCommandId = useCalendarSearchMissingCommandId();
-  const missingEpisodeIds = useMissingEpisodeIdsSelector();
-  const isSearchingForMissing = useIsSearching(searchMissingCommandId);
+  const queueDetails = useQueueDetails();
+  const missingEpisodeIds = useSelector(
+    createMissingEpisodeIdsSelector(queueDetails)
+  );
+  const isSearchingForMissing = useSelector(createIsSearchingSelector());
 
   const handlePress = useCallback(() => {}, []);
 

frontend/src/Calendar/CalendarPage.tsx

@@ -1,13 +1,8 @@
-import React, {
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import QueueDetailsProvider from 'Activity/Queue/Details/QueueDetailsProvider';
-import CommandNames from 'Commands/CommandNames';
-import { useCommandExecuting, useExecuteCommand } from 'Commands/useCommands';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import QueueDetails from 'Activity/Queue/Details/QueueDetailsProvider';
+import AppState from 'App/State/AppState';
+import * as commandNames from 'Commands/commandNames';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -16,41 +11,40 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import Episode from 'Episode/Episode';
-import EpisodeFileProvider from 'EpisodeFile/EpisodeFileProvider';
-import { useCustomFiltersList } from 'Filters/useCustomFilters';
 import useMeasure from 'Helpers/Hooks/useMeasure';
 import { align, icons } from 'Helpers/Props';
 import NoSeries from 'Series/NoSeries';
-import { useHasSeries } from 'Series/useSeries';
+import {
+  setCalendarDaysCount,
+  setCalendarFilter,
+} from 'Store/Actions/calendarActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createSeriesCountSelector from 'Store/Selectors/createSeriesCountSelector';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import translate from 'Utilities/String/translate';
 import Calendar from './Calendar';
 import CalendarFilterModal from './CalendarFilterModal';
 import CalendarMissingEpisodeSearchButton from './CalendarMissingEpisodeSearchButton';
-import { setCalendarOption, useCalendarOption } from './calendarOptionsStore';
 import CalendarLinkModal from './iCal/CalendarLinkModal';
 import Legend from './Legend/Legend';
 import CalendarOptionsModal from './Options/CalendarOptionsModal';
-import useCalendar, {
-  FILTERS,
-  setCalendarDayCount,
-  useCalendarPage,
-} from './useCalendar';
 import styles from './CalendarPage.css';
 
 const MINIMUM_DAY_WIDTH = 120;
 
 function CalendarPage() {
-  const executeCommand = useExecuteCommand();
+  const dispatch = useDispatch();
 
-  const selectedFilterKey = useCalendarOption('selectedFilterKey');
-  const { data } = useCalendar();
-
-  useCalendarPage();
-
-  const isRssSyncExecuting = useCommandExecuting(CommandNames.RssSync);
-  const customFilters = useCustomFiltersList('calendar');
-  const hasSeries = useHasSeries();
+  const { selectedFilterKey, filters, items } = useSelector(
+    (state: AppState) => state.calendar
+  );
+  const isRssSyncExecuting = useSelector(
+    createCommandExecutingSelector(commandNames.RSS_SYNC)
+  );
+  const customFilters = useSelector(createCustomFiltersSelector('calendar'));
+  const hasSeries = !!useSelector(createSeriesCountSelector());
 
   const [pageContentRef, { width }] = useMeasure();
   const [isCalendarLinkModalOpen, setIsCalendarLinkModalOpen] = useState(false);
@@ -76,22 +70,23 @@ function CalendarPage() {
   }, []);
 
   const handleRssSyncPress = useCallback(() => {
-    executeCommand({
-      name: CommandNames.RssSync,
-    });
-  }, [executeCommand]);
+    dispatch(
+      executeCommand({
+        name: commandNames.RSS_SYNC,
+      })
+    );
+  }, [dispatch]);
 
-  const handleFilterSelect = useCallback((key: string | number) => {
-    setCalendarOption('selectedFilterKey', key);
-  }, []);
+  const handleFilterSelect = useCallback(
+    (key: string | number) => {
+      dispatch(setCalendarFilter({ selectedFilterKey: key }));
+    },
+    [dispatch]
+  );
 
   const episodeIds = useMemo(() => {
-    return selectUniqueIds<Episode, number>(data, 'id');
-  }, [data]);
-
-  const episodeFileIds = useMemo(() => {
-    return selectUniqueIds<Episode, number>(data, 'episodeFileId');
-  }, [data]);
+    return selectUniqueIds<Episode, number>(items, 'id');
+  }, [items]);
 
   useEffect(() => {
     if (width === 0) {
@@ -103,14 +98,11 @@ function CalendarPage() {
       Math.min(7, Math.floor(width / MINIMUM_DAY_WIDTH))
     );
 
-    setCalendarDayCount(dayCount);
-  }, [width]);
+    dispatch(setCalendarDaysCount({ dayCount }));
+  }, [width, dispatch]);
 
   return (
-    <CalendarPageProvider
-      episodeIds={episodeIds}
-      episodeFileIds={episodeFileIds}
-    >
+    <QueueDetails episodeIds={episodeIds}>
       <PageContent title={translate('Calendar')}>
         <PageToolbar>
           <PageToolbarSection>
@@ -143,7 +135,7 @@ function CalendarPage() {
               alignMenu={align.RIGHT}
               isDisabled={!hasSeries}
               selectedFilterKey={selectedFilterKey}
-              filters={FILTERS}
+              filters={filters}
               customFilters={customFilters}
               filterModalConnectorComponent={CalendarFilterModal}
               onFilterSelect={handleFilterSelect}
@@ -170,22 +162,8 @@ function CalendarPage() {
           onModalClose={handleOptionsModalClose}
         />
       </PageContent>
-    </CalendarPageProvider>
+    </QueueDetails>
   );
 }
 
 export default CalendarPage;
-
-function CalendarPageProvider({
-  episodeIds,
-  episodeFileIds,
-  children,
-}: PropsWithChildren<{ episodeIds: number[]; episodeFileIds: number[] }>) {
-  return (
-    <QueueDetailsProvider episodeIds={episodeIds}>
-      <EpisodeFileProvider episodeFileIds={episodeFileIds}>
-        {children}
-      </EpisodeFileProvider>
-    </QueueDetailsProvider>
-  );
-}

frontend/src/Calendar/Day/CalendarDay.tsx

@@ -1,11 +1,12 @@
 import classNames from 'classnames';
 import moment from 'moment';
 import React from 'react';
-import { useCalendarOption } from 'Calendar/calendarOptionsStore';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
 import * as calendarViews from 'Calendar/calendarViews';
 import CalendarEvent from 'Calendar/Events/CalendarEvent';
 import CalendarEventGroup from 'Calendar/Events/CalendarEventGroup';
-import useCalendar, { useCalendarTime } from 'Calendar/useCalendar';
 import {
   CalendarEvent as CalendarEventModel,
   CalendarEventGroup as CalendarEventGroupModel,
@@ -27,61 +28,63 @@ function sort(items: (CalendarEventModel | CalendarEventGroupModel)[]) {
   });
 }
 
-const useCalendarEvents = (date: string) => {
-  const { data } = useCalendar();
-  const collapseMultipleEpisodes = useCalendarOption(
-    'collapseMultipleEpisodes'
-  );
+function createCalendarEventsConnector(date: string) {
+  return createSelector(
+    (state: AppState) => state.calendar.items,
+    (state: AppState) => state.calendar.options.collapseMultipleEpisodes,
+    (items, collapseMultipleEpisodes) => {
+      const momentDate = moment(date);
 
-  const momentDate = moment(date);
-
-  const filtered = data.filter((item) => {
-    return momentDate.isSame(moment(item.airDateUtc), 'day');
-  });
-
-  if (!collapseMultipleEpisodes) {
-    return sort(
-      filtered.map((item) => ({
-        isGroup: false,
-        ...item,
-      }))
-    );
-  }
-
-  const groupedObject = Object.groupBy(
-    filtered,
-    (item: CalendarItem) => `${item.seriesId}-${item.seasonNumber}`
-  );
-
-  const grouped = Object.entries(groupedObject).reduce<
-    (CalendarEventModel | CalendarEventGroupModel)[]
-  >((acc, [, events]) => {
-    if (!events) {
-      return acc;
-    }
-
-    if (events.length === 1) {
-      acc.push({
-        isGroup: false,
-        ...events[0],
-      });
-    } else {
-      acc.push({
-        isGroup: true,
-        seriesId: events[0].seriesId,
-        seasonNumber: events[0].seasonNumber,
-        episodeIds: events.map((event) => event.id),
-        events: events.sort(
-          (a, b) => moment(a.airDateUtc).unix() - moment(b.airDateUtc).unix()
-        ),
+      const filtered = items.filter((item) => {
+        return momentDate.isSame(moment(item.airDateUtc), 'day');
       });
+
+      if (!collapseMultipleEpisodes) {
+        return sort(
+          filtered.map((item) => ({
+            isGroup: false,
+            ...item,
+          }))
+        );
+      }
+
+      const groupedObject = Object.groupBy(
+        filtered,
+        (item: CalendarItem) => `${item.seriesId}-${item.seasonNumber}`
+      );
+
+      const grouped = Object.entries(groupedObject).reduce<
+        (CalendarEventModel | CalendarEventGroupModel)[]
+      >((acc, [, events]) => {
+        if (!events) {
+          return acc;
+        }
+
+        if (events.length === 1) {
+          acc.push({
+            isGroup: false,
+            ...events[0],
+          });
+        } else {
+          acc.push({
+            isGroup: true,
+            seriesId: events[0].seriesId,
+            seasonNumber: events[0].seasonNumber,
+            episodeIds: events.map((event) => event.id),
+            events: events.sort(
+              (a, b) =>
+                moment(a.airDateUtc).unix() - moment(b.airDateUtc).unix()
+            ),
+          });
+        }
+
+        return acc;
+      }, []);
+
+      return sort(grouped);
     }
-
-    return acc;
-  }, []);
-
-  return sort(grouped);
-};
+  );
+}
 
 interface CalendarDayProps {
   date: string;
@@ -94,9 +97,8 @@ function CalendarDay({
   isTodaysDate,
   onEventModalOpenToggle,
 }: CalendarDayProps) {
-  const view = useCalendarOption('view');
-  const time = useCalendarTime();
-  const events = useCalendarEvents(date);
+  const { time, view } = useSelector((state: AppState) => state.calendar);
+  const events = useSelector(createCalendarEventsConnector(date));
 
   const ref = React.useRef<HTMLDivElement>(null);
 

frontend/src/Calendar/Day/CalendarDays.tsx

@@ -1,21 +1,22 @@
 import classNames from 'classnames';
 import moment from 'moment';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useAppValue } from 'App/appStore';
-import { useCalendarOption } from 'Calendar/calendarOptionsStore';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import * as calendarViews from 'Calendar/calendarViews';
 import {
-  goToNextRange,
-  goToPreviousRange,
-  useCalendarDates,
-} from 'Calendar/useCalendar';
+  gotoCalendarNextRange,
+  gotoCalendarPreviousRange,
+} from 'Store/Actions/calendarActions';
 import CalendarDay from './CalendarDay';
 import styles from './CalendarDays.css';
 
 function CalendarDays() {
-  const view = useCalendarOption('view');
-  const dates = useCalendarDates();
-  const isSidebarVisible = useAppValue('isSidebarVisible');
+  const dispatch = useDispatch();
+  const { dates, view } = useSelector((state: AppState) => state.calendar);
+  const isSidebarVisible = useSelector(
+    (state: AppState) => state.app.isSidebarVisible
+  );
 
   const updateTimeout = useRef<ReturnType<typeof setTimeout>>();
   const touchStart = useRef<number | null>(null);
@@ -57,28 +58,31 @@ function CalendarDays() {
     [isSidebarVisible]
   );
 
-  const handleTouchEnd = useCallback((event: TouchEvent) => {
-    const touches = event.changedTouches;
-    const currentTouch = touches[0].pageX;
+  const handleTouchEnd = useCallback(
+    (event: TouchEvent) => {
+      const touches = event.changedTouches;
+      const currentTouch = touches[0].pageX;
 
-    if (!touchStart.current) {
-      return;
-    }
+      if (!touchStart.current) {
+        return;
+      }
 
-    if (
-      currentTouch > touchStart.current &&
-      currentTouch - touchStart.current > 100
-    ) {
-      goToPreviousRange();
-    } else if (
-      currentTouch < touchStart.current &&
-      touchStart.current - currentTouch > 100
-    ) {
-      goToNextRange();
-    }
+      if (
+        currentTouch > touchStart.current &&
+        currentTouch - touchStart.current > 100
+      ) {
+        dispatch(gotoCalendarPreviousRange());
+      } else if (
+        currentTouch < touchStart.current &&
+        touchStart.current - currentTouch > 100
+      ) {
+        dispatch(gotoCalendarNextRange());
+      }
 
-    touchStart.current = null;
-  }, []);
+      touchStart.current = null;
+    },
+    [dispatch]
+  );
 
   const handleTouchCancel = useCallback(() => {
     touchStart.current = null;

frontend/src/Calendar/Day/DaysOfWeek.tsx

@@ -1,17 +1,16 @@
 import moment from 'moment';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useCalendarOption } from 'Calendar/calendarOptionsStore';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import * as calendarViews from 'Calendar/calendarViews';
-import { useCalendarDates } from 'Calendar/useCalendar';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import DayOfWeek from './DayOfWeek';
 import styles from './DaysOfWeek.css';
 
 function DaysOfWeek() {
-  const view = useCalendarOption('view');
-  const dates = useCalendarDates();
+  const { dates, view } = useSelector((state: AppState) => state.calendar);
   const { calendarWeekColumnHeader, shortDateFormat, showRelativeDates } =
-    useUiSettingsValues();
+    useSelector(createUISettingsSelector());
 
   const updateTimeout = useRef<ReturnType<typeof setTimeout>>();
   const [todaysDate, setTodaysDate] = useState(

frontend/src/Calendar/Events/CalendarEvent.tsx

@@ -1,18 +1,19 @@
 import classNames from 'classnames';
+import moment from 'moment';
 import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useQueueItemForEpisode } from 'Activity/Queue/Details/QueueDetailsProvider';
-import { useCalendarOptions } from 'Calendar/calendarOptionsStore';
+import AppState from 'App/State/AppState';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import EpisodeDetailsModal from 'Episode/EpisodeDetailsModal';
 import episodeEntities from 'Episode/episodeEntities';
 import getFinaleTypeName from 'Episode/getFinaleTypeName';
-import { useEpisodeFile } from 'EpisodeFile/EpisodeFileProvider';
+import useEpisodeFile from 'EpisodeFile/useEpisodeFile';
 import { icons, kinds } from 'Helpers/Props';
-import { useSingleSeries } from 'Series/useSeries';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
-import { convertToTimezone } from 'Utilities/Date/convertToTimezone';
+import useSeries from 'Series/useSeries';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import formatTime from 'Utilities/Date/formatTime';
 import padNumber from 'Utilities/Number/padNumber';
 import translate from 'Utilities/String/translate';
@@ -55,12 +56,13 @@ function CalendarEvent(props: CalendarEventProps) {
     onEventModalOpenToggle,
   } = props;
 
-  const series = useSingleSeries(seriesId);
+  const series = useSeries(seriesId);
   const episodeFile = useEpisodeFile(episodeFileId);
   const queueItem = useQueueItemForEpisode(id);
 
-  const { timeFormat, enableColorImpairedMode, timeZone } =
-    useUiSettingsValues();
+  const { timeFormat, enableColorImpairedMode } = useSelector(
+    createUISettingsSelector()
+  );
 
   const {
     showEpisodeInformation,
@@ -68,7 +70,7 @@ function CalendarEvent(props: CalendarEventProps) {
     showSpecialIcon,
     showCutoffUnmetIcon,
     fullColorEvents,
-  } = useCalendarOptions();
+  } = useSelector((state: AppState) => state.calendar.options);
 
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
 
@@ -86,11 +88,8 @@ function CalendarEvent(props: CalendarEventProps) {
     return null;
   }
 
-  const startTime = convertToTimezone(airDateUtc, timeZone);
-  const endTime = convertToTimezone(airDateUtc, timeZone).add(
-    series.runtime,
-    'minutes'
-  );
+  const startTime = moment(airDateUtc);
+  const endTime = moment(airDateUtc).add(series.runtime, 'minutes');
   const isDownloading = !!(queueItem || grabbed);
   const isMonitored = series.monitored && monitored;
   const statusStyle = getStatusStyle(
@@ -218,10 +217,9 @@ function CalendarEvent(props: CalendarEventProps) {
         ) : null}
 
         <div className={styles.airTime}>
-          {formatTime(airDateUtc, timeFormat, { timeZone })} -{' '}
+          {formatTime(airDateUtc, timeFormat)} -{' '}
           {formatTime(endTime.toISOString(), timeFormat, {
             includeMinuteZero: true,
-            timeZone,
           })}
         </div>
       </div>

frontend/src/Calendar/Events/CalendarEventGroup.tsx

@@ -1,16 +1,17 @@
 import classNames from 'classnames';
+import moment from 'moment';
 import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useIsDownloadingEpisodes } from 'Activity/Queue/Details/QueueDetailsProvider';
-import { useCalendarOptions } from 'Calendar/calendarOptionsStore';
+import AppState from 'App/State/AppState';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import getFinaleTypeName from 'Episode/getFinaleTypeName';
 import { icons, kinds } from 'Helpers/Props';
-import { useSingleSeries } from 'Series/useSeries';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
+import useSeries from 'Series/useSeries';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import { CalendarItem } from 'typings/Calendar';
-import { convertToTimezone } from 'Utilities/Date/convertToTimezone';
 import formatTime from 'Utilities/Date/formatTime';
 import padNumber from 'Utilities/Number/padNumber';
 import translate from 'Utilities/String/translate';
@@ -31,24 +32,22 @@ function CalendarEventGroup({
   onEventModalOpenToggle,
 }: CalendarEventGroupProps) {
   const isDownloading = useIsDownloadingEpisodes(episodeIds);
-  const series = useSingleSeries(seriesId)!;
+  const series = useSeries(seriesId)!;
 
-  const { timeFormat, enableColorImpairedMode, timeZone } =
-    useUiSettingsValues();
+  const { timeFormat, enableColorImpairedMode } = useSelector(
+    createUISettingsSelector()
+  );
 
   const { showEpisodeInformation, showFinaleIcon, fullColorEvents } =
-    useCalendarOptions();
+    useSelector((state: AppState) => state.calendar.options);
 
   const [isExpanded, setIsExpanded] = useState(false);
 
   const firstEpisode = events[0];
   const lastEpisode = events[events.length - 1];
   const airDateUtc = firstEpisode.airDateUtc;
-  const startTime = convertToTimezone(airDateUtc, timeZone);
-  const endTime = convertToTimezone(lastEpisode.airDateUtc, timeZone).add(
-    series.runtime,
-    'minutes'
-  );
+  const startTime = moment(airDateUtc);
+  const endTime = moment(lastEpisode.airDateUtc).add(series.runtime, 'minutes');
   const seasonNumber = firstEpisode.seasonNumber;
 
   const { allDownloaded, anyGrabbed, anyMonitored, allAbsoluteEpisodeNumbers } =
@@ -195,10 +194,9 @@ function CalendarEventGroup({
 
       <div className={styles.airingInfo}>
         <div className={styles.airTime}>
-          {formatTime(airDateUtc, timeFormat, { timeZone })} -{' '}
+          {formatTime(airDateUtc, timeFormat)} -{' '}
           {formatTime(endTime.toISOString(), timeFormat, {
             includeMinuteZero: true,
-            timeZone,
           })}
         </div>
 

frontend/src/Calendar/Header/CalendarHeader.tsx

@@ -1,18 +1,7 @@
 import moment from 'moment';
 import React, { useCallback, useMemo } from 'react';
-import { useAppDimensions } from 'App/appStore';
-import {
-  setCalendarOption,
-  useCalendarOption,
-} from 'Calendar/calendarOptionsStore';
-import { CalendarView } from 'Calendar/calendarViews';
-import useCalendar, {
-  goToNextRange,
-  goToPreviousRange,
-  goToToday,
-  useCalendarRange,
-  useCalendarTime,
-} from 'Calendar/useCalendar';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -21,36 +10,49 @@ import MenuButton from 'Components/Menu/MenuButton';
 import MenuContent from 'Components/Menu/MenuContent';
 import ViewMenuItem from 'Components/Menu/ViewMenuItem';
 import { align, icons } from 'Helpers/Props';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
+import {
+  gotoCalendarNextRange,
+  gotoCalendarPreviousRange,
+  gotoCalendarToday,
+  setCalendarView,
+} from 'Store/Actions/calendarActions';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import translate from 'Utilities/String/translate';
 import CalendarHeaderViewButton from './CalendarHeaderViewButton';
 import styles from './CalendarHeader.css';
 
 function CalendarHeader() {
-  const { isFetching } = useCalendar();
-  const view = useCalendarOption('view');
-  const time = useCalendarTime();
-  const { start, end } = useCalendarRange();
+  const dispatch = useDispatch();
 
-  const { isSmallScreen, isLargeScreen } = useAppDimensions();
+  const { isFetching, view, time, start, end } = useSelector(
+    (state: AppState) => state.calendar
+  );
 
-  const { longDateFormat } = useUiSettingsValues();
+  const { isSmallScreen, isLargeScreen } = useSelector(
+    createDimensionsSelector()
+  );
 
-  const handleViewChange = useCallback((newView: string) => {
-    setCalendarOption('view', newView as CalendarView);
-  }, []);
+  const { longDateFormat } = useSelector(createUISettingsSelector());
+
+  const handleViewChange = useCallback(
+    (newView: string) => {
+      dispatch(setCalendarView({ view: newView }));
+    },
+    [dispatch]
+  );
 
   const handleTodayPress = useCallback(() => {
-    goToToday();
-  }, []);
+    dispatch(gotoCalendarToday());
+  }, [dispatch]);
 
   const handlePreviousPress = useCallback(() => {
-    goToPreviousRange();
-  }, []);
+    dispatch(gotoCalendarPreviousRange());
+  }, [dispatch]);
 
   const handleNextPress = useCallback(() => {
-    goToNextRange();
-  }, []);
+    dispatch(gotoCalendarNextRange());
+  }, [dispatch]);
 
   const title = useMemo(() => {
     const timeMoment = moment(time);

frontend/src/Calendar/Legend/Legend.tsx

@@ -1,24 +1,22 @@
 import React from 'react';
-import {
-  useCalendarOption,
-  useCalendarOptions,
-} from 'Calendar/calendarOptionsStore';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import { icons, kinds } from 'Helpers/Props';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import translate from 'Utilities/String/translate';
 import LegendIconItem from './LegendIconItem';
 import LegendItem from './LegendItem';
 import styles from './Legend.css';
 
 function Legend() {
-  const view = useCalendarOption('view');
+  const view = useSelector((state: AppState) => state.calendar.view);
   const {
     showFinaleIcon,
     showSpecialIcon,
     showCutoffUnmetIcon,
     fullColorEvents,
-  } = useCalendarOptions();
-  const { enableColorImpairedMode } = useUiSettingsValues();
+  } = useSelector((state: AppState) => state.calendar.options);
+  const { enableColorImpairedMode } = useSelector(createUISettingsSelector());
 
   const iconsToShow = [];
   const isAgendaView = view === 'agenda';

frontend/src/Calendar/Options/CalendarOptionsModalContent.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-  CalendarOptions,
-  setCalendarOption,
-  useCalendarOptions,
-} from 'Calendar/calendarOptionsStore';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
 import FieldSet from 'Components/FieldSet';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -14,19 +11,17 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import { OptionChanged } from 'Helpers/Hooks/useOptionsStore';
 import { inputTypes } from 'Helpers/Props';
 import {
   firstDayOfWeekOptions,
   timeFormatOptions,
   weekColumnOptions,
 } from 'Settings/UI/UISettings';
-import {
-  UiSettingsModel,
-  useSaveUiSettings,
-  useUiSettingsValues,
-} from 'Settings/UI/useUiSettings';
+import { setCalendarOption } from 'Store/Actions/calendarActions';
+import { saveUISettings } from 'Store/Actions/settingsActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import { InputChanged } from 'typings/inputs';
+import UiSettings from 'typings/Settings/UiSettings';
 import translate from 'Utilities/String/translate';
 
 interface CalendarOptionsModalContentProps {
@@ -36,6 +31,8 @@ interface CalendarOptionsModalContentProps {
 function CalendarOptionsModalContent({
   onModalClose,
 }: CalendarOptionsModalContentProps) {
+  const dispatch = useDispatch();
+
   const {
     collapseMultipleEpisodes,
     showEpisodeInformation,
@@ -43,12 +40,11 @@ function CalendarOptionsModalContent({
     showSpecialIcon,
     showCutoffUnmetIcon,
     fullColorEvents,
-  } = useCalendarOptions();
+  } = useSelector((state: AppState) => state.calendar.options);
 
-  const uiSettings = useUiSettingsValues();
-  const saveUiSettings = useSaveUiSettings();
+  const uiSettings = useSelector(createUISettingsSelector());
 
-  const [state, setState] = useState<Partial<UiSettingsModel>>({
+  const [state, setState] = useState<Partial<UiSettings>>({
     firstDayOfWeek: uiSettings.firstDayOfWeek,
     calendarWeekColumnHeader: uiSettings.calendarWeekColumnHeader,
     timeFormat: uiSettings.timeFormat,
@@ -63,19 +59,19 @@ function CalendarOptionsModalContent({
   } = state;
 
   const handleOptionInputChange = useCallback(
-    ({ name, value }: OptionChanged<CalendarOptions>) => {
-      setCalendarOption(name, value);
+    ({ name, value }: InputChanged) => {
+      dispatch(setCalendarOption({ [name]: value }));
     },
-    []
+    [dispatch]
   );
 
   const handleGlobalInputChange = useCallback(
     ({ name, value }: InputChanged) => {
       setState((prevState) => ({ ...prevState, [name]: value }));
 
-      saveUiSettings({ [name]: value });
+      dispatch(saveUISettings({ [name]: value }));
     },
-    [saveUiSettings]
+    [dispatch]
   );
 
   useEffect(() => {
@@ -102,7 +98,6 @@ function CalendarOptionsModalContent({
                 name="collapseMultipleEpisodes"
                 value={collapseMultipleEpisodes}
                 helpText={translate('CollapseMultipleEpisodesHelpText')}
-                // @ts-expect-error - The typing for inputs needs more work
                 onChange={handleOptionInputChange}
               />
             </FormGroup>
@@ -115,7 +110,6 @@ function CalendarOptionsModalContent({
                 name="showEpisodeInformation"
                 value={showEpisodeInformation}
                 helpText={translate('ShowEpisodeInformationHelpText')}
-                // @ts-expect-error - The typing for inputs needs more work
                 onChange={handleOptionInputChange}
               />
             </FormGroup>
@@ -128,7 +122,6 @@ function CalendarOptionsModalContent({
                 name="showFinaleIcon"
                 value={showFinaleIcon}
                 helpText={translate('IconForFinalesHelpText')}
-                // @ts-expect-error - The typing for inputs needs more work
                 onChange={handleOptionInputChange}
               />
             </FormGroup>
@@ -141,7 +134,6 @@ function CalendarOptionsModalContent({
                 name="showSpecialIcon"
                 value={showSpecialIcon}
                 helpText={translate('IconForSpecialsHelpText')}
-                // @ts-expect-error - The typing for inputs needs more work
                 onChange={handleOptionInputChange}
               />
             </FormGroup>
@@ -154,7 +146,6 @@ function CalendarOptionsModalContent({
                 name="showCutoffUnmetIcon"
                 value={showCutoffUnmetIcon}
                 helpText={translate('IconForCutoffUnmetHelpText')}
-                // @ts-expect-error - The typing for inputs needs more work
                 onChange={handleOptionInputChange}
               />
             </FormGroup>
@@ -167,7 +158,6 @@ function CalendarOptionsModalContent({
                 name="fullColorEvents"
                 value={fullColorEvents}
                 helpText={translate('FullColorEventsHelpText')}
-                // @ts-expect-error - The typing for inputs needs more work
                 onChange={handleOptionInputChange}
               />
             </FormGroup>

frontend/src/Calendar/calendarOptionsStore.ts

@@ -1,35 +0,0 @@
-import { SelectedFilterKey } from 'Components/Filter/Filter';
-import { createOptionsStore } from 'Helpers/Hooks/useOptionsStore';
-import { CalendarView } from './calendarViews';
-
-export interface CalendarOptions {
-  collapseMultipleEpisodes: boolean;
-  showEpisodeInformation: boolean;
-  showFinaleIcon: boolean;
-  showSpecialIcon: boolean;
-  showCutoffUnmetIcon: boolean;
-  fullColorEvents: boolean;
-  selectedFilterKey: SelectedFilterKey;
-  view: CalendarView;
-}
-
-const { useOptions, useOption, getOptions, getOption, setOptions, setOption } =
-  createOptionsStore<CalendarOptions>('calendar_options', () => {
-    return {
-      collapseMultipleEpisodes: false,
-      showEpisodeInformation: true,
-      showFinaleIcon: false,
-      showSpecialIcon: false,
-      showCutoffUnmetIcon: false,
-      fullColorEvents: false,
-      selectedFilterKey: 'monitored',
-      view: window.innerWidth > 768 ? 'week' : 'day',
-    };
-  });
-
-export const useCalendarOptions = useOptions;
-export const getCalendarOptions = getOptions;
-export const setCalendarOptions = setOptions;
-export const useCalendarOption = useOption;
-export const getCalendarOption = getOption;
-export const setCalendarOption = setOption;

frontend/src/Calendar/useCalendar.ts

@@ -1,299 +0,0 @@
-import { keepPreviousData } from '@tanstack/react-query';
-import moment from 'moment';
-import { useEffect, useMemo } from 'react';
-import { create } from 'zustand';
-import { setEpisodeQueryKey } from 'Episode/useEpisode';
-import { Filter, FilterBuilderProp } from 'Filters/Filter';
-import { useCustomFiltersList } from 'Filters/useCustomFilters';
-import useApiQuery from 'Helpers/Hooks/useApiQuery';
-import { filterBuilderValueTypes } from 'Helpers/Props';
-import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
-import { CalendarItem } from 'typings/Calendar';
-import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
-import translate from 'Utilities/String/translate';
-import { getCalendarOption, useCalendarOption } from './calendarOptionsStore';
-import { CalendarView } from './calendarViews';
-
-export const FILTERS: Filter[] = [
-  {
-    key: 'all',
-    label: () => translate('All'),
-    filters: [],
-  },
-  {
-    key: 'monitored',
-    label: () => translate('MonitoredOnly'),
-    filters: [
-      {
-        key: 'unmonitored',
-        value: [false],
-        type: 'equal',
-      },
-    ],
-  },
-];
-
-export const FILTER_BUILDER: FilterBuilderProp<CalendarItem>[] = [
-  {
-    name: 'unmonitored',
-    label: () => translate('IncludeUnmonitored'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.BOOL,
-  },
-  {
-    name: 'includeSpecials',
-    label: () => translate('IncludeSpecials'),
-    type: 'equal',
-    valueType: filterBuilderValueTypes.BOOL,
-  },
-  {
-    name: 'tags',
-    label: () => translate('Tags'),
-    type: 'contains',
-    valueType: filterBuilderValueTypes.TAG,
-  },
-];
-
-interface CalendarStore {
-  time: moment.Moment;
-  dates: string[];
-  dayCount: number;
-  searchMissingCommandId?: number;
-}
-
-const calendarStore = create<CalendarStore>(() => ({
-  time: moment(),
-  dates: [],
-  dayCount: 7,
-  queryKey: null,
-}));
-
-const VIEW_RANGES: Record<
-  CalendarView,
-  moment.unitOfTime.DurationConstructor | undefined
-> = {
-  agenda: undefined,
-  day: 'day',
-  week: 'week',
-  month: 'month',
-  forecast: 'day',
-};
-
-const useCalendar = () => {
-  const dates = useCalendarDates();
-  const time = useCalendarTime();
-  const selectedFilterKey = useCalendarOption('selectedFilterKey');
-  const view = useCalendarOption('view');
-  const customFilters = useCustomFiltersList('calendar');
-
-  const { start, end } = useMemo(() => {
-    return getPopulatableRange(dates[0], dates[dates.length - 1], view);
-  }, [dates, view]);
-
-  const { includeUnmonitored, includeSpecials, tags } = useMemo(() => {
-    const selectedFilters = findSelectedFilters(
-      selectedFilterKey,
-      FILTERS,
-      customFilters
-    );
-
-    return selectedFilters.reduce<{
-      includeUnmonitored: boolean;
-      includeSpecials: boolean;
-      tags?: number[] | undefined;
-    }>(
-      (acc, filter) => {
-        if (filter.key === 'unmonitored' && Array.isArray(filter.value)) {
-          acc.includeUnmonitored = (filter.value as boolean[]).includes(true);
-        }
-
-        if (filter.key === 'includeSpecials' && Array.isArray(filter.value)) {
-          acc.includeSpecials = (filter.value as boolean[]).includes(true);
-        }
-
-        if (filter.key === 'tags' && filter.type === 'contains') {
-          acc.tags = filter.value as number[];
-        }
-
-        return acc;
-      },
-      {
-        includeUnmonitored: false,
-        includeSpecials: true,
-      }
-    );
-  }, [customFilters, selectedFilterKey]);
-
-  const { queryKey, ...result } = useApiQuery<CalendarItem[]>({
-    path: '/calendar',
-    queryParams: {
-      start,
-      end,
-      includeUnmonitored,
-      includeSpecials,
-      tags,
-    },
-    queryOptions: {
-      enabled: !!time && !!start && !!end,
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  useEffect(() => {
-    setEpisodeQueryKey('calendar', queryKey);
-  }, [queryKey]);
-
-  return {
-    ...result,
-    data: result.data ?? [],
-  };
-};
-
-export default useCalendar;
-
-export const useCalendarPage = () => {
-  const dayCount = useCalendarDayCount();
-  const time = useCalendarTime();
-  const view = useCalendarOption('view');
-  const { firstDayOfWeek } = useUiSettingsValues();
-
-  useEffect(() => {
-    const { dates } = getDates(time, view, firstDayOfWeek, dayCount);
-
-    calendarStore.setState({ dates });
-  }, [firstDayOfWeek, dayCount, time, view]);
-};
-
-export const useCalendarTime = () => {
-  return calendarStore((state) => state.time);
-};
-
-export const useCalendarDates = () => {
-  return calendarStore((state) => state.dates);
-};
-
-export const useCalendarDayCount = () => {
-  return calendarStore((state) => state.dayCount);
-};
-
-export const useCalendarRange = () => {
-  const dates = useCalendarDates();
-
-  return {
-    start: dates[0],
-    end: dates[dates.length - 1],
-  };
-};
-
-export const useCalendarSearchMissingCommandId = () => {
-  return calendarStore((state) => state.searchMissingCommandId);
-};
-
-export const setCalendarDayCount = (dayCount: number) => {
-  calendarStore.setState({ dayCount });
-};
-
-export const goToToday = () => {
-  setCalendarTime(moment());
-};
-
-export const goToPreviousRange = () => {
-  const { dayCount, time } = calendarStore.getState();
-  const view = getCalendarOption('view');
-
-  const amount = view === 'forecast' ? dayCount : 1;
-  const newTime = moment(time).subtract(amount, VIEW_RANGES[view]);
-
-  setCalendarTime(newTime);
-};
-
-export const goToNextRange = () => {
-  const { dayCount, time } = calendarStore.getState();
-  const view = getCalendarOption('view');
-
-  const amount = view === 'forecast' ? dayCount : 1;
-  const newTime = moment(time).add(amount, VIEW_RANGES[view]);
-
-  setCalendarTime(newTime);
-};
-
-const setCalendarTime = (time: moment.Moment) => {
-  calendarStore.setState({ time });
-};
-
-const getDays = (start: moment.Moment, end: moment.Moment) => {
-  const startTime = moment(start);
-  const endTime = moment(end);
-  const difference = endTime.diff(startTime, 'days');
-
-  return Array(difference + 1)
-    .fill(0)
-    .map((_, i) => startTime.clone().add(i, 'days').toISOString());
-};
-
-const getDates = (
-  time: moment.Moment,
-  view: CalendarView,
-  firstDayOfWeek: number,
-  dayCount: number
-) => {
-  const weekName = firstDayOfWeek === 0 ? 'week' : 'isoWeek';
-
-  let start = time.clone().startOf('day');
-  let end = time.clone().endOf('day');
-
-  if (view === 'week') {
-    start = time.clone().startOf(weekName);
-    end = time.clone().endOf(weekName);
-  }
-
-  if (view === 'forecast') {
-    start = time.clone().subtract(1, 'day').startOf('day');
-    end = time
-      .clone()
-      .add(dayCount - 2, 'days')
-      .endOf('day');
-  }
-
-  if (view === 'month') {
-    start = time.clone().startOf('month').startOf(weekName);
-    end = time.clone().endOf('month').endOf(weekName);
-  }
-
-  if (view === 'agenda') {
-    start = time.clone().subtract(1, 'day').startOf('day');
-    end = time.clone().add(1, 'month').endOf('day');
-  }
-
-  return {
-    start: start.toISOString(),
-    end: end.toISOString(),
-    time: time.toISOString(),
-    dates: getDays(start, end),
-  };
-};
-
-function getPopulatableRange(
-  startDate: string,
-  endDate: string,
-  view: CalendarView
-) {
-  switch (view) {
-    case 'day':
-      return {
-        start: moment(startDate).subtract(1, 'day').toISOString(),
-        end: moment(endDate).add(1, 'day').toISOString(),
-      };
-    case 'week':
-    case 'forecast':
-      return {
-        start: moment(startDate).subtract(1, 'week').toISOString(),
-        end: moment(endDate).add(1, 'week').toISOString(),
-      };
-    default:
-      return {
-        start: startDate,
-        end: endDate,
-      };
-  }
-}