From 0f1c88cba383789ba292c981f41ebd5ac900c2d9 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sun, 21 Mar 2021 13:38:10 +0200
Subject: [PATCH] fix(Sidebar): scroll to top once the sidebar be closed.

---
 .../components/Sidebar/SidebarContainer.js    | 25 ++++++++++++++++++-
 .../CustomerForm/CustomerFormProvider.js      | 16 ++++--------
 .../InvoiceForm/InvoiceFormProvider.js        |  4 +--
 .../Vendors/VendorForm/VendorFormProvider.js  | 10 +++-----
 .../style/containers/Dashboard/Sidebar.scss   |  8 ++++++
 5 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Sidebar/SidebarContainer.js b/client/src/components/Sidebar/SidebarContainer.js
index d8f4ab5c9..13b1b4a09 100644
--- a/client/src/components/Sidebar/SidebarContainer.js
+++ b/client/src/components/Sidebar/SidebarContainer.js
@@ -16,19 +16,42 @@ function SidebarContainer({
   // #withDashboard
   sidebarExpended,
 }) {
+  const sidebarScrollerRef = React.useRef();
+
   useEffect(() => {
     document.body.classList.toggle('has-mini-sidebar', !sidebarExpended);
+
+    if (!sidebarExpended && sidebarScrollerRef.current) {
+      sidebarScrollerRef.current.scrollTo({
+        top: 0,
+        left: 0,
+      });
+    }
   }, [sidebarExpended]);
 
+  const handleSidebarMouseLeave = () => {
+    if (!sidebarExpended && sidebarScrollerRef.current) {  
+      sidebarScrollerRef.current.scrollTo({ top: 0, left: 0, });
+    }
+  };
+
+  const scrollerElementRef = (ref) => {
+    sidebarScrollerRef.current = ref;
+  };
+
   return (
     <div
       className={classNames('sidebar', {
         'sidebar--mini-sidebar': !sidebarExpended,
       })}
       id="sidebar"
+      onMouseLeave={handleSidebarMouseLeave}
     >
       <div className={'sidebar__scroll-wrapper'}>
-        <Scrollbar noDefaultStyles={true}>
+        <Scrollbar
+          noDefaultStyles={true}
+          scrollerProps={{ elementRef: scrollerElementRef }}
+        >
           <div className="sidebar__inner">{children}</div>
         </Scrollbar>
       </div>
diff --git a/client/src/containers/Customers/CustomerForm/CustomerFormProvider.js b/client/src/containers/Customers/CustomerForm/CustomerFormProvider.js
index e9e1ce55b..5dab5cfb0 100644
--- a/client/src/containers/Customers/CustomerForm/CustomerFormProvider.js
+++ b/client/src/containers/Customers/CustomerForm/CustomerFormProvider.js
@@ -2,7 +2,6 @@ import React, { useState, createContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
-  useCustomers,
   useCustomer,
   useCurrencies,
   useCreateCustomer,
@@ -18,22 +17,17 @@ function CustomerFormProvider({ customerId, ...props }) {
   const contactId = state?.action;
 
   // Handle fetch customer details.
-  const { data: customer, isFetching: isCustomerLoading } = useCustomer(
+  const { data: customer, isLoading: isCustomerLoading } = useCustomer(
     customerId,
-    {
-      enabled: !!customerId,
-    },
+    { enabled: !!customerId },
   );
-
   // Handle fetch contact duplicate details.
-  const { data: contactDuplicate, isFetching: isContactLoading } = useContact(
+  const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
     contactId,
-    {
-      enabled: !!contactId,
-    },
+    { enabled: !!contactId, },
   );
   // Handle fetch Currencies data table
-  const { data: currencies, isFetching: isCurrenciesLoading } = useCurrencies();
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
 
   // Form submit payload.
   const [submitPayload, setSubmitPayload] = useState({});
diff --git a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js
index a7e2c8e25..37f3201d9 100644
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js
+++ b/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormProvider.js
@@ -29,7 +29,7 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
   // Fetches the estimate by the given id.
   const {
     data: estimate,
-    isFetching: isEstimateFetching,
+    isLoading: isEstimateLoading,
   } = useEstimate(estimateId, { enabled: !!estimateId });
 
   const newInvoice = !isEmpty(estimate)
@@ -97,7 +97,7 @@ function InvoiceFormProvider({ invoiceId, ...props }) {
         isInvoiceLoading ||
         isItemsLoading ||
         isCustomersLoading ||
-        isEstimateFetching ||
+        isEstimateLoading ||
         isSettingsLoading
       }
       name={'invoice-form'}
diff --git a/client/src/containers/Vendors/VendorForm/VendorFormProvider.js b/client/src/containers/Vendors/VendorForm/VendorFormProvider.js
index cd3052e85..555cf957a 100644
--- a/client/src/containers/Vendors/VendorForm/VendorFormProvider.js
+++ b/client/src/containers/Vendors/VendorForm/VendorFormProvider.js
@@ -20,21 +20,19 @@ function VendorFormProvider({ vendorId, ...props }) {
   const { state } = useLocation();
 
   // Handle fetch Currencies data table
-  const { data: currencies, isFetching: isCurrenciesLoading } = useCurrencies();
+  const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
 
   // Handle fetch vendor details.
-  const { data: vendor, isFetching: isVendorLoading } = useVendor(vendorId, {
+  const { data: vendor, isLoading: isVendorLoading } = useVendor(vendorId, {
     enabled: !!vendorId,
   });
 
   const contactId = state?.action;
 
   // Handle fetch contact duplicate details.
-  const { data: contactDuplicate, isFetching: isContactLoading } = useContact(
+  const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
     contactId,
-    {
-      enabled: !!contactId,
-    },
+    { enabled: !!contactId },
   );
 
   // Create and edit vendor mutations.
diff --git a/client/src/style/containers/Dashboard/Sidebar.scss b/client/src/style/containers/Dashboard/Sidebar.scss
index 24bcea38c..eb9830bac 100644
--- a/client/src/style/containers/Dashboard/Sidebar.scss
+++ b/client/src/style/containers/Dashboard/Sidebar.scss
@@ -237,6 +237,10 @@
       transition: min-width 0.15s ease-in-out;
       min-width: 50px;
 
+      .ScrollbarsCustom-Scroller{
+        overflow: hidden !important;
+      }
+
       &:hover {
         min-width: 220px;
 
@@ -251,6 +255,10 @@
         .sidebar__menu {
           opacity: 1;
         }
+
+        .ScrollbarsCustom-Scroller{
+          overflow: scroll !important;
+        }
       }
     }
   }