From 3ef167ddbf7ddb6e60f385176ff37a73bb346607 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 26 Dec 2022 14:46:57 +0800 Subject: [PATCH] fix: slide bar button position error --- .../components/workspace-slider-bar/index.tsx | 160 +++++++++--------- .../components/workspace-slider-bar/style.ts | 14 +- .../hooks/use-load-workspace.ts | 35 ++++ .../app-state-provider/hooks/use-sync-data.ts | 46 +++++ 4 files changed, 173 insertions(+), 82 deletions(-) create mode 100644 packages/app/src/providers/app-state-provider/hooks/use-load-workspace.ts create mode 100644 packages/app/src/providers/app-state-provider/hooks/use-sync-data.ts diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx index 56a0f8f07e..840a6a6148 100644 --- a/packages/app/src/components/workspace-slider-bar/index.tsx +++ b/packages/app/src/components/workspace-slider-bar/index.tsx @@ -7,6 +7,7 @@ import { StyledListItemForWorkspace, StyledNewPageButton, StyledSliderBar, + StyledSliderBarWrapper, StyledSubListItem, } from './style'; import { Arrow } from './icons'; @@ -84,92 +85,95 @@ export const WorkSpaceSliderBar = () => { return ( <> - - - - { - triggerQuickSearchModal(); - }} + - Quick search - - - - All pages - - - - - - Favourites - - { - setShowSubFavorite(!showSubFavorite); + setShow(!show); + setShowTip(false); + }} + onMouseEnter={() => { + setShowTip(true); + }} + onMouseLeave={() => { + setShowTip(false); }} > - - - - - - - { - // triggerImportModal(); - }} - > - Import - + + - - - Trash + + + + + { + triggerQuickSearchModal(); + }} + > + Quick search - - { - const pageId = await createPage?.(); - if (pageId) { - openPage(pageId); - } - }} - > - New Page - + + + All pages + + + + + + Favourites + + { + setShowSubFavorite(!showSubFavorite); + }} + > + + + + + + + { + // triggerImportModal(); + }} + > + Import + + + + + + Trash + + + { + const pageId = await createPage?.(); + if (pageId) { + openPage(pageId); + } + }} + > + New Page + + - - { - setShow(!show); - setShowTip(false); - }} - onMouseEnter={() => { - setShowTip(true); - }} - onMouseLeave={() => { - setShowTip(false); - }} - > - - - ); }; diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts index cf344b60fe..0d14e6aedf 100644 --- a/packages/app/src/components/workspace-slider-bar/style.ts +++ b/packages/app/src/components/workspace-slider-bar/style.ts @@ -8,15 +8,21 @@ export const StyledSliderBar = styled.div<{ show: boolean }>( height: '100vh', background: theme.mode === 'dark' ? '#272727' : '#FBFBFC', boxShadow: theme.shadow.modal, - transition: 'width .15s', + transition: 'width .15s, padding .15s', position: 'relative', zIndex: theme.zIndex.modal, padding: show ? '24px 12px' : '24px 0', - overflowX: 'hidden', flexShrink: 0, }; } ); +export const StyledSliderBarWrapper = styled.div(() => { + return { + height: '100%', + overflowX: 'hidden', + overflowY: 'auto', + }; +}); export const StyledArrowButton = styled.button<{ isShow: boolean }>( ({ theme, isShow }) => { @@ -28,9 +34,9 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>( backgroundColor: theme.colors.hoverBackground, borderRadius: '50%', transition: 'all .15s', - position: 'relative', + position: 'absolute', top: '34px', - left: isShow ? '-16px' : '-8px', + right: '-20px', zIndex: theme.zIndex.modal, svg: { transform: isShow ? 'rotate(180deg)' : 'unset', diff --git a/packages/app/src/providers/app-state-provider/hooks/use-load-workspace.ts b/packages/app/src/providers/app-state-provider/hooks/use-load-workspace.ts new file mode 100644 index 0000000000..9770991ea2 --- /dev/null +++ b/packages/app/src/providers/app-state-provider/hooks/use-load-workspace.ts @@ -0,0 +1,35 @@ +// import { useRef } from 'react'; +// import { AppStateContext } from '@/providers/app-state-provider'; +// +// export const useLoadWorkspace = ({}:{ +// state, +// loadWorkspaceHandler +// }) => { +// const loadWorkspace = useRef(() => +// Promise.resolve(null) +// ); +// loadWorkspace.current = async (workspaceId: string) => { +// if (state.currentWorkspaceId === workspaceId) { +// return state.currentWorkspace; +// } +// +// const workspace = +// (await loadWorkspaceHandler?.(workspaceId, true, state.user)) || null; +// +// // eslint-disable-next-line @typescript-eslint/ban-ts-comment +// // @ts-expect-error +// window.workspace = workspace; +// // FIXME: there needs some method to destroy websocket. +// // Or we need a manager to manage websocket. +// // eslint-disable-next-line @typescript-eslint/ban-ts-comment +// // @ts-expect-error +// state.currentWorkspace?.__ws__?.destroy(); +// +// setState(state => ({ +// ...state, +// currentWorkspace: workspace, +// currentWorkspaceId: workspaceId, +// })); +// return workspace; +// }; +// }; diff --git a/packages/app/src/providers/app-state-provider/hooks/use-sync-data.ts b/packages/app/src/providers/app-state-provider/hooks/use-sync-data.ts new file mode 100644 index 0000000000..f49b24992b --- /dev/null +++ b/packages/app/src/providers/app-state-provider/hooks/use-sync-data.ts @@ -0,0 +1,46 @@ +import { useEffect } from 'react'; +import { + AccessTokenMessage, + getWorkspaces, + token, +} from '@pathfinder/data-services'; +import { LoadWorkspaceHandler } from '../context'; + +export const useSyncData = ({ + loadWorkspaceHandler, +}: { + loadWorkspaceHandler: LoadWorkspaceHandler; +}) => { + useEffect(() => { + if (!loadWorkspaceHandler) { + return; + } + const start = async () => { + const isLogin = await token.refreshToken().catch(() => false); + }; + start(); + + const callback = async (user: AccessTokenMessage | null) => { + const workspacesMeta = user + ? await getWorkspaces().catch(() => { + return []; + }) + : []; + // setState(state => ({ + // ...state, + // user: user, + // workspacesMeta, + // synced: true, + // })); + }; + + token.onChange(callback); + token.refreshToken().catch(err => { + // FIXME: should resolve invalid refresh token + console.log(err); + }); + return () => { + token.offChange(callback); + }; + }, [loadWorkspaceHandler]); +};