diff --git a/web/src/components/ExploreSidebar/ExploreSidebar.tsx b/web/src/components/ExploreSidebar/ExploreSidebar.tsx deleted file mode 100644 index 55f24bc6..00000000 --- a/web/src/components/ExploreSidebar/ExploreSidebar.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import useDebounce from "react-use/lib/useDebounce"; -import SearchBar from "@/components/SearchBar"; -import { useUserStatsStore } from "@/store/v1"; -import { cn } from "@/utils"; -import TagsSection from "../HomeSidebar/TagsSection"; -import MemoFilters from "../MemoFilters"; -import StatisticsView from "../StatisticsView"; - -interface Props { - className?: string; -} - -const ExploreSidebar = (props: Props) => { - const userStatsStore = useUserStatsStore(); - - useDebounce( - async () => { - await userStatsStore.listUserStats(); - }, - 300, - [userStatsStore.stateId], - ); - - return ( - - ); -}; - -export default ExploreSidebar; diff --git a/web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx b/web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx deleted file mode 100644 index 10506fba..00000000 --- a/web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Drawer } from "@mui/joy"; -import { Button } from "@usememos/mui"; -import { SearchIcon } from "lucide-react"; -import { useEffect, useState } from "react"; -import { useLocation } from "react-router-dom"; -import ExploreSidebar from "./ExploreSidebar"; - -const ExploreSidebarDrawer = () => { - const location = useLocation(); - const [open, setOpen] = useState(false); - - useEffect(() => { - setOpen(false); - }, [location.pathname]); - - const toggleDrawer = (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { - if (event.type === "keydown" && ((event as React.KeyboardEvent).key === "Tab" || (event as React.KeyboardEvent).key === "Shift")) { - return; - } - - setOpen(inOpen); - }; - - return ( - <> - - -
- -
- - - ); -}; - -export default ExploreSidebarDrawer; diff --git a/web/src/components/ExploreSidebar/index.ts b/web/src/components/ExploreSidebar/index.ts deleted file mode 100644 index ab9d0c5e..00000000 --- a/web/src/components/ExploreSidebar/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import ExploreSidebar from "./ExploreSidebar"; -import ExploreSidebarDrawer from "./ExploreSidebarDrawer"; - -export { ExploreSidebar, ExploreSidebarDrawer }; diff --git a/web/src/components/HomeSidebar/HomeSidebar.tsx b/web/src/components/HomeSidebar/HomeSidebar.tsx index b3b04092..cdb52e63 100644 --- a/web/src/components/HomeSidebar/HomeSidebar.tsx +++ b/web/src/components/HomeSidebar/HomeSidebar.tsx @@ -1,10 +1,10 @@ import useDebounce from "react-use/lib/useDebounce"; import SearchBar from "@/components/SearchBar"; -import StatisticsView from "@/components/StatisticsView"; import useCurrentUser from "@/hooks/useCurrentUser"; import { useMemoList, useUserStatsStore } from "@/store/v1"; import { cn } from "@/utils"; import MemoFilters from "../MemoFilters"; +import StatisticsView from "../StatisticsView"; import ShortcutsSection from "./ShortcutsSection"; import TagsSection from "./TagsSection"; @@ -30,7 +30,7 @@ const HomeSidebar = (props: Props) => { - + {currentUser && } ); diff --git a/web/src/layouts/HomeLayout.tsx b/web/src/layouts/HomeLayout.tsx new file mode 100644 index 00000000..7e1f0737 --- /dev/null +++ b/web/src/layouts/HomeLayout.tsx @@ -0,0 +1,38 @@ +import { observer } from "mobx-react-lite"; +import { Outlet } from "react-router-dom"; +import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar"; +import MobileHeader from "@/components/MobileHeader"; +import useResponsiveWidth from "@/hooks/useResponsiveWidth"; +import { cn } from "@/utils"; + +const HomeLayout = observer(() => { + const { md, lg } = useResponsiveWidth(); + + return ( +
+ {!md && ( + + + + )} +
+ {md && ( +
+ +
+ )} +
+ +
+
+
+ ); +}); + +export default HomeLayout; diff --git a/web/src/layouts/SuspenseWrapper.tsx b/web/src/layouts/SuspenseWrapper.tsx deleted file mode 100644 index d08ac9c3..00000000 --- a/web/src/layouts/SuspenseWrapper.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Suspense } from "react"; -import { Outlet } from "react-router-dom"; -import Loading from "@/pages/Loading"; - -const SuspenseWrapper = () => { - return ( - }> - - - ); -}; - -export default SuspenseWrapper; diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx index ffb184f1..d2344dfc 100644 --- a/web/src/pages/Explore.tsx +++ b/web/src/pages/Explore.tsx @@ -1,18 +1,13 @@ import dayjs from "dayjs"; import { useMemo } from "react"; -import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar"; import MemoView from "@/components/MemoView"; -import MobileHeader from "@/components/MobileHeader"; import PagedMemoList from "@/components/PagedMemoList"; import useCurrentUser from "@/hooks/useCurrentUser"; -import useResponsiveWidth from "@/hooks/useResponsiveWidth"; import { useMemoFilterStore } from "@/store/v1"; import { Direction, State } from "@/types/proto/api/v1/common"; import { Memo } from "@/types/proto/api/v1/memo_service"; -import { cn } from "@/utils"; const Explore = () => { - const { md, lg } = useResponsiveWidth(); const user = useCurrentUser(); const memoFilterStore = useMemoFilterStore(); @@ -49,44 +44,24 @@ const Explore = () => { }, [user, memoFilterStore.filters, memoFilterStore.orderByTimeAsc]); return ( -
- {!md && ( - - - - )} -
- {md && ( -
- -
- )} -
-
- } - listSort={(memos: Memo[]) => - memos - .filter((memo) => memo.state === State.NORMAL) - .sort((a, b) => - memoFilterStore.orderByTimeAsc - ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix() - : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(), - ) - } - direction={memoFilterStore.orderByTimeAsc ? Direction.ASC : Direction.DESC} - oldFilter={memoListFilter} - /> -
-
+ <> +
+ } + listSort={(memos: Memo[]) => + memos + .filter((memo) => memo.state === State.NORMAL) + .sort((a, b) => + memoFilterStore.orderByTimeAsc + ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix() + : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(), + ) + } + direction={memoFilterStore.orderByTimeAsc ? Direction.ASC : Direction.DESC} + oldFilter={memoListFilter} + />
-
+ ); }; diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index e7ec0417..41f9bdd9 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -1,21 +1,16 @@ import dayjs from "dayjs"; import { observer } from "mobx-react-lite"; import { useMemo } from "react"; -import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar"; import MemoEditor from "@/components/MemoEditor"; import MemoView from "@/components/MemoView"; -import MobileHeader from "@/components/MobileHeader"; import PagedMemoList from "@/components/PagedMemoList"; import useCurrentUser from "@/hooks/useCurrentUser"; -import useResponsiveWidth from "@/hooks/useResponsiveWidth"; import { useMemoFilterStore } from "@/store/v1"; import { userStore } from "@/store/v2"; import { Direction, State } from "@/types/proto/api/v1/common"; import { Memo } from "@/types/proto/api/v1/memo_service"; -import { cn } from "@/utils"; const Home = observer(() => { - const { md, lg } = useResponsiveWidth(); const user = useCurrentUser(); const memoFilterStore = useMemoFilterStore(); const selectedShortcut = userStore.state.shortcuts.find((shortcut) => shortcut.id === memoFilterStore.shortcut); @@ -53,48 +48,28 @@ const Home = observer(() => { }, [user, memoFilterStore.filters, memoFilterStore.orderByTimeAsc]); return ( -
- {!md && ( - - - - )} -
- {md && ( -
- -
- )} -
- -
- } - listSort={(memos: Memo[]) => - memos - .filter((memo) => memo.state === State.NORMAL) - .sort((a, b) => - memoFilterStore.orderByTimeAsc - ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix() - : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(), - ) - .sort((a, b) => Number(b.pinned) - Number(a.pinned)) - } - owner={user.name} - direction={memoFilterStore.orderByTimeAsc ? Direction.ASC : Direction.DESC} - filter={selectedShortcut?.filter || ""} - oldFilter={memoListFilter} - /> -
-
+ <> + +
+ } + listSort={(memos: Memo[]) => + memos + .filter((memo) => memo.state === State.NORMAL) + .sort((a, b) => + memoFilterStore.orderByTimeAsc + ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix() + : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(), + ) + .sort((a, b) => Number(b.pinned) - Number(a.pinned)) + } + owner={user.name} + direction={memoFilterStore.orderByTimeAsc ? Direction.ASC : Direction.DESC} + filter={selectedShortcut?.filter || ""} + oldFilter={memoListFilter} + />
-
+ ); }); diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx index e4fdcae5..52c7fc73 100644 --- a/web/src/router/index.tsx +++ b/web/src/router/index.tsx @@ -1,7 +1,7 @@ import { createBrowserRouter } from "react-router-dom"; import App from "@/App"; +import HomeLayout from "@/layouts/HomeLayout"; import RootLayout from "@/layouts/RootLayout"; -import SuspenseWrapper from "@/layouts/SuspenseWrapper"; import About from "@/pages/About"; import AdminSignIn from "@/pages/AdminSignIn"; import Archived from "@/pages/Archived"; @@ -37,7 +37,6 @@ const router = createBrowserRouter([ children: [ { path: Routes.AUTH, - element: , children: [ { path: "", @@ -62,8 +61,25 @@ const router = createBrowserRouter([ element: , children: [ { - path: "", - element: , + element: , + children: [ + { + path: "", + element: , + }, + { + path: Routes.EXPLORE, + element: , + }, + { + path: Routes.ARCHIVED, + element: , + }, + { + path: "u/:username", + element: , + }, + ], }, { path: Routes.RESOURCES, @@ -73,26 +89,14 @@ const router = createBrowserRouter([ path: Routes.INBOX, element: , }, - { - path: Routes.ARCHIVED, - element: , - }, { path: Routes.SETTING, element: , }, - { - path: Routes.EXPLORE, - element: , - }, { path: "memos/:uid", element: , }, - { - path: "u/:username", - element: , - }, { path: Routes.ABOUT, element: ,