WIP optimize connect with redux state in preferences pages.

client/src/components/DataTable.js

@@ -13,6 +13,7 @@ import classnames from 'classnames';
 import { FixedSizeList } from 'react-window'
 import { ConditionalWrapper } from 'utils';
 import { useUpdateEffect } from 'hooks';
+import { If } from 'components';
 
 const IndeterminateCheckbox = React.forwardRef(
   ({ indeterminate, ...rest }, ref) => {
@@ -257,16 +258,19 @@ export default function DataTable({
           ))}
         </div>
         <div {...getTableBodyProps()} className="tbody">
-          { !loading && RenderTBody() }
-
-          { !loading && (page.length === 0) && (
+          <If condition={!loading}>
+            { RenderTBody() }
+          </If>
+          
+          <If condition={!loading && (page.length === 0)}>
             <div className={'tr no-results'}>
               <div class="td">{ noResults }</div>
             </div>
-          )}
-          { loading && (
+          </If>
+
+          <If condition={loading}>
             <div class="loading"><Spinner size={spinnerProps.size} /></div>
-          ) }
+          </If>
         </div>
       </div>
     </div>

client/src/components/Preferences/PreferencesContent.js

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
 import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
 
-export default function () {
+
+export default function PreferencesContent() {
   return (
     <div className='dashboard-content dashboard-content--preferences'>
       <PreferencesTopbar pageTitle={'asdad'} />

client/src/components/Preferences/PreferencesContentRoute.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import preferencesRoutes from 'routes/preferences'
 
+
 export default function DashboardContentRoute() {
   const defaultTab = '/dashboard/preferences/general';
 

client/src/components/Preferences/PreferencesPage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
+
 export default function PreferencesPage() {
   return (
     <div class="preferences-page">

client/src/components/Preferences/PreferencesTopbar.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
-import UsersActions from 'containers/Preferences/UsersActions';
-import CurrenciesActions from 'containers/Preferences/CurrenciesActions';
+import UsersActions from 'containers/Preferences/Users/UsersActions';
+import CurrenciesActions from 'containers/Preferences/Currencies/CurrenciesActions';
 
 
 export default function PreferencesTopbar() {