Automated API Docs update

ignore-downstream

.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-8.0",
+  "image": "mcr.microsoft.com/devcontainers/dotnet:1-10.0",
   "features": {
     "ghcr.io/devcontainers/features/node:1": {
       "nodeGypDependencies": true,

.github/actions/build/action.yml

@@ -23,6 +23,12 @@ runs:
     - 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
+
     - name: Setup Environment Variables
       id: variables
       shell: bash
@@ -86,7 +92,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:=net8.0}"
+framework="${FRAMEWORK:=net10.0}"
 
 rm -rf $artifactsFolder
 mkdir $artifactsFolder

.github/actions/test/action.yml

@@ -33,7 +33,7 @@ runs:
 
     - name: Setup Postgres
       if: ${{ inputs.use_postgres }}
-      uses: ikalnytskyi/action-setup-postgres@v7
+      uses: ikalnytskyi/action-setup-postgres@v8
       with:
         postgres-version: ${{ inputs.postgres-version }}
 

.github/workflows/build_v5.yml

@@ -19,7 +19,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  FRAMEWORK: net8.0
+  FRAMEWORK: net10.0
   RAW_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   SONARR_MAJOR_VERSION: 5
   VERSION: 5.0.0
@@ -155,7 +155,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        postgres-version: [16, 17]
+        postgres-version: [16, 17, 18]
     steps:
       - name: Check out
         uses: actions/checkout@v5

.github/workflows/close_invalid_issues.yml

@@ -0,0 +1,26 @@
+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/net8.0/Sonarr",
+      "program": "${workspaceFolder}/_output/net10.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, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useCallback, useEffect, useState } from 'react';
 import { setQueueOptions } from 'Activity/Queue/queueOptionsStore';
-import { SelectProvider } from 'App/SelectContext';
-import * as commandNames from 'Commands/commandNames';
+import { SelectProvider, useSelect } from 'App/Select/SelectContext';
+import CommandNames from 'Commands/CommandNames';
+import { useCommandExecuting, useExecuteCommand } from 'Commands/useCommands';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
@@ -16,23 +16,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 useSelectState from 'Helpers/Hooks/useSelectState';
+import { useCustomFiltersList } from 'Filters/useCustomFilters';
 import { align, icons, kinds } from 'Helpers/Props';
-import { executeCommand } from 'Store/Actions/commandActions';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { SortDirection } from 'Helpers/Props/sortDirections';
+import BlockListModel from 'typings/Blocklist';
 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';
@@ -41,7 +39,7 @@ import useBlocklist, {
   useRemoveBlocklistItems,
 } from './useBlocklist';
 
-function Blocklist() {
+function BlocklistContent() {
   const {
     records,
     totalPages,
@@ -61,44 +59,34 @@ function Blocklist() {
   const filters = useFilters();
   const { isRemoving, removeBlocklistItems } = useRemoveBlocklistItems();
 
-  const customFilters = useSelector(createCustomFiltersSelector('blocklist'));
-  const isClearingBlocklistExecuting = useSelector(
-    createCommandExecutingSelector(commandNames.CLEAR_BLOCKLIST)
+  const customFilters = useCustomFiltersList('blocklist');
+  const executeCommand = useExecuteCommand();
+  const isClearingBlocklistExecuting = useCommandExecuting(
+    CommandNames.ClearBlocklist
   );
-  const dispatch = useDispatch();
 
   const [isConfirmRemoveModalOpen, setIsConfirmRemoveModalOpen] =
     useState(false);
   const [isConfirmClearModalOpen, setIsConfirmClearModalOpen] = useState(false);
 
-  const [selectState, setSelectState] = useSelectState();
-  const { allSelected, allUnselected, selectedState } = selectState;
-
-  const selectedIds = useMemo(() => {
-    return getSelectedIds(selectedState);
-  }, [selectedState]);
+  const {
+    allSelected,
+    allUnselected,
+    anySelected,
+    getSelectedIds,
+    selectAll,
+    unselectAll,
+  } = useSelect<BlockListModel>();
 
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      setSelectState({
-        type: value ? 'selectAll' : 'unselectAll',
-        items: records,
-      });
+      if (value) {
+        selectAll();
+      } else {
+        unselectAll();
+      }
     },
-    [records, setSelectState]
-  );
-
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
-      setSelectState({
-        type: 'toggleSelected',
-        items: records,
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [records, setSelectState]
+    [selectAll, unselectAll]
   );
 
   const handleRemoveSelectedPress = useCallback(() => {
@@ -106,9 +94,9 @@ function Blocklist() {
   }, [setIsConfirmRemoveModalOpen]);
 
   const handleRemoveSelectedConfirmed = useCallback(() => {
-    removeBlocklistItems({ ids: selectedIds });
+    removeBlocklistItems({ ids: getSelectedIds() });
     setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, setIsConfirmRemoveModalOpen, removeBlocklistItems]);
+  }, [getSelectedIds, setIsConfirmRemoveModalOpen, removeBlocklistItems]);
 
   const handleConfirmRemoveModalClose = useCallback(() => {
     setIsConfirmRemoveModalOpen(false);
@@ -119,16 +107,11 @@ function Blocklist() {
   }, [setIsConfirmClearModalOpen]);
 
   const handleClearBlocklistConfirmed = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: commandNames.CLEAR_BLOCKLIST,
-        commandFinished: () => {
-          goToPage(1);
-        },
-      })
-    );
+    executeCommand({ name: CommandNames.ClearBlocklist }, () => {
+      goToPage(1);
+    });
     setIsConfirmClearModalOpen(false);
-  }, [setIsConfirmClearModalOpen, goToPage, dispatch]);
+  }, [setIsConfirmClearModalOpen, goToPage, executeCommand]);
 
   const handleConfirmClearModalClose = useCallback(() => {
     setIsConfirmClearModalOpen(false);
@@ -141,9 +124,15 @@ function Blocklist() {
     []
   );
 
-  const handleSortPress = useCallback((sortKey: string) => {
-    setBlocklistOption('sortKey', sortKey);
-  }, []);
+  const handleSortPress = useCallback(
+    (sortKey: string, sortDirection?: SortDirection) => {
+      setBlocklistSort({
+        sortKey,
+        sortDirection,
+      });
+    },
+    []
+  );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
@@ -169,124 +158,126 @@ function Blocklist() {
   }, [refetch]);
 
   return (
-    <SelectProvider items={records}>
-      <PageContent title={translate('Blocklist')}>
-        <PageToolbar>
-          <PageToolbarSection>
-            <PageToolbarButton
-              label={translate('RemoveSelected')}
-              iconName={icons.REMOVE}
-              isDisabled={!selectedIds.length}
-              isSpinning={isRemoving}
-              onPress={handleRemoveSelectedPress}
-            />
+    <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>
+          <PageToolbarButton
+            label={translate('Clear')}
+            iconName={icons.CLEAR}
+            isDisabled={!records.length}
+            isSpinning={isClearingBlocklistExecuting}
+            onPress={handleClearBlocklistPress}
+          />
+        </PageToolbarSection>
 
-          <PageToolbarSection alignContent={align.RIGHT}>
-            <TableOptionsModalWrapper
+        <PageToolbarSection alignContent={align.RIGHT}>
+          <TableOptionsModalWrapper
+            columns={columns}
+            pageSize={pageSize}
+            onTableOptionChange={handleTableOptionChange}
+          >
+            <PageToolbarButton
+              label={translate('Options')}
+              iconName={icons.TABLE}
+            />
+          </TableOptionsModalWrapper>
+
+          <FilterMenu
+            alignMenu={align.RIGHT}
+            selectedFilterKey={selectedFilterKey}
+            filters={filters}
+            customFilters={customFilters}
+            filterModalConnectorComponent={BlocklistFilterModal}
+            onFilterSelect={handleFilterSelect}
+          />
+        </PageToolbarSection>
+      </PageToolbar>
+
+      <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}
               columns={columns}
               pageSize={pageSize}
+              sortKey={sortKey}
+              sortDirection={sortDirection}
               onTableOptionChange={handleTableOptionChange}
+              onSelectAllChange={handleSelectAllChange}
+              onSortPress={handleSortPress}
             >
-              <PageToolbarButton
-                label={translate('Options')}
-                iconName={icons.TABLE}
-              />
-            </TableOptionsModalWrapper>
-
-            <FilterMenu
-              alignMenu={align.RIGHT}
-              selectedFilterKey={selectedFilterKey}
-              filters={filters}
-              customFilters={customFilters}
-              filterModalConnectorComponent={BlocklistFilterModal}
-              onFilterSelect={handleFilterSelect}
+              <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}
             />
-          </PageToolbarSection>
-        </PageToolbar>
+          </div>
+        ) : null}
+      </PageContentBody>
 
-        <PageContentBody>
-          {isLoading && !isFetched ? <LoadingIndicator /> : null}
+      <ConfirmModal
+        isOpen={isConfirmRemoveModalOpen}
+        kind={kinds.DANGER}
+        title={translate('RemoveSelected')}
+        message={translate('RemoveSelectedBlocklistMessageText')}
+        confirmLabel={translate('RemoveSelected')}
+        onConfirm={handleRemoveSelectedConfirmed}
+        onCancel={handleConfirmRemoveModalClose}
+      />
 
-          {!isLoading && !!error ? (
-            <Alert kind={kinds.DANGER}>{translate('BlocklistLoadError')}</Alert>
-          ) : null}
+      <ConfirmModal
+        isOpen={isConfirmClearModalOpen}
+        kind={kinds.DANGER}
+        title={translate('ClearBlocklist')}
+        message={translate('ClearBlocklistMessageText')}
+        confirmLabel={translate('Clear')}
+        onConfirm={handleClearBlocklistConfirmed}
+        onCancel={handleConfirmClearModalClose}
+      />
+    </PageContent>
+  );
+}
 
-          {isFetched && !error && !records.length ? (
-            <Alert kind={kinds.INFO}>
-              {selectedFilterKey === 'all'
-                ? translate('NoBlocklistItems')
-                : translate('BlocklistFilterHasNoItems')}
-            </Alert>
-          ) : null}
+function Blocklist() {
+  const { records } = useBlocklist();
 
-          {isFetched && !error && !!records.length ? (
-            <div>
-              <Table
-                selectAll={true}
-                allSelected={allSelected}
-                allUnselected={allUnselected}
-                columns={columns}
-                pageSize={pageSize}
-                sortKey={sortKey}
-                sortDirection={sortDirection}
-                onTableOptionChange={handleTableOptionChange}
-                onSelectAllChange={handleSelectAllChange}
-                onSortPress={handleSortPress}
-              >
-                <TableBody>
-                  {records.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}
-                onPageSelect={goToPage}
-              />
-            </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>
+  return (
+    <SelectProvider<BlockListModel> items={records}>
+      <BlocklistContent />
     </SelectProvider>
   );
 }

frontend/src/Activity/Blocklist/BlocklistRow.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { useSelect } from 'App/Select/SelectContext';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -10,7 +11,7 @@ import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
 import { icons, kinds } from 'Helpers/Props';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
-import useSeries from 'Series/useSeries';
+import { useSingleSeries } from 'Series/useSeries';
 import Blocklist from 'typings/Blocklist';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
@@ -19,9 +20,7 @@ import { useRemoveBlocklistItem } from './useBlocklist';
 import styles from './BlocklistRow.css';
 
 interface BlocklistRowProps extends Blocklist {
-  isSelected: boolean;
   columns: Column[];
-  onSelectedChange: (options: SelectStateInputProps) => void;
 }
 
 function BlocklistRow({
@@ -36,13 +35,20 @@ function BlocklistRow({
   indexer,
   message,
   source,
-  isSelected,
   columns,
-  onSelectedChange,
 }: BlocklistRowProps) {
-  const series = useSeries(seriesId);
+  const series = useSingleSeries(seriesId);
   const { isRemoving, removeBlocklistItem } = useRemoveBlocklistItem(id);
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
+  const { toggleSelected, useIsSelected } = useSelect<Blocklist>();
+  const isSelected = useIsSelected(id);
+
+  const handleSelectedChange = useCallback(
+    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
+      toggleSelected({ id, isSelected: value, shiftKey });
+    },
+    [toggleSelected]
+  );
 
   const handleDetailsPress = useCallback(() => {
     setIsDetailsModalOpen(true);
@@ -65,7 +71,7 @@ function BlocklistRow({
       <TableSelectCell
         id={id}
         isSelected={isSelected}
-        onSelectedChange={onSelectedChange}
+        onSelectedChange={handleSelectedChange}
       />
 
       {columns.map((column) => {

frontend/src/Activity/Blocklist/blocklistOptionsStore.ts

@@ -6,7 +6,7 @@ import translate from 'Utilities/String/translate';
 
 export type BlocklistOptions = PageableOptions;
 
-const { useOptions, useOption, setOptions, setOption } =
+const { useOptions, useOption, setOptions, setOption, setSort } =
   createOptionsStore<BlocklistOptions>('blocklist_options', () => {
     return {
       pageSize: 20,
@@ -69,3 +69,4 @@ 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,12 +1,11 @@
 import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
+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 { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import Blocklist from 'typings/Blocklist';
 import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
 import translate from 'Utilities/String/translate';
@@ -43,9 +42,7 @@ const useBlocklist = () => {
   const { page, goToPage } = usePage('blocklist');
   const { pageSize, selectedFilterKey, sortKey, sortDirection } =
     useBlocklistOptions();
-  const customFilters = useSelector(
-    createCustomFiltersSelector('blocklist')
-  ) as CustomFilter[];
+  const customFilters = useCustomFiltersList('blocklist');
 
   const filters = useMemo(() => {
     return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);

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

@@ -1,11 +1,10 @@
 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 createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
 import {
   DownloadFailedHistory,
   DownloadFolderImportedHistory,
@@ -33,9 +32,7 @@ interface HistoryDetailsProps {
 function HistoryDetails(props: HistoryDetailsProps) {
   const { eventType, sourceTitle, data, downloadId } = props;
 
-  const { shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
+  const { shortDateFormat, timeFormat } = useUiSettingsValues();
 
   if (eventType === 'grabbed') {
     const {

frontend/src/Activity/History/History.tsx

@@ -1,9 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import {
-  setQueueOption,
-  setQueueOptions,
-} from 'Activity/Queue/queueOptionsStore';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
@@ -16,12 +11,10 @@ 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 createEpisodesFetchingSelector from 'Episode/createEpisodesFetchingSelector';
-import useCurrentPage from 'Helpers/Hooks/useCurrentPage';
+import useEpisodes from 'Episode/useEpisodes';
+import { useCustomFiltersList } from 'Filters/useCustomFilters';
 import { align, icons, kinds } from 'Helpers/Props';
-import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
-import { clearEpisodeFiles } from 'Store/Actions/episodeFileActions';
-import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
+import { SortDirection } from 'Helpers/Props/sortDirections';
 import HistoryItem from 'typings/History';
 import { TableOptionsChangePayload } from 'typings/Table';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
@@ -31,7 +24,12 @@ import {
 } from 'Utilities/pagePopulator';
 import translate from 'Utilities/String/translate';
 import HistoryFilterModal from './HistoryFilterModal';
-import { useHistoryOptions } from './historyOptionsStore';
+import {
+  setHistoryOption,
+  setHistoryOptions,
+  setHistorySort,
+  useHistoryOptions,
+} from './historyOptionsStore';
 import HistoryRow from './HistoryRow';
 import useHistory, { useFilters } from './useHistory';
 
@@ -52,33 +50,44 @@ function History() {
   const { columns, pageSize, sortKey, sortDirection, selectedFilterKey } =
     useHistoryOptions();
 
+  const episodeIds = useMemo(() => {
+    return selectUniqueIds<HistoryItem, number>(records, 'episodeId');
+  }, [records]);
+
+  const {
+    isFetching: isEpisodesFetching,
+    isFetched: isEpisodesFetched,
+    error: episodesError,
+  } = useEpisodes({ episodeIds });
+
   const filters = useFilters();
 
-  const requestCurrentPage = useCurrentPage();
-
-  const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
-    useSelector(createEpisodesFetchingSelector());
-  const customFilters = useSelector(createCustomFiltersSelector('history'));
-  const dispatch = useDispatch();
+  const customFilters = useCustomFiltersList('history');
 
   const isFetchingAny = isLoading || isEpisodesFetching;
-  const isAllPopulated = isFetched && (isEpisodesPopulated || !records.length);
+  const isAllPopulated = isFetched && (isEpisodesFetched || !records.length);
   const hasError = error || episodesError;
 
   const handleFilterSelect = useCallback(
     (selectedFilterKey: string | number) => {
-      setQueueOption('selectedFilterKey', selectedFilterKey);
+      setHistoryOption('selectedFilterKey', selectedFilterKey);
     },
     []
   );
 
-  const handleSortPress = useCallback((sortKey: string) => {
-    setQueueOption('sortKey', sortKey);
-  }, []);
+  const handleSortPress = useCallback(
+    (sortKey: string, sortDirection?: SortDirection) => {
+      setHistorySort({
+        sortKey,
+        sortDirection,
+      });
+    },
+    []
+  );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
-      setQueueOptions(payload);
+      setHistoryOptions(payload);
 
       if (payload.pageSize) {
         goToPage(1);
@@ -92,26 +101,6 @@ function History() {
     refetch();
   }, [goToPage, refetch]);
 
-  useEffect(() => {
-    return () => {
-      dispatch(clearEpisodes());
-      dispatch(clearEpisodeFiles());
-    };
-  }, [requestCurrentPage, dispatch]);
-
-  useEffect(() => {
-    const episodeIds = selectUniqueIds<HistoryItem, number>(
-      records,
-      'episodeId'
-    );
-
-    if (episodeIds.length) {
-      dispatch(fetchEpisodes({ episodeIds }));
-    } else {
-      dispatch(clearEpisodes());
-    }
-  }, [records, dispatch]);
-
   useEffect(() => {
     const repopulate = () => {
       refetch();

frontend/src/Activity/History/HistoryRow.tsx

@@ -16,7 +16,7 @@ import { icons, tooltipPositions } from 'Helpers/Props';
 import Language from 'Language/Language';
 import { QualityModel } from 'Quality/Quality';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
-import useSeries from 'Series/useSeries';
+import { useSingleSeries } from 'Series/useSeries';
 import CustomFormat from 'typings/CustomFormat';
 import { HistoryData, HistoryEventType } from 'typings/History';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
@@ -61,7 +61,7 @@ function HistoryRow(props: HistoryRowProps) {
     columns,
   } = props;
 
-  const series = useSeries(seriesId);
+  const series = useSingleSeries(seriesId);
   const episode = useEpisode(episodeId, 'episodes');
 
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);

frontend/src/Activity/History/historyOptionsStore.ts

@@ -9,10 +9,9 @@ import translate from 'Utilities/String/translate';
 
 export type HistoryOptions = PageableOptions;
 
-const { useOptions, useOption, setOptions, setOption } =
+const { useOptions, useOption, setOptions, setOption, setSort } =
   createOptionsStore<HistoryOptions>('history_options', () => {
     return {
-      includeUnknownSeriesItems: true,
       pageSize: 20,
       selectedFilterKey: 'all',
       sortKey: 'time',
@@ -107,3 +106,4 @@ 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

@@ -0,0 +1,20 @@
+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,12 +1,11 @@
 import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
+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 { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import History from 'typings/History';
 import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
 import translate from 'Utilities/String/translate';
@@ -113,13 +112,18 @@ export const FILTER_BUILDER: FilterBuilderProp<History>[] = [
   },
 ];
 
+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 = useSelector(
-    createCustomFiltersSelector('history')
-  ) as CustomFilter[];
+  const customFilters = useCustomFiltersList('history');
 
   const filters = useMemo(() => {
     return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
@@ -158,7 +162,7 @@ export const useFilters = () => {
   return FILTERS;
 };
 
-export const useMarkAsFailed = (id: number) => {
+export const useMarkAsFailed = (id: number, type?: HistoryType) => {
   const queryClient = useQueryClient();
   const [error, setError] = useState<string | null>(null);
 
@@ -170,7 +174,9 @@ export const useMarkAsFailed = (id: number) => {
         setError(null);
       },
       onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: ['/history'] });
+        const queryKey = type ? MARK_AS_FAILED_QUERY_KEYS[type] : '/history';
+
+        queryClient.invalidateQueries({ queryKey: [queryKey] });
       },
       onError: () => {
         setError('Error marking history item as failed');

frontend/src/Activity/History/useSeriesHistory.ts

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

frontend/src/Activity/Queue/Queue.tsx

@@ -6,8 +6,9 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import * as commandNames from 'Commands/commandNames';
+import { SelectProvider, useSelect } from 'App/Select/SelectContext';
+import CommandNames from 'Commands/CommandNames';
+import { useCommandExecuting, useExecuteCommand } from 'Commands/useCommands';
 import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
@@ -21,15 +22,13 @@ 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 createEpisodesFetchingSelector from 'Episode/createEpisodesFetchingSelector';
-import useSelectState from 'Helpers/Hooks/useSelectState';
+import useEpisodes from 'Episode/useEpisodes';
+import { useCustomFiltersList } from 'Filters/useCustomFilters';
 import { align, icons, kinds } from 'Helpers/Props';
-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 { SortDirection } from 'Helpers/Props/sortDirections';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import { CheckInputChanged } from 'typings/inputs';
-import { SelectStateInputProps } from 'typings/props';
+import QueueModel from 'typings/Queue';
 import { TableOptionsChangePayload } from 'typings/Table';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import {
@@ -37,12 +36,11 @@ 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';
@@ -54,8 +52,8 @@ import useQueue, {
   useRemoveQueueItems,
 } from './useQueue';
 
-function Queue() {
-  const dispatch = useDispatch();
+function QueueContent() {
+  const executeCommand = useExecuteCommand();
 
   const {
     records,
@@ -78,24 +76,30 @@ function Queue() {
   const { isGrabbing, grabQueueItems } = useGrabQueueItems();
 
   const { count } = useQueueStatus();
-  const { isEpisodesFetching, isEpisodesPopulated, episodesError } =
-    useSelector(createEpisodesFetchingSelector());
-  const customFilters = useSelector(createCustomFiltersSelector('queue'));
 
-  const isRefreshMonitoredDownloadsExecuting = useSelector(
-    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS)
+  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 shouldBlockRefresh = useRef(false);
   const currentQueue = useRef<ReactElement | null>(null);
 
-  const [selectState, setSelectState] = useSelectState();
-  const { allSelected, allUnselected, selectedState } = selectState;
-
-  const selectedIds = useMemo(() => {
-    return getSelectedIds(selectedState);
-  }, [selectedState]);
+  const { allSelected, allUnselected, selectAll, unselectAll, useSelectedIds } =
+    useSelect<QueueModel>();
 
+  const selectedIds = useSelectedIds();
   const isPendingSelected = useMemo(() => {
     return records.some((item) => {
       return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
@@ -105,13 +109,16 @@ function Queue() {
   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 &&
-    (isEpisodesPopulated ||
+    (isEpisodesFetched ||
       !records.length ||
       records.every((e) => !e.episodeIds?.length));
   const hasError = error || episodesError;
@@ -120,34 +127,20 @@ function Queue() {
 
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      setSelectState({
-        type: value ? 'selectAll' : 'unselectAll',
-        items: records,
-      });
+      if (value) {
+        selectAll();
+      } else {
+        unselectAll();
+      }
     },
-    [records, setSelectState]
-  );
-
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey = false }: SelectStateInputProps) => {
-      setSelectState({
-        type: 'toggleSelected',
-        items: records,
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [records, setSelectState]
+    [selectAll, unselectAll]
   );
 
   const handleRefreshPress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: commandNames.REFRESH_MONITORED_DOWNLOADS,
-      })
-    );
-  }, [dispatch]);
+    executeCommand({
+      name: CommandNames.RefreshMonitoredDownloads,
+    });
+  }, [executeCommand]);
 
   const handleQueueRowModalOpenOrClose = useCallback((isOpen: boolean) => {
     shouldBlockRefresh.current = isOpen;
@@ -166,12 +159,30 @@ function Queue() {
     shouldBlockRefresh.current = false;
     removeQueueItems({ ids: selectedIds });
     setIsConfirmRemoveModalOpen(false);
-  }, [selectedIds, setIsConfirmRemoveModalOpen, removeQueueItems]);
+  }, [selectedIds, removeQueueItems]);
 
   const handleConfirmRemoveModalClose = useCallback(() => {
     shouldBlockRefresh.current = false;
     setIsConfirmRemoveModalOpen(false);
-  }, [setIsConfirmRemoveModalOpen]);
+  }, []);
+
+  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([]);
+  }, []);
 
   const handleFilterSelect = useCallback(
     (selectedFilterKey: string | number) => {
@@ -180,9 +191,15 @@ function Queue() {
     []
   );
 
-  const handleSortPress = useCallback((sortKey: string) => {
-    setQueueOption('sortKey', sortKey);
-  }, []);
+  const handleSortPress = useCallback(
+    (sortKey: string, sortDirection?: SortDirection) => {
+      setQueueSort({
+        sortKey,
+        sortDirection,
+      });
+    },
+    []
+  );
 
   const handleTableOptionChange = useCallback(
     (payload: TableOptionsChangePayload) => {
@@ -195,16 +212,6 @@ function Queue() {
     [goToPage]
   );
 
-  useEffect(() => {
-    const episodeIds = selectUniqueIds(records, 'episodeIds');
-
-    if (episodeIds.length) {
-      dispatch(fetchEpisodes({ episodeIds }));
-    } else {
-      dispatch(clearEpisodes());
-    }
-  }, [records, dispatch]);
-
   useEffect(() => {
     const repopulate = () => {
       refetch();
@@ -244,7 +251,6 @@ function Queue() {
               pageSize={pageSize}
               sortKey={sortKey}
               sortDirection={sortDirection}
-              optionsComponent={QueueOptions}
               onTableOptionChange={handleTableOptionChange}
               onSelectAllChange={handleSelectAllChange}
               onSortPress={handleSortPress}
@@ -254,10 +260,8 @@ function Queue() {
                   return (
                     <QueueRow
                       key={item.id}
-                      isSelected={selectedState[item.id]}
                       columns={columns}
                       {...item}
-                      onSelectedChange={handleSelectedChange}
                       onQueueRowModalOpenOrClose={
                         handleQueueRowModalOpenOrClose
                       }
@@ -308,6 +312,15 @@ function Queue() {
             isSpinning={isRemoving}
             onPress={handleRemoveSelectedPress}
           />
+
+          <PageToolbarSeparator />
+
+          <PageToolbarButton
+            label={translate('ImportSelected')}
+            iconName={icons.INTERACTIVE}
+            isDisabled={disableSelectedActions}
+            onPress={handleImportSelectedPress}
+          />
         </PageToolbarSection>
 
         <PageToolbarSection alignContent={align.RIGHT}>
@@ -315,7 +328,6 @@ function Queue() {
             columns={columns}
             pageSize={pageSize}
             maxPageSize={200}
-            optionsComponent={QueueOptions}
             onTableOptionChange={handleTableOptionChange}
           >
             <PageToolbarButton
@@ -342,7 +354,7 @@ function Queue() {
         selectedCount={selectedCount}
         canChangeCategory={
           isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
+          selectedIds.every((id: number) => {
             const item = records.find((i) => i.id === id);
 
             return !!(item && item.downloadClientHasPostImportCategory);
@@ -350,7 +362,7 @@ function Queue() {
         }
         canIgnore={
           isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
+          selectedIds.every((id: number) => {
             const item = records.find((i) => i.id === id);
 
             return !!(item && item.seriesId && item.episodeId);
@@ -358,7 +370,7 @@ function Queue() {
         }
         isPending={
           isConfirmRemoveModalOpen &&
-          selectedIds.every((id) => {
+          selectedIds.every((id: number) => {
             const item = records.find((i) => i.id === id);
 
             if (!item) {
@@ -374,8 +386,25 @@ function Queue() {
         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,4 +1,5 @@
 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';
@@ -8,12 +9,9 @@ type QueueFilterModalProps = FilterModalProps<History>;
 export default function QueueFilterModal(props: QueueFilterModalProps) {
   const { records } = useQueue();
 
-  const dispatchSetFilter = useCallback(
-    ({ selectedFilterKey }: { selectedFilterKey: string | number }) => {
-      setQueueOption('selectedFilterKey', selectedFilterKey);
-    },
-    []
-  );
+  const dispatchSetFilter = useCallback(({ selectedFilterKey }: SetFilter) => {
+    setQueueOption('selectedFilterKey', selectedFilterKey);
+  }, []);
 
   return (
     <FilterModal

frontend/src/Activity/Queue/QueueOptions.tsx

@@ -1,46 +0,0 @@
-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 useEpisodes from 'Episode/useEpisodes';
+import { useEpisodesWithIds } from 'Episode/useEpisode';
 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 useSeries from 'Series/useSeries';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { useSingleSeries } from 'Series/useSeries';
+import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
 import CustomFormat from 'typings/CustomFormat';
 import { SelectStateInputProps } from 'typings/props';
-import {
+import Queue, {
   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,9 +68,7 @@ interface QueueRowProps {
   size: number;
   sizeLeft: number;
   isRemoving?: boolean;
-  isSelected?: boolean;
   columns: Column[];
-  onSelectedChange: (options: SelectStateInputProps) => void;
   onQueueRowModalOpenOrClose: (isOpen: boolean) => void;
 }
 
@@ -102,19 +100,18 @@ function QueueRow(props: QueueRowProps) {
     timeLeft,
     size,
     sizeLeft,
-    isSelected,
     columns,
-    onSelectedChange,
     onQueueRowModalOpenOrClose,
   } = props;
 
-  const series = useSeries(seriesId);
-  const episodes = useEpisodes(episodeIds, 'episodes');
-  const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
-    createUISettingsSelector()
-  );
+  const series = useSingleSeries(seriesId);
+  const episodes = useEpisodesWithIds(episodeIds);
+  const { showRelativeDates, shortDateFormat, timeFormat } =
+    useUiSettingsValues();
   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);
@@ -156,6 +153,17 @@ 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';
@@ -167,7 +175,7 @@ function QueueRow(props: QueueRowProps) {
       <TableSelectCell
         id={id}
         isSelected={isSelected}
-        onSelectedChange={onSelectedChange}
+        onSelectedChange={handleSelectedChange}
       />
 
       {columns.map((column) => {
@@ -389,8 +397,8 @@ function QueueRow(props: QueueRowProps) {
 
       <InteractiveImportModal
         isOpen={isInteractiveImportModalOpen}
-        downloadId={downloadId}
-        modalTitle={title}
+        downloadIds={[downloadId]}
+        title={title}
         onModalClose={handleInteractiveImportModalClose}
       />
 

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

@@ -1,12 +1,22 @@
 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 count={count} errors={errors} warnings={warnings} />
+    <PageSidebarStatus
+      aria-label={
+        count === 1
+          ? translate('QueueItem')
+          : translate('QueueItems', { count })
+      }
+      count={count}
+      errors={errors}
+      warnings={warnings}
+    />
   );
 }
 

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

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

frontend/src/Activity/Queue/queueOptionsStore.ts

@@ -13,14 +13,12 @@ interface QueueRemovalOptions {
 }
 
 export interface QueueOptions extends PageableOptions {
-  includeUnknownSeriesItems: boolean;
   removalOptions: QueueRemovalOptions;
 }
 
-const { useOptions, useOption, setOptions, setOption } =
+const { useOptions, useOption, setOptions, setOption, setSort } =
   createOptionsStore<QueueOptions>('queue_options', () => {
     return {
-      includeUnknownSeriesItems: true,
       pageSize: 20,
       selectedFilterKey: 'all',
       sortKey: 'time',
@@ -158,3 +156,4 @@ 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,12 +1,11 @@
 import { keepPreviousData, useQueryClient } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { CustomFilter, Filter, FilterBuilderProp } from 'App/State/AppState';
+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 { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
 import Queue from 'typings/Queue';
 import getQueryString from 'Utilities/Fetch/getQueryString';
 import findSelectedFilters from 'Utilities/Filter/findSelectedFilters';
@@ -23,6 +22,17 @@ 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>[] = [
@@ -56,20 +66,19 @@ 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 {
-    includeUnknownSeriesItems,
-    pageSize,
-    selectedFilterKey,
-    sortKey,
-    sortDirection,
-  } = useQueueOptions();
-  const customFilters = useSelector(
-    createCustomFiltersSelector('queue')
-  ) as CustomFilter[];
+  const { pageSize, selectedFilterKey, sortKey, sortDirection } =
+    useQueueOptions();
+  const customFilters = useCustomFiltersList('queue');
 
   const filters = useMemo(() => {
     return findSelectedFilters(selectedFilterKey, FILTERS, customFilters);
@@ -80,9 +89,6 @@ const useQueue = () => {
     page,
     pageSize,
     filters,
-    queryParams: {
-      includeUnknownSeriesItems,
-    },
     sortKey,
     sortDirection,
     queryOptions: {

frontend/src/AddSeries/AddNewSeries/AddNewSeries.tsx

@@ -1,6 +1,4 @@
 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';
@@ -12,6 +10,7 @@ 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';
@@ -21,11 +20,7 @@ import styles from './AddNewSeries.css';
 
 function AddNewSeries() {
   const { term: initialTerm = '' } = useQueryParams<{ term: string }>();
-
-  const seriesCount = useSelector(
-    (state: AppState) => state.series.items.length
-  );
-
+  const hasSeries = useHasSeries();
   const [term, setTerm] = useState(initialTerm);
   const [isFetching, setIsFetching] = useState(false);
   const query = useDebounce(term, term ? 300 : 0);
@@ -43,11 +38,7 @@ function AddNewSeries() {
     setIsFetching(false);
   }, []);
 
-  const {
-    isFetching: isFetchingApi,
-    error,
-    data = [],
-  } = useLookupSeries(query);
+  const { isFetching: isFetchingApi, error, data } = useLookupSeries(query);
 
   useEffect(() => {
     setIsFetching(isFetchingApi);
@@ -127,7 +118,7 @@ function AddNewSeries() {
           </div>
         )}
 
-        {!term && !seriesCount ? (
+        {!term && !hasSeries ? (
           <div className={styles.message}>
             <div className={styles.noSeriesText}>
               {translate('NoSeriesHaveBeenAdded')}

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
 import AddSeries from 'AddSeries/AddSeries';
 import {
   AddSeriesOptions,
@@ -8,6 +7,7 @@ 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/useIsWindows';
+import { useIsWindows } from 'System/Status/useSystemStatus';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
 import { useAddSeries } from './useAddSeries';
@@ -44,13 +44,16 @@ function AddNewSeriesModalContent({
 }: AddNewSeriesModalContentProps) {
   const { title, year, overview, images, folder } = series;
   const options = useAddSeriesOptions();
-  const { isSmallScreen } = useSelector(createDimensionsSelector());
+  const isSmallScreen = useAppDimension('isSmallScreen');
   const isWindows = useIsWindows();
 
   const { isAdding, addError, addSeries } = useAddSeries();
 
   const { settings, validationErrors, validationWarnings } = useMemo(() => {
-    return selectSettings(options, {}, addError);
+    return {
+      ...selectSettings(options, {}),
+      ...getValidationFailures(addError),
+    };
   }, [options, addError]);
 
   const [seriesType, setSeriesType] = useState<SeriesType>(
@@ -88,12 +91,14 @@ function AddNewSeriesModalContent({
     addSeries({
       ...series,
       rootFolderPath: rootFolderPath.value,
-      monitor: monitor.value,
+      addOptions: {
+        monitor: monitor.value,
+        searchForMissingEpisodes: searchForMissingEpisodes.value,
+        searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
+      },
       qualityProfileId: qualityProfileId.value,
       seriesType,
       seasonFolder: seasonFolder.value,
-      searchForMissingEpisodes: searchForMissingEpisodes.value,
-      searchForCutoffUnmetEpisodes: searchForCutoffUnmetEpisodes.value,
       tags: tags.value,
     });
   }, [
@@ -131,6 +136,7 @@ function AddNewSeriesModalContent({
                 className={styles.poster}
                 images={images}
                 size={250}
+                title={title}
               />
             </div>
           )}

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css

@@ -97,6 +97,12 @@
   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,6 +3,7 @@
 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,8 +10,7 @@ import { icons, kinds, sizes } from 'Helpers/Props';
 import { Statistics } from 'Series/Series';
 import SeriesGenres from 'Series/SeriesGenres';
 import SeriesPoster from 'Series/SeriesPoster';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
+import useExistingSeries from 'Series/useExistingSeries';
 import translate from 'Utilities/String/translate';
 import AddNewSeriesModal from './AddNewSeriesModal';
 import styles from './AddNewSeriesSearchResult.css';
@@ -35,10 +34,11 @@ function AddNewSeriesSearchResult({ series }: AddNewSeriesSearchResultProps) {
     overview,
     seriesType,
     images,
+    isExcluded,
   } = series;
 
-  const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
-  const { isSmallScreen } = useSelector(createDimensionsSelector());
+  const isExistingSeries = useExistingSeries(tvdbId);
+  const isSmallScreen = useAppDimension('isSmallScreen');
   const [isNewAddSeriesModalOpen, setIsNewAddSeriesModalOpen] = useState(false);
 
   const seasonCount = statistics.seasonCount;
@@ -75,6 +75,7 @@ function AddNewSeriesSearchResult({ series }: AddNewSeriesSearchResultProps) {
             size={250}
             overflow={true}
             lazy={false}
+            title={title}
           />
         )}
 
@@ -100,6 +101,15 @@ 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,44 +1,55 @@
-import { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useQueryClient } from '@tanstack/react-query';
 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';
 
-type AddSeriesPayload = AddSeries & AddSeriesOptions;
+interface AddSeriesPayload
+  extends AddSeries,
+    Omit<
+      AddSeriesOptions,
+      'monitor' | 'searchForMissingEpisodes' | 'searchForCutoffUnmetEpisodes'
+    > {}
 
-export const useLookupSeries = (query: string) => {
-  return useApiQuery<AddSeries[]>({
+const DEFAULT_SERIES: AddSeries[] = [];
+
+export const useLookupSeries = (query: string, isEnabled = true) => {
+  const result = useApiQuery<AddSeries[]>({
     path: '/series/lookup',
     queryParams: {
       term: query,
     },
     queryOptions: {
-      enabled: !!query,
+      enabled: isEnabled && !!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 dispatch = useDispatch();
-
-  const onAddSuccess = useCallback(
-    (data: Series) => {
-      dispatch(updateItem({ section: 'series', ...data }));
-    },
-    [dispatch]
-  );
+  const queryClient = useQueryClient();
 
   const { isPending, error, mutate } = useApiMutation<Series, AddSeriesPayload>(
     {
       path: '/series',
       method: 'POST',
       mutationOptions: {
-        onSuccess: onAddSuccess,
+        onSuccess: (newSeries) => {
+          queryClient.setQueryData<Series[]>(['/series'], (oldSeries) => {
+            if (!oldSeries) {
+              return [newSeries];
+            }
+
+            return [...oldSeries, newSeries];
+          });
+        },
       },
     }
   );

frontend/src/AddSeries/AddSeries.ts

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

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

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

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

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

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

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

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

@@ -1,33 +1,25 @@
-import React, { RefObject, useCallback, useEffect, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { RefObject, useCallback, useRef } from 'react';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
-import { useAddSeriesOptions } from 'AddSeries/addSeriesOptionsStore';
-import { useSelect } from 'App/SelectContext';
-import AppState from 'App/State/AppState';
-import { ImportSeries } from 'App/State/ImportSeriesAppState';
+import { useAppDimension } from 'App/appStore';
+import { useSelect } from 'App/Select/SelectContext';
 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: ImportSeries[];
+  items: UnamppedFolderItem[];
 }
 
 interface ImportSeriesTableProps {
-  unmappedFolders: UnmappedFolder[];
+  items: UnamppedFolderItem[];
   scrollerRef: RefObject<HTMLElement>;
 }
 
@@ -49,138 +41,34 @@ function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
       }}
       className={styles.row}
     >
-      <ImportSeriesRow key={item.id} id={item.id} />
+      <ImportSeriesRow key={item.id} unmappedFolder={item} />
     </div>
   );
 }
 
-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,
-  });
+function ImportSeriesTable({ items, scrollerRef }: ImportSeriesTableProps) {
+  const isSmallScreen = useAppDimension('isSmallScreen');
+  const { allSelected, allUnselected, selectAll, unselectAll, useHasItems } =
+    useSelect();
 
   const listRef = useRef<FixedSizeList<RowItemData>>(null);
-  const initialUnmappedFolders = useRef(unmappedFolders);
-  const previousItems = usePrevious(items);
-  const { allSelected, allUnselected, selectedState } = selectState;
 
   const handleSelectAllChange = useCallback(
     ({ value }: CheckInputChanged) => {
-      selectDispatch({
-        type: value ? 'selectAll' : 'unselectAll',
-      });
+      if (value) {
+        selectAll();
+      } else {
+        unselectAll();
+      }
     },
-    [selectDispatch]
+    [selectAll, unselectAll]
   );
 
-  const handleSelectedChange = useCallback(
-    ({ id, value, shiftKey }: SelectStateInputProps) => {
-      selectDispatch({
-        type: 'toggleSelected',
-        id,
-        isSelected: value,
-        shiftKey,
-      });
-    },
-    [selectDispatch]
-  );
+  const hasSelectItems = useHasItems();
 
-  const handleRemoveSelectedStateItem = useCallback(
-    (id: string) => {
-      selectDispatch({
-        type: 'removeItem',
-        id,
-      });
-    },
-    [selectDispatch]
-  );
+  useEnsureImportSeriesItems(items);
 
-  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) {
+  if (!items.length || !hasSelectItems) {
     return null;
   }
 

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

@@ -1,9 +1,8 @@
 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 createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
+import useExistingSeries from 'Series/useExistingSeries';
 import ImportSeriesTitle from './ImportSeriesTitle';
 import styles from './ImportSeriesSearchResult.css';
 
@@ -22,7 +21,7 @@ function ImportSeriesSearchResult({
   network,
   onPress,
 }: ImportSeriesSearchResultProps) {
-  const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
+  const isExistingSeries = useExistingSeries(tvdbId);
 
   const handlePress = useCallback(() => {
     onPress(tvdbId);

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

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

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

@@ -0,0 +1,175 @@
+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

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

frontend/src/App/App.tsx

@@ -1,4 +1,4 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
@@ -7,14 +7,13 @@ 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,5 +1,4 @@
 import React, { useCallback, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
@@ -13,7 +12,7 @@ import UpdateChanges from 'System/Updates/UpdateChanges';
 import useUpdates from 'System/Updates/useUpdates';
 import Update from 'typings/Update';
 import translate from 'Utilities/String/translate';
-import AppState from './State/AppState';
+import { useAppValues } from './appStore';
 import styles from './AppUpdatedModalContent.css';
 
 function mergeUpdates(items: Update[], version: string, prevVersion?: string) {
@@ -63,7 +62,7 @@ interface AppUpdatedModalContentProps {
 }
 
 function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
-  const { version, prevVersion } = useSelector((state: AppState) => state.app);
+  const { version, prevVersion } = useAppValues('version', 'prevVersion');
   const { isFetched, error, data, refetch } = useUpdates();
   const previousVersion = usePrevious(version);
 

frontend/src/App/Select/SelectContext.tsx

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,314 @@
+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

@@ -1,86 +0,0 @@
-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,111 +1,9 @@
-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;
-  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

@@ -1,9 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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,8 +1,5 @@
-import { CustomFilter } from './AppState';
-
 interface ClientSideCollectionAppState {
   totalItems: number;
-  customFilters: CustomFilter[];
 }
 
 export default ClientSideCollectionAppState;

frontend/src/App/State/CommandAppState.ts

@@ -1,6 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

frontend/src/App/State/OAuthAppState.ts

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

frontend/src/App/State/OrganizePreviewAppState.ts

@@ -1,15 +0,0 @@
-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/PathsAppState.ts

@@ -1,29 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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,13 +1,11 @@
 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';
@@ -16,21 +14,9 @@ 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[];
@@ -64,20 +50,6 @@ 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,
@@ -90,40 +62,6 @@ 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,
@@ -147,19 +85,9 @@ 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;
@@ -167,24 +95,11 @@ 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

@@ -1,25 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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[];
-  excludedReleaseProfileIds: 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

@@ -1,29 +0,0 @@
-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

@@ -0,0 +1,202 @@
+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

@@ -0,0 +1,56 @@
+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

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

frontend/src/App/useTranslations.ts

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

frontend/src/Calendar/Agenda/AgendaEvent.tsx

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import React, { useCallback, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useQueueItemForEpisode } from 'Activity/Queue/Details/QueueDetailsProvider';
-import AppState from 'App/State/AppState';
+import { useCalendarOptions } from 'Calendar/calendarOptionsStore';
 import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
@@ -10,10 +9,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/useEpisodeFile';
+import { useEpisodeFile } from 'EpisodeFile/EpisodeFileProvider';
 import { icons, kinds } from 'Helpers/Props';
-import useSeries from 'Series/useSeries';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { useSingleSeries } from 'Series/useSeries';
+import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
 import { convertToTimezone } from 'Utilities/Date/convertToTimezone';
 import formatTime from 'Utilities/Date/formatTime';
 import padNumber from 'Utilities/Number/padNumber';
@@ -55,18 +54,18 @@ function AgendaEvent(props: AgendaEventProps) {
     showDate,
   } = props;
 
-  const series = useSeries(seriesId)!;
+  const series = useSingleSeries(seriesId)!;
   const episodeFile = useEpisodeFile(episodeFileId);
   const queueItem = useQueueItemForEpisode(id);
   const { timeFormat, longDateFormat, enableColorImpairedMode, timeZone } =
-    useSelector(createUISettingsSelector());
+    useUiSettingsValues();
 
   const {
     showEpisodeInformation,
     showFinaleIcon,
     showSpecialIcon,
     showCutoffUnmetIcon,
-  } = useSelector((state: AppState) => state.calendar.options);
+  } = useCalendarOptions();
 
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
 

frontend/src/Calendar/Calendar.tsx

@@ -1,91 +1,65 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import AppState from 'App/State/AppState';
-import * as commandNames from 'Commands/commandNames';
+import CommandNames from 'Commands/CommandNames';
+import { useCommandExecuting } from 'Commands/useCommands';
 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, isPopulated, error, items, time, view } = useSelector(
-    (state: AppState) => state.calendar
-  );
+  const { isFetching, isLoading, error, refetch } = useCalendar();
+  const view = useCalendarOption('view');
 
-  const isRefreshingSeries = useSelector(
-    createCommandExecutingSelector(commandNames.REFRESH_SERIES)
-  );
-
-  const firstDayOfWeek = useSelector(
-    (state: AppState) => state.settings.ui.item.firstDayOfWeek
-  );
+  const isRefreshingSeries = useCommandExecuting(CommandNames.RefreshSeries);
 
   const wasRefreshingSeries = usePrevious(isRefreshingSeries);
-  const previousFirstDayOfWeek = usePrevious(firstDayOfWeek);
-  const previousItems = usePrevious(items);
 
   const handleScheduleUpdate = useCallback(() => {
     clearTimeout(updateTimeout.current);
 
     function updateCalendar() {
-      dispatch(gotoCalendarToday());
+      goToToday();
       updateTimeout.current = setTimeout(updateCalendar, UPDATE_DELAY);
     }
 
     updateTimeout.current = setTimeout(updateCalendar, UPDATE_DELAY);
-  }, [dispatch]);
+  }, []);
 
   useEffect(() => {
     handleScheduleUpdate();
 
     return () => {
-      dispatch(clearCalendar());
-      dispatch(clearEpisodeFiles());
       clearTimeout(updateTimeout.current);
     };
-  }, [dispatch, handleScheduleUpdate]);
+  }, [handleScheduleUpdate]);
 
   useEffect(() => {
-    if (requestCurrentPage) {
-      dispatch(fetchCalendar());
-    } else {
-      dispatch(gotoCalendarToday());
+    if (!requestCurrentPage) {
+      goToToday();
     }
-  }, [requestCurrentPage, dispatch]);
+  }, [requestCurrentPage]);
 
   useEffect(() => {
     const repopulate = () => {
-      dispatch(fetchCalendar({ time, view }));
+      refetch();
     };
 
     registerPagePopulator(repopulate, [
@@ -96,53 +70,31 @@ function Calendar() {
     return () => {
       unregisterPagePopulator(repopulate);
     };
-  }, [time, view, dispatch]);
+  }, [refetch]);
 
   useEffect(() => {
     handleScheduleUpdate();
-  }, [time, handleScheduleUpdate]);
-
-  useEffect(() => {
-    if (
-      previousFirstDayOfWeek != null &&
-      firstDayOfWeek !== previousFirstDayOfWeek
-    ) {
-      dispatch(fetchCalendar({ time, view }));
-    }
-  }, [time, view, firstDayOfWeek, previousFirstDayOfWeek, dispatch]);
+  }, [handleScheduleUpdate]);
 
   useEffect(() => {
     if (wasRefreshingSeries && !isRefreshingSeries) {
-      dispatch(fetchCalendar({ time, view }));
+      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]);
+  }, [isRefreshingSeries, wasRefreshingSeries, refetch]);
 
   return (
     <div className={styles.calendar}>
-      {isFetching && !isPopulated ? <LoadingIndicator /> : null}
+      {isLoading ? <LoadingIndicator /> : null}
       {!isFetching && error ? (
         <Alert kind={kinds.DANGER}>{translate('CalendarLoadError')}</Alert>
       ) : null}
-      {!error && isPopulated && view === 'agenda' ? (
+      {!error && !isLoading && view === 'agenda' ? (
         <div className={styles.calendarContent}>
           <CalendarHeader />
           <Agenda />
         </div>
       ) : null}
-      {!error && isPopulated && view !== 'agenda' ? (
+      {!error && !isLoading && view !== 'agenda' ? (
         <div className={styles.calendarContent}>
           <CalendarHeader />
           <DaysOfWeek />

frontend/src/Calendar/CalendarFilterModal.tsx

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

frontend/src/Calendar/CalendarMissingEpisodeSearchButton.tsx

@@ -1,68 +1,59 @@
 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 AppState from 'App/State/AppState';
+import { useCommands } from 'Commands/useCommands';
 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 createIsSearchingSelector() {
-  return createSelector(
-    (state: AppState) => state.calendar.searchMissingCommandId,
-    createCommandsSelector(),
-    (searchMissingCommandId, commands) => {
-      if (searchMissingCommandId == null) {
-        return false;
-      }
+function useIsSearching(searchMissingCommandId: number | undefined) {
+  const { data: commands } = useCommands();
 
-      return isCommandExecuting(
-        commands.find((command) => {
-          return command.id === searchMissingCommandId;
-        })
-      );
-    }
+  if (searchMissingCommandId == null) {
+    return false;
+  }
+
+  return isCommandExecuting(
+    commands.find((command) => {
+      return command.id === searchMissingCommandId;
+    })
   );
 }
 
-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;
+const useMissingEpisodeIdsSelector = () => {
+  const { start, end } = useCalendarRange();
+  const { data } = useCalendar();
+  const queueDetails = useQueueDetails();
 
-        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 data.reduce<number[]>((acc, episode) => {
+    const airDateUtc = episode.airDateUtc;
 
-        return acc;
-      }, []);
+    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;
+  }, []);
+};
 
 export default function CalendarMissingEpisodeSearchButton() {
-  const queueDetails = useQueueDetails();
-  const missingEpisodeIds = useSelector(
-    createMissingEpisodeIdsSelector(queueDetails)
-  );
-  const isSearchingForMissing = useSelector(createIsSearchingSelector());
+  const searchMissingCommandId = useCalendarSearchMissingCommandId();
+  const missingEpisodeIds = useMissingEpisodeIdsSelector();
+  const isSearchingForMissing = useIsSearching(searchMissingCommandId);
 
   const handlePress = useCallback(() => {}, []);
 

frontend/src/Calendar/CalendarPage.tsx

@@ -1,8 +1,13 @@
-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 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 FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -11,40 +16,41 @@ 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 {
-  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 { useHasSeries } from 'Series/useSeries';
 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 dispatch = useDispatch();
+  const executeCommand = useExecuteCommand();
 
-  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 selectedFilterKey = useCalendarOption('selectedFilterKey');
+  const { data } = useCalendar();
+
+  useCalendarPage();
+
+  const isRssSyncExecuting = useCommandExecuting(CommandNames.RssSync);
+  const customFilters = useCustomFiltersList('calendar');
+  const hasSeries = useHasSeries();
 
   const [pageContentRef, { width }] = useMeasure();
   const [isCalendarLinkModalOpen, setIsCalendarLinkModalOpen] = useState(false);
@@ -70,23 +76,22 @@ function CalendarPage() {
   }, []);
 
   const handleRssSyncPress = useCallback(() => {
-    dispatch(
-      executeCommand({
-        name: commandNames.RSS_SYNC,
-      })
-    );
-  }, [dispatch]);
+    executeCommand({
+      name: CommandNames.RssSync,
+    });
+  }, [executeCommand]);
 
-  const handleFilterSelect = useCallback(
-    (key: string | number) => {
-      dispatch(setCalendarFilter({ selectedFilterKey: key }));
-    },
-    [dispatch]
-  );
+  const handleFilterSelect = useCallback((key: string | number) => {
+    setCalendarOption('selectedFilterKey', key);
+  }, []);
 
   const episodeIds = useMemo(() => {
-    return selectUniqueIds<Episode, number>(items, 'id');
-  }, [items]);
+    return selectUniqueIds<Episode, number>(data, 'id');
+  }, [data]);
+
+  const episodeFileIds = useMemo(() => {
+    return selectUniqueIds<Episode, number>(data, 'episodeFileId');
+  }, [data]);
 
   useEffect(() => {
     if (width === 0) {
@@ -98,11 +103,14 @@ function CalendarPage() {
       Math.min(7, Math.floor(width / MINIMUM_DAY_WIDTH))
     );
 
-    dispatch(setCalendarDaysCount({ dayCount }));
-  }, [width, dispatch]);
+    setCalendarDayCount(dayCount);
+  }, [width]);
 
   return (
-    <QueueDetails episodeIds={episodeIds}>
+    <CalendarPageProvider
+      episodeIds={episodeIds}
+      episodeFileIds={episodeFileIds}
+    >
       <PageContent title={translate('Calendar')}>
         <PageToolbar>
           <PageToolbarSection>
@@ -135,7 +143,7 @@ function CalendarPage() {
               alignMenu={align.RIGHT}
               isDisabled={!hasSeries}
               selectedFilterKey={selectedFilterKey}
-              filters={filters}
+              filters={FILTERS}
               customFilters={customFilters}
               filterModalConnectorComponent={CalendarFilterModal}
               onFilterSelect={handleFilterSelect}
@@ -162,8 +170,22 @@ function CalendarPage() {
           onModalClose={handleOptionsModalClose}
         />
       </PageContent>
-    </QueueDetails>
+    </CalendarPageProvider>
   );
 }
 
 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,12 +1,11 @@
 import classNames from 'classnames';
 import moment from 'moment';
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { createSelector } from 'reselect';
-import AppState from 'App/State/AppState';
+import { useCalendarOption } from 'Calendar/calendarOptionsStore';
 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,
@@ -28,63 +27,61 @@ function sort(items: (CalendarEventModel | CalendarEventGroupModel)[]) {
   });
 }
 
-function createCalendarEventsConnector(date: string) {
-  return createSelector(
-    (state: AppState) => state.calendar.items,
-    (state: AppState) => state.calendar.options.collapseMultipleEpisodes,
-    (items, collapseMultipleEpisodes) => {
-      const momentDate = moment(date);
-
-      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);
-    }
+const useCalendarEvents = (date: string) => {
+  const { data } = useCalendar();
+  const collapseMultipleEpisodes = useCalendarOption(
+    'collapseMultipleEpisodes'
   );
-}
+
+  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()
+        ),
+      });
+    }
+
+    return acc;
+  }, []);
+
+  return sort(grouped);
+};
 
 interface CalendarDayProps {
   date: string;
@@ -97,8 +94,9 @@ function CalendarDay({
   isTodaysDate,
   onEventModalOpenToggle,
 }: CalendarDayProps) {
-  const { time, view } = useSelector((state: AppState) => state.calendar);
-  const events = useSelector(createCalendarEventsConnector(date));
+  const view = useCalendarOption('view');
+  const time = useCalendarTime();
+  const events = useCalendarEvents(date);
 
   const ref = React.useRef<HTMLDivElement>(null);
 

frontend/src/Calendar/Day/CalendarDays.tsx

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

frontend/src/Calendar/Day/DaysOfWeek.tsx

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

frontend/src/Calendar/Events/CalendarEvent.tsx

@@ -1,18 +1,17 @@
 import classNames from 'classnames';
 import React, { useCallback, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useQueueItemForEpisode } from 'Activity/Queue/Details/QueueDetailsProvider';
-import AppState from 'App/State/AppState';
+import { useCalendarOptions } from 'Calendar/calendarOptionsStore';
 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/useEpisodeFile';
+import { useEpisodeFile } from 'EpisodeFile/EpisodeFileProvider';
 import { icons, kinds } from 'Helpers/Props';
-import useSeries from 'Series/useSeries';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { useSingleSeries } from 'Series/useSeries';
+import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
 import { convertToTimezone } from 'Utilities/Date/convertToTimezone';
 import formatTime from 'Utilities/Date/formatTime';
 import padNumber from 'Utilities/Number/padNumber';
@@ -56,13 +55,12 @@ function CalendarEvent(props: CalendarEventProps) {
     onEventModalOpenToggle,
   } = props;
 
-  const series = useSeries(seriesId);
+  const series = useSingleSeries(seriesId);
   const episodeFile = useEpisodeFile(episodeFileId);
   const queueItem = useQueueItemForEpisode(id);
 
-  const { timeFormat, enableColorImpairedMode, timeZone } = useSelector(
-    createUISettingsSelector()
-  );
+  const { timeFormat, enableColorImpairedMode, timeZone } =
+    useUiSettingsValues();
 
   const {
     showEpisodeInformation,
@@ -70,7 +68,7 @@ function CalendarEvent(props: CalendarEventProps) {
     showSpecialIcon,
     showCutoffUnmetIcon,
     fullColorEvents,
-  } = useSelector((state: AppState) => state.calendar.options);
+  } = useCalendarOptions();
 
   const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false);
 

frontend/src/Calendar/Events/CalendarEventGroup.tsx

@@ -1,15 +1,14 @@
 import classNames from 'classnames';
 import React, { useCallback, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { useIsDownloadingEpisodes } from 'Activity/Queue/Details/QueueDetailsProvider';
-import AppState from 'App/State/AppState';
+import { useCalendarOptions } from 'Calendar/calendarOptionsStore';
 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 useSeries from 'Series/useSeries';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { useSingleSeries } from 'Series/useSeries';
+import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
 import { CalendarItem } from 'typings/Calendar';
 import { convertToTimezone } from 'Utilities/Date/convertToTimezone';
 import formatTime from 'Utilities/Date/formatTime';
@@ -32,14 +31,13 @@ function CalendarEventGroup({
   onEventModalOpenToggle,
 }: CalendarEventGroupProps) {
   const isDownloading = useIsDownloadingEpisodes(episodeIds);
-  const series = useSeries(seriesId)!;
+  const series = useSingleSeries(seriesId)!;
 
-  const { timeFormat, enableColorImpairedMode, timeZone } = useSelector(
-    createUISettingsSelector()
-  );
+  const { timeFormat, enableColorImpairedMode, timeZone } =
+    useUiSettingsValues();
 
   const { showEpisodeInformation, showFinaleIcon, fullColorEvents } =
-    useSelector((state: AppState) => state.calendar.options);
+    useCalendarOptions();
 
   const [isExpanded, setIsExpanded] = useState(false);
 

frontend/src/Calendar/Header/CalendarHeader.tsx

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

frontend/src/Calendar/Legend/Legend.tsx

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

frontend/src/Calendar/Options/CalendarOptionsModalContent.tsx

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,299 @@
+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,
+      };
+  }
+}

frontend/src/Commands/Command.ts

@@ -1,4 +1,5 @@
 import ModelBase from 'App/ModelBase';
+import { InteractiveImportCommandOptions } from 'InteractiveImport/InteractiveImport';
 
 export type CommandStatus =
   | 'queued'
@@ -10,8 +11,10 @@ export type CommandStatus =
   | 'orphaned';
 
 export type CommandResult = 'unknown' | 'successful' | 'unsuccessful';
+export type CommandPriority = 'low' | 'normal' | 'high';
 
-export interface CommandBody {
+// Base command body with common properties
+export interface BaseCommandBody {
   sendUpdatesToClient: boolean;
   updateScheduledTask: boolean;
   completionMessage: string;
@@ -23,19 +26,109 @@ export interface CommandBody {
   lastStartTime: string;
   trigger: string;
   suppressMessages: boolean;
+}
+
+// Specific command body interfaces
+export interface SeriesCommandBody extends BaseCommandBody {
+  seriesId: number;
+}
+
+export interface MultipleSeriesCommandBody extends BaseCommandBody {
+  seriesIds: number[];
+}
+
+export interface SeasonCommandBody extends BaseCommandBody {
+  seriesId: number;
+  seasonNumber: number;
+}
+
+export interface EpisodeCommandBody extends BaseCommandBody {
+  episodeIds: number[];
+}
+
+export interface SeriesEpisodeCommandBody extends BaseCommandBody {
+  seriesId: number;
+  episodeIds: number[];
+}
+
+export interface RenameFilesCommandBody extends BaseCommandBody {
+  seriesId: number;
+  files: number[];
+}
+
+export interface MoveSeriesCommandBody extends BaseCommandBody {
+  seriesId: number;
+  destinationPath: string;
+}
+
+export interface ManualImportCommandBody extends BaseCommandBody {
+  files: Array<{
+    path: string;
+    seriesId: number;
+    episodeIds: number[];
+    quality: Record<string, unknown>;
+    language: Record<string, unknown>;
+    releaseGroup?: string;
+  }>;
+}
+
+export type CommandBody =
+  | SeriesCommandBody
+  | MultipleSeriesCommandBody
+  | SeasonCommandBody
+  | EpisodeCommandBody
+  | SeriesEpisodeCommandBody
+  | RenameFilesCommandBody
+  | MoveSeriesCommandBody
+  | ManualImportCommandBody
+  | BaseCommandBody;
+
+// Simplified interface for creating new commands
+export interface NewCommandBody {
+  name: string;
+  priority?: CommandPriority;
   seriesId?: number;
   seriesIds?: number[];
   seasonNumber?: number;
   episodeIds?: number[];
-  [key: string]: string | number | boolean | number[] | undefined;
+  files?: number[] | InteractiveImportCommandOptions[];
+  destinationPath?: string;
+  [key: string]: string | number | boolean | number[] | object | undefined;
 }
 
+export interface CommandBodyMap {
+  RefreshSeries: SeriesCommandBody | MultipleSeriesCommandBody;
+  SeriesSearch: SeriesCommandBody;
+  SeasonSearch: SeasonCommandBody;
+  EpisodeSearch: EpisodeCommandBody | SeriesEpisodeCommandBody;
+  MissingEpisodeSearch: BaseCommandBody;
+  CutoffUnmetEpisodeSearch: BaseCommandBody;
+  RenameFiles: RenameFilesCommandBody;
+  RenameSeries: MultipleSeriesCommandBody;
+  MoveSeries: MoveSeriesCommandBody;
+  ManualImport: ManualImportCommandBody;
+  DownloadedEpisodesScan: SeriesCommandBody | BaseCommandBody;
+  RssSync: BaseCommandBody;
+  ApplicationUpdate: BaseCommandBody;
+  Backup: BaseCommandBody;
+  ClearBlocklist: BaseCommandBody;
+  ClearLog: BaseCommandBody;
+  DeleteLogFiles: BaseCommandBody;
+  DeleteUpdateLogFiles: BaseCommandBody;
+  RefreshMonitoredDownloads: BaseCommandBody;
+  ResetApiKey: BaseCommandBody;
+  ResetQualityDefinitions: BaseCommandBody;
+}
+
+export type CommandBodyForName<T extends keyof CommandBodyMap> =
+  CommandBodyMap[T];
+
 interface Command extends ModelBase {
   name: string;
   commandName: string;
   message: string;
   body: CommandBody;
-  priority: string;
+  priority: CommandPriority;
   status: CommandStatus;
   result: CommandResult;
   queued: string;

frontend/src/Commands/CommandNames.ts

@@ -0,0 +1,25 @@
+enum CommandNames {
+  ApplicationUpdate = 'ApplicationUpdate',
+  Backup = 'Backup',
+  ClearBlocklist = 'ClearBlocklist',
+  ClearLog = 'ClearLog',
+  CutoffUnmetEpisodeSearch = 'CutoffUnmetEpisodeSearch',
+  DeleteLogFiles = 'DeleteLogFiles',
+  DeleteUpdateLogFiles = 'DeleteUpdateLogFiles',
+  DownloadedEpisodesScan = 'DownloadedEpisodesScan',
+  EpisodeSearch = 'EpisodeSearch',
+  ManualImport = 'ManualImport',
+  MissingEpisodeSearch = 'MissingEpisodeSearch',
+  MoveSeries = 'MoveSeries',
+  RefreshMonitoredDownloads = 'RefreshMonitoredDownloads',
+  RefreshSeries = 'RefreshSeries',
+  RenameFiles = 'RenameFiles',
+  RenameSeries = 'RenameSeries',
+  ResetApiKey = 'ResetApiKey',
+  ResetQualityDefinitions = 'ResetQualityDefinitions',
+  RssSync = 'RssSync',
+  SeasonSearch = 'SeasonSearch',
+  SeriesSearch = 'SeriesSearch',
+}
+
+export default CommandNames;

frontend/src/Commands/commandNames.js

@@ -1,21 +0,0 @@
-export const APPLICATION_UPDATE = 'ApplicationUpdate';
-export const BACKUP = 'Backup';
-export const REFRESH_MONITORED_DOWNLOADS = 'RefreshMonitoredDownloads';
-export const CLEAR_BLOCKLIST = 'ClearBlocklist';
-export const CLEAR_LOGS = 'ClearLog';
-export const CUTOFF_UNMET_EPISODE_SEARCH = 'CutoffUnmetEpisodeSearch';
-export const DELETE_LOG_FILES = 'DeleteLogFiles';
-export const DELETE_UPDATE_LOG_FILES = 'DeleteUpdateLogFiles';
-export const DOWNLOADED_EPISODES_SCAN = 'DownloadedEpisodesScan';
-export const EPISODE_SEARCH = 'EpisodeSearch';
-export const INTERACTIVE_IMPORT = 'ManualImport';
-export const MISSING_EPISODE_SEARCH = 'MissingEpisodeSearch';
-export const MOVE_SERIES = 'MoveSeries';
-export const REFRESH_SERIES = 'RefreshSeries';
-export const RENAME_FILES = 'RenameFiles';
-export const RENAME_SERIES = 'RenameSeries';
-export const RESET_API_KEY = 'ResetApiKey';
-export const RESET_QUALITY_DEFINITIONS = 'ResetQualityDefinitions';
-export const RSS_SYNC = 'RssSync';
-export const SEASON_SEARCH = 'SeasonSearch';
-export const SERIES_SEARCH = 'SeriesSearch';

frontend/src/Commands/useCommands.ts

@@ -0,0 +1,240 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo, useRef } from 'react';
+import { showMessage } from 'App/messagesStore';
+import Command, { CommandBody, NewCommandBody } from 'Commands/Command';
+import useApiMutation from 'Helpers/Hooks/useApiMutation';
+import useApiQuery from 'Helpers/Hooks/useApiQuery';
+import {
+  ERROR,
+  INFO,
+  type MessageType,
+  SUCCESS,
+} from 'Helpers/Props/messageTypes';
+import { isSameCommand } from 'Utilities/Command';
+
+const DEFAULT_COMMANDS: Command[] = [];
+const COMMAND_REFETCH_INTERVAL = 5 * 60 * 1000;
+
+const commandFinishedCallbacks: Record<number, (command: Command) => void> = {};
+
+export const useCommands = () => {
+  const result = useApiQuery<Command[]>({
+    path: '/command',
+    queryOptions: {
+      refetchInterval: COMMAND_REFETCH_INTERVAL,
+    },
+  });
+
+  return {
+    ...result,
+    data: result.data ?? DEFAULT_COMMANDS,
+  };
+};
+
+export default useCommands;
+
+export const useExecuteCommand = () => {
+  const queryClient = useQueryClient();
+  const lastCommandRef = useRef<{
+    command: NewCommandBody;
+    timestamp: number;
+  } | null>(null);
+
+  const { mutate } = useApiMutation<Command, NewCommandBody>({
+    method: 'POST',
+    path: '/command',
+    mutationOptions: {
+      onSuccess: (newCommand: Command) => {
+        queryClient.setQueryData<Command[]>(
+          ['/command'],
+          (oldCommands = []) => {
+            return [...oldCommands, newCommand];
+          }
+        );
+      },
+    },
+  });
+
+  const executeCommand = useCallback(
+    (body: NewCommandBody, commandFinished?: (command: Command) => void) => {
+      const now = Date.now();
+      const lastCommand = lastCommandRef.current;
+
+      // Check if the same command was run within the last 5 seconds
+      if (
+        lastCommand &&
+        now - lastCommand.timestamp < 5000 &&
+        isSameCommand(lastCommand.command, body)
+      ) {
+        console.warn(
+          'Please wait at least 5 seconds before running this command again'
+        );
+        return;
+      }
+
+      // Update last command reference
+      lastCommandRef.current = {
+        command: body,
+        timestamp: now,
+      };
+
+      const executeWithCallback = (commandBody: NewCommandBody) => {
+        mutate(commandBody, {
+          onSuccess: (command) => {
+            if (commandFinished) {
+              commandFinishedCallbacks[command.id] = commandFinished;
+            }
+          },
+        });
+      };
+
+      executeWithCallback(body);
+    },
+    [mutate]
+  );
+
+  return executeCommand;
+};
+
+export const useCancelCommand = (id: number) => {
+  const queryClient = useQueryClient();
+
+  const { mutate, isPending, error } = useApiMutation<void, void>({
+    method: 'DELETE',
+    path: `/command/${id}`,
+    mutationOptions: {
+      onSuccess: () => {
+        queryClient.setQueryData<Command[]>(
+          ['/command'],
+          (oldCommands = []) => {
+            return oldCommands.filter((command) => command.id !== id);
+          }
+        );
+      },
+    },
+  });
+
+  return {
+    cancelCommand: mutate,
+    isCancellingCommand: isPending,
+    commandCancelError: error,
+  };
+};
+
+export const useCommand = (
+  commandName: string,
+  constraints: Partial<CommandBody> = {}
+) => {
+  const { data: commands } = useCommands();
+
+  return useMemo(() => {
+    return commands.findLast((command) => {
+      if (command.name !== commandName) {
+        return false;
+      }
+
+      return (Object.keys(constraints) as Array<keyof CommandBody>).every(
+        (key) => {
+          const constraintValue = constraints[key];
+          const commandValue = command.body?.[key];
+
+          if (constraintValue === undefined) {
+            return true;
+          }
+
+          if (Array.isArray(constraintValue) && Array.isArray(commandValue)) {
+            return constraintValue.every((value) =>
+              commandValue.includes(value)
+            );
+          }
+
+          return constraintValue === commandValue;
+        }
+      );
+    });
+  }, [commands, commandName, constraints]);
+};
+
+export const useCommandExecuting = (
+  commandName: string,
+  constraints: Partial<CommandBody> = {}
+) => {
+  const command = useCommand(commandName, constraints);
+
+  return command
+    ? command.status === 'queued' || command.status === 'started'
+    : false;
+};
+
+export const useExecutingCommands = () => {
+  const { data: commands } = useCommands();
+
+  return commands.filter(
+    (command) => command.status === 'queued' || command.status === 'started'
+  );
+};
+
+export const useUpdateCommand = () => {
+  const queryClient = useQueryClient();
+
+  return (command: Command) => {
+    queryClient.setQueryData<Command[]>(['/command'], (oldCommands = []) => {
+      return oldCommands.map((existingCommand) =>
+        existingCommand.id === command.id ? command : existingCommand
+      );
+    });
+
+    // Show command message for user feedback
+    showCommandMessage(command);
+
+    // Both successful and failed commands need to be
+    // completed, otherwise they spin until they time out.
+    const isFinished =
+      command.status === 'completed' || command.status === 'failed';
+
+    if (isFinished) {
+      const commandFinished = commandFinishedCallbacks[command.id];
+
+      if (commandFinished) {
+        commandFinished(command);
+        delete commandFinishedCallbacks[command.id];
+      }
+    }
+  };
+};
+
+function showCommandMessage(command: Command) {
+  const {
+    id,
+    name,
+    trigger,
+    message,
+    body = {} as CommandBody,
+    status,
+  } = command;
+
+  const { sendUpdatesToClient, suppressMessages } = body;
+
+  if (!message || !body || !sendUpdatesToClient || suppressMessages) {
+    return;
+  }
+
+  let type: MessageType = INFO;
+  let hideAfter = 0;
+
+  if (status === 'completed') {
+    type = SUCCESS;
+    hideAfter = 4;
+  } else if (status === 'failed') {
+    type = ERROR;
+    hideAfter = trigger === 'manual' ? 10 : 4;
+  }
+
+  showMessage({
+    id,
+    name,
+    message,
+    type,
+    hideAfter,
+  });
+}

frontend/src/Components/FileBrowser/FileBrowserModalContent.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import Alert from 'Components/Alert';
 import { PathInputInternal } from 'Components/Form/PathInput';
 import Button from 'Components/Link/Button';
@@ -15,11 +14,10 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import usePrevious from 'Helpers/Hooks/usePrevious';
 import { kinds, scrollDirections } from 'Helpers/Props';
-import { clearPaths, fetchPaths } from 'Store/Actions/pathActions';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import usePaths from 'Path/usePaths';
+import { useSystemStatusData } from 'System/Status/useSystemStatus';
 import { InputChanged } from 'typings/inputs';
 import translate from 'Utilities/String/translate';
-import createPathsSelector from './createPathsSelector';
 import FileBrowserRow from './FileBrowserRow';
 import styles from './FileBrowserModalContent.css';
 
@@ -46,18 +44,25 @@ export interface FileBrowserModalContentProps {
   onModalClose: () => void;
 }
 
-function FileBrowserModalContent(props: FileBrowserModalContentProps) {
-  const { name, value, includeFiles = true, onChange, onModalClose } = props;
-
-  const dispatch = useDispatch();
-
-  const { isWindows, mode } = useSelector(createSystemStatusSelector());
-  const { isFetching, isPopulated, error, parent, directories, files, paths } =
-    useSelector(createPathsSelector());
-
+function FileBrowserModalContent({
+  name,
+  value,
+  includeFiles = true,
+  onChange,
+  onModalClose,
+}: FileBrowserModalContentProps) {
   const [currentPath, setCurrentPath] = useState(value);
   const scrollerRef = useRef(null);
   const previousValue = usePrevious(value);
+  const { isWindows, mode } = useSystemStatusData();
+
+  const { isFetching, isFetched, error, data } = usePaths({
+    path: currentPath,
+    allowFoldersWithoutTrailingSlashes: true,
+    includeFiles,
+  });
+
+  const { directories, files, parent, paths } = data;
 
   const emptyParent = parent === '';
   const isWindowsService = isWindows && mode === 'service';
@@ -69,20 +74,9 @@ function FileBrowserModalContent(props: FileBrowserModalContentProps) {
     []
   );
 
-  const handleRowPress = useCallback(
-    (path: string) => {
-      setCurrentPath(path);
-
-      dispatch(
-        fetchPaths({
-          path,
-          allowFoldersWithoutTrailingSlashes: true,
-          includeFiles,
-        })
-      );
-    },
-    [includeFiles, dispatch, setCurrentPath]
-  );
+  const handleRowPress = useCallback((path: string) => {
+    setCurrentPath(path);
+  }, []);
 
   const handleOkPress = useCallback(() => {
     onChange({
@@ -90,22 +84,12 @@ function FileBrowserModalContent(props: FileBrowserModalContentProps) {
       value: currentPath,
     });
 
-    dispatch(clearPaths());
     onModalClose();
-  }, [name, currentPath, dispatch, onChange, onModalClose]);
+  }, [name, currentPath, onChange, onModalClose]);
 
-  const handleFetchPaths = useCallback(
-    (path: string) => {
-      dispatch(
-        fetchPaths({
-          path,
-          allowFoldersWithoutTrailingSlashes: true,
-          includeFiles,
-        })
-      );
-    },
-    [includeFiles, dispatch]
-  );
+  const handleFetchPaths = useCallback((path: string) => {
+    setCurrentPath(path);
+  }, []);
 
   useEffect(() => {
     if (value !== previousValue && value !== currentPath) {
@@ -113,26 +97,6 @@ function FileBrowserModalContent(props: FileBrowserModalContentProps) {
     }
   }, [value, previousValue, currentPath, setCurrentPath]);
 
-  useEffect(
-    () => {
-      dispatch(
-        fetchPaths({
-          path: currentPath,
-          allowFoldersWithoutTrailingSlashes: true,
-          includeFiles,
-        })
-      );
-
-      return () => {
-        dispatch(clearPaths());
-      };
-    },
-    // This should only run once when the component mounts,
-    // so we don't need to include the other dependencies.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dispatch]
-  );
-
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>{translate('FileBrowser')}</ModalHeader>
@@ -171,7 +135,7 @@ function FileBrowserModalContent(props: FileBrowserModalContentProps) {
         >
           {error ? <div>{translate('ErrorLoadingContents')}</div> : null}
 
-          {isPopulated && !error ? (
+          {isFetched && !error ? (
             <Table horizontalScroll={false} columns={columns}>
               <TableBody>
                 {emptyParent ? (

frontend/src/Components/FileBrowser/FileBrowserRow.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
-import { PathType } from 'App/State/PathsAppState';
 import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowButton from 'Components/Table/TableRowButton';
 import { icons } from 'Helpers/Props';
+import { PathType } from 'Path/usePaths';
 import styles from './FileBrowserRow.css';
 
 function getIconName(type: PathType) {