Use sorted section selector in RootFolders

Fixes #3918

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

@@ -55,7 +55,7 @@ class RootFolders extends Component {
         >
           <div className={styles.rootFolders}>
             {
-              items.sort(sortByName).map((item) => {
+              items.map((item) => {
                 const qualityProfile = qualityProfiles.find((profile) => profile.id === item.defaultQualityProfileId);
                 const metadataProfile = metadataProfiles.find((profile) => profile.id === item.defaultMetadataProfileId);
                 return (

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

@@ -3,11 +3,13 @@ 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 sortByName from 'Utilities/Array/sortByName';
 import RootFolders from './RootFolders';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.settings.rootFolders,
+    createSortedSectionSelector('settings.rootFolders', sortByName),
     (state) => state.settings.qualityProfiles,
     (state) => state.settings.metadataProfiles,
     (rootFolders, quality, metadata) => {