diff --git a/web/src/App.tsx b/web/src/App.tsx index 0f75e7b6..c16d16f4 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,7 +1,6 @@ -import { useContext, useEffect } from "react"; +import { useContext } from "react"; import appContext from "./stores/appContext"; import { appRouterSwitch } from "./routers"; -import { globalStateService } from "./services"; import "./less/app.less"; function App() { @@ -9,20 +8,6 @@ function App() { locationState: { pathname }, } = useContext(appContext); - useEffect(() => { - const handleWindowResize = () => { - globalStateService.setIsMobileView(document.body.clientWidth <= 875); - }; - - handleWindowResize(); - - window.addEventListener("resize", handleWindowResize); - - return () => { - window.removeEventListener("resize", handleWindowResize); - }; - }, []); - return <>{appRouterSwitch(pathname)}; } diff --git a/web/src/components/MemosHeader.tsx b/web/src/components/MemosHeader.tsx index 70fdc43e..7fa8d192 100644 --- a/web/src/components/MemosHeader.tsx +++ b/web/src/components/MemosHeader.tsx @@ -1,8 +1,7 @@ import { useCallback, useContext, useEffect, useState } from "react"; import appContext from "../stores/appContext"; import SearchBar from "./SearchBar"; -import { globalStateService, memoService, shortcutService } from "../services"; -import Only from "./common/OnlyWhen"; +import { memoService, shortcutService } from "../services"; import "../less/memos-header.less"; let prevRequestTimestamp = Date.now(); @@ -14,7 +13,6 @@ const MemosHeader: React.FC = () => { locationState: { query: { shortcutId }, }, - globalState: { isMobileView }, shortcutState: { shortcuts }, } = useContext(appContext); @@ -39,18 +37,9 @@ const MemosHeader: React.FC = () => { } }, []); - const handleShowSidebarBtnClick = useCallback(() => { - globalStateService.setShowSiderbarInMobileView(true); - }, []); - return (
- - - {titleText}
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index 88df2740..1a8384d7 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -1,7 +1,4 @@ -import { useContext, useEffect, useMemo, useRef } from "react"; -import appContext from "../stores/appContext"; -import { SHOW_SIDERBAR_MOBILE_CLASSNAME } from "../helpers/consts"; -import { globalStateService } from "../services"; +import { useRef } from "react"; import UserBanner from "./UserBanner"; import ShortcutList from "./ShortcutList"; import TagList from "./TagList"; @@ -11,57 +8,8 @@ import "../less/siderbar.less"; interface Props {} const Sidebar: React.FC = () => { - const { - locationState, - globalState: { isMobileView, showSiderbarInMobileView }, - } = useContext(appContext); const wrapperElRef = useRef(null); - const handleClickOutsideOfWrapper = useMemo(() => { - return (event: MouseEvent) => { - const siderbarShown = globalStateService.getState().showSiderbarInMobileView; - - if (!siderbarShown) { - window.removeEventListener("click", handleClickOutsideOfWrapper, { - capture: true, - }); - return; - } - - if (!wrapperElRef.current?.contains(event.target as Node)) { - if (wrapperElRef.current?.parentNode?.contains(event.target as Node)) { - if (siderbarShown) { - event.stopPropagation(); - } - globalStateService.setShowSiderbarInMobileView(false); - window.removeEventListener("click", handleClickOutsideOfWrapper, { - capture: true, - }); - } - } - }; - }, []); - - useEffect(() => { - globalStateService.setShowSiderbarInMobileView(false); - }, [locationState]); - - useEffect(() => { - if (showSiderbarInMobileView) { - document.body.classList.add(SHOW_SIDERBAR_MOBILE_CLASSNAME); - } else { - document.body.classList.remove(SHOW_SIDERBAR_MOBILE_CLASSNAME); - } - }, [showSiderbarInMobileView]); - - useEffect(() => { - if (isMobileView && showSiderbarInMobileView) { - window.addEventListener("click", handleClickOutsideOfWrapper, { - capture: true, - }); - } - }, [isMobileView, showSiderbarInMobileView]); - return (