From e9ac6affef9d7e1420af26645d9b56c7d3d541e6 Mon Sep 17 00:00:00 2001 From: boojack Date: Fri, 9 Sep 2022 00:06:05 +0800 Subject: [PATCH] feat: add explore page (#205) --- server/memo.go | 8 +-- web/src/components/ArchivedMemo.tsx | 4 +- web/src/components/MemoContent.tsx | 29 ++++++++++ web/src/components/MemoList.tsx | 2 +- web/src/components/MemosHeader.tsx | 2 +- web/src/components/MenuBtnsPopup.tsx | 11 +++- web/src/helpers/api.ts | 4 ++ web/src/less/explore.less | 58 +++++++++++++++++++ web/src/pages/Explore.tsx | 86 ++++++++++++++++++++++++++++ web/src/pages/Home.tsx | 2 +- web/src/routers/appRouter.tsx | 2 + web/src/services/memoService.ts | 10 ++++ web/src/store/modules/location.ts | 2 +- web/src/types/modules/memo.d.ts | 1 + 14 files changed, 209 insertions(+), 12 deletions(-) create mode 100644 web/src/components/MemoContent.tsx create mode 100644 web/src/less/explore.less create mode 100644 web/src/pages/Explore.tsx diff --git a/server/memo.go b/server/memo.go index e62b5459..0f136eaa 100644 --- a/server/memo.go +++ b/server/memo.go @@ -162,10 +162,6 @@ func (s *Server) registerMemoRoutes(g *echo.Group) { memoFind.VisibilityList = []api.Visibility{api.Public, api.Protected} } - rowStatus := api.RowStatus(c.QueryParam("rowStatus")) - if rowStatus != "" { - memoFind.RowStatus = &rowStatus - } pinnedStr := c.QueryParam("pinned") if pinnedStr != "" { pinned := pinnedStr == "true" @@ -191,6 +187,10 @@ func (s *Server) registerMemoRoutes(g *echo.Group) { memoFind.Offset = offset } + // Only fetch normal status memos. + normalStatus := api.Normal + memoFind.RowStatus = &normalStatus + list, err := s.Store.FindMemoList(ctx, memoFind) if err != nil { return echo.NewHTTPError(http.StatusInternalServerError, "Failed to fetch all memo list").SetInternal(err) diff --git a/web/src/components/ArchivedMemo.tsx b/web/src/components/ArchivedMemo.tsx index d7c88bd2..33cf990b 100644 --- a/web/src/components/ArchivedMemo.tsx +++ b/web/src/components/ArchivedMemo.tsx @@ -28,7 +28,7 @@ const ArchivedMemo: React.FC = (props: Props) => { if (showConfirmDeleteBtn) { try { await memoService.deleteMemoById(memo.id); - await memoService.fetchAllMemos(); + await memoService.fetchMemos(); } catch (error: any) { console.error(error); toastHelper.error(error.response.data.message); @@ -44,7 +44,7 @@ const ArchivedMemo: React.FC = (props: Props) => { id: memo.id, rowStatus: "NORMAL", }); - await memoService.fetchAllMemos(); + await memoService.fetchMemos(); toastHelper.info("Restored successfully"); } catch (error: any) { console.error(error); diff --git a/web/src/components/MemoContent.tsx b/web/src/components/MemoContent.tsx new file mode 100644 index 00000000..73238988 --- /dev/null +++ b/web/src/components/MemoContent.tsx @@ -0,0 +1,29 @@ +import { useRef } from "react"; +import { formatMemoContent } from "../helpers/marked"; +import "../less/memo-content.less"; + +interface Props { + className: string; + content: string; + onMemoContentClick: (e: React.MouseEvent) => void; +} + +const MemoContent: React.FC = (props: Props) => { + const { className, content, onMemoContentClick } = props; + const memoContentContainerRef = useRef(null); + + const handleMemoContentClick = async (e: React.MouseEvent) => { + onMemoContentClick(e); + }; + + return ( +
+ ); +}; + +export default MemoContent; diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx index a0da2835..bd2957d9 100644 --- a/web/src/components/MemoList.tsx +++ b/web/src/components/MemoList.tsx @@ -80,7 +80,7 @@ const MemoList = () => { useEffect(() => { memoService - .fetchAllMemos() + .fetchMemos() .then(() => { // do nth }) diff --git a/web/src/components/MemosHeader.tsx b/web/src/components/MemosHeader.tsx index 892b5fb5..56c0c1ed 100644 --- a/web/src/components/MemosHeader.tsx +++ b/web/src/components/MemosHeader.tsx @@ -29,7 +29,7 @@ const MemosHeader = () => { const now = Date.now(); if (now - prevRequestTimestamp > 1 * 1000) { prevRequestTimestamp = now; - memoService.fetchAllMemos().catch(() => { + memoService.fetchMemos().catch(() => { // do nth }); } diff --git a/web/src/components/MenuBtnsPopup.tsx b/web/src/components/MenuBtnsPopup.tsx index 8289d174..75176a83 100644 --- a/web/src/components/MenuBtnsPopup.tsx +++ b/web/src/components/MenuBtnsPopup.tsx @@ -51,6 +51,10 @@ const MenuBtnsPopup: React.FC = (props: Props) => { showAboutSiteDialog(); }; + const handleExploreBtnClick = () => { + locationService.pushHistory("/explore"); + }; + const handleSignOutBtnClick = async () => { userService .doSignOut() @@ -65,12 +69,15 @@ const MenuBtnsPopup: React.FC = (props: Props) => { return (
- + + ) : ( + + )} +
+ + )} + + ); +}; + +export default Explore; diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 3fbdc84c..1b443bcc 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -35,7 +35,7 @@ function Home() { } } else { if (!user) { - locationService.replaceHistory(`/u/${host.id}`); + locationService.replaceHistory(`/explore`); } } loadingState.setFinish(); diff --git a/web/src/routers/appRouter.tsx b/web/src/routers/appRouter.tsx index 8c3bce13..1c96235a 100644 --- a/web/src/routers/appRouter.tsx +++ b/web/src/routers/appRouter.tsx @@ -1,8 +1,10 @@ import Home from "../pages/Home"; import Auth from "../pages/Auth"; +import Explore from "../pages/Explore"; const appRouter = { "/auth": , + "/explore": , "*": , }; diff --git a/web/src/services/memoService.ts b/web/src/services/memoService.ts index 1bf97b5d..4c3e1d9b 100644 --- a/web/src/services/memoService.ts +++ b/web/src/services/memoService.ts @@ -17,6 +17,16 @@ const memoService = { }, fetchAllMemos: async () => { + const memoFind: MemoFind = {}; + if (userService.isVisitorMode()) { + memoFind.creatorId = userService.getUserIdFromPath(); + } + const { data } = (await api.getAllMemos()).data; + const memos = data.map((m) => convertResponseModelMemo(m)); + return memos; + }, + + fetchMemos: async () => { const timeoutIndex = setTimeout(() => { store.dispatch(setIsFetching(true)); }, 1000); diff --git a/web/src/store/modules/location.ts b/web/src/store/modules/location.ts index caeb4ed0..7130f190 100644 --- a/web/src/store/modules/location.ts +++ b/web/src/store/modules/location.ts @@ -21,7 +21,7 @@ interface State { const getValidPathname = (pathname: string): string => { const userPageUrlRegex = /^\/u\/\d+.*/; - if (["/", "/auth"].includes(pathname) || userPageUrlRegex.test(pathname)) { + if (["/", "/auth", "/explore"].includes(pathname) || userPageUrlRegex.test(pathname)) { return pathname; } else { return "/"; diff --git a/web/src/types/modules/memo.d.ts b/web/src/types/modules/memo.d.ts index c92ed320..ad15490c 100644 --- a/web/src/types/modules/memo.d.ts +++ b/web/src/types/modules/memo.d.ts @@ -6,6 +6,7 @@ interface Memo { id: MemoId; creatorId: UserId; + creator: User; createdTs: TimeStamp; updatedTs: TimeStamp; rowStatus: RowStatus;