diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx index 999d710c..5509933f 100644 --- a/web/src/components/MemoCardDialog.tsx +++ b/web/src/components/MemoCardDialog.tsx @@ -1,7 +1,7 @@ import { useState, useEffect, useCallback } from "react"; import { IMAGE_URL_REG, MEMO_LINK_REG, UNKNOWN_ID } from "../helpers/consts"; import * as utils from "../helpers/utils"; -import { editorStateService, memoService } from "../services"; +import { editorStateService, memoService, userService } from "../services"; import { parseHtmlToRawText } from "../helpers/marked"; import Only from "./common/OnlyWhen"; import toastHelper from "./Toast"; @@ -122,12 +122,16 @@ const MemoCardDialog: React.FC = (props: Props) => {

{utils.getDateTimeString(memo.createdTs)}

- - + + <> + + + + diff --git a/web/src/components/ShortcutList.tsx b/web/src/components/ShortcutList.tsx index f94d5e49..1b7d9fe8 100644 --- a/web/src/components/ShortcutList.tsx +++ b/web/src/components/ShortcutList.tsx @@ -1,10 +1,9 @@ import { useEffect } from "react"; -import { locationService, shortcutService, userService } from "../services"; +import { locationService, shortcutService } from "../services"; import { useAppSelector } from "../store"; import * as utils from "../helpers/utils"; import useToggle from "../hooks/useToggle"; import useLoading from "../hooks/useLoading"; -import Only from "./common/OnlyWhen"; import toastHelper from "./Toast"; import showCreateShortcutDialog from "./CreateShortcutDialog"; import "../less/shortcut-list.less"; @@ -39,11 +38,9 @@ const ShortcutList: React.FC = () => {

Shortcuts - - showCreateShortcutDialog()}> - add shortcut - - + showCreateShortcutDialog()}> + add shortcut +

{sortedShortcuts.map((s) => { @@ -114,7 +111,7 @@ const ShortcutContainer: React.FC = (props: ShortcutCont
{shortcut.title}
-
+
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index 0e760c7a..bd2a83b5 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -1,5 +1,3 @@ -import { useAppSelector } from "../store"; -import * as utils from "../helpers/utils"; import { userService } from "../services"; import Only from "./common/OnlyWhen"; import showDailyReviewDialog from "./DailyReviewDialog"; @@ -14,11 +12,6 @@ import "../less/siderbar.less"; interface Props {} const Sidebar: React.FC = () => { - const { memos, tags } = useAppSelector((state) => state.memo); - const user = useAppSelector((state) => state.user.user); - - const createdDays = user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24) : 0; - const handleMyAccountBtnClick = () => { showSettingDialog(); }; @@ -35,20 +28,6 @@ const Sidebar: React.FC = () => {
-
-
- {memos.length} - MEMO -
-
- {tags.length} - TAG -
-
- {createdDays} - DAY -
-
@@ -62,8 +41,8 @@ const Sidebar: React.FC = () => { 🗂 Archived
+ - ); diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx index 7b93dcd2..a7dca2b6 100644 --- a/web/src/components/UserBanner.tsx +++ b/web/src/components/UserBanner.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from "react"; -import * as api from "../helpers/api"; +import * as utils from "../helpers/utils"; import userService from "../services/userService"; import { locationService } from "../services"; import { useAppSelector } from "../store"; @@ -11,26 +11,31 @@ interface Props {} const UserBanner: React.FC = () => { const user = useAppSelector((state) => state.user.user); + const { memos, tags } = useAppSelector((state) => state.memo); const [shouldShowPopupBtns, setShouldShowPopupBtns] = useState(false); const [username, setUsername] = useState("Memos"); + const [createdDays, setCreatedDays] = useState(0); const isVisitorMode = userService.isVisitorMode(); useEffect(() => { const currentUserId = userService.getUserIdFromPath(); if (isVisitorMode && currentUserId) { - api - .getUserNameById(currentUserId) - .then(({ data }) => { - const { data: username } = data; - if (username) { - setUsername(username); + userService + .getUserById(currentUserId) + .then((user) => { + if (user) { + setUsername(user.name); + setCreatedDays(user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24) : 0); + } else { + toastHelper.error("User not found"); } }) .catch(() => { - toastHelper.error("User not found"); + // do nth }); } else if (user) { setUsername(user.name); + setCreatedDays(user ? Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24) : 0); } }, []); @@ -43,16 +48,32 @@ const UserBanner: React.FC = () => { }; return ( -
-
- {username} - {!isVisitorMode && user?.role === "HOST" ? MOD : null} + <> +
+
+ {username} + {!isVisitorMode && user?.role === "HOST" ? MOD : null} +
+ + + +
- - - - -
+
+
+ {memos.length} + MEMO +
+
+ {tags.length} + TAG +
+
+ {createdDays} + DAY +
+
+ ); }; diff --git a/web/src/helpers/api.ts b/web/src/helpers/api.ts index 307b5867..8317da08 100644 --- a/web/src/helpers/api.ts +++ b/web/src/helpers/api.ts @@ -44,8 +44,8 @@ export function getUserList() { return axios.get>("/api/user"); } -export function getUserNameById(id: number) { - return axios.get>(`/api/user/${id}/name`); +export function getUserById(id: number) { + return axios.get>(`/api/user/${id}`); } export function patchUser(userPatch: UserPatch) { @@ -87,7 +87,7 @@ export function deleteMemo(memoId: MemoId) { return axios.delete(`/api/memo/${memoId}`); } -export function getShortcutList(shortcutFind: ShortcutFind) { +export function getShortcutList(shortcutFind?: ShortcutFind) { const queryList = []; if (shortcutFind?.creatorId) { queryList.push(`creatorId=${shortcutFind.creatorId}`); diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less index 2d54fcd0..0ef819c0 100644 --- a/web/src/less/siderbar.less +++ b/web/src/less/siderbar.less @@ -27,22 +27,4 @@ } } } - - > .status-text-container { - .flex(row, space-between, flex-start); - @apply w-full px-6 select-none shrink-0 pb-4; - - > .status-text { - .flex(column, flex-start, flex-start); - - > .amount-text { - @apply font-bold text-2xl opacity-80 leading-10; - color: @text-black; - } - - > .type-text { - @apply text-gray-400 text-xs font-mono; - } - } - } } diff --git a/web/src/less/user-banner.less b/web/src/less/user-banner.less index a442e1e3..7be2b111 100644 --- a/web/src/less/user-banner.less +++ b/web/src/less/user-banner.less @@ -27,3 +27,20 @@ } } } + +.status-text-container { + @apply flex flex-row justify-between items-start w-full px-6 select-none shrink-0 pb-4; + + > .status-text { + .flex(column, flex-start, flex-start); + + > .amount-text { + @apply font-bold text-2xl opacity-80 leading-10; + color: @text-black; + } + + > .type-text { + @apply text-gray-400 text-xs font-mono; + } + } +} diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index b6c304ad..8c5d2dea 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -22,10 +22,8 @@ function Home() { if (!userService.getState().user) { if (userService.isVisitorMode()) { const currentUserId = userService.getUserIdFromPath() as number; - const { - data: { data: username }, - } = await api.getUserNameById(currentUserId); - if (!username) { + const user = await userService.getUserById(currentUserId); + if (!user) { toastHelper.error("User not found"); } } else { diff --git a/web/src/services/memoService.ts b/web/src/services/memoService.ts index f7190ac6..a1446fa7 100644 --- a/web/src/services/memoService.ts +++ b/web/src/services/memoService.ts @@ -18,7 +18,7 @@ const memoService = { fetchAllMemos: async () => { const memoFind: MemoFind = { - creatorId: userService.getCurrentUserId(), + creatorId: userService.getUserIdFromPath(), }; const { data } = (await api.getMemoList(memoFind)).data; const memos = data.filter((m) => m.rowStatus !== "ARCHIVED").map((m) => convertResponseModelMemo(m)); @@ -29,7 +29,7 @@ const memoService = { fetchArchivedMemos: async () => { const memoFind: MemoFind = { - creatorId: userService.getCurrentUserId(), + creatorId: userService.getUserIdFromPath(), rowStatus: "ARCHIVED", }; const { data } = (await api.getMemoList(memoFind)).data; @@ -51,7 +51,7 @@ const memoService = { updateTagsState: async () => { const tagFind: TagFind = { - creatorId: userService.getCurrentUserId(), + creatorId: userService.getUserIdFromPath(), }; const { data } = (await api.getTagList(tagFind)).data; store.dispatch(setTags(data)); diff --git a/web/src/services/shortcutService.ts b/web/src/services/shortcutService.ts index a39b830e..4126dc2f 100644 --- a/web/src/services/shortcutService.ts +++ b/web/src/services/shortcutService.ts @@ -1,7 +1,6 @@ import * as api from "../helpers/api"; import store from "../store/"; import { createShortcut, deleteShortcut, patchShortcut, setShortcuts } from "../store/modules/shortcut"; -import userService from "./userService"; const convertResponseModelShortcut = (shortcut: Shortcut): Shortcut => { return { @@ -17,10 +16,7 @@ const shortcutService = { }, getMyAllShortcuts: async () => { - const shortcutFind: ShortcutFind = { - creatorId: userService.getCurrentUserId(), - }; - const { data } = (await api.getShortcutList(shortcutFind)).data; + const { data } = (await api.getShortcutList()).data; const shortcuts = data.map((s) => convertResponseModelShortcut(s)); store.dispatch(setShortcuts(shortcuts)); }, diff --git a/web/src/services/userService.ts b/web/src/services/userService.ts index 3b0f0e85..e176c040 100644 --- a/web/src/services/userService.ts +++ b/web/src/services/userService.ts @@ -49,6 +49,15 @@ const userService = { await api.signout(); }, + getUserById: async (userId: UserId) => { + const { data: user } = (await api.getUserById(userId)).data; + if (user) { + return convertResponseModelUser(user); + } else { + return undefined; + } + }, + patchUser: async (userPatch: UserPatch): Promise => { const { data } = (await api.patchUser(userPatch)).data; const user = convertResponseModelUser(data);