feat: Preferences issue.

client/src/components/Dashboard/Dashboard.js

@@ -8,7 +8,7 @@ import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
 
 export default function() {
   return (
-    <div className="dashboard dashboard--preferences">
+    <div className="dashboard">
       <Switch>
         <Route path="/dashboard/preferences">
           <Sidebar />

client/src/components/Preferences/PreferencesContent.js

@@ -4,7 +4,7 @@ import PreferencesContentRoute from 'components/Preferences/PreferencesContentRo
 
 export default function() {
   return (
-    <div className="dashboard-content" id="dashboard">
+    <div className="dashboard-content dashboard-content--preferences">
       <PreferencesTopbar pageTitle={"asdad"}/>
       
       <div class="dashboard__preferences-content">

client/src/components/Preferences/PreferencesContentRoute.js

@@ -3,15 +3,13 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
 import preferencesRoutes from 'routes/preferences'
 
 export default function DashboardContentRoute() {
-  const { path } = useRouteMatch();
-
   return (
     <Route pathname="/dashboard/preferences">
       <Switch>
         { preferencesRoutes.map((route, index) => (
           <Route
             key={index}
-            path={`${path}/${route.path}`}
+            path={`${route.path}`}
             exact={route.exact}
             component={route.component}
           />          

client/src/components/Preferences/PreferencesSidebar.js

@@ -18,13 +18,15 @@ export default function PreferencesSidebar() {
 
   return (
     <div class="preferences__sidebar">
-      <div class="preferences__sidebar-head">
+      <div class="preferences__sidebar-wrapper">
-        <h2>Preferences</h2>
+        <div class="preferences__sidebar-head">
-      </div>
+          <h2>Preferences</h2>
+        </div>
 
-      <Menu className="preferences__sidebar-menu">
+        <Menu className="preferences__sidebar-menu">
-        { items }
+          { items }
-      </Menu>
+        </Menu>
+      </div>
     </div>
   );
 }

client/src/components/Views/ViewForm.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useCallback, useMemo} from 'react';
 import {Formik, useFormik, ErrorMessage} from "formik";
 import {useIntl} from 'react-intl';
 import {
@@ -34,12 +34,13 @@ function ViewForm({
   const [draggedColumns, setDraggedColumn] = useState([]);
   const [availableColumns, setAvailableColumns] = useState(columns); 
 
-  const defaultViewRole = {
+  const defaultViewRole = useMemo(() => ({
     field_key: '',
     comparator: 'AND',
     value: '',
     index: 1,
-  };
+  }), []);
+
   const validationSchema = Yup.object().shape({
     resource_name: Yup.string().required(),
     name: Yup.string().required(),
@@ -86,7 +87,6 @@ function ViewForm({
       ],
     },
     onSubmit: (values) => {
-
       if (viewForm && viewForm.id) {
         editView(viewForm.id, values).then((response) => {
 
@@ -100,10 +100,11 @@ function ViewForm({
   });
 
   useEffect(() => {
-    formik.setFieldValue('columns', draggedColumns.map((column, index) => ({
+    formik.setFieldValue('columns',
+      draggedColumns.map((column, index) => ({
       index, key: column.key,
     })));
-  }, [draggedColumns]);
+  }, [draggedColumns, formik]);
 
   const conditionalsItems = [
     { value: 'and', label: 'AND' },
@@ -123,16 +124,16 @@ function ViewForm({
   ];
 
   // Resource fields.
-  const resourceFields = [
+  const resourceFields = useMemo(() => ([
     {value: '', label: 'Select a field'},
     ...fields.map((field) => ({ value: field.key, label: field.labelName, })),
-  ];
+  ]), []);
   // Account item of select accounts field.
   const selectItem = (item, { handleClick, modifiers, query }) => {
     return (<MenuItem text={item.label} key={item.key} onClick={handleClick} />)
   };
   // Handle click new condition button.
-  const onClickNewRole = () => {
+  const onClickNewRole = useCallback(() => {
     formik.setFieldValue('roles', [
       ...formik.values.roles,
       {
@@ -140,9 +141,10 @@ function ViewForm({
         index: formik.values.roles.length + 1,
       }
     ]);
-  };
+  }, [formik, defaultViewRole]);
+
   // Handle click remove view role button.
-  const onClickRemoveRole = (viewRole, index) => () => {
+  const onClickRemoveRole = useCallback((viewRole, index) => () => {
     const viewRoles = [...formik.values.roles];
     viewRoles.splice(index, 1);
     viewRoles.map((role, i) => {
@@ -150,9 +152,12 @@ function ViewForm({
       return role;
     });
     formik.setFieldValue('roles', viewRoles);
-  };
+  }, [formik]);
+
+  const onClickDeleteView = useCallback(() => {
+    onDelete && onDelete(viewForm);
+  }, [onDelete, viewForm]);
 
-  const onClickDeleteView = () => { onDelete(viewForm); };
   return (
     <div class="view-form">
       <form onSubmit={formik.handleSubmit}>

client/src/containers/Dashboard/Preferences/General.js

@@ -1,30 +1,22 @@
 import React from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import {connect} from 'react-redux';
 import {
   Button,
   FormGroup,
   InputGroup,
   Intent,
 } from "@blueprintjs/core";
-import { useAsync } from 'react-use';
 import {optionsMapToArray} from 'utils';
-import AppToaster from 'components/AppToaster';
-import {
-  savePreferences,
-  fetchPreferences,
-} from 'store/preferences/preferences.actions';
 
-function GeneralPreferences({ savePreferences, fetchPreferences }) {
+function GeneralPreferences({
+
+}) {
   const validationSchema = Yup.object().shape({
     organization_name: Yup.string().required(),
     organization_industry: Yup.string().required(),
   });
 
-  const asyncHook = useAsync(async () => {
-    await fetchPreferences();
-  });
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -35,13 +27,6 @@ function GeneralPreferences({ savePreferences, fetchPreferences }) {
         return {...option, group: 'general'};
       });
 
-      savePreferences(options).then((response) => {
-        AppToaster.show({
-          message: 'preferences_have_been_updated',
-        });
-      }).catch(error => {
-
-      });
     },
   });
 
@@ -80,9 +65,4 @@ function GeneralPreferences({ savePreferences, fetchPreferences }) {
   )
 }
 
-const mapDispatchToProps = (dispatch) => ({
+export default GeneralPreferences;
-  savePreferences: (options) => dispatch(savePreferences({ options })),
-  fetchPreferences: (keys) => dispatch(fetchPreferences())
-});
-
-export default connect(null, mapDispatchToProps)(GeneralPreferences);

client/src/style/pages/preferences.scss

@@ -1,5 +1,8 @@
 
 
+.dashboard-content--preferences{
+  margin-left: 430px;
+}
 
 .preferences{
   &__inside-content--tabable{
@@ -8,7 +11,6 @@
   }
 
   &__inside-content{
-
     .#{$ns}-tab-list{
       border-bottom: 1px solid #E5E5E5;
       padding-left: 15px;
@@ -22,9 +24,16 @@
 
 .preferences__sidebar{
   background: #fdfdfd;
+  position: fixed;
+  left: 220px;
   min-width: 210px;
   max-width: 210px;
-  
+  height: 100%;
+
+  .sidebar-wrapper{
+
+  }
+
   &-head{
     display: flex;
     flex-direction: row;