New: Sort root folders by path

Closes #4280
Closes #3956

frontend/src/App/State/SettingsAppState.ts

@@ -9,6 +9,7 @@ import Indexer from 'typings/Indexer';
 import MetadataProfile from 'typings/MetadataProfile';
 import Notification from 'typings/Notification';
 import QualityProfile from 'typings/QualityProfile';
+import RootFolder from 'typings/RootFolder';
 import { UiSettings } from 'typings/UiSettings';
 
 export interface DownloadClientAppState
@@ -38,6 +39,11 @@ export interface MetadataProfilesAppState
   extends AppSectionState<MetadataProfile>,
     AppSectionSchemaState<MetadataProfile> {}
 
+export interface RootFolderAppState
+  extends AppSectionState<RootFolder>,
+    AppSectionDeleteState,
+    AppSectionSaveState {}
+
 export type UiSettingsAppState = AppSectionState<UiSettings>;
 
 interface SettingsAppState {
@@ -47,6 +53,7 @@ interface SettingsAppState {
   metadataProfiles: MetadataProfilesAppState;
   notifications: NotificationAppState;
   qualityProfiles: QualityProfilesAppState;
+  rootFolders: RootFolderAppState;
   uiSettings: UiSettingsAppState;
 }
 

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -2,13 +2,14 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
 import RootFolderSelectInput from './RootFolderSelectInput';
 
 const ADD_NEW_KEY = 'addNew';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.settings.rootFolders,
+    createRootFoldersSelector(),
     (state, { value }) => value,
     (state, { includeMissingValue }) => includeMissingValue,
     (state, { includeNoChange }) => includeNoChange,

frontend/src/Settings/MediaManagement/RootFolder/RootFoldersConnector.js

@@ -3,13 +3,12 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { deleteRootFolder, fetchRootFolders } from 'Store/Actions/settingsActions';
-import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
-import sortByName from 'Utilities/Array/sortByName';
 import RootFolders from './RootFolders';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.rootFolders', sortByName),
+    createRootFoldersSelector(),
     (state) => state.settings.qualityProfiles,
     (state) => state.settings.metadataProfiles,
     (rootFolders, quality, metadata) => {

frontend/src/Store/Selectors/createRootFoldersSelector.ts

@@ -0,0 +1,11 @@
+import { createSelector } from 'reselect';
+import { RootFolderAppState } from 'App/State/SettingsAppState';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByName from 'Utilities/Array/sortByName';
+
+export default function createRootFoldersSelector() {
+  return createSelector(
+    createSortedSectionSelector('settings.rootFolders', sortByName),
+    (rootFolders: RootFolderAppState) => rootFolders
+  );
+}

frontend/src/typings/RootFolder.ts

@@ -0,0 +1,12 @@
+import ModelBase from 'App/ModelBase';
+
+interface RootFolder extends ModelBase {
+  id: number;
+  name: string;
+  path: string;
+  accessible: boolean;
+  freeSpace?: number;
+  unmappedFolders: object[];
+}
+
+export default RootFolder;