|
@@ -2,7 +2,7 @@ import React, {
|
|
|
FC, useCallback, useEffect, useRef, useState,
|
|
FC, useCallback, useEffect, useRef, useState,
|
|
|
} from 'react';
|
|
} from 'react';
|
|
|
|
|
|
|
|
-import { scheduleToPutUserUISettings } from '~/client/services/user-ui-settings';
|
|
|
|
|
|
|
+import { useUserUISettings } from '~/client/services/user-ui-settings';
|
|
|
import {
|
|
import {
|
|
|
useDrawerMode, useDrawerOpened,
|
|
useDrawerMode, useDrawerOpened,
|
|
|
useSidebarCollapsed,
|
|
useSidebarCollapsed,
|
|
@@ -29,6 +29,8 @@ const GlobalNavigation = () => {
|
|
|
const { data: currentContents } = useCurrentSidebarContents();
|
|
const { data: currentContents } = useCurrentSidebarContents();
|
|
|
const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
|
|
const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
|
|
|
|
|
|
|
|
|
|
+ const { scheduleToPut } = useUserUISettings();
|
|
|
|
|
+
|
|
|
const itemSelectedHandler = useCallback((selectedContents) => {
|
|
const itemSelectedHandler = useCallback((selectedContents) => {
|
|
|
if (isDrawerMode) {
|
|
if (isDrawerMode) {
|
|
|
return;
|
|
return;
|
|
@@ -43,9 +45,9 @@ const GlobalNavigation = () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
mutateSidebarCollapsed(newValue, false);
|
|
mutateSidebarCollapsed(newValue, false);
|
|
|
- scheduleToPutUserUISettings({ isSidebarCollapsed: newValue });
|
|
|
|
|
|
|
+ scheduleToPut({ isSidebarCollapsed: newValue });
|
|
|
|
|
|
|
|
- }, [currentContents, isCollapsed, isDrawerMode, mutateSidebarCollapsed]);
|
|
|
|
|
|
|
+ }, [currentContents, isCollapsed, isDrawerMode, mutateSidebarCollapsed, scheduleToPut]);
|
|
|
|
|
|
|
|
return <SidebarNav onItemSelected={itemSelectedHandler} />;
|
|
return <SidebarNav onItemSelected={itemSelectedHandler} />;
|
|
|
};
|
|
};
|
|
@@ -88,6 +90,8 @@ const Sidebar: FC<Props> = (props: Props) => {
|
|
|
const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
|
|
const { data: isCollapsed, mutate: mutateSidebarCollapsed } = useSidebarCollapsed();
|
|
|
const { data: isResizeDisabled, mutate: mutateSidebarResizeDisabled } = useSidebarResizeDisabled();
|
|
const { data: isResizeDisabled, mutate: mutateSidebarResizeDisabled } = useSidebarResizeDisabled();
|
|
|
|
|
|
|
|
|
|
+ const { scheduleToPut } = useUserUISettings();
|
|
|
|
|
+
|
|
|
const [isTransitionEnabled, setTransitionEnabled] = useState(false);
|
|
const [isTransitionEnabled, setTransitionEnabled] = useState(false);
|
|
|
|
|
|
|
|
const [isHover, setHover] = useState(false);
|
|
const [isHover, setHover] = useState(false);
|
|
@@ -165,8 +169,8 @@ const Sidebar: FC<Props> = (props: Props) => {
|
|
|
const toggleNavigationBtnClickHandler = useCallback(() => {
|
|
const toggleNavigationBtnClickHandler = useCallback(() => {
|
|
|
const newValue = !isCollapsed;
|
|
const newValue = !isCollapsed;
|
|
|
mutateSidebarCollapsed(newValue, false);
|
|
mutateSidebarCollapsed(newValue, false);
|
|
|
- scheduleToPutUserUISettings({ isSidebarCollapsed: newValue });
|
|
|
|
|
- }, [isCollapsed, mutateSidebarCollapsed]);
|
|
|
|
|
|
|
+ scheduleToPut({ isSidebarCollapsed: newValue });
|
|
|
|
|
+ }, [isCollapsed, mutateSidebarCollapsed, scheduleToPut]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
if (isCollapsed) {
|
|
if (isCollapsed) {
|
|
@@ -199,18 +203,18 @@ const Sidebar: FC<Props> = (props: Props) => {
|
|
|
// force collapsed
|
|
// force collapsed
|
|
|
mutateSidebarCollapsed(true);
|
|
mutateSidebarCollapsed(true);
|
|
|
mutateProductNavWidth(sidebarMinWidth, false);
|
|
mutateProductNavWidth(sidebarMinWidth, false);
|
|
|
- scheduleToPutUserUISettings({ isSidebarCollapsed: true, currentProductNavWidth: sidebarMinWidth });
|
|
|
|
|
|
|
+ scheduleToPut({ isSidebarCollapsed: true, currentProductNavWidth: sidebarMinWidth });
|
|
|
}
|
|
}
|
|
|
else {
|
|
else {
|
|
|
const newWidth = resizableContainer.current.clientWidth;
|
|
const newWidth = resizableContainer.current.clientWidth;
|
|
|
mutateSidebarCollapsed(false);
|
|
mutateSidebarCollapsed(false);
|
|
|
mutateProductNavWidth(newWidth, false);
|
|
mutateProductNavWidth(newWidth, false);
|
|
|
- scheduleToPutUserUISettings({ isSidebarCollapsed: false, currentProductNavWidth: newWidth });
|
|
|
|
|
|
|
+ scheduleToPut({ isSidebarCollapsed: false, currentProductNavWidth: newWidth });
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
resizableContainer.current.classList.remove('dragging');
|
|
resizableContainer.current.classList.remove('dragging');
|
|
|
|
|
|
|
|
- }, [mutateProductNavWidth, mutateSidebarCollapsed]);
|
|
|
|
|
|
|
+ }, [mutateProductNavWidth, mutateSidebarCollapsed, scheduleToPut]);
|
|
|
|
|
|
|
|
const dragableAreaMouseDownHandler = useCallback((event: React.MouseEvent) => {
|
|
const dragableAreaMouseDownHandler = useCallback((event: React.MouseEvent) => {
|
|
|
if (!isResizableByDrag) {
|
|
if (!isResizableByDrag) {
|